.elementor-23 .elementor-element.elementor-element-fb58160{--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;--overlay-opacity:0.5;--margin-top:-63px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-23 .elementor-element.elementor-element-fb58160:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-fb58160 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://ayanautoclinic.com/wp-content/uploads/2026/05/WhatsApp-Image-2026-05-23-at-10.26.24-AM.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-23 .elementor-element.elementor-element-fb58160::before, .elementor-23 .elementor-element.elementor-element-fb58160 > .elementor-background-video-container::before, .elementor-23 .elementor-element.elementor-element-fb58160 > .e-con-inner > .elementor-background-video-container::before, .elementor-23 .elementor-element.elementor-element-fb58160 > .elementor-background-slideshow::before, .elementor-23 .elementor-element.elementor-element-fb58160 > .e-con-inner > .elementor-background-slideshow::before, .elementor-23 .elementor-element.elementor-element-fb58160 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.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-23 .elementor-element.elementor-element-8dfc7a5{margin:65px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-23 .elementor-element.elementor-element-8dfc7a5 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:42px;font-weight:800;color:#FFCC29;}.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-23 .elementor-element.elementor-element-6b44be9{text-align:center;font-family:"Roboto", Sans-serif;font-size:22px;font-weight:500;color:#FFFFFF;}.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-23 .elementor-element.elementor-element-ce5c9d3{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 65px) 0px;}.elementor-23 .elementor-element.elementor-element-21f4112{--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-23 .elementor-element.elementor-element-21f4112:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-21f4112 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-23 .elementor-element.elementor-element-b61f0b1{--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;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-widget-image-box .elementor-image-box-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-widget-image-box:has(:hover) .elementor-image-box-title, .elementor-widget-image-box:has(:focus) .elementor-image-box-title{color:var( --e-global-color-primary );}.elementor-widget-image-box .elementor-image-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-23 .elementor-element.elementor-element-8567b77{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-23 .elementor-element.elementor-element-8567b77.elementor-position-right .elementor-image-box-img{margin-left:18px;}.elementor-23 .elementor-element.elementor-element-8567b77.elementor-position-left .elementor-image-box-img{margin-right:18px;}.elementor-23 .elementor-element.elementor-element-8567b77.elementor-position-top .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-8567b77 .elementor-image-box-title{margin-bottom:10px;font-family:"Roboto", Sans-serif;font-size:30px;font-weight:600;color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-8567b77 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-23 .elementor-element.elementor-element-8567b77 .elementor-image-box-img img{border-radius:20px;transition-duration:0.3s;}.elementor-23 .elementor-element.elementor-element-8567b77:has(:hover) .elementor-image-box-title, .elementor-23 .elementor-element.elementor-element-8567b77:has(:focus) .elementor-image-box-title{color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-8567b77 .elementor-image-box-description{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-670666d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-23 .elementor-element.elementor-element-670666d.elementor-position-right .elementor-image-box-img{margin-left:18px;}.elementor-23 .elementor-element.elementor-element-670666d.elementor-position-left .elementor-image-box-img{margin-right:18px;}.elementor-23 .elementor-element.elementor-element-670666d.elementor-position-top .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-670666d .elementor-image-box-title{margin-bottom:10px;font-family:"Roboto", Sans-serif;font-size:30px;font-weight:600;color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-670666d .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-23 .elementor-element.elementor-element-670666d .elementor-image-box-img img{border-radius:20px;transition-duration:0.3s;}.elementor-23 .elementor-element.elementor-element-670666d:has(:hover) .elementor-image-box-title, .elementor-23 .elementor-element.elementor-element-670666d:has(:focus) .elementor-image-box-title{color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-670666d .elementor-image-box-description{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-bfcd944{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-23 .elementor-element.elementor-element-bfcd944.elementor-position-right .elementor-image-box-img{margin-left:18px;}.elementor-23 .elementor-element.elementor-element-bfcd944.elementor-position-left .elementor-image-box-img{margin-right:18px;}.elementor-23 .elementor-element.elementor-element-bfcd944.elementor-position-top .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-bfcd944 .elementor-image-box-title{margin-bottom:10px;font-family:"Roboto", Sans-serif;font-size:30px;font-weight:600;color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-bfcd944 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-23 .elementor-element.elementor-element-bfcd944 .elementor-image-box-img img{border-radius:20px;transition-duration:0.3s;}.elementor-23 .elementor-element.elementor-element-bfcd944:has(:hover) .elementor-image-box-title, .elementor-23 .elementor-element.elementor-element-bfcd944:has(:focus) .elementor-image-box-title{color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-bfcd944 .elementor-image-box-description{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-7330113{--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-23 .elementor-element.elementor-element-7330113:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-7330113 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-23 .elementor-element.elementor-element-8757949{--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;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-23 .elementor-element.elementor-element-ebdf622{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-23 .elementor-element.elementor-element-ebdf622.elementor-position-right .elementor-image-box-img{margin-left:18px;}.elementor-23 .elementor-element.elementor-element-ebdf622.elementor-position-left .elementor-image-box-img{margin-right:18px;}.elementor-23 .elementor-element.elementor-element-ebdf622.elementor-position-top .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-ebdf622 .elementor-image-box-title{margin-bottom:10px;font-family:"Roboto", Sans-serif;font-size:30px;font-weight:600;color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-ebdf622 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-23 .elementor-element.elementor-element-ebdf622 .elementor-image-box-img img{border-radius:20px;transition-duration:0.3s;}.elementor-23 .elementor-element.elementor-element-ebdf622:has(:hover) .elementor-image-box-title, .elementor-23 .elementor-element.elementor-element-ebdf622:has(:focus) .elementor-image-box-title{color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-ebdf622 .elementor-image-box-description{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-7358ee2{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-23 .elementor-element.elementor-element-7358ee2.elementor-position-right .elementor-image-box-img{margin-left:18px;}.elementor-23 .elementor-element.elementor-element-7358ee2.elementor-position-left .elementor-image-box-img{margin-right:18px;}.elementor-23 .elementor-element.elementor-element-7358ee2.elementor-position-top .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-7358ee2 .elementor-image-box-title{margin-bottom:10px;font-family:"Roboto", Sans-serif;font-size:30px;font-weight:600;color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-7358ee2 .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-23 .elementor-element.elementor-element-7358ee2 .elementor-image-box-img img{border-radius:20px;transition-duration:0.3s;}.elementor-23 .elementor-element.elementor-element-7358ee2:has(:hover) .elementor-image-box-title, .elementor-23 .elementor-element.elementor-element-7358ee2:has(:focus) .elementor-image-box-title{color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-7358ee2 .elementor-image-box-description{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-509a82b{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-23 .elementor-element.elementor-element-509a82b.elementor-position-right .elementor-image-box-img{margin-left:18px;}.elementor-23 .elementor-element.elementor-element-509a82b.elementor-position-left .elementor-image-box-img{margin-right:18px;}.elementor-23 .elementor-element.elementor-element-509a82b.elementor-position-top .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-509a82b .elementor-image-box-title{margin-bottom:10px;font-family:"Roboto", Sans-serif;font-size:30px;font-weight:600;color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-509a82b .elementor-image-box-wrapper .elementor-image-box-img{width:100%;}.elementor-23 .elementor-element.elementor-element-509a82b .elementor-image-box-img img{border-radius:20px;transition-duration:0.3s;}.elementor-23 .elementor-element.elementor-element-509a82b:has(:hover) .elementor-image-box-title, .elementor-23 .elementor-element.elementor-element-509a82b:has(:focus) .elementor-image-box-title{color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-509a82b .elementor-image-box-description{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-212c93d{--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-23 .elementor-element.elementor-element-212c93d:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-212c93d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#040303;}.elementor-23 .elementor-element.elementor-element-df29e46{margin:65px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-23 .elementor-element.elementor-element-df29e46 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:42px;font-weight:800;color:#FFCC29;}.elementor-23 .elementor-element.elementor-element-1546d65{text-align:center;font-family:"Roboto", Sans-serif;font-size:22px;font-weight:400;color:#FFFFFF;}.elementor-23 .elementor-element.elementor-element-8039949{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 50px) 0px;}@media(max-width:767px){.elementor-23 .elementor-element.elementor-element-8567b77 .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-670666d .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-bfcd944 .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-ebdf622 .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-7358ee2 .elementor-image-box-img{margin-bottom:18px;}.elementor-23 .elementor-element.elementor-element-509a82b .elementor-image-box-img{margin-bottom:18px;}}@media(min-width:1025px){.elementor-23 .elementor-element.elementor-element-fb58160:not(.elementor-motion-effects-element-type-background), .elementor-23 .elementor-element.elementor-element-fb58160 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for image-box, class: .elementor-element-8567b77 *//* ======================================== PREMIUM SERVICE BOX CSS ======================================== */ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-8567b77{ background:#171717; border-radius:24px; padding:20px 15px; margin:15px; position:relative; overflow:hidden; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: all .45s ease; backdrop-filter:blur(10px); } /* ======================================== BOTTOM YELLOW LINE EFFECT ======================================== */ .service-box::after, .service-card::after, .elementor-23 .elementor-element.elementor-element-8567b77::after{ content:''; position:absolute; left:0; bottom:0; width:0%; height:4px; background:#F4B400; transition:.45s ease; border-radius:20px; } /* Hover Bottom Line */ .service-box:hover::after, .service-card:hover::after, .elementor-23 .elementor-element.elementor-element-8567b77:hover::after{ width:100%; } /* ======================================== ADVANCED HOVER EFFECT ======================================== */ .service-box:hover, .service-card:hover, .elementor-23 .elementor-element.elementor-element-8567b77:hover{ transform: translateY(-12px) scale(1.02); border-color: rgba(244,180,0,0.4); box-shadow: 0 25px 50px rgba(0,0,0,0.45), 0 0 25px rgba(244,180,0,0.15); } /* ======================================== GOLDEN GLOW EFFECT ======================================== */ .service-box::before, .service-card::before, .elementor-23 .elementor-element.elementor-element-8567b77::before{ content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient( rgba(244,180,0,0.05), transparent 60%); opacity:0; transition:.5s ease; } /* Hover Glow */ .service-box:hover::before, .service-card:hover::before, .elementor-23 .elementor-element.elementor-element-8567b77:hover::before{ opacity:1; } /* ======================================== ICON ANIMATION ======================================== */ .service-box .elementor-icon, .service-card .elementor-icon, .elementor-23 .elementor-element.elementor-element-8567b77 .elementor-icon{ margin-top:10px; margin-bottom:15px; transition:.45s ease; } /* Icon Hover */ .service-box:hover .elementor-icon, .service-card:hover .elementor-icon, .elementor-23 .elementor-element.elementor-element-8567b77:hover .elementor-icon{ transform: rotate(8deg) translateY(-5px) scale(1.08); } /* ======================================== HEADING EFFECT ======================================== */ .service-box h3, .service-card h3, .elementor-23 .elementor-element.elementor-element-8567b77 h3{ margin-bottom:15px; transition:.3s ease; } /* Hover Heading */ .service-box:hover h3, .service-card:hover h3, .elementor-23 .elementor-element.elementor-element-8567b77:hover h3{ color:#F4B400; } /* ======================================== TEXT STYLING ======================================== */ .service-box p, .service-card p, .elementor-23 .elementor-element.elementor-element-8567b77 p{ color:#cfcfcf; line-height:1.9; } /* ======================================== IMAGE EFFECT ======================================== */ .service-box img, .service-card img, .elementor-23 .elementor-element.elementor-element-8567b77 img{ border-radius:18px; transition:.5s ease; } /* Hover Image */ .service-box:hover img, .service-card:hover img, .elementor-23 .elementor-element.elementor-element-8567b77:hover img{ transform:scale(1.06); } /* ======================================== MOBILE RESPONSIVE ======================================== */ @media(max-width:767px){ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-8567b77{ padding:30px 24px; margin:12px; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-670666d *//* ======================================== PREMIUM SERVICE BOX CSS ======================================== */ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-670666d{ background:#171717; border-radius:24px; padding:20px 15px; margin:15px; position:relative; overflow:hidden; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: all .45s ease; backdrop-filter:blur(10px); } /* ======================================== BOTTOM YELLOW LINE EFFECT ======================================== */ .service-box::after, .service-card::after, .elementor-23 .elementor-element.elementor-element-670666d::after{ content:''; position:absolute; left:0; bottom:0; width:0%; height:4px; background:#F4B400; transition:.45s ease; border-radius:20px; } /* Hover Bottom Line */ .service-box:hover::after, .service-card:hover::after, .elementor-23 .elementor-element.elementor-element-670666d:hover::after{ width:100%; } /* ======================================== ADVANCED HOVER EFFECT ======================================== */ .service-box:hover, .service-card:hover, .elementor-23 .elementor-element.elementor-element-670666d:hover{ transform: translateY(-12px) scale(1.02); border-color: rgba(244,180,0,0.4); box-shadow: 0 25px 50px rgba(0,0,0,0.45), 0 0 25px rgba(244,180,0,0.15); } /* ======================================== GOLDEN GLOW EFFECT ======================================== */ .service-box::before, .service-card::before, .elementor-23 .elementor-element.elementor-element-670666d::before{ content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient( rgba(244,180,0,0.05), transparent 60%); opacity:0; transition:.5s ease; } /* Hover Glow */ .service-box:hover::before, .service-card:hover::before, .elementor-23 .elementor-element.elementor-element-670666d:hover::before{ opacity:1; } /* ======================================== ICON ANIMATION ======================================== */ .service-box .elementor-icon, .service-card .elementor-icon, .elementor-23 .elementor-element.elementor-element-670666d .elementor-icon{ margin-top:10px; margin-bottom:15px; transition:.45s ease; } /* Icon Hover */ .service-box:hover .elementor-icon, .service-card:hover .elementor-icon, .elementor-23 .elementor-element.elementor-element-670666d:hover .elementor-icon{ transform: rotate(8deg) translateY(-5px) scale(1.08); } /* ======================================== HEADING EFFECT ======================================== */ .service-box h3, .service-card h3, .elementor-23 .elementor-element.elementor-element-670666d h3{ margin-bottom:15px; transition:.3s ease; } /* Hover Heading */ .service-box:hover h3, .service-card:hover h3, .elementor-23 .elementor-element.elementor-element-670666d:hover h3{ color:#F4B400; } /* ======================================== TEXT STYLING ======================================== */ .service-box p, .service-card p, .elementor-23 .elementor-element.elementor-element-670666d p{ color:#cfcfcf; line-height:1.9; } /* ======================================== IMAGE EFFECT ======================================== */ .service-box img, .service-card img, .elementor-23 .elementor-element.elementor-element-670666d img{ border-radius:18px; transition:.5s ease; } /* Hover Image */ .service-box:hover img, .service-card:hover img, .elementor-23 .elementor-element.elementor-element-670666d:hover img{ transform:scale(1.06); } /* ======================================== MOBILE RESPONSIVE ======================================== */ @media(max-width:767px){ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-670666d{ padding:30px 24px; margin:12px; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-bfcd944 *//* ======================================== PREMIUM SERVICE BOX CSS ======================================== */ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-bfcd944{ background:#171717; border-radius:24px; padding:20px 15px; margin:15px; position:relative; overflow:hidden; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: all .45s ease; backdrop-filter:blur(10px); } /* ======================================== BOTTOM YELLOW LINE EFFECT ======================================== */ .service-box::after, .service-card::after, .elementor-23 .elementor-element.elementor-element-bfcd944::after{ content:''; position:absolute; left:0; bottom:0; width:0%; height:4px; background:#F4B400; transition:.45s ease; border-radius:20px; } /* Hover Bottom Line */ .service-box:hover::after, .service-card:hover::after, .elementor-23 .elementor-element.elementor-element-bfcd944:hover::after{ width:100%; } /* ======================================== ADVANCED HOVER EFFECT ======================================== */ .service-box:hover, .service-card:hover, .elementor-23 .elementor-element.elementor-element-bfcd944:hover{ transform: translateY(-12px) scale(1.02); border-color: rgba(244,180,0,0.4); box-shadow: 0 25px 50px rgba(0,0,0,0.45), 0 0 25px rgba(244,180,0,0.15); } /* ======================================== GOLDEN GLOW EFFECT ======================================== */ .service-box::before, .service-card::before, .elementor-23 .elementor-element.elementor-element-bfcd944::before{ content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient( rgba(244,180,0,0.05), transparent 60%); opacity:0; transition:.5s ease; } /* Hover Glow */ .service-box:hover::before, .service-card:hover::before, .elementor-23 .elementor-element.elementor-element-bfcd944:hover::before{ opacity:1; } /* ======================================== ICON ANIMATION ======================================== */ .service-box .elementor-icon, .service-card .elementor-icon, .elementor-23 .elementor-element.elementor-element-bfcd944 .elementor-icon{ margin-top:10px; margin-bottom:15px; transition:.45s ease; } /* Icon Hover */ .service-box:hover .elementor-icon, .service-card:hover .elementor-icon, .elementor-23 .elementor-element.elementor-element-bfcd944:hover .elementor-icon{ transform: rotate(8deg) translateY(-5px) scale(1.08); } /* ======================================== HEADING EFFECT ======================================== */ .service-box h3, .service-card h3, .elementor-23 .elementor-element.elementor-element-bfcd944 h3{ margin-bottom:15px; transition:.3s ease; } /* Hover Heading */ .service-box:hover h3, .service-card:hover h3, .elementor-23 .elementor-element.elementor-element-bfcd944:hover h3{ color:#F4B400; } /* ======================================== TEXT STYLING ======================================== */ .service-box p, .service-card p, .elementor-23 .elementor-element.elementor-element-bfcd944 p{ color:#cfcfcf; line-height:1.9; } /* ======================================== IMAGE EFFECT ======================================== */ .service-box img, .service-card img, .elementor-23 .elementor-element.elementor-element-bfcd944 img{ border-radius:18px; transition:.5s ease; } /* Hover Image */ .service-box:hover img, .service-card:hover img, .elementor-23 .elementor-element.elementor-element-bfcd944:hover img{ transform:scale(1.06); } /* ======================================== MOBILE RESPONSIVE ======================================== */ @media(max-width:767px){ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-bfcd944{ padding:30px 24px; margin:12px; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-ebdf622 *//* ======================================== PREMIUM SERVICE BOX CSS ======================================== */ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-ebdf622{ background:#171717; border-radius:24px; padding:20px 15px; margin:15px; position:relative; overflow:hidden; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: all .45s ease; backdrop-filter:blur(10px); } /* ======================================== BOTTOM YELLOW LINE EFFECT ======================================== */ .service-box::after, .service-card::after, .elementor-23 .elementor-element.elementor-element-ebdf622::after{ content:''; position:absolute; left:0; bottom:0; width:0%; height:4px; background:#F4B400; transition:.45s ease; border-radius:20px; } /* Hover Bottom Line */ .service-box:hover::after, .service-card:hover::after, .elementor-23 .elementor-element.elementor-element-ebdf622:hover::after{ width:100%; } /* ======================================== ADVANCED HOVER EFFECT ======================================== */ .service-box:hover, .service-card:hover, .elementor-23 .elementor-element.elementor-element-ebdf622:hover{ transform: translateY(-12px) scale(1.02); border-color: rgba(244,180,0,0.4); box-shadow: 0 25px 50px rgba(0,0,0,0.45), 0 0 25px rgba(244,180,0,0.15); } /* ======================================== GOLDEN GLOW EFFECT ======================================== */ .service-box::before, .service-card::before, .elementor-23 .elementor-element.elementor-element-ebdf622::before{ content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient( rgba(244,180,0,0.05), transparent 60%); opacity:0; transition:.5s ease; } /* Hover Glow */ .service-box:hover::before, .service-card:hover::before, .elementor-23 .elementor-element.elementor-element-ebdf622:hover::before{ opacity:1; } /* ======================================== ICON ANIMATION ======================================== */ .service-box .elementor-icon, .service-card .elementor-icon, .elementor-23 .elementor-element.elementor-element-ebdf622 .elementor-icon{ margin-top:10px; margin-bottom:15px; transition:.45s ease; } /* Icon Hover */ .service-box:hover .elementor-icon, .service-card:hover .elementor-icon, .elementor-23 .elementor-element.elementor-element-ebdf622:hover .elementor-icon{ transform: rotate(8deg) translateY(-5px) scale(1.08); } /* ======================================== HEADING EFFECT ======================================== */ .service-box h3, .service-card h3, .elementor-23 .elementor-element.elementor-element-ebdf622 h3{ margin-bottom:15px; transition:.3s ease; } /* Hover Heading */ .service-box:hover h3, .service-card:hover h3, .elementor-23 .elementor-element.elementor-element-ebdf622:hover h3{ color:#F4B400; } /* ======================================== TEXT STYLING ======================================== */ .service-box p, .service-card p, .elementor-23 .elementor-element.elementor-element-ebdf622 p{ color:#cfcfcf; line-height:1.9; } /* ======================================== IMAGE EFFECT ======================================== */ .service-box img, .service-card img, .elementor-23 .elementor-element.elementor-element-ebdf622 img{ border-radius:18px; transition:.5s ease; } /* Hover Image */ .service-box:hover img, .service-card:hover img, .elementor-23 .elementor-element.elementor-element-ebdf622:hover img{ transform:scale(1.06); } /* ======================================== MOBILE RESPONSIVE ======================================== */ @media(max-width:767px){ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-ebdf622{ padding:30px 24px; margin:12px; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-7358ee2 *//* ======================================== PREMIUM SERVICE BOX CSS ======================================== */ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-7358ee2{ background:#171717; border-radius:24px; padding:20px 15px; margin:15px; position:relative; overflow:hidden; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: all .45s ease; backdrop-filter:blur(10px); } /* ======================================== BOTTOM YELLOW LINE EFFECT ======================================== */ .service-box::after, .service-card::after, .elementor-23 .elementor-element.elementor-element-7358ee2::after{ content:''; position:absolute; left:0; bottom:0; width:0%; height:4px; background:#F4B400; transition:.45s ease; border-radius:20px; } /* Hover Bottom Line */ .service-box:hover::after, .service-card:hover::after, .elementor-23 .elementor-element.elementor-element-7358ee2:hover::after{ width:100%; } /* ======================================== ADVANCED HOVER EFFECT ======================================== */ .service-box:hover, .service-card:hover, .elementor-23 .elementor-element.elementor-element-7358ee2:hover{ transform: translateY(-12px) scale(1.02); border-color: rgba(244,180,0,0.4); box-shadow: 0 25px 50px rgba(0,0,0,0.45), 0 0 25px rgba(244,180,0,0.15); } /* ======================================== GOLDEN GLOW EFFECT ======================================== */ .service-box::before, .service-card::before, .elementor-23 .elementor-element.elementor-element-7358ee2::before{ content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient( rgba(244,180,0,0.05), transparent 60%); opacity:0; transition:.5s ease; } /* Hover Glow */ .service-box:hover::before, .service-card:hover::before, .elementor-23 .elementor-element.elementor-element-7358ee2:hover::before{ opacity:1; } /* ======================================== ICON ANIMATION ======================================== */ .service-box .elementor-icon, .service-card .elementor-icon, .elementor-23 .elementor-element.elementor-element-7358ee2 .elementor-icon{ margin-top:10px; margin-bottom:15px; transition:.45s ease; } /* Icon Hover */ .service-box:hover .elementor-icon, .service-card:hover .elementor-icon, .elementor-23 .elementor-element.elementor-element-7358ee2:hover .elementor-icon{ transform: rotate(8deg) translateY(-5px) scale(1.08); } /* ======================================== HEADING EFFECT ======================================== */ .service-box h3, .service-card h3, .elementor-23 .elementor-element.elementor-element-7358ee2 h3{ margin-bottom:15px; transition:.3s ease; } /* Hover Heading */ .service-box:hover h3, .service-card:hover h3, .elementor-23 .elementor-element.elementor-element-7358ee2:hover h3{ color:#F4B400; } /* ======================================== TEXT STYLING ======================================== */ .service-box p, .service-card p, .elementor-23 .elementor-element.elementor-element-7358ee2 p{ color:#cfcfcf; line-height:1.9; } /* ======================================== IMAGE EFFECT ======================================== */ .service-box img, .service-card img, .elementor-23 .elementor-element.elementor-element-7358ee2 img{ border-radius:18px; transition:.5s ease; } /* Hover Image */ .service-box:hover img, .service-card:hover img, .elementor-23 .elementor-element.elementor-element-7358ee2:hover img{ transform:scale(1.06); } /* ======================================== MOBILE RESPONSIVE ======================================== */ @media(max-width:767px){ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-7358ee2{ padding:30px 24px; margin:12px; } }/* End custom CSS */ /* Start custom CSS for image-box, class: .elementor-element-509a82b *//* ======================================== PREMIUM SERVICE BOX CSS ======================================== */ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-509a82b{ background:#171717; border-radius:24px; padding:20px 15px; margin:15px; position:relative; overflow:hidden; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 10px 30px rgba(0,0,0,0.25); transition: all .45s ease; backdrop-filter:blur(10px); } /* ======================================== BOTTOM YELLOW LINE EFFECT ======================================== */ .service-box::after, .service-card::after, .elementor-23 .elementor-element.elementor-element-509a82b::after{ content:''; position:absolute; left:0; bottom:0; width:0%; height:4px; background:#F4B400; transition:.45s ease; border-radius:20px; } /* Hover Bottom Line */ .service-box:hover::after, .service-card:hover::after, .elementor-23 .elementor-element.elementor-element-509a82b:hover::after{ width:100%; } /* ======================================== ADVANCED HOVER EFFECT ======================================== */ .service-box:hover, .service-card:hover, .elementor-23 .elementor-element.elementor-element-509a82b:hover{ transform: translateY(-12px) scale(1.02); border-color: rgba(244,180,0,0.4); box-shadow: 0 25px 50px rgba(0,0,0,0.45), 0 0 25px rgba(244,180,0,0.15); } /* ======================================== GOLDEN GLOW EFFECT ======================================== */ .service-box::before, .service-card::before, .elementor-23 .elementor-element.elementor-element-509a82b::before{ content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background: radial-gradient( rgba(244,180,0,0.05), transparent 60%); opacity:0; transition:.5s ease; } /* Hover Glow */ .service-box:hover::before, .service-card:hover::before, .elementor-23 .elementor-element.elementor-element-509a82b:hover::before{ opacity:1; } /* ======================================== ICON ANIMATION ======================================== */ .service-box .elementor-icon, .service-card .elementor-icon, .elementor-23 .elementor-element.elementor-element-509a82b .elementor-icon{ margin-top:10px; margin-bottom:15px; transition:.45s ease; } /* Icon Hover */ .service-box:hover .elementor-icon, .service-card:hover .elementor-icon, .elementor-23 .elementor-element.elementor-element-509a82b:hover .elementor-icon{ transform: rotate(8deg) translateY(-5px) scale(1.08); } /* ======================================== HEADING EFFECT ======================================== */ .service-box h3, .service-card h3, .elementor-23 .elementor-element.elementor-element-509a82b h3{ margin-bottom:15px; transition:.3s ease; } /* Hover Heading */ .service-box:hover h3, .service-card:hover h3, .elementor-23 .elementor-element.elementor-element-509a82b:hover h3{ color:#F4B400; } /* ======================================== TEXT STYLING ======================================== */ .service-box p, .service-card p, .elementor-23 .elementor-element.elementor-element-509a82b p{ color:#cfcfcf; line-height:1.9; } /* ======================================== IMAGE EFFECT ======================================== */ .service-box img, .service-card img, .elementor-23 .elementor-element.elementor-element-509a82b img{ border-radius:18px; transition:.5s ease; } /* Hover Image */ .service-box:hover img, .service-card:hover img, .elementor-23 .elementor-element.elementor-element-509a82b:hover img{ transform:scale(1.06); } /* ======================================== MOBILE RESPONSIVE ======================================== */ @media(max-width:767px){ .service-box, .service-card, .elementor-23 .elementor-element.elementor-element-509a82b{ padding:30px 24px; margin:12px; } }/* End custom CSS */