.elementor-8 .elementor-element.elementor-element-d07865f{--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;--flex-wrap:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:15px;--padding-bottom:15px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-d07865f:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-d07865f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/bg.webp");background-size:cover;}.elementor-8 .elementor-element.elementor-element-50cb9e9{--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:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:15px 15px 15px 15px;--padding-top:010px;--padding-bottom:10px;--padding-left:70px;--padding-right:70px;}.elementor-8 .elementor-element.elementor-element-50cb9e9:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-50cb9e9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-38db793 );}.elementor-8 .elementor-element.elementor-element-234e82e{--display:flex;--justify-content:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:60px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-8 .elementor-element.elementor-element-2089e74{padding:0px 0px 0px 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:30px;font-weight:400;line-height:29px;color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-2089e74 p{margin-block-end:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-8 .elementor-element.elementor-element-91d889a .elementor-heading-title{font-family:"Big Shoulders Display", Sans-serif;font-size:100px;font-weight:600;text-transform:uppercase;line-height:90px;color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-d7d9530{padding:10px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:15px;font-weight:500;color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-d7d9530 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-29f92cf{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-29f92cf.e-con{--align-self:stretch;}.elementor-8 .elementor-element.elementor-element-3b27501{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:5px 0px;--row-gap:5px;--column-gap:0px;}.elementor-8 .elementor-element.elementor-element-4e640fc{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:15px;font-weight:500;color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-4e640fc p{margin-block-end:15px;}.elementor-8 .elementor-element.elementor-element-37f1dd7{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:0px;}.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-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(20px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(20px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(20px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-20px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-20px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-icon i{color:#1B1B1B;transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-icon svg{fill:#1B1B1B;transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-e70c9e0{--e-icon-list-icon-size:16px;--icon-vertical-align:center;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-icon{padding-inline-end:5px;}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-item > a{font-family:"Manrope", Sans-serif;font-weight:500;}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-text{color:#1B1B1B;transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(20px/2);}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(20px/2);}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(20px/2);}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-20px/2);}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-20px/2);}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-icon i{color:#1B1B1B;transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-icon svg{fill:#1B1B1B;transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-14acf55{--e-icon-list-icon-size:16px;--icon-vertical-align:center;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-icon{padding-inline-end:5px;}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-item > a{font-family:"Manrope", Sans-serif;font-weight:500;}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-text{color:#1B1B1B;transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(20px/2);}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(20px/2);}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(20px/2);}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-20px/2);}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-20px/2);}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-icon i{color:#1B1B1B;transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-icon svg{fill:#1B1B1B;transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-af459b4{--e-icon-list-icon-size:16px;--icon-vertical-align:center;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-icon{padding-inline-end:5px;}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-item > a{font-family:"Manrope", Sans-serif;font-weight:500;}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-text{color:#1B1B1B;transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-a764150{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-a764150.e-con{--align-self:stretch;}.elementor-8 .elementor-element.elementor-element-587cce9{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:5px 0px;--row-gap:5px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:var( --e-global-color-primary );color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-title a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-icon-box .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box:has(:hover) .elementor-icon-box-title, .elementor-widget-icon-box:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-primary );}.elementor-widget-icon-box .elementor-icon-box-description{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-8 .elementor-element.elementor-element-251df3a{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-251df3a:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-251df3a.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-251df3a .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-251df3a .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-251df3a.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-251df3a .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-251df3a .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-251df3a .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-251df3a:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-251df3a:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-16295b9{--display:flex;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;border-color:var( --e-global-color-3a62b99 );--border-color:var( --e-global-color-3a62b99 );--border-radius:5px 5px 5px 5px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:010px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-16295b9.e-con{--align-self:center;}.elementor-8 .elementor-element.elementor-element-4eb0b49{padding:0px 0px 0px 7px;}.elementor-8 .elementor-element.elementor-element-4eb0b49 .elementor-heading-title{font-family:"Big Shoulders Display", Sans-serif;font-size:35px;font-weight:400;text-transform:uppercase;color:#67CC0E;}.elementor-widget-metform .mf-multistep-container .metform-steps li.progress{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-metform .mf-multistep-container .metform-steps li.progress:hover{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-metform .mf-multistep-container .metform-steps li{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-metform .mf-multistep-container .metform-steps li:hover{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-metform .mf-multistep-container .metform-steps li.active{color:var( --e-global-color-primary );background-color:var( --e-global-color-primary );}.elementor-widget-metform .mf-main-response-wrap.mf_pro_activated p{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-8 .elementor-element.elementor-element-3b9c00f{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:15px;--padding-bottom:15px;--padding-left:15px;--padding-right:15px;}.elementor-8 .elementor-element.elementor-element-7390183{--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;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:15px 15px 15px 15px;--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-7390183:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-7390183 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E6E6E6;background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/2nd-Bg.png");background-position:center center;background-size:cover;}.elementor-8 .elementor-element.elementor-element-f3f4c63{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-f3f4c63 p{margin-block-end:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-8 .elementor-element.elementor-element-e4379d3 .elementor-button{background-color:var( --e-global-color-1541737 );font-family:"Big Shoulders Display", Sans-serif;font-size:35px;font-weight:500;fill:#76E910;color:#76E910;border-radius:5px 5px 5px 5px;padding:5px 15px 5px 15px;}.elementor-8 .elementor-element.elementor-element-b2a7052 .elementor-heading-title{font-family:"Big Shoulders Display", Sans-serif;font-size:40px;font-weight:500;text-transform:capitalize;line-height:1.2em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-7551a2e{width:var( --container-widget-width, 75% );max-width:75%;padding:0px 0px 0px 0px;--container-widget-width:75%;--container-widget-flex-grow:0;text-align:center;font-family:"Manrope", Sans-serif;font-size:15px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-7551a2e.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-7551a2e p{margin-block-end:0px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-8 .elementor-element.elementor-element-ed4b0a6{--divider-border-style:solid;--divider-color:var( --e-global-color-text );--divider-border-width:2.5px;margin:-5px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-ed4b0a6 .elementor-divider-separator{width:25%;margin:0 auto;margin-center:0;}.elementor-8 .elementor-element.elementor-element-ed4b0a6 .elementor-divider{text-align:center;padding-block-start:0px;padding-block-end:0px;}.elementor-8 .elementor-element.elementor-element-eb1bcb5{--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:space-around;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-b61fff1{background-color:#A1F359;padding:5px 15px 5px 15px;border-radius:10px 10px 10px 10px;--icon-box-icon-margin:15px;}.elementor-8 .elementor-element.elementor-element-b61fff1:hover{background-color:#A1F359;}.elementor-8 .elementor-element.elementor-element-b61fff1 .elementor-icon-box-wrapper{align-items:center;}.elementor-8 .elementor-element.elementor-element-b61fff1 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b61fff1.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b61fff1.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-b61fff1.elementor-view-default .elementor-icon{fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );border-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b61fff1 .elementor-icon{font-size:25px;}.elementor-8 .elementor-element.elementor-element-b61fff1 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-b61fff1 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:25px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-b61fff1:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-b61fff1:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-4d54c73{background-color:#A1F359;padding:5px 15px 5px 15px;border-radius:10px 10px 10px 10px;--icon-box-icon-margin:15px;}.elementor-8 .elementor-element.elementor-element-4d54c73:hover{background-color:#A1F359;}.elementor-8 .elementor-element.elementor-element-4d54c73 .elementor-icon-box-wrapper{align-items:center;}.elementor-8 .elementor-element.elementor-element-4d54c73 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-4d54c73.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-4d54c73.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-4d54c73.elementor-view-default .elementor-icon{fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );border-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-4d54c73 .elementor-icon{font-size:25px;}.elementor-8 .elementor-element.elementor-element-4d54c73 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-4d54c73 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:25px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-4d54c73:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-4d54c73:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b6fdab9{background-color:#A1F359;padding:5px 15px 5px 15px;border-radius:10px 10px 10px 10px;--icon-box-icon-margin:15px;}.elementor-8 .elementor-element.elementor-element-b6fdab9:hover{background-color:#A1F359;}.elementor-8 .elementor-element.elementor-element-b6fdab9 .elementor-icon-box-wrapper{align-items:center;}.elementor-8 .elementor-element.elementor-element-b6fdab9 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b6fdab9.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b6fdab9.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-b6fdab9.elementor-view-default .elementor-icon{fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );border-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b6fdab9 .elementor-icon{font-size:25px;}.elementor-8 .elementor-element.elementor-element-b6fdab9 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-b6fdab9 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:25px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-b6fdab9:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-b6fdab9:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-7db0c9f{background-color:#A1F359;padding:5px 15px 5px 15px;border-radius:10px 10px 10px 10px;--icon-box-icon-margin:15px;}.elementor-8 .elementor-element.elementor-element-7db0c9f:hover{background-color:#A1F359;}.elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon-box-wrapper{align-items:center;}.elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-7db0c9f.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-7db0c9f.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-7db0c9f.elementor-view-default .elementor-icon{fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );border-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon{font-size:25px;}.elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:25px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-7db0c9f:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-7db0c9f:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b6abf9c{--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;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-21ce4c4{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-21ce4c4:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-21ce4c4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/07/Grid-Bg-2.png");background-position:center center;background-size:cover;}.elementor-8 .elementor-element.elementor-element-bf0a737 .elementor-heading-title{font-family:"Big Shoulders Display", Sans-serif;font-size:100px;font-weight:400;text-transform:capitalize;color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-f1500ae{width:var( --container-widget-width, 75% );max-width:75%;padding:0px 0px 0px 0px;--container-widget-width:75%;--container-widget-flex-grow:0;text-align:center;font-family:"Manrope", Sans-serif;font-size:15px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-f1500ae.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-f1500ae p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-e72f134{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-8 .elementor-element.elementor-element-1b87cfb{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-8 .elementor-element.elementor-element-1c800bf{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-1c800bf p{margin-block-end:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-8 .elementor-element.elementor-element-26e3a2b{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-26e3a2b:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-26e3a2b img{width:85%;}.elementor-8 .elementor-element.elementor-element-fcbe168{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-8 .elementor-element.elementor-element-d3fbe45{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-d3fbe45 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-af34850{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-af34850:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-af34850 img{width:85%;}.elementor-8 .elementor-element.elementor-element-3c6448f{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-8 .elementor-element.elementor-element-c70318a{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-c70318a p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-bce08a8{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-bce08a8:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-bce08a8 img{width:85%;}.elementor-8 .elementor-element.elementor-element-0924ba6{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-8 .elementor-element.elementor-element-22109c6{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-22109c6 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-ebed058{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-ebed058:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-ebed058 img{width:85%;}.elementor-8 .elementor-element.elementor-element-0d81edf{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-8 .elementor-element.elementor-element-1606559{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-1606559 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-ed50c1e{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-ed50c1e:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-ed50c1e img{width:85%;}.elementor-8 .elementor-element.elementor-element-cc9c105{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-8 .elementor-element.elementor-element-6dd4437{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-6dd4437 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-23bc170{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-23bc170:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-23bc170 img{width:85%;}.elementor-8 .elementor-element.elementor-element-0dc5a3c{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-8 .elementor-element.elementor-element-54b9291{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-54b9291 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-aa491be{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-aa491be:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-aa491be img{width:85%;}.elementor-8 .elementor-element.elementor-element-5b9d1ca{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;}.elementor-8 .elementor-element.elementor-element-9a8ce74{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-9a8ce74 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-38e237f{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-38e237f:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-38e237f img{width:85%;}.elementor-8 .elementor-element.elementor-element-6671eca{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:5px 5px;--row-gap:5px;--column-gap:5px;}.elementor-8 .elementor-element.elementor-element-d702371{--display:flex;}.elementor-8 .elementor-element.elementor-element-8555ab8{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-5d92afb{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-5d92afb p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-56cd1d1{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-56cd1d1:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-56cd1d1 img{width:85%;}.elementor-8 .elementor-element.elementor-element-4bd4b3c{--display:flex;}.elementor-8 .elementor-element.elementor-element-060d98b{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-f5e13ff{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-f5e13ff p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-a6ad90a{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-a6ad90a:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-a6ad90a img{width:85%;}.elementor-8 .elementor-element.elementor-element-b1a1105{--display:flex;}.elementor-8 .elementor-element.elementor-element-f3b80a0{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-a4113a0{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-a4113a0 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-1035428{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-1035428:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-1035428 img{width:85%;}.elementor-8 .elementor-element.elementor-element-c4ddff0{--display:flex;}.elementor-8 .elementor-element.elementor-element-b6d32a9{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-d440091{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-d440091 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-7ef3803{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-7ef3803:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-7ef3803 img{width:85%;}.elementor-8 .elementor-element.elementor-element-89e794d{--display:flex;}.elementor-8 .elementor-element.elementor-element-c5f6ed8{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-69d7e7a{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-69d7e7a p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-481c93c{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-481c93c:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-481c93c img{width:85%;}.elementor-8 .elementor-element.elementor-element-d45db8f{--display:flex;}.elementor-8 .elementor-element.elementor-element-3d79cd0{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-793a836{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-793a836 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-fbf2c17{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-fbf2c17:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-fbf2c17 img{width:85%;}.elementor-8 .elementor-element.elementor-element-3f8154c{--display:flex;}.elementor-8 .elementor-element.elementor-element-9d90bfb{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-809f334{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-809f334 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-a0f1b17{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-a0f1b17:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-a0f1b17 img{width:85%;}.elementor-8 .elementor-element.elementor-element-10a0f48{--display:flex;}.elementor-8 .elementor-element.elementor-element-22067da{--display:flex;--gap:15px 15px;--row-gap:15px;--column-gap:15px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-37e4de8{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-37e4de8 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-0e50283{background-color:#D7FAB8;padding:25px 0px 025px 0px;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-8 .elementor-element.elementor-element-0e50283:hover{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-0e50283 img{width:85%;}.elementor-8 .elementor-element.elementor-element-7dae295{--e-n-carousel-swiper-slides-to-display:8;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-dots-normal-color:var( --e-global-color-bbe43a8 );}.elementor-8 .elementor-element.elementor-element-4715274{--display:flex;}.elementor-8 .elementor-element.elementor-element-e2b00e4{--display:flex;--background-transition:0.3s;}.elementor-8 .elementor-element.elementor-element-e2b00e4:hover{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png");background-size:cover;}.elementor-8 .elementor-element.elementor-element-9463e56{--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;--background-transition:0.5s;border-style:none;--border-style:none;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-8 .elementor-element.elementor-element-9463e56:hover{box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5);}.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-primary );}.elementor-8 .elementor-element.elementor-element-928e2b4{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-928e2b4.elementor-element{--align-self:flex-end;}.elementor-8 .elementor-element.elementor-element-928e2b4 .elementor-icon-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-928e2b4.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-928e2b4 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-928e2b4 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-928e2b4 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-cb16e79{width:auto;max-width:auto;margin:-70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-cb16e79.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-cb16e79 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-235abaf{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-235abaf .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-235abaf .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-235abaf .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-235abaf .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-235abaf .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-7e12304{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-7e12304:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-7e12304.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-7e12304 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-7e12304 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7e12304.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-7e12304 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-7e12304 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-7e12304 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-7e12304:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-7e12304:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-eaba9e0{right:45px;}body.rtl .elementor-8 .elementor-element.elementor-element-eaba9e0{left:45px;}.elementor-8 .elementor-element.elementor-element-eaba9e0{top:125px;}.elementor-8 .elementor-element.elementor-element-eaba9e0 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-eaba9e0.elementor-view-stacked .elementor-icon{background-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-eaba9e0.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-eaba9e0.elementor-view-default .elementor-icon{color:#1E1E1E;border-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-eaba9e0.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-eaba9e0.elementor-view-default .elementor-icon svg{fill:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-eaba9e0 .elementor-icon{font-size:118px;}.elementor-8 .elementor-element.elementor-element-eaba9e0 .elementor-icon svg{height:118px;}.elementor-8 .elementor-element.elementor-element-91bd63b img{width:100%;}.elementor-8 .elementor-element.elementor-element-d7fd01c{margin:-60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-d7fd01c img{width:86%;}.elementor-8 .elementor-element.elementor-element-228fd8c .elementor-button{background-color:#61CE7000;font-family:"Big Shoulders Display", Sans-serif;font-size:15px;font-weight:500;fill:#1E1E1E;color:#1E1E1E;transition-duration:0.5s;}.elementor-8 .elementor-element.elementor-element-228fd8c .elementor-button-content-wrapper{flex-direction:row;}.elementor-8 .elementor-element.elementor-element-228fd8c .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-8 .elementor-element.elementor-element-6fbd4a4{--display:flex;}.elementor-8 .elementor-element.elementor-element-bcbc594{--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;--background-transition:0.5s;border-style:none;--border-style:none;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-8 .elementor-element.elementor-element-bcbc594:hover{box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5);}.elementor-8 .elementor-element.elementor-element-65dbb45{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-65dbb45.elementor-element{--align-self:flex-end;}.elementor-8 .elementor-element.elementor-element-65dbb45 .elementor-icon-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-65dbb45.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-65dbb45 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-65dbb45 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-65dbb45 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-b189280{width:auto;max-width:auto;margin:-70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b189280.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-b189280 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-72dbb19{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-72dbb19 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-72dbb19 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-72dbb19 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-72dbb19 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-72dbb19 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-47d5cb1{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-47d5cb1:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-47d5cb1 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-47d5cb1 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-47d5cb1 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-47d5cb1 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-47d5cb1 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-47d5cb1:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-47d5cb1:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-d8e8aa3{right:45px;}body.rtl .elementor-8 .elementor-element.elementor-element-d8e8aa3{left:45px;}.elementor-8 .elementor-element.elementor-element-d8e8aa3{top:125px;}.elementor-8 .elementor-element.elementor-element-d8e8aa3 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-d8e8aa3.elementor-view-stacked .elementor-icon{background-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-d8e8aa3.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-d8e8aa3.elementor-view-default .elementor-icon{color:#1E1E1E;border-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-d8e8aa3.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-d8e8aa3.elementor-view-default .elementor-icon svg{fill:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-d8e8aa3 .elementor-icon{font-size:118px;}.elementor-8 .elementor-element.elementor-element-d8e8aa3 .elementor-icon svg{height:118px;}.elementor-8 .elementor-element.elementor-element-32a5da0 img{width:100%;}.elementor-8 .elementor-element.elementor-element-f8090c4{margin:-60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-f8090c4 img{width:85%;}.elementor-8 .elementor-element.elementor-element-1a344ba .elementor-button{background-color:#61CE7000;font-family:"Big Shoulders Display", Sans-serif;font-size:15px;font-weight:500;fill:#1E1E1E;color:#1E1E1E;transition-duration:0.5s;}.elementor-8 .elementor-element.elementor-element-1a344ba .elementor-button-content-wrapper{flex-direction:row;}.elementor-8 .elementor-element.elementor-element-1a344ba .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-8 .elementor-element.elementor-element-f5e987f{--display:flex;}.elementor-8 .elementor-element.elementor-element-67b78ec{--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;--background-transition:0.5s;border-style:none;--border-style:none;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-8 .elementor-element.elementor-element-67b78ec:hover{box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5);}.elementor-8 .elementor-element.elementor-element-7deb8e1{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-element{--align-self:flex-end;}.elementor-8 .elementor-element.elementor-element-7deb8e1 .elementor-icon-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-7deb8e1.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7deb8e1 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-7deb8e1 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-7deb8e1 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-f6d70a3{width:auto;max-width:auto;margin:-70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-f6d70a3.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-f6d70a3 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-1316a4d{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-1316a4d .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-1316a4d .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-1316a4d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-1316a4d .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-1316a4d .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-5dc3b93{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-5dc3b93:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-5dc3b93 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-5dc3b93 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-5dc3b93 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-5dc3b93 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-5dc3b93 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-5dc3b93:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-5dc3b93:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-5f3ae97{right:45px;}body.rtl .elementor-8 .elementor-element.elementor-element-5f3ae97{left:45px;}.elementor-8 .elementor-element.elementor-element-5f3ae97{top:125px;}.elementor-8 .elementor-element.elementor-element-5f3ae97 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-5f3ae97.elementor-view-stacked .elementor-icon{background-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-5f3ae97.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-5f3ae97.elementor-view-default .elementor-icon{color:#1E1E1E;border-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-5f3ae97.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-5f3ae97.elementor-view-default .elementor-icon svg{fill:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-5f3ae97 .elementor-icon{font-size:118px;}.elementor-8 .elementor-element.elementor-element-5f3ae97 .elementor-icon svg{height:118px;}.elementor-8 .elementor-element.elementor-element-166ce10 img{width:100%;}.elementor-8 .elementor-element.elementor-element-b68df6d{margin:-60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-b68df6d img{width:80%;}.elementor-8 .elementor-element.elementor-element-5dd0a1f .elementor-button{background-color:#61CE7000;font-family:"Big Shoulders Display", Sans-serif;font-size:15px;font-weight:500;fill:#1E1E1E;color:#1E1E1E;transition-duration:0.5s;}.elementor-8 .elementor-element.elementor-element-5dd0a1f .elementor-button-content-wrapper{flex-direction:row;}.elementor-8 .elementor-element.elementor-element-5dd0a1f .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-8 .elementor-element.elementor-element-a3fcb5d{--display:flex;}.elementor-8 .elementor-element.elementor-element-ca4cc01{--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;--background-transition:0.5s;border-style:none;--border-style:none;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-8 .elementor-element.elementor-element-ca4cc01:hover{box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5);}.elementor-8 .elementor-element.elementor-element-ac62886{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-ac62886.elementor-element{--align-self:flex-end;}.elementor-8 .elementor-element.elementor-element-ac62886 .elementor-icon-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-ac62886.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ac62886 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-ac62886 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-ac62886 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-6156b17{width:auto;max-width:auto;margin:-70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-6156b17.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-6156b17 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-5f7a625{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-5f7a625 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-5f7a625 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-5f7a625 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-5f7a625 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-5f7a625 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-7379a9e{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-7379a9e:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-7379a9e.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-7379a9e .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-7379a9e .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-7379a9e.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-7379a9e .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-7379a9e .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-7379a9e .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-7379a9e:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-7379a9e:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-9bdcfd4{right:45px;}body.rtl .elementor-8 .elementor-element.elementor-element-9bdcfd4{left:45px;}.elementor-8 .elementor-element.elementor-element-9bdcfd4{top:125px;}.elementor-8 .elementor-element.elementor-element-9bdcfd4 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-9bdcfd4.elementor-view-stacked .elementor-icon{background-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-9bdcfd4.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-9bdcfd4.elementor-view-default .elementor-icon{color:#1E1E1E;border-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-9bdcfd4.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-9bdcfd4.elementor-view-default .elementor-icon svg{fill:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-9bdcfd4 .elementor-icon{font-size:118px;}.elementor-8 .elementor-element.elementor-element-9bdcfd4 .elementor-icon svg{height:118px;}.elementor-8 .elementor-element.elementor-element-d6bbbba img{width:100%;}.elementor-8 .elementor-element.elementor-element-8757677{margin:-60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-8757677 img{width:80%;}.elementor-8 .elementor-element.elementor-element-883fcdb .elementor-button{background-color:#61CE7000;font-family:"Big Shoulders Display", Sans-serif;font-size:15px;font-weight:500;fill:#1E1E1E;color:#1E1E1E;transition-duration:0.5s;}.elementor-8 .elementor-element.elementor-element-883fcdb .elementor-button-content-wrapper{flex-direction:row;}.elementor-8 .elementor-element.elementor-element-883fcdb .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-8 .elementor-element.elementor-element-4ce4fd7{--display:flex;}.elementor-8 .elementor-element.elementor-element-36cfffb{--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;--background-transition:0.5s;border-style:none;--border-style:none;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-8 .elementor-element.elementor-element-36cfffb:hover{box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5);}.elementor-8 .elementor-element.elementor-element-8337803{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-8337803.elementor-element{--align-self:flex-end;}.elementor-8 .elementor-element.elementor-element-8337803 .elementor-icon-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-8337803.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-8337803.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-8337803.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-8337803.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-8337803.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-8337803.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-8337803.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-8337803.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-8337803.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-8337803.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-8337803 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-8337803 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-8337803 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-c5e8fdf{width:auto;max-width:auto;margin:-70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-c5e8fdf.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-c5e8fdf p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-678b7b5{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-678b7b5 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-678b7b5 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-678b7b5 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-678b7b5 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-678b7b5 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-3814ad7{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-3814ad7:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-3814ad7.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-3814ad7 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-3814ad7 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3814ad7.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-3814ad7 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-3814ad7 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-3814ad7 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-3814ad7:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-3814ad7:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-265f670{right:45px;}body.rtl .elementor-8 .elementor-element.elementor-element-265f670{left:45px;}.elementor-8 .elementor-element.elementor-element-265f670{top:125px;}.elementor-8 .elementor-element.elementor-element-265f670 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-265f670.elementor-view-stacked .elementor-icon{background-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-265f670.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-265f670.elementor-view-default .elementor-icon{color:#1E1E1E;border-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-265f670.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-265f670.elementor-view-default .elementor-icon svg{fill:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-265f670 .elementor-icon{font-size:118px;}.elementor-8 .elementor-element.elementor-element-265f670 .elementor-icon svg{height:118px;}.elementor-8 .elementor-element.elementor-element-9d122d1 img{width:100%;}.elementor-8 .elementor-element.elementor-element-f1b0fab{margin:-60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-f1b0fab img{width:80%;}.elementor-8 .elementor-element.elementor-element-613dce1 .elementor-button{background-color:#61CE7000;font-family:"Big Shoulders Display", Sans-serif;font-size:15px;font-weight:500;fill:#1E1E1E;color:#1E1E1E;transition-duration:0.5s;}.elementor-8 .elementor-element.elementor-element-613dce1 .elementor-button-content-wrapper{flex-direction:row;}.elementor-8 .elementor-element.elementor-element-613dce1 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-8 .elementor-element.elementor-element-04ff15d{--display:flex;}.elementor-8 .elementor-element.elementor-element-fc883c0{--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;--background-transition:0.5s;border-style:none;--border-style:none;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-8 .elementor-element.elementor-element-fc883c0:hover{box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5);}.elementor-8 .elementor-element.elementor-element-a524492{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-a524492.elementor-element{--align-self:flex-end;}.elementor-8 .elementor-element.elementor-element-a524492 .elementor-icon-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-a524492.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a524492.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-a524492.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a524492.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-a524492.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a524492.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a524492.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-a524492.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a524492.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-a524492.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a524492 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-a524492 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-a524492 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-d639ff2{width:auto;max-width:auto;margin:-70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-d639ff2.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-d639ff2 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-11d626f{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-11d626f .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-11d626f .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-11d626f .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-11d626f .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-11d626f .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-a4f7f56{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-a4f7f56:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-a4f7f56 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-a4f7f56 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-a4f7f56 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-a4f7f56 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-a4f7f56 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-a4f7f56:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-a4f7f56:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-459abb0{right:45px;}body.rtl .elementor-8 .elementor-element.elementor-element-459abb0{left:45px;}.elementor-8 .elementor-element.elementor-element-459abb0{top:125px;}.elementor-8 .elementor-element.elementor-element-459abb0 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-459abb0.elementor-view-stacked .elementor-icon{background-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-459abb0.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-459abb0.elementor-view-default .elementor-icon{color:#1E1E1E;border-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-459abb0.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-459abb0.elementor-view-default .elementor-icon svg{fill:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-459abb0 .elementor-icon{font-size:118px;}.elementor-8 .elementor-element.elementor-element-459abb0 .elementor-icon svg{height:118px;}.elementor-8 .elementor-element.elementor-element-f4d5420 img{width:100%;}.elementor-8 .elementor-element.elementor-element-945eaba{margin:-60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-945eaba img{width:80%;}.elementor-8 .elementor-element.elementor-element-589db47 .elementor-button{background-color:#61CE7000;font-family:"Big Shoulders Display", Sans-serif;font-size:15px;font-weight:500;fill:#1E1E1E;color:#1E1E1E;transition-duration:0.5s;}.elementor-8 .elementor-element.elementor-element-589db47 .elementor-button-content-wrapper{flex-direction:row;}.elementor-8 .elementor-element.elementor-element-589db47 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-8 .elementor-element.elementor-element-c64e3cf{--display:flex;}.elementor-8 .elementor-element.elementor-element-74700cb{--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;--background-transition:0.5s;border-style:none;--border-style:none;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-8 .elementor-element.elementor-element-74700cb:hover{box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5);}.elementor-8 .elementor-element.elementor-element-7fa442d{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-7fa442d.elementor-element{--align-self:flex-end;}.elementor-8 .elementor-element.elementor-element-7fa442d .elementor-icon-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-7fa442d.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-7fa442d .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-7fa442d .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-7fa442d .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-530f0e1{width:auto;max-width:auto;margin:-70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-530f0e1.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-530f0e1 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-d721115{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-d721115 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-d721115 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-d721115 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-d721115 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-d721115 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-f07a3f0{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-f07a3f0:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-f07a3f0 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-f07a3f0 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-f07a3f0 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-f07a3f0 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-f07a3f0 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-f07a3f0:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-f07a3f0:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-8c99281{right:45px;}body.rtl .elementor-8 .elementor-element.elementor-element-8c99281{left:45px;}.elementor-8 .elementor-element.elementor-element-8c99281{top:125px;}.elementor-8 .elementor-element.elementor-element-8c99281 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-8c99281.elementor-view-stacked .elementor-icon{background-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-8c99281.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-8c99281.elementor-view-default .elementor-icon{color:#1E1E1E;border-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-8c99281.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-8c99281.elementor-view-default .elementor-icon svg{fill:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-8c99281 .elementor-icon{font-size:118px;}.elementor-8 .elementor-element.elementor-element-8c99281 .elementor-icon svg{height:118px;}.elementor-8 .elementor-element.elementor-element-7206e99 img{width:100%;}.elementor-8 .elementor-element.elementor-element-0e66589{margin:-60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-0e66589 img{width:80%;}.elementor-8 .elementor-element.elementor-element-4419067 .elementor-button{background-color:#61CE7000;font-family:"Big Shoulders Display", Sans-serif;font-size:15px;font-weight:500;fill:#1E1E1E;color:#1E1E1E;transition-duration:0.5s;}.elementor-8 .elementor-element.elementor-element-4419067 .elementor-button-content-wrapper{flex-direction:row;}.elementor-8 .elementor-element.elementor-element-4419067 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-8 .elementor-element.elementor-element-7b12f3f{--display:flex;}.elementor-8 .elementor-element.elementor-element-c093ed3{--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;--background-transition:0.5s;border-style:none;--border-style:none;--border-radius:20px 20px 20px 20px;--padding-top:20px;--padding-bottom:20px;--padding-left:20px;--padding-right:20px;}.elementor-8 .elementor-element.elementor-element-c093ed3:hover{box-shadow:10px 10px 10px 0px rgba(0,0,0,0.5);}.elementor-8 .elementor-element.elementor-element-edf77c5{width:var( --container-widget-width, 10% );max-width:10%;--container-widget-width:10%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-edf77c5.elementor-element{--align-self:flex-end;}.elementor-8 .elementor-element.elementor-element-edf77c5 .elementor-icon-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-edf77c5.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-edf77c5 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-edf77c5 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-edf77c5 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-170a9e0{width:auto;max-width:auto;margin:-70px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-170a9e0.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-170a9e0 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-d0512e2{margin:-25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-d0512e2 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-d0512e2 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-d0512e2 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-d0512e2 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-d0512e2 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-83cef08{right:5px;}body.rtl .elementor-8 .elementor-element.elementor-element-83cef08{left:5px;}.elementor-8 .elementor-element.elementor-element-83cef08{top:135.82px;}.elementor-8 .elementor-element.elementor-element-83cef08 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-83cef08.elementor-view-stacked .elementor-icon{background-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-83cef08.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-83cef08.elementor-view-default .elementor-icon{color:#1E1E1E;border-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-83cef08.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-83cef08.elementor-view-default .elementor-icon svg{fill:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-83cef08 .elementor-icon{font-size:118px;}.elementor-8 .elementor-element.elementor-element-83cef08 .elementor-icon svg{height:118px;}.elementor-8 .elementor-element.elementor-element-2d7e6af img{width:100%;}.elementor-8 .elementor-element.elementor-element-bbb693f{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-bbb693f:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-bbb693f.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-bbb693f .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-bbb693f .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-bbb693f.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-bbb693f .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-bbb693f .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-bbb693f .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-bbb693f:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-bbb693f:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-cdccd66{margin:-60px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-cdccd66 img{width:80%;}.elementor-8 .elementor-element.elementor-element-ff1a1a3 .elementor-button{background-color:#61CE7000;font-family:"Big Shoulders Display", Sans-serif;font-size:15px;font-weight:500;fill:#1E1E1E;color:#1E1E1E;transition-duration:0.5s;}.elementor-8 .elementor-element.elementor-element-ff1a1a3 .elementor-button-content-wrapper{flex-direction:row;}.elementor-8 .elementor-element.elementor-element-ff1a1a3 .elementor-button .elementor-button-content-wrapper{gap:10px;}.elementor-8 .elementor-element.elementor-element-57f35c6{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:-20px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:-20px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-size:40px;}.elementor-8 .elementor-element.elementor-element-5c722cc{--display:flex;}.elementor-8 .elementor-element.elementor-element-60888aa{--display:flex;}.elementor-8 .elementor-element.elementor-element-6bb1baf{--display:flex;--gap:010px 010px;--row-gap:010px;--column-gap:010px;--overlay-opacity:1;--border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-6bb1baf:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-6bb1baf > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DFDFDF;}.elementor-8 .elementor-element.elementor-element-6bb1baf::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .e-con-inner > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .e-con-inner > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png");--background-overlay:'';background-position:center center;background-size:cover;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-576d954{right:20px;}body.rtl .elementor-8 .elementor-element.elementor-element-576d954{left:20px;}.elementor-8 .elementor-element.elementor-element-576d954{top:15px;}.elementor-8 .elementor-element.elementor-element-576d954 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-576d954.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-576d954.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-576d954.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-576d954.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-576d954.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-576d954.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-576d954.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-576d954.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-576d954.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-576d954.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-576d954 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-576d954 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-576d954 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-8e12036{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-8e12036.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-8e12036 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-e6705a7{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-e6705a7 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-e6705a7 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-e6705a7 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-e6705a7 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-e6705a7 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-10eef0f{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-10eef0f:hover{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-10eef0f.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-stacked .elementor-icon{background-color:#75E70F;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-default .elementor-icon{fill:#75E70F;color:#75E70F;border-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-10eef0f.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-10eef0f:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-10eef0f:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-03dfc3e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-03dfc3e img{width:80%;}.elementor-8 .elementor-element.elementor-element-196cc0e{--display:flex;}.elementor-8 .elementor-element.elementor-element-3af8075{--display:flex;--gap:010px 010px;--row-gap:010px;--column-gap:010px;--border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-3af8075:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-3af8075 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DFDFDF;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-ba6372b{right:20px;}body.rtl .elementor-8 .elementor-element.elementor-element-ba6372b{left:20px;}.elementor-8 .elementor-element.elementor-element-ba6372b{top:15px;}.elementor-8 .elementor-element.elementor-element-ba6372b .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-ba6372b.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-ba6372b .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-ba6372b .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-ba6372b .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-e0a1d8c{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-e0a1d8c.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-e0a1d8c p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-03722c2{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-03722c2 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-03722c2 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-03722c2 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-03722c2 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-03722c2 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-b4bfaf2{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-b4bfaf2:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-b4bfaf2 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-b4bfaf2 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-b4bfaf2 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-b4bfaf2 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-b4bfaf2 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-b4bfaf2:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-b4bfaf2:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-d8ec515{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-d8ec515 img{width:80%;}.elementor-8 .elementor-element.elementor-element-72c1da1{--display:flex;}.elementor-8 .elementor-element.elementor-element-b02ab65{--display:flex;--gap:010px 010px;--row-gap:010px;--column-gap:010px;--border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-b02ab65:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-b02ab65 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DFDFDF;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-63b8025{right:20px;}body.rtl .elementor-8 .elementor-element.elementor-element-63b8025{left:20px;}.elementor-8 .elementor-element.elementor-element-63b8025{top:15px;}.elementor-8 .elementor-element.elementor-element-63b8025 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-63b8025.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-63b8025 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-63b8025 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-63b8025 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-e7d4b86{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-e7d4b86.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-e7d4b86 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-e05cf57{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-e05cf57 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-e05cf57 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-e05cf57 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-e05cf57 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-e05cf57 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-2dd1b0a{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-2dd1b0a:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-2dd1b0a .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-2dd1b0a .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-2dd1b0a .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-2dd1b0a .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-2dd1b0a .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-2dd1b0a:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-2dd1b0a:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-8f96607{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-8f96607 img{width:80%;}.elementor-8 .elementor-element.elementor-element-c366638{--display:flex;}.elementor-8 .elementor-element.elementor-element-209bf61{--display:flex;--gap:010px 010px;--row-gap:010px;--column-gap:010px;--border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-209bf61:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-209bf61 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DFDFDF;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-b4cde03{right:20px;}body.rtl .elementor-8 .elementor-element.elementor-element-b4cde03{left:20px;}.elementor-8 .elementor-element.elementor-element-b4cde03{top:15px;}.elementor-8 .elementor-element.elementor-element-b4cde03 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-b4cde03.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4cde03 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-b4cde03 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-b4cde03 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-9564fa0{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-9564fa0.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-9564fa0 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-b168941{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-b168941 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-b168941 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-b168941 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-b168941 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-b168941 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-d4b0265{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-d4b0265:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-d4b0265.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-d4b0265 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-d4b0265 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-d4b0265.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-d4b0265 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-d4b0265 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-d4b0265 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-d4b0265:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-d4b0265:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-5b9389c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-5b9389c img{width:80%;}.elementor-8 .elementor-element.elementor-element-f2efded{--display:flex;}.elementor-8 .elementor-element.elementor-element-18d1df9{--display:flex;--gap:010px 010px;--row-gap:010px;--column-gap:010px;--border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-18d1df9:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-18d1df9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DFDFDF;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-b4a53b7{right:20px;}body.rtl .elementor-8 .elementor-element.elementor-element-b4a53b7{left:20px;}.elementor-8 .elementor-element.elementor-element-b4a53b7{top:15px;}.elementor-8 .elementor-element.elementor-element-b4a53b7 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-b4a53b7.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-b4a53b7 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-b4a53b7 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-b4a53b7 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-600b719{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-600b719.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-600b719 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-dbad47e{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-dbad47e .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-dbad47e .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-dbad47e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-dbad47e .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-dbad47e .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-408d004{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-408d004:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-408d004.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-408d004 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-408d004 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-408d004.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-408d004.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-408d004.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-408d004.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-408d004.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-408d004.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-408d004.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-408d004.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-408d004.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-408d004.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-408d004.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-408d004.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-408d004 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-408d004 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-408d004 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-408d004:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-408d004:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-31ecd2e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-31ecd2e img{width:80%;}.elementor-8 .elementor-element.elementor-element-e9fe247{--display:flex;}.elementor-8 .elementor-element.elementor-element-53f2899{--display:flex;--gap:010px 010px;--row-gap:010px;--column-gap:010px;--border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-53f2899:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-53f2899 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DFDFDF;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-73a73d2{right:20px;}body.rtl .elementor-8 .elementor-element.elementor-element-73a73d2{left:20px;}.elementor-8 .elementor-element.elementor-element-73a73d2{top:15px;}.elementor-8 .elementor-element.elementor-element-73a73d2 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-73a73d2.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-73a73d2 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-73a73d2 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-73a73d2 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-b3c4e72{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b3c4e72.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-b3c4e72 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-3fc96df{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-3fc96df .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-3fc96df .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-3fc96df .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-3fc96df .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-3fc96df .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-3303c17{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-3303c17:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-3303c17.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-3303c17 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-3303c17 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3303c17.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-3303c17 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-3303c17 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-3303c17 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-3303c17:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-3303c17:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-57f372b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-57f372b img{width:80%;}.elementor-8 .elementor-element.elementor-element-8da7970{--display:flex;}.elementor-8 .elementor-element.elementor-element-f84f839{--display:flex;--gap:010px 010px;--row-gap:010px;--column-gap:010px;--border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-f84f839:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-f84f839 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DFDFDF;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-bd837d5{right:20px;}body.rtl .elementor-8 .elementor-element.elementor-element-bd837d5{left:20px;}.elementor-8 .elementor-element.elementor-element-bd837d5{top:15px;}.elementor-8 .elementor-element.elementor-element-bd837d5 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-bd837d5.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-bd837d5 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-bd837d5 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-bd837d5 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-b91724d{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-b91724d.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-b91724d p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-41de85f{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-41de85f .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-41de85f .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-41de85f .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-41de85f .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-41de85f .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-9b805ac{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-9b805ac:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-9b805ac.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-9b805ac .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-9b805ac .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-9b805ac.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-9b805ac .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-9b805ac .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-9b805ac .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-9b805ac:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-9b805ac:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-42ebb33{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-42ebb33 img{width:80%;}.elementor-8 .elementor-element.elementor-element-a34ef19{--display:flex;}.elementor-8 .elementor-element.elementor-element-d508bfd{--display:flex;--gap:010px 010px;--row-gap:010px;--column-gap:010px;--border-radius:15px 15px 15px 15px;}.elementor-8 .elementor-element.elementor-element-d508bfd:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-d508bfd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#DFDFDF;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-a710282{right:20px;}body.rtl .elementor-8 .elementor-element.elementor-element-a710282{left:20px;}.elementor-8 .elementor-element.elementor-element-a710282{top:15px;}.elementor-8 .elementor-element.elementor-element-a710282 .elementor-icon-wrapper{text-align:right;}.elementor-8 .elementor-element.elementor-element-a710282.elementor-view-stacked .elementor-icon{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a710282.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-a710282.elementor-view-default .elementor-icon{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a710282.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-a710282.elementor-view-default .elementor-icon svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a710282.elementor-view-stacked .elementor-icon:hover{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a710282.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-a710282.elementor-view-default .elementor-icon:hover{color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a710282.elementor-view-framed .elementor-icon:hover, .elementor-8 .elementor-element.elementor-element-a710282.elementor-view-default .elementor-icon:hover svg{fill:#67CC0E;}.elementor-8 .elementor-element.elementor-element-a710282 .elementor-icon{font-size:36px;}.elementor-8 .elementor-element.elementor-element-a710282 .elementor-icon svg{height:36px;}.elementor-8 .elementor-element.elementor-element-a710282 .elementor-icon-wrapper svg{width:auto;}.elementor-8 .elementor-element.elementor-element-2d2ad2b{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-2d2ad2b.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-2d2ad2b p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-0653b11{margin:-15px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:2;--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-8 .elementor-element.elementor-element-0653b11 .elementor-icon-list-icon i{color:var( --e-global-color-1541737 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-0653b11 .elementor-icon-list-icon svg{fill:var( --e-global-color-1541737 );transition:fill 0.3s;}.elementor-8 .elementor-element.elementor-element-0653b11 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-0653b11 .elementor-icon-list-item > a{font-family:"Big Shoulders Display", Sans-serif;font-size:19px;font-weight:400;}.elementor-8 .elementor-element.elementor-element-0653b11 .elementor-icon-list-text{color:var( --e-global-color-3a62b99 );transition:color 0.3s;}.elementor-8 .elementor-element.elementor-element-3bacb42{background-color:var( --e-global-color-3a62b99 );margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 10px 0px 10px;border-radius:6px 6px 6px 6px;--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-3bacb42:hover{background-color:var( --e-global-color-b4bc91f );}.elementor-8 .elementor-element.elementor-element-3bacb42.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-3bacb42 .elementor-icon-box-wrapper{align-items:center;text-align:left;}.elementor-8 .elementor-element.elementor-element-3bacb42 .elementor-icon-box-title{margin-block-end:10px;color:var( --e-global-color-d242097 );}.elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-stacked .elementor-icon{background-color:#67CC0E;fill:var( --e-global-color-1541737 );color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-default .elementor-icon{fill:#67CC0E;color:#67CC0E;border-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-framed .elementor-icon{background-color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-stacked:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-stacked:has(:focus) .elementor-icon{background-color:var( --e-global-color-3a62b99 );fill:#75E70F;color:#75E70F;}.elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-default:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-framed:has(:focus) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-default:has(:focus) .elementor-icon{fill:var( --e-global-color-3a62b99 );color:var( --e-global-color-3a62b99 );border-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-framed:has(:hover) .elementor-icon, .elementor-8 .elementor-element.elementor-element-3bacb42.elementor-view-framed:has(:focus) .elementor-icon{background-color:#75E70F;}.elementor-8 .elementor-element.elementor-element-3bacb42 .elementor-icon{font-size:15px;padding:5px;}.elementor-8 .elementor-element.elementor-element-3bacb42 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-3bacb42 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-3bacb42:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-3bacb42:has(:focus) .elementor-icon-box-title{color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-ce6373e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;z-index:3;text-align:center;}.elementor-8 .elementor-element.elementor-element-ce6373e img{width:80%;}.elementor-8 .elementor-element.elementor-element-0a14874{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:10px;--e-n-carousel-slide-height:auto;--e-n-carousel-slide-container-height:100%;--e-n-carousel-arrow-prev-left-align:0%;--e-n-carousel-arrow-prev-translate-x:0px;--e-n-carousel-arrow-prev-left-position:-20px;--e-n-carousel-arrow-prev-top-align:50%;--e-n-carousel-arrow-prev-translate-y:-50%;--e-n-carousel-arrow-next-right-align:0%;--e-n-carousel-arrow-next-translate-x:0%;--e-n-carousel-arrow-next-right-position:-20px;--e-n-carousel-arrow-next-top-align:50%;--e-n-carousel-arrow-next-translate-y:-50%;--e-n-carousel-arrow-next-top-position:0px;--e-n-carousel-arrow-size:15px;--e-n-carousel-arrow-normal-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-0a14874 :is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {background-color:var( --e-global-color-3a62b99 );border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-3a62b99 );border-radius:20px 20px 20px 20px;}.elementor-8 .elementor-element.elementor-element-5a7e40f{--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-8 .elementor-element.elementor-element-c396b70{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:5px 5px;--row-gap:5px;--column-gap:5px;--border-radius:20px 20px 20px 20px;--padding-top:30px;--padding-bottom:30px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-c396b70:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-c396b70 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E6E6E6;}.elementor-8 .elementor-element.elementor-element-3202f54 .elementor-heading-title{font-family:"Big Shoulders Display", Sans-serif;font-size:35px;font-weight:600;text-transform:uppercase;line-height:1.2em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-cee2d10{width:var( --container-widget-width, 75% );max-width:75%;padding:0px 0px 0px 0px;--container-widget-width:75%;--container-widget-flex-grow:0;text-align:center;font-family:"Manrope", Sans-serif;font-size:15px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-cee2d10.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-cee2d10 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-f15517a{--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;}.elementor-8 .elementor-element.elementor-element-99ed316 img{width:100%;}.elementor-8 .elementor-element.elementor-element-f71abae img{width:100%;}.elementor-8 .elementor-element.elementor-element-2c0dbb8 img{width:100%;}.elementor-8 .elementor-element.elementor-element-1b2327b{--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;--padding-top:10px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-8 .elementor-element.elementor-element-6a23b2c{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--border-radius:15px 15px 0px 0px;--padding-top:40px;--padding-bottom:0px;--padding-left:70px;--padding-right:70px;}.elementor-8 .elementor-element.elementor-element-6a23b2c:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-6a23b2c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#E6E6E6;background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/07/Grid-Bg-1.png");background-size:cover;}.elementor-8 .elementor-element.elementor-element-99cd3b5{--display:flex;--justify-content:flex-end;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-0c586ce{left:38px;}body.rtl .elementor-8 .elementor-element.elementor-element-0c586ce{right:38px;}.elementor-8 .elementor-element.elementor-element-0c586ce{top:287px;}.elementor-8 .elementor-element.elementor-element-0c586ce .elementor-icon-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-0c586ce.elementor-view-stacked .elementor-icon{background-color:#86F029;}.elementor-8 .elementor-element.elementor-element-0c586ce.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-0c586ce.elementor-view-default .elementor-icon{color:#86F029;border-color:#86F029;}.elementor-8 .elementor-element.elementor-element-0c586ce.elementor-view-framed .elementor-icon, .elementor-8 .elementor-element.elementor-element-0c586ce.elementor-view-default .elementor-icon svg{fill:#86F029;}.elementor-8 .elementor-element.elementor-element-0c586ce .elementor-icon{font-size:100px;}.elementor-8 .elementor-element.elementor-element-0c586ce .elementor-icon svg{height:100px;}.elementor-8 .elementor-element.elementor-element-698003f{z-index:1;}.elementor-8 .elementor-element.elementor-element-474fbe1{--display:flex;--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-8 .elementor-element.elementor-element-4a6fd1f .elementor-heading-title{font-family:"Big Shoulders Display", Sans-serif;font-size:60px;font-weight:500;text-transform:uppercase;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-c6b57f1{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:15px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-c6b57f1 p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-3f43d98 .elementor-button{background-color:var( --e-global-color-1541737 );font-family:"Big Shoulders Display", Sans-serif;font-weight:500;letter-spacing:0.5px;border-radius:0px 0px 0px 0px;padding:10px 30px 10px 30px;}.elementor-8 .elementor-element.elementor-element-3f43d98 .elementor-button:hover, .elementor-8 .elementor-element.elementor-element-3f43d98 .elementor-button:focus{background-color:#67CC0E;}.elementor-8 .elementor-element.elementor-element-db3e461{--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;--padding-top:0px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-8 .elementor-element.elementor-element-33f0254{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--border-radius:0px 0px 15px 15px;--padding-top:20px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-33f0254:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-33f0254 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-3a62b99 );}.elementor-8 .elementor-element.elementor-element-fb5aa72{text-align:center;font-family:"Big Shoulders Display", Sans-serif;font-size:17px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-38db793 );}.elementor-8 .elementor-element.elementor-element-fb5aa72 p{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-4ae26e4 .elementor-heading-title{font-family:"Big Shoulders Display", Sans-serif;font-size:35px;font-weight:400;line-height:1.1em;letter-spacing:2px;color:#76E910;}.elementor-widget-reviews .elementor-testimonial__header, .elementor-widget-reviews .elementor-testimonial__name{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-reviews .elementor-testimonial__text{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-8 .elementor-element.elementor-element-c161449.elementor-arrows-yes .elementor-main-swiper{width:calc( 90% - 40px );}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-main-swiper{width:90%;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-main-swiper .swiper-slide{background-color:#E4FCCF;border-radius:5px;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__header{padding-top:10px;padding-left:10px;padding-right:10px;padding-block-end:calc( 20px / 2 );}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__content{padding-bottom:10px;padding-left:10px;padding-right:10px;padding-block-start:calc( 20px / 2 );}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-swiper-button{font-size:40px;color:var( --e-global-color-38db793 );}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-swiper-button svg{fill:var( --e-global-color-38db793 );}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__header, .elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__name{font-family:"Big Shoulders Display", Sans-serif;font-size:20px;font-weight:600;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__title{font-family:"Manrope", Sans-serif;font-size:16px;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__text{color:var( --e-global-color-1541737 );font-family:"Manrope", Sans-serif;font-size:15px;font-weight:500;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__image img{width:50px;height:50px;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__icon{font-size:30px;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__icon svg{width:30px;}.elementor-8 .elementor-element.elementor-element-49f437d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8 .elementor-element.elementor-element-f85cab0{--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-8 .elementor-element.elementor-element-feab196 .elementor-heading-title{font-family:"Big Shoulders Display", Sans-serif;font-size:70px;font-weight:600;text-transform:uppercase;line-height:1.1em;color:var( --e-global-color-1541737 );}.elementor-8 .elementor-element.elementor-element-710c2e8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-8 .elementor-element.elementor-element-a9f9914 .elementor-button{background-color:#D9D9D9;font-family:"Big Shoulders Display", Sans-serif;font-size:22px;font-weight:500;fill:#000000;color:#000000;border-radius:10px 10px 10px 10px;}.elementor-8 .elementor-element.elementor-element-4386247 .elementor-button{background-color:#D9D9D9;font-family:"Big Shoulders Display", Sans-serif;font-size:22px;font-weight:500;fill:#000000;color:#000000;border-radius:10px 10px 10px 10px;}.elementor-8 .elementor-element.elementor-element-4386247 .elementor-button-content-wrapper{flex-direction:row;}.elementor-8 .elementor-element.elementor-element-4386247 .elementor-button .elementor-button-content-wrapper{gap:15px;}.elementor-8 .elementor-element.elementor-element-5c25bdd{--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-8 .elementor-element.elementor-element-6bb952b{--display:flex;}.elementor-8 .elementor-element.elementor-element-229ab48{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-229ab48 p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-0e63e27{--display:flex;}.elementor-8 .elementor-element.elementor-element-8c80143{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-8c80143 p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-2b17b43{--display:flex;}.elementor-8 .elementor-element.elementor-element-9878e3a{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-9878e3a p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-7a18bd6{--display:flex;}.elementor-8 .elementor-element.elementor-element-3cdff8b{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-3cdff8b p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-35c4ece{--display:flex;}.elementor-8 .elementor-element.elementor-element-54ebe6e{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-54ebe6e p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-40abd04{--display:flex;}.elementor-8 .elementor-element.elementor-element-1fb0f71{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-1fb0f71 p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-2da15bf{--display:flex;}.elementor-8 .elementor-element.elementor-element-d5a96d1{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-d5a96d1 p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-df115da{--display:flex;}.elementor-8 .elementor-element.elementor-element-f5856e8{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-f5856e8 p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-63d7710{--display:flex;}.elementor-8 .elementor-element.elementor-element-51e2485{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-51e2485 p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-71a23ec{--display:flex;}.elementor-8 .elementor-element.elementor-element-060718f{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-060718f p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-ed3f423{--display:flex;}.elementor-8 .elementor-element.elementor-element-ba31878{padding:0px 0px 0px 0px;font-family:"Manrope", Sans-serif;font-size:17px;font-weight:500;color:#1B1B1B;}.elementor-8 .elementor-element.elementor-element-ba31878 p{margin-block-end:5px;}.elementor-8 .elementor-element.elementor-element-f32f601{--n-accordion-title-font-size:27px;--n-accordion-title-justify-content:space-between;--n-accordion-title-flex-grow:1;--n-accordion-title-icon-order:initial;--n-accordion-item-title-space-between:10px;--n-accordion-border-radius:10px 10px 0px 0px;--n-accordion-title-normal-color:var( --e-global-color-3a62b99 );--n-accordion-icon-size:15px;}.elementor-8 .elementor-element.elementor-element-f32f601 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title{background-color:#F5F5F5;border-style:solid;border-width:1px 1px 0px 1px;}.elementor-8 .elementor-element.elementor-element-f32f601 > .e-n-accordion > .e-n-accordion-item[open] > .e-n-accordion-item-title{background-color:var( --e-global-color-38db793 );border-style:solid;border-color:#D9D9D9;}.elementor-8 .elementor-element.elementor-element-f32f601 {--n-accordion-padding:10px 10px 10px 10px;}:where( .elementor-8 .elementor-element.elementor-element-f32f601 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{font-family:"Big Shoulders Display", Sans-serif;font-weight:600;line-height:1.1em;}:where( .elementor-8 .elementor-element.elementor-element-f32f601 > .e-n-accordion > .e-n-accordion-item ) > .e-con{border-style:solid;border-width:0px 1px 1px 1px;--border-radius:0px 0px 10px 10px;}.elementor-8 .elementor-element.elementor-element-1da5c43{--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;--padding-top:50px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-1da5c43:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-1da5c43 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#1E1E1E;}.elementor-8 .elementor-element.elementor-element-35f5254{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8 .elementor-element.elementor-element-b6b3efd .elementor-heading-title{font-family:"Big Shoulders Display", Sans-serif;font-size:40px;font-weight:500;color:#93F241;}.elementor-8 .elementor-element.elementor-element-b6b3efd .elementor-heading-title a:hover, .elementor-8 .elementor-element.elementor-element-b6b3efd .elementor-heading-title a:focus{color:#93F241;}.elementor-8 .elementor-element.elementor-element-de3f0d0 .elementor-icon-box-wrapper{align-items:center;text-align:center;}.elementor-8 .elementor-element.elementor-element-de3f0d0{--icon-box-icon-margin:10px;}.elementor-8 .elementor-element.elementor-element-de3f0d0 .elementor-icon-box-title{margin-block-end:10px;color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-de3f0d0 .elementor-icon{font-size:25px;}.elementor-8 .elementor-element.elementor-element-de3f0d0 .elementor-icon i{transform:rotate(0deg);}.elementor-8 .elementor-element.elementor-element-de3f0d0 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-de3f0d0 .elementor-icon-box-title a{font-family:"Big Shoulders Display", Sans-serif;font-size:18px;font-weight:600;line-height:20px;}.elementor-8 .elementor-element.elementor-element-de3f0d0:has(:hover) .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-de3f0d0:has(:focus) .elementor-icon-box-title{color:#FFFFFF;}.elementor-8 .elementor-element.elementor-element-fb695ef{--display:flex;}.elementor-widget-posts .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__title, .elementor-widget-posts .elementor-post__title a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-posts .elementor-post__meta-data{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .elementor-post__excerpt p{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-posts .elementor-post__read-more{color:var( --e-global-color-accent );}.elementor-widget-posts a.elementor-post__read-more{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-post__card .elementor-post__badge{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-posts .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-posts .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-8 .elementor-element.elementor-element-42fa8e6{--grid-row-gap:35px;--grid-column-gap:21px;}.elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.66 * 100% );}.elementor-8 .elementor-element.elementor-element-42fa8e6:after{content:"0.66";}.elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-post__thumbnail__link{width:100%;}.elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-post{border-radius:10px;padding:0px 0px 0px 0px;background-color:#E6E6E6;}.elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-post__text{padding:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-42fa8e6.elementor-posts--thumbnail-left .elementor-post__thumbnail__link{margin-right:0px;}.elementor-8 .elementor-element.elementor-element-42fa8e6.elementor-posts--thumbnail-right .elementor-post__thumbnail__link{margin-left:0px;}.elementor-8 .elementor-element.elementor-element-42fa8e6.elementor-posts--thumbnail-top .elementor-post__thumbnail__link{margin-bottom:0px;}.elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-post__title, .elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-post__title a{color:#171717;font-family:"Big Shoulders Display", Sans-serif;font-size:25px;font-weight:500;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-8 .elementor-element.elementor-element-7dae295{--e-n-carousel-swiper-slides-to-display:2;}.elementor-8 .elementor-element.elementor-element-57f35c6{--e-n-carousel-swiper-slides-to-display:2;}.elementor-8 .elementor-element.elementor-element-0a14874{--e-n-carousel-swiper-slides-to-display:2;}}@media(min-width:768px){.elementor-8 .elementor-element.elementor-element-d07865f{--content-width:1200px;}.elementor-8 .elementor-element.elementor-element-234e82e{--width:60%;}.elementor-8 .elementor-element.elementor-element-16295b9{--width:40%;}.elementor-8 .elementor-element.elementor-element-3b9c00f{--content-width:1200px;}.elementor-8 .elementor-element.elementor-element-7390183{--width:100%;}.elementor-8 .elementor-element.elementor-element-eb1bcb5{--width:80%;}.elementor-8 .elementor-element.elementor-element-b6abf9c{--content-width:1200px;}.elementor-8 .elementor-element.elementor-element-e72f134{--width:75%;}.elementor-8 .elementor-element.elementor-element-6671eca{--width:78%;}.elementor-8 .elementor-element.elementor-element-9463e56{--width:100%;}.elementor-8 .elementor-element.elementor-element-bcbc594{--width:100%;}.elementor-8 .elementor-element.elementor-element-67b78ec{--width:100%;}.elementor-8 .elementor-element.elementor-element-ca4cc01{--width:100%;}.elementor-8 .elementor-element.elementor-element-36cfffb{--width:100%;}.elementor-8 .elementor-element.elementor-element-fc883c0{--width:100%;}.elementor-8 .elementor-element.elementor-element-74700cb{--width:100%;}.elementor-8 .elementor-element.elementor-element-c093ed3{--width:100%;}.elementor-8 .elementor-element.elementor-element-5a7e40f{--content-width:1200px;}.elementor-8 .elementor-element.elementor-element-f15517a{--width:65%;}.elementor-8 .elementor-element.elementor-element-1b2327b{--content-width:1200px;}.elementor-8 .elementor-element.elementor-element-db3e461{--content-width:1200px;}.elementor-8 .elementor-element.elementor-element-49f437d{--content-width:1200px;}.elementor-8 .elementor-element.elementor-element-f85cab0{--width:50%;}.elementor-8 .elementor-element.elementor-element-5c25bdd{--width:50%;}.elementor-8 .elementor-element.elementor-element-1da5c43{--content-width:1000px;}}@media(max-width:767px){.elementor-8 .elementor-element.elementor-element-50cb9e9{--width:95%;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}.elementor-8 .elementor-element.elementor-element-234e82e{--gap:5px 5px;--row-gap:5px;--column-gap:5px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-2089e74{text-align:center;font-size:24px;}.elementor-8 .elementor-element.elementor-element-91d889a{text-align:center;}.elementor-8 .elementor-element.elementor-element-91d889a .elementor-heading-title{font-size:45px;line-height:1em;}.elementor-8 .elementor-element.elementor-element-d7d9530{width:auto;max-width:auto;padding:5px 0px 0px 0px;text-align:justify;font-size:14px;}.elementor-8 .elementor-element.elementor-element-d7d9530.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-29f92cf{--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:5px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-3b27501{--width:50%;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-4e640fc{font-size:13px;}.elementor-8 .elementor-element.elementor-element-4e640fc p{margin-block-end:10px;}.elementor-8 .elementor-element.elementor-element-37f1dd7{--width:50%;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-8 .elementor-element.elementor-element-e70c9e0{--e-icon-list-icon-size:12px;}.elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-e70c9e0 .elementor-icon-list-item > a{font-size:13px;}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-8 .elementor-element.elementor-element-14acf55{--e-icon-list-icon-size:12px;}.elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-14acf55 .elementor-icon-list-item > a{font-size:13px;}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(0px/2);}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(0px/2);}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(0px/2);}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-0px/2);}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-0px/2);}.elementor-8 .elementor-element.elementor-element-af459b4{--e-icon-list-icon-size:12px;}.elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-af459b4 .elementor-icon-list-item > a{font-size:13px;letter-spacing:-0.1px;}.elementor-8 .elementor-element.elementor-element-587cce9{--padding-top:5px;--padding-bottom:5px;--padding-left:5px;--padding-right:5px;}.elementor-8 .elementor-element.elementor-element-251df3a{padding:0px 010px 0px 10px;border-radius:3px 3px 3px 3px;}.elementor-8 .elementor-element.elementor-element-251df3a.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-251df3a .elementor-icon{font-size:10px;padding:4px;}.elementor-8 .elementor-element.elementor-element-4eb0b49{text-align:center;}.elementor-8 .elementor-element.elementor-element-4eb0b49 .elementor-heading-title{font-size:30px;}.elementor-8 .elementor-element.elementor-element-7390183{--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-e4379d3 .elementor-button{font-size:22px;}.elementor-8 .elementor-element.elementor-element-b2a7052{text-align:center;}.elementor-8 .elementor-element.elementor-element-b2a7052 .elementor-heading-title{font-size:25px;}.elementor-8 .elementor-element.elementor-element-7551a2e{--container-widget-width:90%;--container-widget-flex-grow:0;width:var( --container-widget-width, 90% );max-width:90%;text-align:justify;font-size:14px;}.elementor-8 .elementor-element.elementor-element-eb1bcb5{--justify-content:center;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-b61fff1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 10px;padding:5px 10px 5px 10px;--icon-box-icon-margin:5px;}.elementor-8 .elementor-element.elementor-element-b61fff1 .elementor-icon{font-size:25px;}.elementor-8 .elementor-element.elementor-element-b61fff1 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-b61fff1 .elementor-icon-box-title a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-4d54c73{padding:5px 5px 5px 5px;--icon-box-icon-margin:5px;}.elementor-8 .elementor-element.elementor-element-4d54c73 .elementor-icon{font-size:25px;}.elementor-8 .elementor-element.elementor-element-4d54c73 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-4d54c73 .elementor-icon-box-title a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-b6fdab9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 10px;padding:5px 24px 5px 10px;--icon-box-icon-margin:5px;}.elementor-8 .elementor-element.elementor-element-b6fdab9 .elementor-icon{font-size:25px;}.elementor-8 .elementor-element.elementor-element-b6fdab9 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-b6fdab9 .elementor-icon-box-title a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-7db0c9f{padding:5px 32px 15px 10px;--icon-box-icon-margin:4px;}.elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon-box-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon-box-title{margin-block-end:0px;}.elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon{font-size:25px;}.elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-7db0c9f .elementor-icon-box-title a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-21ce4c4{--padding-top:20px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-bf0a737 .elementor-heading-title{font-size:30px;}.elementor-8 .elementor-element.elementor-element-f1500ae{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:92%;--container-widget-flex-grow:0;width:var( --container-widget-width, 92% );max-width:92%;text-align:center;font-size:14px;}.elementor-8 .elementor-element.elementor-element-e72f134{--justify-content:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-1b87cfb{--width:30%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-fcbe168{--width:30%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-3c6448f{--width:33%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-0924ba6{--width:30%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-0d81edf{--width:30%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-cc9c105{--width:33%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-0dc5a3c{--width:35%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-5b9d1ca{--width:35%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-6671eca{--justify-content:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:10px;}.elementor-8 .elementor-element.elementor-element-8555ab8{--width:100%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-060d98b{--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-f3b80a0{--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-b6d32a9{--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-c5f6ed8{--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-3d79cd0{--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-9d90bfb{--width:100%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-22067da{--width:100%;--gap:7px 7px;--row-gap:7px;--column-gap:7px;}.elementor-8 .elementor-element.elementor-element-7dae295{--e-n-carousel-swiper-slides-to-display:3;--e-n-carousel-swiper-slides-gap:0px;--e-n-carousel-swiper-pagination-size:10px;--e-n-carousel-swiper-pagination-spacing:0px;}.elementor-8 .elementor-element.elementor-element-7dae295 .swiper-pagination-bullet{--swiper-pagination-bullet-horizontal-gap:5px;--swiper-pagination-bullet-vertical-gap:5px;}.elementor-8 .elementor-element.elementor-element-7e12304.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-7e12304 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-47d5cb1.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-47d5cb1 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-5dc3b93.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-5dc3b93 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-7379a9e.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-7379a9e .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-3814ad7.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-3814ad7 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-a4f7f56.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-a4f7f56 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-f07a3f0.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-f07a3f0 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-bbb693f.elementor-element{--align-self:center;}.elementor-8 .elementor-element.elementor-element-bbb693f .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-57f35c6{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-arrow-prev-left-position:0px;--e-n-carousel-arrow-next-right-position:0px;}.elementor-8 .elementor-element.elementor-element-6bb1baf::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .e-con-inner > .elementor-background-video-container::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .e-con-inner > .elementor-background-slideshow::before, .elementor-8 .elementor-element.elementor-element-6bb1baf > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-8 .elementor-element.elementor-element-6bb1baf{--overlay-opacity:1;}.elementor-8 .elementor-element.elementor-element-8e12036{font-size:45px;}.elementor-8 .elementor-element.elementor-element-e6705a7{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--e-icon-list-icon-size:14px;}.elementor-8 .elementor-element.elementor-element-e6705a7 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-e6705a7 .elementor-icon-list-item > a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-10eef0f{padding:0px 10px 0px 10px;--icon-box-icon-margin:5px;}.elementor-8 .elementor-element.elementor-element-10eef0f.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon-box-title{margin-block-end:10px;}.elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon{font-size:14px;}.elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-10eef0f .elementor-icon-box-title a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-03dfc3e{z-index:0;}.elementor-8 .elementor-element.elementor-element-3af8075:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-3af8075 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png");background-size:cover;}.elementor-8 .elementor-element.elementor-element-e0a1d8c{font-size:40px;}.elementor-8 .elementor-element.elementor-element-03722c2{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-03722c2 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-03722c2 .elementor-icon-list-item > a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-b4bfaf2.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-b4bfaf2 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-b4bfaf2 .elementor-icon{font-size:14px;padding:4px;}.elementor-8 .elementor-element.elementor-element-b4bfaf2 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-b4bfaf2 .elementor-icon-box-title a{font-size:16px;}.elementor-8 .elementor-element.elementor-element-b02ab65:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-b02ab65 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png");background-size:cover;}.elementor-8 .elementor-element.elementor-element-e7d4b86{font-size:40px;}.elementor-8 .elementor-element.elementor-element-e05cf57{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-e05cf57 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-e05cf57 .elementor-icon-list-item > a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-2dd1b0a.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-2dd1b0a .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-2dd1b0a .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-2dd1b0a .elementor-icon-box-title a{font-size:16px;}.elementor-8 .elementor-element.elementor-element-209bf61:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-209bf61 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png");background-size:cover;}.elementor-8 .elementor-element.elementor-element-9564fa0{font-size:40px;}.elementor-8 .elementor-element.elementor-element-b168941 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-b168941 .elementor-icon-list-item > a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-d4b0265.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-d4b0265 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-d4b0265 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-d4b0265 .elementor-icon-box-title a{font-size:16px;}.elementor-8 .elementor-element.elementor-element-18d1df9:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-18d1df9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png");background-position:center center;background-size:cover;}.elementor-8 .elementor-element.elementor-element-600b719{font-size:40px;}.elementor-8 .elementor-element.elementor-element-dbad47e .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-dbad47e .elementor-icon-list-item > a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-408d004.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-408d004 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-408d004 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-408d004 .elementor-icon-box-title a{font-size:16px;}.elementor-8 .elementor-element.elementor-element-53f2899:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-53f2899 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png");background-size:cover;}.elementor-8 .elementor-element.elementor-element-b3c4e72{font-size:40px;}.elementor-8 .elementor-element.elementor-element-3fc96df{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-3fc96df .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-3fc96df .elementor-icon-list-item > a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-3303c17.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-3303c17 .elementor-icon-box-wrapper{text-align:left;}.elementor-8 .elementor-element.elementor-element-3303c17 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-3303c17 .elementor-icon-box-title a{font-size:16px;}.elementor-8 .elementor-element.elementor-element-f84f839:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-f84f839 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png");background-position:center center;background-size:cover;}.elementor-8 .elementor-element.elementor-element-b91724d{font-size:40px;}.elementor-8 .elementor-element.elementor-element-41de85f{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-41de85f .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-41de85f .elementor-icon-list-item > a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-9b805ac.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-9b805ac .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-9b805ac .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-9b805ac .elementor-icon-box-title a{font-size:16px;}.elementor-8 .elementor-element.elementor-element-a34ef19{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-d508bfd:not(.elementor-motion-effects-element-type-background), .elementor-8 .elementor-element.elementor-element-d508bfd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png");background-position:center center;background-size:cover;}.elementor-8 .elementor-element.elementor-element-2d2ad2b{font-size:40px;}.elementor-8 .elementor-element.elementor-element-0653b11{margin:-10px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-8 .elementor-element.elementor-element-0653b11 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8 .elementor-element.elementor-element-0653b11 .elementor-icon-list-item > a{font-size:17px;}.elementor-8 .elementor-element.elementor-element-3bacb42.elementor-element{--align-self:flex-start;}.elementor-8 .elementor-element.elementor-element-3bacb42 .elementor-icon-box-wrapper{text-align:center;}.elementor-8 .elementor-element.elementor-element-3bacb42 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-3bacb42 .elementor-icon-box-title a{font-size:16px;}.elementor-8 .elementor-element.elementor-element-0a14874{--e-n-carousel-swiper-slides-to-display:1;--e-n-carousel-arrow-prev-left-position:15px;--e-n-carousel-arrow-prev-top-position:80px;--e-n-carousel-arrow-next-right-position:15px;--e-n-carousel-arrow-next-top-position:90px;}.elementor-8 .elementor-element.elementor-element-3202f54{text-align:center;}.elementor-8 .elementor-element.elementor-element-3202f54 .elementor-heading-title{font-size:25px;}.elementor-8 .elementor-element.elementor-element-cee2d10{--container-widget-width:95%;--container-widget-flex-grow:0;width:var( --container-widget-width, 95% );max-width:95%;font-size:14px;}.elementor-8 .elementor-element.elementor-element-f15517a{--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:4px 4px;--row-gap:4px;--column-gap:4px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-99ed316{width:var( --container-widget-width, 31% );max-width:31%;--container-widget-width:31%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-f71abae{width:var( --container-widget-width, 31% );max-width:31%;--container-widget-width:31%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-2c0dbb8{width:var( --container-widget-width, 31% );max-width:31%;--container-widget-width:31%;--container-widget-flex-grow:0;}.elementor-8 .elementor-element.elementor-element-6a23b2c{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body:not(.rtl) .elementor-8 .elementor-element.elementor-element-0c586ce{left:20px;}body.rtl .elementor-8 .elementor-element.elementor-element-0c586ce{right:20px;}.elementor-8 .elementor-element.elementor-element-0c586ce{top:60px;}.elementor-8 .elementor-element.elementor-element-0c586ce .elementor-icon{font-size:65px;}.elementor-8 .elementor-element.elementor-element-0c586ce .elementor-icon svg{height:65px;}.elementor-8 .elementor-element.elementor-element-4a6fd1f .elementor-heading-title{font-size:25px;}.elementor-8 .elementor-element.elementor-element-c6b57f1{text-align:center;font-size:14px;}.elementor-8 .elementor-element.elementor-element-33f0254{--gap:10px 10px;--row-gap:10px;--column-gap:10px;}.elementor-8 .elementor-element.elementor-element-4ae26e4 .elementor-heading-title{font-size:25px;}.elementor-8 .elementor-element.elementor-element-c161449.elementor-arrows-yes .elementor-main-swiper{width:calc( 98% - 40px );}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-main-swiper{width:98%;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-swiper-button{font-size:15px;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__header, .elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__name{font-size:20px;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__title{font-size:15px;}.elementor-8 .elementor-element.elementor-element-c161449 .elementor-testimonial__text{font-size:14px;}.elementor-8 .elementor-element.elementor-element-f85cab0{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-8 .elementor-element.elementor-element-feab196{text-align:center;}.elementor-8 .elementor-element.elementor-element-feab196 .elementor-heading-title{font-size:30px;}.elementor-8 .elementor-element.elementor-element-710c2e8{--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-8 .elementor-element.elementor-element-a9f9914 .elementor-button{font-size:17px;}.elementor-8 .elementor-element.elementor-element-4386247 .elementor-button{font-size:17px;}.elementor-8 .elementor-element.elementor-element-229ab48{font-size:14px;}.elementor-8 .elementor-element.elementor-element-8c80143{font-size:14px;}.elementor-8 .elementor-element.elementor-element-9878e3a{font-size:14px;}.elementor-8 .elementor-element.elementor-element-3cdff8b{font-size:14px;}.elementor-8 .elementor-element.elementor-element-54ebe6e{font-size:14px;}.elementor-8 .elementor-element.elementor-element-1fb0f71{font-size:14px;}.elementor-8 .elementor-element.elementor-element-d5a96d1{font-size:14px;}.elementor-8 .elementor-element.elementor-element-f5856e8{font-size:14px;}.elementor-8 .elementor-element.elementor-element-51e2485{font-size:14px;}.elementor-8 .elementor-element.elementor-element-060718f{font-size:14px;}.elementor-8 .elementor-element.elementor-element-ba31878{font-size:14px;}.elementor-8 .elementor-element.elementor-element-f32f601{--n-accordion-title-font-size:20px;--n-accordion-icon-size:10px;}:where( .elementor-8 .elementor-element.elementor-element-f32f601 > .e-n-accordion > .e-n-accordion-item > .e-n-accordion-item-title > .e-n-accordion-item-title-header ) > .e-n-accordion-item-title-text{line-height:1.2em;}.elementor-8 .elementor-element.elementor-element-1da5c43{--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:30px;--padding-bottom:030px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-35f5254{--justify-content:space-around;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-8 .elementor-element.elementor-element-b6b3efd .elementor-heading-title{font-size:25px;line-height:1em;}.elementor-8 .elementor-element.elementor-element-de3f0d0 .elementor-icon{font-size:20px;}.elementor-8 .elementor-element.elementor-element-de3f0d0 .elementor-icon-box-title, .elementor-8 .elementor-element.elementor-element-de3f0d0 .elementor-icon-box-title a{font-size:16px;}.elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-posts-container .elementor-post__thumbnail{padding-bottom:calc( 0.5 * 100% );}.elementor-8 .elementor-element.elementor-element-42fa8e6:after{content:"0.5";}.elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-post__thumbnail__link{width:100%;}.elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-post__title, .elementor-8 .elementor-element.elementor-element-42fa8e6 .elementor-post__title a{font-size:25px;}}/* Start custom CSS for icon-box, class: .elementor-element-251df3a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7e12304 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-228fd8c */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9463e56 */.elementor-8 .elementor-element.elementor-element-9463e56 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-9463e56::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-9463e56::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-9463e56:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-9463e56 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-9463e56:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-9463e56:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-47d5cb1 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1a344ba */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bcbc594 */.elementor-8 .elementor-element.elementor-element-bcbc594 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-bcbc594::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-bcbc594::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-bcbc594:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-bcbc594 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-5dc3b93 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5dd0a1f */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67b78ec */.elementor-8 .elementor-element.elementor-element-67b78ec { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-67b78ec::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-67b78ec::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-67b78ec:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-67b78ec .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7379a9e */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-883fcdb */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca4cc01 */.elementor-8 .elementor-element.elementor-element-ca4cc01 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-ca4cc01::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-ca4cc01::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-ca4cc01:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-ca4cc01 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3814ad7 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-613dce1 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-36cfffb */.elementor-8 .elementor-element.elementor-element-36cfffb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-36cfffb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-36cfffb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-36cfffb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-36cfffb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-a4f7f56 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-589db47 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fc883c0 */custom-card { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-fc883c0::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(180deg, #e6e6e6, #b4b4b4, #ffffff,#e6e6e6); background-size: 350% 350%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-fc883c0::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-fc883c0:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-fc883c0 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-f07a3f0 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4419067 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-74700cb */.elementor-8 .elementor-element.elementor-element-74700cb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-74700cb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-74700cb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-74700cb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-74700cb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-74700cb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-74700cb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-bbb693f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ff1a1a3 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c093ed3 */.elementor-8 .elementor-element.elementor-element-c093ed3 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-c093ed3::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-c093ed3::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-c093ed3:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-c093ed3 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7e12304 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-228fd8c */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9463e56 */.elementor-8 .elementor-element.elementor-element-9463e56 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-9463e56::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-9463e56::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-9463e56:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-9463e56 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-9463e56:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-9463e56:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-47d5cb1 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1a344ba */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bcbc594 */.elementor-8 .elementor-element.elementor-element-bcbc594 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-bcbc594::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-bcbc594::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-bcbc594:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-bcbc594 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-5dc3b93 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5dd0a1f */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67b78ec */.elementor-8 .elementor-element.elementor-element-67b78ec { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-67b78ec::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-67b78ec::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-67b78ec:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-67b78ec .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7379a9e */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-883fcdb */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca4cc01 */.elementor-8 .elementor-element.elementor-element-ca4cc01 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-ca4cc01::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-ca4cc01::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-ca4cc01:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-ca4cc01 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3814ad7 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-613dce1 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-36cfffb */.elementor-8 .elementor-element.elementor-element-36cfffb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-36cfffb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-36cfffb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-36cfffb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-36cfffb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-a4f7f56 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-589db47 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fc883c0 */custom-card { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-fc883c0::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(180deg, #e6e6e6, #b4b4b4, #ffffff,#e6e6e6); background-size: 350% 350%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-fc883c0::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-fc883c0:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-fc883c0 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-f07a3f0 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4419067 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-74700cb */.elementor-8 .elementor-element.elementor-element-74700cb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-74700cb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-74700cb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-74700cb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-74700cb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-74700cb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-74700cb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-bbb693f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ff1a1a3 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c093ed3 */.elementor-8 .elementor-element.elementor-element-c093ed3 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-c093ed3::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-c093ed3::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-c093ed3:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-c093ed3 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7e12304 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-228fd8c */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9463e56 */.elementor-8 .elementor-element.elementor-element-9463e56 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-9463e56::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-9463e56::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-9463e56:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-9463e56 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-9463e56:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-9463e56:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-47d5cb1 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1a344ba */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bcbc594 */.elementor-8 .elementor-element.elementor-element-bcbc594 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-bcbc594::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-bcbc594::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-bcbc594:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-bcbc594 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-5dc3b93 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5dd0a1f */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67b78ec */.elementor-8 .elementor-element.elementor-element-67b78ec { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-67b78ec::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-67b78ec::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-67b78ec:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-67b78ec .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7379a9e */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-883fcdb */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca4cc01 */.elementor-8 .elementor-element.elementor-element-ca4cc01 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-ca4cc01::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-ca4cc01::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-ca4cc01:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-ca4cc01 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3814ad7 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-613dce1 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-36cfffb */.elementor-8 .elementor-element.elementor-element-36cfffb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-36cfffb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-36cfffb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-36cfffb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-36cfffb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-a4f7f56 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-589db47 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fc883c0 */custom-card { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-fc883c0::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(180deg, #e6e6e6, #b4b4b4, #ffffff,#e6e6e6); background-size: 350% 350%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-fc883c0::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-fc883c0:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-fc883c0 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-f07a3f0 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4419067 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-74700cb */.elementor-8 .elementor-element.elementor-element-74700cb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-74700cb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-74700cb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-74700cb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-74700cb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-74700cb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-74700cb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-bbb693f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ff1a1a3 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c093ed3 */.elementor-8 .elementor-element.elementor-element-c093ed3 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-c093ed3::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-c093ed3::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-c093ed3:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-c093ed3 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7e12304 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-228fd8c */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9463e56 */.elementor-8 .elementor-element.elementor-element-9463e56 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-9463e56::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-9463e56::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-9463e56:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-9463e56 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-9463e56:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-9463e56:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-47d5cb1 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1a344ba */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bcbc594 */.elementor-8 .elementor-element.elementor-element-bcbc594 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-bcbc594::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-bcbc594::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-bcbc594:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-bcbc594 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-5dc3b93 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5dd0a1f */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67b78ec */.elementor-8 .elementor-element.elementor-element-67b78ec { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-67b78ec::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-67b78ec::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-67b78ec:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-67b78ec .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7379a9e */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-883fcdb */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca4cc01 */.elementor-8 .elementor-element.elementor-element-ca4cc01 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-ca4cc01::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-ca4cc01::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-ca4cc01:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-ca4cc01 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3814ad7 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-613dce1 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-36cfffb */.elementor-8 .elementor-element.elementor-element-36cfffb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-36cfffb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-36cfffb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-36cfffb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-36cfffb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-a4f7f56 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-589db47 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fc883c0 */custom-card { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-fc883c0::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(180deg, #e6e6e6, #b4b4b4, #ffffff,#e6e6e6); background-size: 350% 350%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-fc883c0::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-fc883c0:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-fc883c0 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-f07a3f0 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4419067 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-74700cb */.elementor-8 .elementor-element.elementor-element-74700cb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-74700cb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-74700cb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-74700cb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-74700cb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-74700cb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-74700cb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-bbb693f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ff1a1a3 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c093ed3 */.elementor-8 .elementor-element.elementor-element-c093ed3 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-c093ed3::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-c093ed3::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-c093ed3:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-c093ed3 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7e12304 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-228fd8c */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9463e56 */.elementor-8 .elementor-element.elementor-element-9463e56 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-9463e56::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-9463e56::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-9463e56:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-9463e56 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-9463e56:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-9463e56:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-47d5cb1 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1a344ba */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bcbc594 */.elementor-8 .elementor-element.elementor-element-bcbc594 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-bcbc594::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-bcbc594::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-bcbc594:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-bcbc594 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-5dc3b93 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5dd0a1f */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67b78ec */.elementor-8 .elementor-element.elementor-element-67b78ec { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-67b78ec::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-67b78ec::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-67b78ec:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-67b78ec .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7379a9e */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-883fcdb */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca4cc01 */.elementor-8 .elementor-element.elementor-element-ca4cc01 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-ca4cc01::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-ca4cc01::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-ca4cc01:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-ca4cc01 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3814ad7 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-613dce1 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-36cfffb */.elementor-8 .elementor-element.elementor-element-36cfffb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-36cfffb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-36cfffb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-36cfffb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-36cfffb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-a4f7f56 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-589db47 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fc883c0 */custom-card { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-fc883c0::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(180deg, #e6e6e6, #b4b4b4, #ffffff,#e6e6e6); background-size: 350% 350%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-fc883c0::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-fc883c0:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-fc883c0 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-f07a3f0 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4419067 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-74700cb */.elementor-8 .elementor-element.elementor-element-74700cb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-74700cb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-74700cb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-74700cb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-74700cb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-74700cb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-74700cb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-bbb693f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ff1a1a3 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c093ed3 */.elementor-8 .elementor-element.elementor-element-c093ed3 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-c093ed3::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-c093ed3::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-c093ed3:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-c093ed3 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7e12304 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-228fd8c */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9463e56 */.elementor-8 .elementor-element.elementor-element-9463e56 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-9463e56::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-9463e56::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-9463e56:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-9463e56 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-9463e56:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-9463e56:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-47d5cb1 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1a344ba */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bcbc594 */.elementor-8 .elementor-element.elementor-element-bcbc594 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-bcbc594::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-bcbc594::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-bcbc594:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-bcbc594 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-5dc3b93 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5dd0a1f */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67b78ec */.elementor-8 .elementor-element.elementor-element-67b78ec { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-67b78ec::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-67b78ec::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-67b78ec:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-67b78ec .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7379a9e */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-883fcdb */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca4cc01 */.elementor-8 .elementor-element.elementor-element-ca4cc01 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-ca4cc01::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-ca4cc01::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-ca4cc01:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-ca4cc01 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3814ad7 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-613dce1 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-36cfffb */.elementor-8 .elementor-element.elementor-element-36cfffb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-36cfffb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-36cfffb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-36cfffb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-36cfffb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-a4f7f56 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-589db47 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fc883c0 */custom-card { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-fc883c0::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(180deg, #e6e6e6, #b4b4b4, #ffffff,#e6e6e6); background-size: 350% 350%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-fc883c0::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-fc883c0:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-fc883c0 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-f07a3f0 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4419067 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-74700cb */.elementor-8 .elementor-element.elementor-element-74700cb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-74700cb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-74700cb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-74700cb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-74700cb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-74700cb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-74700cb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-bbb693f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ff1a1a3 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c093ed3 */.elementor-8 .elementor-element.elementor-element-c093ed3 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-c093ed3::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-c093ed3::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-c093ed3:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-c093ed3 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7e12304 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-228fd8c */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9463e56 */.elementor-8 .elementor-element.elementor-element-9463e56 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-9463e56::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-9463e56::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-9463e56:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-9463e56 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-9463e56:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-9463e56:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-47d5cb1 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1a344ba */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bcbc594 */.elementor-8 .elementor-element.elementor-element-bcbc594 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-bcbc594::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-bcbc594::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-bcbc594:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-bcbc594 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-5dc3b93 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5dd0a1f */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67b78ec */.elementor-8 .elementor-element.elementor-element-67b78ec { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-67b78ec::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-67b78ec::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-67b78ec:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-67b78ec .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7379a9e */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-883fcdb */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca4cc01 */.elementor-8 .elementor-element.elementor-element-ca4cc01 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-ca4cc01::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-ca4cc01::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-ca4cc01:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-ca4cc01 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3814ad7 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-613dce1 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-36cfffb */.elementor-8 .elementor-element.elementor-element-36cfffb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-36cfffb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-36cfffb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-36cfffb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-36cfffb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-a4f7f56 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-589db47 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fc883c0 */custom-card { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-fc883c0::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(180deg, #e6e6e6, #b4b4b4, #ffffff,#e6e6e6); background-size: 350% 350%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-fc883c0::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-fc883c0:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-fc883c0 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-f07a3f0 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4419067 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-74700cb */.elementor-8 .elementor-element.elementor-element-74700cb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-74700cb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-74700cb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-74700cb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-74700cb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-74700cb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-74700cb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-bbb693f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ff1a1a3 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c093ed3 */.elementor-8 .elementor-element.elementor-element-c093ed3 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-c093ed3::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-c093ed3::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-c093ed3:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-c093ed3 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7e12304 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-228fd8c */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9463e56 */.elementor-8 .elementor-element.elementor-element-9463e56 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-9463e56::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-9463e56::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-9463e56:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-9463e56 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-9463e56:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-9463e56:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-47d5cb1 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1a344ba */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bcbc594 */.elementor-8 .elementor-element.elementor-element-bcbc594 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-bcbc594::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-bcbc594::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-bcbc594:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-bcbc594 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-5dc3b93 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5dd0a1f */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67b78ec */.elementor-8 .elementor-element.elementor-element-67b78ec { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-67b78ec::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-67b78ec::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-67b78ec:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-67b78ec .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7379a9e */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-883fcdb */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca4cc01 */.elementor-8 .elementor-element.elementor-element-ca4cc01 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-ca4cc01::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-ca4cc01::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-ca4cc01:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-ca4cc01 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3814ad7 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-613dce1 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-36cfffb */.elementor-8 .elementor-element.elementor-element-36cfffb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-36cfffb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-36cfffb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-36cfffb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-36cfffb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-a4f7f56 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-589db47 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fc883c0 */custom-card { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-fc883c0::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(180deg, #e6e6e6, #b4b4b4, #ffffff,#e6e6e6); background-size: 350% 350%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-fc883c0::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-fc883c0:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-fc883c0 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-f07a3f0 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4419067 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-74700cb */.elementor-8 .elementor-element.elementor-element-74700cb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-74700cb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-74700cb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-74700cb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-74700cb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-74700cb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-74700cb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-bbb693f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ff1a1a3 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c093ed3 */.elementor-8 .elementor-element.elementor-element-c093ed3 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-c093ed3::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-c093ed3::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-c093ed3:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-c093ed3 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7e12304 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-228fd8c */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9463e56 */.elementor-8 .elementor-element.elementor-element-9463e56 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-9463e56::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-9463e56::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-9463e56:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-9463e56 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-9463e56:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-9463e56:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-47d5cb1 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-1a344ba */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-bcbc594 */.elementor-8 .elementor-element.elementor-element-bcbc594 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-bcbc594::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-bcbc594::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-bcbc594:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-bcbc594 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-bcbc594:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-5dc3b93 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-5dd0a1f */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-67b78ec */.elementor-8 .elementor-element.elementor-element-67b78ec { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-67b78ec::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-67b78ec::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-67b78ec:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-67b78ec .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-67b78ec:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-7379a9e */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-883fcdb */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-ca4cc01 */.elementor-8 .elementor-element.elementor-element-ca4cc01 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-ca4cc01::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-ca4cc01::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-ca4cc01:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-ca4cc01 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-ca4cc01:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3814ad7 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-613dce1 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-36cfffb */.elementor-8 .elementor-element.elementor-element-36cfffb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-36cfffb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-36cfffb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-36cfffb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-36cfffb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-36cfffb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-a4f7f56 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-589db47 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-fc883c0 */custom-card { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-fc883c0::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(180deg, #e6e6e6, #b4b4b4, #ffffff,#e6e6e6); background-size: 350% 350%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-fc883c0::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-fc883c0:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-fc883c0 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-fc883c0:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-f07a3f0 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-4419067 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-74700cb */.elementor-8 .elementor-element.elementor-element-74700cb { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-74700cb::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-74700cb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-74700cb:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-74700cb .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-74700cb:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-74700cb:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-bbb693f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-ff1a1a3 */.book-btn:hover span { margin-left: 0px ; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-c093ed3 */.elementor-8 .elementor-element.elementor-element-c093ed3 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; background-color: #ffffff; transition: background-image 0.5s ease-in-out; } /* Gradient border */ .elementor-8 .elementor-element.elementor-element-c093ed3::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(120deg, #e6e6e6, #b4b4b4, #ffffff); background-size: 300% 300%; animation: borderScroll 10s ease infinite; z-index: 0; /* Keep it behind everything */ border-radius: 22px; } /* Image on hover (initial state) */ .elementor-8 .elementor-element.elementor-element-c093ed3::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('https://bakkahtransport.com/wp-content/uploads/2025/07/persepective-1.png'); /* 🔁 Replace with your image */ background-size: cover; background-position: center bottom; opacity: 0; transform: translateY(40px); /* Slide effect */ transition: opacity 0.3s ease, transform 0.5s ease; z-index: 2; /* ✅ Make sure it's above everything */ pointer-events: none; /* So it doesn’t block hover */ } /* On hover – show image above */ .elementor-8 .elementor-element.elementor-element-c093ed3:hover::after { opacity: 1; transform: translateY(0); } /* Column (Card) */ .custom-card { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(120deg, #d9d9d9, #ffffff, #e6e6e6); background-size: 300% 300%; animation: backgroundScroll 6s ease infinite; transition: background 0.5s ease-in-out; } /* Button inside the column */ .custom-card .my-button { transition: transform 0.5s ease, opacity 0.5s ease; } /* When hovering on the column, move & hide the button */ .custom-card:hover .my-button { transform: translateY(40px); /* move down */ opacity: 0; /* hide */ } /* Background gradient animation */ @keyframes backgroundScroll { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .elementor-8 .elementor-element.elementor-element-c093ed3 .car-img { transition: transform 0.5s ease; } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .car-img { transform: translateY(50px); } .elementor-8 .elementor-element.elementor-element-c093ed3:hover .my-icon { transform: scale(1.1); /* 20% grow */ opacity: 0; /* Fade out */ transition: transform 0.5s ease, opacity 0.5s ease; } .my-icon { transition: transform 0.5s ease, opacity 0.5s ease; } /* Initial hidden state */ .custom-card .list1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of bg image */ } /* On hover – slide in from left */ .custom-card:hover .list1 { opacity: 1; transform: translateX(0); } /* Initial hidden state for button1 */ .custom-card .button1 { opacity: 0; transform: translateX(-30px); transition: all 0.5s ease; position: relative; z-index: 3; /* make sure it stays on top of background */ } /* On hover – slide in from left */ .custom-card:hover .button1 { opacity: 1; transform: translateX(0); } .custom-card .image1 { position: absolute; top: 30%; left: 0%; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateY(-40px); /* start 40px upar */ transition: opacity 0.5s ease, transform 0.5s ease; z-index: 2; /* Make sure it's above background but below content */ pointer-events: none; } /* On hover – image fades in and moves down 40px */ .custom-card:hover .image1 { opacity: 1; transform: translateY(0); } .icon1 { position: relative; opacity: 0; transform: translateX(60px); /* Start 60px right side */ transition: all 0.5s ease; } /* On card hover – move icon to left (original position) and show */ .custom-card:hover .icon1 { opacity: 1; transform: translateX(0); /* Move to left (back to place) */ }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-10eef0f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6bb1baf */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-b4bfaf2 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3af8075 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-2dd1b0a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b02ab65 */.gred1 { position: relative; border-radius: 20px; overflow: hidden; /* Gradient ko box ke andar limit karne ke liye */ background: url('https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png') center/cover no-repeat; } /* Gradient overlay */ .gred1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF, #E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; pointer-events: none; /* Taake click image pe ho */ } @keyframes cornerGradient { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d4b0265 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-209bf61 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-408d004 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18d1df9 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3303c17 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53f2899 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-9b805ac */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f84f839 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3bacb42 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d508bfd */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-10eef0f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6bb1baf */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-b4bfaf2 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3af8075 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-2dd1b0a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b02ab65 */.gred1 { position: relative; border-radius: 20px; overflow: hidden; /* Gradient ko box ke andar limit karne ke liye */ background: url('https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png') center/cover no-repeat; } /* Gradient overlay */ .gred1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF, #E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; pointer-events: none; /* Taake click image pe ho */ } @keyframes cornerGradient { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d4b0265 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-209bf61 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-408d004 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18d1df9 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3303c17 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53f2899 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-9b805ac */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f84f839 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3bacb42 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d508bfd */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-10eef0f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6bb1baf */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-b4bfaf2 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3af8075 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-2dd1b0a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b02ab65 */.gred1 { position: relative; border-radius: 20px; overflow: hidden; /* Gradient ko box ke andar limit karne ke liye */ background: url('https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png') center/cover no-repeat; } /* Gradient overlay */ .gred1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF, #E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; pointer-events: none; /* Taake click image pe ho */ } @keyframes cornerGradient { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d4b0265 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-209bf61 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-408d004 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18d1df9 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3303c17 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53f2899 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-9b805ac */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f84f839 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3bacb42 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d508bfd */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-10eef0f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6bb1baf */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-b4bfaf2 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3af8075 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-2dd1b0a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b02ab65 */.gred1 { position: relative; border-radius: 20px; overflow: hidden; /* Gradient ko box ke andar limit karne ke liye */ background: url('https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png') center/cover no-repeat; } /* Gradient overlay */ .gred1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF, #E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; pointer-events: none; /* Taake click image pe ho */ } @keyframes cornerGradient { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d4b0265 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-209bf61 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-408d004 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18d1df9 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3303c17 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53f2899 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-9b805ac */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f84f839 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3bacb42 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d508bfd */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-10eef0f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6bb1baf */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-b4bfaf2 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3af8075 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-2dd1b0a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b02ab65 */.gred1 { position: relative; border-radius: 20px; overflow: hidden; /* Gradient ko box ke andar limit karne ke liye */ background: url('https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png') center/cover no-repeat; } /* Gradient overlay */ .gred1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF, #E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; pointer-events: none; /* Taake click image pe ho */ } @keyframes cornerGradient { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d4b0265 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-209bf61 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-408d004 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18d1df9 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3303c17 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53f2899 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-9b805ac */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f84f839 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3bacb42 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d508bfd */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-10eef0f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6bb1baf */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-b4bfaf2 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3af8075 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-2dd1b0a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b02ab65 */.gred1 { position: relative; border-radius: 20px; overflow: hidden; /* Gradient ko box ke andar limit karne ke liye */ background: url('https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png') center/cover no-repeat; } /* Gradient overlay */ .gred1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF, #E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; pointer-events: none; /* Taake click image pe ho */ } @keyframes cornerGradient { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d4b0265 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-209bf61 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-408d004 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18d1df9 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3303c17 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53f2899 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-9b805ac */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f84f839 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3bacb42 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d508bfd */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-10eef0f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6bb1baf */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-b4bfaf2 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3af8075 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-2dd1b0a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b02ab65 */.gred1 { position: relative; border-radius: 20px; overflow: hidden; /* Gradient ko box ke andar limit karne ke liye */ background: url('https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png') center/cover no-repeat; } /* Gradient overlay */ .gred1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF, #E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; pointer-events: none; /* Taake click image pe ho */ } @keyframes cornerGradient { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d4b0265 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-209bf61 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-408d004 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18d1df9 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3303c17 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53f2899 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-9b805ac */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f84f839 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3bacb42 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d508bfd */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-10eef0f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6bb1baf */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-b4bfaf2 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3af8075 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-2dd1b0a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b02ab65 */.gred1 { position: relative; border-radius: 20px; overflow: hidden; /* Gradient ko box ke andar limit karne ke liye */ background: url('https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png') center/cover no-repeat; } /* Gradient overlay */ .gred1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF, #E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; pointer-events: none; /* Taake click image pe ho */ } @keyframes cornerGradient { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d4b0265 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-209bf61 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-408d004 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18d1df9 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3303c17 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53f2899 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-9b805ac */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f84f839 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3bacb42 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d508bfd */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-10eef0f */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-6bb1baf */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-b4bfaf2 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-3af8075 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-2dd1b0a */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-b02ab65 */.gred1 { position: relative; border-radius: 20px; overflow: hidden; /* Gradient ko box ke andar limit karne ke liye */ background: url('https://bakkahtransport.com/wp-content/uploads/2025/08/Group-23-1.png') center/cover no-repeat; } /* Gradient overlay */ .gred1::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF, #E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; pointer-events: none; /* Taake click image pe ho */ } @keyframes cornerGradient { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-d4b0265 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-209bf61 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-408d004 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-18d1df9 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3303c17 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-53f2899 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-9b805ac */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-f84f839 */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for icon-box, class: .elementor-element-3bacb42 */.whatsapp-button { position: relative; display: inline-flex; align-items: center; padding: 12px 20px; background-color: #1c1c1c; color: white; border: 2px solid #00e676; border-radius: 30px; font-weight: bold; font-size: 16px; cursor: pointer; gap: 10px; overflow: hidden; z-index: 1; transition: background-color 0.3s ease; } .whatsapp-button .icon { background-color: #25d366; color: white; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; } .whatsapp-button .text { z-index: 2; } /* Hover animation from icon */ .whatsapp-button::before { content: ''; position: absolute; top: 50%; left: 28px; /* Position matching the icon */ transform: translate(-50%, -50%) scale(0); width: 20px; height: 20px; background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 20%, transparent 80%); border-radius: 50%; opacity: 0; transition: transform 0.6s ease, opacity 0.6s ease; z-index: 1; } .whatsapp-button:hover::before { transform: translate(-50%, -50%) scale(10); /* Expands to cover */ opacity: 1; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d508bfd */.gred1 { position: relative; border-radius: 20px; background: linear-gradient(45deg, #B4B4B4, #FFFFFF,#E6E6E6); background-size: 300% 300%; animation: cornerGradient 8s ease infinite; } /* Animation for 4-corner movement */ @keyframes cornerGradient { 0% { background-position: 0% 0%; /* top-left */ } 25% { background-position: 100% 0%; /* top-right */ } 50% { background-position: 100% 100%; /* bottom-right */ } 75% { background-position: 0% 100%; /* bottom-left */ } 100% { background-position: 0% 0%; /* back to top-left */ } }/* End custom CSS */ /* Start custom CSS for posts, class: .elementor-element-42fa8e6 */.elementor-post__title a::after { content: "\f35a"; /* Arrow circle right (outline) */ font-family: "Font Awesome 5 Free"; font-weight: 400; /* 400 for regular/outline */ margin-left: 8px; display: inline-block; color: black; /* border color */ font-size: 20px; vertical-align: middle; transform: rotate(320deg); /* 310 degree rotation */ }}/* End custom CSS */