.elementor-690 .elementor-element.elementor-element-8ad57be{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--margin-top:200px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-690 .elementor-element.elementor-element-8759c9d{--wcf-duration:1000ms;--wcf-delay:0ms;--wcf-ease:ease;}.elementor-690 .elementor-element.elementor-element-8759c9d .elementor-heading-title{font-family:"Expo Arabic", Sans-serif;font-size:24px;font-weight:400;color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-587b10c{--wcf-duration:1000ms;--wcf-delay:0ms;--wcf-ease:ease;}.elementor-690 .elementor-element.elementor-element-587b10c .elementor-heading-title{font-family:"Expo Arabic", Sans-serif;font-size:64px;font-weight:600;color:var( --e-global-color-primary );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-accent );}.elementor-widget-nested-tabs.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-956b60b{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-690 .elementor-element.elementor-element-396610a{--wcf-duration:1000ms;--wcf-delay:0ms;--wcf-ease:ease;}.elementor-690 .elementor-element.elementor-element-396610a .elementor-heading-title{font-family:"Expo Arabic", Sans-serif;font-size:28px;font-weight:600;color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-690 .elementor-element.elementor-element-04d2f39 .elementor-icon-list-icon i{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-04d2f39 .elementor-icon-list-icon svg{fill:var( --e-global-color-text );transition:fill 0.3s;}.elementor-690 .elementor-element.elementor-element-04d2f39{--e-icon-list-icon-size:15px;--icon-vertical-offset:0px;}.elementor-690 .elementor-element.elementor-element-04d2f39 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-690 .elementor-element.elementor-element-04d2f39 .elementor-icon-list-item > a{font-family:"Expo Arabic", Sans-serif;font-size:18px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-04d2f39 .elementor-icon-list-text{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-8ff5d4d{--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;--justify-content:center;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-690 .elementor-element.elementor-element-e4e5b4b{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-55ca479 .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-55ca479 .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-55ca479 .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-55ca479 .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-55ca479 .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-55ca479 .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-55ca479 .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-55ca479 .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-55ca479 .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-55ca479 .wcf__btn a, .elementor-690 .elementor-element.elementor-element-55ca479 .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-55ca479 .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-55ca479 .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-55ca479 .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-443f274{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-6553143 .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-6553143 .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-6553143 .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-6553143 .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-6553143 .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-6553143 .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-6553143 .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-6553143 .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-6553143 .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-6553143 .wcf__btn a, .elementor-690 .elementor-element.elementor-element-6553143 .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-6553143 .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-6553143 .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-6553143 .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-13b4fe7{--display:flex;}.elementor-690 .elementor-element.elementor-element-ad9c3e4{--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-690 .elementor-element.elementor-element-a3f9adc{--wcf-duration:1000ms;--wcf-delay:0ms;--wcf-ease:ease;}.elementor-690 .elementor-element.elementor-element-a3f9adc .elementor-heading-title{font-family:"Expo Arabic", Sans-serif;font-size:28px;font-weight:600;color:var( --e-global-color-primary );}.elementor-690 .elementor-element.elementor-element-9adde0d .elementor-icon-list-icon i{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-9adde0d .elementor-icon-list-icon svg{fill:var( --e-global-color-text );transition:fill 0.3s;}.elementor-690 .elementor-element.elementor-element-9adde0d{--e-icon-list-icon-size:15px;--icon-vertical-offset:0px;}.elementor-690 .elementor-element.elementor-element-9adde0d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-690 .elementor-element.elementor-element-9adde0d .elementor-icon-list-item > a{font-family:"Expo Arabic", Sans-serif;font-size:18px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-9adde0d .elementor-icon-list-text{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-6d5231b{--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;--justify-content:center;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-690 .elementor-element.elementor-element-1d9f1be{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-33a7be2 .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-33a7be2 .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-33a7be2 .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-33a7be2 .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-33a7be2 .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-33a7be2 .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-33a7be2 .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-33a7be2 .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-33a7be2 .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-33a7be2 .wcf__btn a, .elementor-690 .elementor-element.elementor-element-33a7be2 .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-33a7be2 .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-33a7be2 .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-33a7be2 .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-27936eb{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-7142330 .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-7142330 .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-7142330 .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-7142330 .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-7142330 .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-7142330 .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-7142330 .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-7142330 .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-7142330 .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-7142330 .wcf__btn a, .elementor-690 .elementor-element.elementor-element-7142330 .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-7142330 .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-7142330 .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-7142330 .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-b411b08{--display:flex;}.elementor-690 .elementor-element.elementor-element-f981d2d{--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-690 .elementor-element.elementor-element-35f37ff{--wcf-duration:1000ms;--wcf-delay:0ms;--wcf-ease:ease;}.elementor-690 .elementor-element.elementor-element-35f37ff .elementor-heading-title{font-family:"Expo Arabic", Sans-serif;font-size:28px;font-weight:600;color:var( --e-global-color-primary );}.elementor-690 .elementor-element.elementor-element-61b1f3d .elementor-icon-list-icon i{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-61b1f3d .elementor-icon-list-icon svg{fill:var( --e-global-color-text );transition:fill 0.3s;}.elementor-690 .elementor-element.elementor-element-61b1f3d{--e-icon-list-icon-size:15px;--icon-vertical-offset:0px;}.elementor-690 .elementor-element.elementor-element-61b1f3d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-690 .elementor-element.elementor-element-61b1f3d .elementor-icon-list-item > a{font-family:"Expo Arabic", Sans-serif;font-size:18px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-61b1f3d .elementor-icon-list-text{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-2987003{--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;--justify-content:center;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-690 .elementor-element.elementor-element-02b4838{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-0b2a979 .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-0b2a979 .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-0b2a979 .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-0b2a979 .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-0b2a979 .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-0b2a979 .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-0b2a979 .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-0b2a979 .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-0b2a979 .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-0b2a979 .wcf__btn a, .elementor-690 .elementor-element.elementor-element-0b2a979 .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-0b2a979 .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-0b2a979 .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-0b2a979 .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-894bf4f{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-57b2fc5 .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-57b2fc5 .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-57b2fc5 .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-57b2fc5 .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-57b2fc5 .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-57b2fc5 .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-57b2fc5 .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-57b2fc5 .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-57b2fc5 .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-57b2fc5 .wcf__btn a, .elementor-690 .elementor-element.elementor-element-57b2fc5 .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-57b2fc5 .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-57b2fc5 .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-57b2fc5 .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-48a7221{--display:flex;}.elementor-690 .elementor-element.elementor-element-03fe99d{--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-690 .elementor-element.elementor-element-6f41b88{--wcf-duration:1000ms;--wcf-delay:0ms;--wcf-ease:ease;}.elementor-690 .elementor-element.elementor-element-6f41b88 .elementor-heading-title{font-family:"Expo Arabic", Sans-serif;font-size:28px;font-weight:600;color:var( --e-global-color-primary );}.elementor-690 .elementor-element.elementor-element-c361d15 .elementor-icon-list-icon i{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-c361d15 .elementor-icon-list-icon svg{fill:var( --e-global-color-text );transition:fill 0.3s;}.elementor-690 .elementor-element.elementor-element-c361d15{--e-icon-list-icon-size:15px;--icon-vertical-offset:0px;}.elementor-690 .elementor-element.elementor-element-c361d15 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-690 .elementor-element.elementor-element-c361d15 .elementor-icon-list-item > a{font-family:"Expo Arabic", Sans-serif;font-size:18px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-c361d15 .elementor-icon-list-text{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-afdc4cb{--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;--justify-content:center;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-690 .elementor-element.elementor-element-e7b2560{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-2da653f .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-2da653f .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-2da653f .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-2da653f .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-2da653f .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-2da653f .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-2da653f .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-2da653f .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-2da653f .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-2da653f .wcf__btn a, .elementor-690 .elementor-element.elementor-element-2da653f .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-2da653f .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-2da653f .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-2da653f .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-bee9666{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-199139f .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-199139f .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-199139f .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-199139f .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-199139f .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-199139f .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-199139f .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-199139f .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-199139f .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-199139f .wcf__btn a, .elementor-690 .elementor-element.elementor-element-199139f .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-199139f .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-199139f .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-199139f .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-d3333ea{--display:flex;}.elementor-690 .elementor-element.elementor-element-fbbe87a{--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-690 .elementor-element.elementor-element-ab41d0f{--wcf-duration:1000ms;--wcf-delay:0ms;--wcf-ease:ease;}.elementor-690 .elementor-element.elementor-element-ab41d0f .elementor-heading-title{font-family:"Expo Arabic", Sans-serif;font-size:28px;font-weight:600;color:var( --e-global-color-primary );}.elementor-690 .elementor-element.elementor-element-e7ad3df .elementor-icon-list-icon i{color:var( --e-global-color-text );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-e7ad3df .elementor-icon-list-icon svg{fill:var( --e-global-color-text );transition:fill 0.3s;}.elementor-690 .elementor-element.elementor-element-e7ad3df{--e-icon-list-icon-size:15px;--icon-vertical-offset:0px;}.elementor-690 .elementor-element.elementor-element-e7ad3df .elementor-icon-list-item > .elementor-icon-list-text, .elementor-690 .elementor-element.elementor-element-e7ad3df .elementor-icon-list-item > a{font-family:"Expo Arabic", Sans-serif;font-size:18px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-e7ad3df .elementor-icon-list-text{color:var( --e-global-color-accent );transition:color 0.3s;}.elementor-690 .elementor-element.elementor-element-c638417{--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;--justify-content:center;--align-items:center;--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-690 .elementor-element.elementor-element-c4a2f9a{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-838662b .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-838662b .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-838662b .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-838662b .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-838662b .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-838662b .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-838662b .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-838662b .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-838662b .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-838662b .wcf__btn a, .elementor-690 .elementor-element.elementor-element-838662b .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-838662b .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-838662b .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-838662b .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-efa7592{--display:flex;--min-height:600px;--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;--gap:20px 20px;--row-gap:20px;--column-gap:20px;--border-radius:42px 42px 42px 42px;box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.0784313725490196);--padding-top:21px;--padding-bottom:21px;--padding-left:21px;--padding-right:21px;}.elementor-690 .elementor-element.elementor-element-0c3b194 .wcf--image-box{text-align:left;flex-direction:column;}.elementor-690 .elementor-element.elementor-element-0c3b194 .thumb img{width:765px;height:440px;object-fit:contain;}.elementor-690 .elementor-element.elementor-element-0c3b194 .title-wrap{flex-direction:column;}.elementor-690 .elementor-element.elementor-element-0c3b194 .title{font-family:"Expo Arabic", Sans-serif;font-size:36px;font-weight:400;}.elementor-690 .elementor-element.elementor-element-0c3b194 .subtitle{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-690 .elementor-element.elementor-element-0c3b194 .description{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );}.elementor-690 .elementor-element.elementor-element-0c3b194 .wcf__btn a{font-family:"Expo Arabic", Sans-serif;font-size:20px;font-weight:400;fill:var( --e-global-color-text );color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-0c3b194 .wcf__btn a.wcf-btn-underline:after{background-color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-0c3b194 .wcf__btn a.wcf-btn-mask:after{color:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-0c3b194 .wcf__btn a, .elementor-690 .elementor-element.elementor-element-0c3b194 .wcf__btn a.btn-parallal-border:before, .elementor-690 .elementor-element.elementor-element-0c3b194 .wcf__btn a.btn-parallal-border:after, .elementor-690 .elementor-element.elementor-element-0c3b194 .wcf__btn a.btn-rollover-cross:before, .elementor-690 .elementor-element.elementor-element-0c3b194 .wcf__btn a.btn-rollover-cross:after{border-style:none;}.elementor-690 .elementor-element.elementor-element-71c5639{--n-tabs-heading-wrap:wrap;--n-tabs-heading-overflow-x:initial;--n-tabs-title-white-space:initial;--n-tabs-title-gap:51px;--n-tabs-title-border-radius:14px 14px 14px 14px;--n-tabs-title-font-size:18px;--n-tabs-title-color:var( --e-global-color-text );--n-tabs-title-color-active:var( --e-global-color-secondary );}.elementor-690 .elementor-element.elementor-element-71c5639 > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover ){background:#FDF7F2;}.elementor-690 .elementor-element.elementor-element-71c5639.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-71c5639.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"], .elementor-690 .elementor-element.elementor-element-71c5639.elementor-widget-n-tabs > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:hover{background:var( --e-global-color-text );}.elementor-690 .elementor-element.elementor-element-71c5639.elementor-widget-n-tabs > .e-n-tabs > .e-n-tabs-heading > :is( .e-n-tab-title > .e-n-tab-title-text, .e-n-tab-title ){font-family:"Expo Arabic", Sans-serif;font-weight:600;}.elementor-690 .elementor-element.elementor-element-71c5639 [data-touch-mode="false"] .e-n-tab-title[aria-selected="false"]:hover{--n-tabs-title-color-hover:var( --e-global-color-secondary );}:root{--page-title-display:none;}@media(min-width:768px){.elementor-690 .elementor-element.elementor-element-e4e5b4b{--width:50%;}.elementor-690 .elementor-element.elementor-element-443f274{--width:50%;}.elementor-690 .elementor-element.elementor-element-1d9f1be{--width:50%;}.elementor-690 .elementor-element.elementor-element-27936eb{--width:50%;}.elementor-690 .elementor-element.elementor-element-02b4838{--width:50%;}.elementor-690 .elementor-element.elementor-element-894bf4f{--width:50%;}.elementor-690 .elementor-element.elementor-element-e7b2560{--width:50%;}.elementor-690 .elementor-element.elementor-element-bee9666{--width:50%;}.elementor-690 .elementor-element.elementor-element-c4a2f9a{--width:50%;}.elementor-690 .elementor-element.elementor-element-efa7592{--width:50%;}}@media(max-width:1400px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-e4e5b4b{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-55ca479 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-443f274{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-6553143 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-1d9f1be{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-33a7be2 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-27936eb{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-7142330 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-02b4838{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-0b2a979 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-894bf4f{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-57b2fc5 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-e7b2560{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-2da653f .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-bee9666{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-199139f .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-c4a2f9a{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-838662b .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-efa7592{--min-height:500px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-690 .elementor-element.elementor-element-0c3b194 .description{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:1024px){.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-587b10c .elementor-heading-title{font-size:35px;}.elementor-690 .elementor-element.elementor-element-396610a .elementor-heading-title{font-size:35px;}.elementor-690 .elementor-element.elementor-element-e4e5b4b{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-e4e5b4b.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-55ca479 .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-55ca479 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-443f274{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-443f274.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-6553143 .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-6553143 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-a3f9adc .elementor-heading-title{font-size:35px;}.elementor-690 .elementor-element.elementor-element-1d9f1be{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-1d9f1be.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-33a7be2 .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-33a7be2 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-27936eb{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-27936eb.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-7142330 .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-7142330 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-35f37ff .elementor-heading-title{font-size:35px;}.elementor-690 .elementor-element.elementor-element-02b4838{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-02b4838.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-0b2a979 .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-0b2a979 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-894bf4f{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-894bf4f.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-57b2fc5 .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-57b2fc5 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-6f41b88 .elementor-heading-title{font-size:35px;}.elementor-690 .elementor-element.elementor-element-e7b2560{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-e7b2560.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-2da653f .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-2da653f .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-bee9666{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-bee9666.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-199139f .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-199139f .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-ab41d0f .elementor-heading-title{font-size:35px;}.elementor-690 .elementor-element.elementor-element-c4a2f9a{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-c4a2f9a.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-838662b .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-838662b .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-efa7592{--min-height:400px;}.elementor-690 .elementor-element.elementor-element-efa7592.e-con{--align-self:stretch;}.elementor-690 .elementor-element.elementor-element-0c3b194 .title{font-size:16px;}.elementor-690 .elementor-element.elementor-element-0c3b194 .description{font-size:var( --e-global-typography-primary-font-size );}}@media(max-width:767px){.elementor-690 .elementor-element.elementor-element-8ad57be{--margin-top:150px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-587b10c{text-align:center;}.elementor-690 .elementor-element.elementor-element-587b10c .elementor-heading-title{font-size:24px;}.elementor-690 .elementor-element.elementor-element-396610a{text-align:center;}.elementor-690 .elementor-element.elementor-element-396610a .elementor-heading-title{font-size:20px;}.elementor-690 .elementor-element.elementor-element-55ca479 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-6553143 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-a3f9adc{text-align:center;}.elementor-690 .elementor-element.elementor-element-a3f9adc .elementor-heading-title{font-size:24px;}.elementor-690 .elementor-element.elementor-element-33a7be2 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-7142330 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-35f37ff{text-align:center;}.elementor-690 .elementor-element.elementor-element-35f37ff .elementor-heading-title{font-size:24px;}.elementor-690 .elementor-element.elementor-element-0b2a979 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-57b2fc5 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-6f41b88{text-align:center;}.elementor-690 .elementor-element.elementor-element-6f41b88 .elementor-heading-title{font-size:24px;}.elementor-690 .elementor-element.elementor-element-2da653f .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-199139f .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-ab41d0f{text-align:center;}.elementor-690 .elementor-element.elementor-element-ab41d0f .elementor-heading-title{font-size:24px;}.elementor-690 .elementor-element.elementor-element-838662b .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-0c3b194 .description{font-size:var( --e-global-typography-primary-font-size );}.elementor-690 .elementor-element.elementor-element-71c5639{--n-tabs-heading-justify-content:center;--n-tabs-title-width:initial;--n-tabs-title-height:initial;--n-tabs-title-align-items:center;--n-tabs-title-flex-grow:0;padding:5px 5px 5px 5px;--n-tabs-title-justify-content:center;--n-tabs-title-text-align:center;--n-tabs-title-font-size:16px;}}/* Start custom CSS for container, class: .elementor-element-e4e5b4b *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-443f274 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: left !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1d9f1be *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-27936eb *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-02b4838 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-894bf4f *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e7b2560 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bee9666 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c4a2f9a *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-efa7592 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e4e5b4b *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-443f274 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: left !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1d9f1be *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-27936eb *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-02b4838 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-894bf4f *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e7b2560 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bee9666 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c4a2f9a *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-efa7592 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e4e5b4b *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-443f274 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: left !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1d9f1be *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-27936eb *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-02b4838 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-894bf4f *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e7b2560 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bee9666 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c4a2f9a *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-efa7592 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e4e5b4b *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-443f274 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: left !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1d9f1be *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-27936eb *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-02b4838 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-894bf4f *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e7b2560 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bee9666 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c4a2f9a *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-efa7592 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e4e5b4b *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-443f274 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: left !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1d9f1be *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-27936eb *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-02b4838 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-894bf4f *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e7b2560 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bee9666 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c4a2f9a *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-efa7592 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e4e5b4b *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-443f274 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: left !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1d9f1be *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-27936eb *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-02b4838 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-894bf4f *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e7b2560 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bee9666 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c4a2f9a *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-efa7592 *//* ======================================== BASE STYLES — موبايل أول ======================================== */ #slidddderbbbooox .wcf--image-box .thumb { width: 100% !important; flex-shrink: 0 !important; border-radius: clamp(16px, 2.5vw, 32px) !important; overflow: hidden !important; background: #FAFAFA !important; aspect-ratio: 4 / 3 !important; transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box .thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .thumb { background: #FDEAE6 !important; } /* ======================================== CONTAINER HEIGHT — ريسبونسف بدل 670px ======================================== */ #slidddderbbbooox .wcf--image-box { height: auto !important; min-height: unset !important; max-height: unset !important; } #slidddderbbbooox, #slidddderbbbooox .swiper-slide, #slidddderbbbooox .swiper-wrapper { height: auto !important; } /* ======================================== TITLE — دايماً ظاهر ======================================== */ #slidddderbbbooox .wcf--image-box .title-wrap { width: 100% !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 2vw, 20px) !important; line-height: 1.5 !important; } /* ======================================== DESCRIPTION — مخفي + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(15px, 1.8vw, 18px) !important; line-height: 1.7 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 0 !important; visibility: hidden !important; transform: translateY(12px) !important; max-height: 0 !important; overflow: hidden !important; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.1s !important; } #slidddderbbbooox .wcf--image-box:hover .description, #slidddderbbbooox .wcf--image-box:hover .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 200px !important; } /* ======================================== BUTTON — flex-start + فونت أكبر ======================================== */ #slidddderbbbooox .wcf--image-box .wcf__btn { display: flex !important; justify-content: flex-start !important; transition-delay: 0.22s !important; } #slidddderbbbooox .wcf--image-box:hover .wcf__btn { transition-delay: 0.28s !important; } .elementor-235 .elementor-element.elementor-element-55ca479 .wcf__btn a, #slidddderbbbooox .wcf--image-box .wcf__btn a { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: clamp(15px, 1.8vw, 18px) !important; } /* ======================================== ICON ======================================== */ #slidddderbbbooox .wcf-btn-default svg { width: clamp(12px, 1.3vw, 15px) !important; height: clamp(12px, 1.3vw, 15px) !important; flex-shrink: 0 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #slidddderbbbooox .wcf--image-box:hover .wcf-btn-default svg { transform: translateX(-3px) !important; } /* ======================================== ديسكتوب كبير — 1400px+ ======================================== */ @media (min-width: 1400px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 4 / 3 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 18px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 18px !important; } } /* ======================================== تابلت كبير — 1200px ======================================== */ @media (max-width: 1200px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; border-radius: clamp(14px, 2vw, 24px) !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 1.8vw, 17px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 1.8vw, 17px) !important; } } /* ======================================== تابلت — 1024px ======================================== */ @media (max-width: 1024px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 3 / 2 !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 2vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 2vw, 16px) !important; } } /* ======================================== موبايل كبير — 768px ======================================== */ @media (max-width: 768px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 16 / 9 !important; border-radius: 16px !important; } /* الكل ظاهر دايماً بدون hover */ #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .wcf__btn { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; max-height: 300px !important; transition: none !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: clamp(14px, 3.8vw, 16px) !important; text-align: center !important; } #slidddderbbbooox .wcf--image-box .wcf__btn { justify-content: center !important; /* ← سنتر على الموبايل */ } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: clamp(14px, 3.8vw, 16px) !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: clamp(15px, 4vw, 18px) !important; } } /* ======================================== موبايل صغير — 480px ======================================== */ @media (max-width: 480px) { #slidddderbbbooox .wcf--image-box .thumb { aspect-ratio: 1 / 1 !important; border-radius: 12px !important; } #slidddderbbbooox .wcf--image-box .description, #slidddderbbbooox .wcf--image-box .description * { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .wcf__btn a { font-size: 15px !important; } #slidddderbbbooox .wcf--image-box .title-wrap * { font-size: 16px !important; } }/* End custom CSS */