.elementor-508 .elementor-element.elementor-element-975a1c9{--display:flex;--position:absolute;--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:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:20px;--padding-left:25px;--padding-right:0px;top:0px;--z-index:10;}.elementor-508 .elementor-element.elementor-element-975a1c9:not(.elementor-motion-effects-element-type-background), .elementor-508 .elementor-element.elementor-element-975a1c9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}body:not(.rtl) .elementor-508 .elementor-element.elementor-element-975a1c9{left:0px;}body.rtl .elementor-508 .elementor-element.elementor-element-975a1c9{right:0px;}.elementor-508 .elementor-element.elementor-element-56c482ef{--display:flex;--justify-content:center;}.elementor-508 .elementor-element.elementor-element-56c482ef.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-508 .elementor-element.elementor-element-63be7beb img{width:75%;}.elementor-508 .elementor-element.elementor-element-19a85ce2{--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:flex-start;--align-items:center;}.elementor-508 .elementor-element.elementor-element-9482b99{text-align:left;}.elementor-508 .elementor-element.elementor-element-9482b99 img{width:31%;}.elementor-508 .elementor-element.elementor-element-2510fa76{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-508 .elementor-element.elementor-element-5e2c0dd1 .elementor-button{background-color:#FFFFFF;font-family:"Clash Display", Sans-serif;fill:#000000;color:#000000;border-radius:100px 100px 100px 100px;padding:15px 25px 15px 25px;}.elementor-508 .elementor-element.elementor-element-1725bb0c{--display:flex;--position:absolute;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:30px;--padding-bottom:20px;--padding-left:25px;--padding-right:0px;top:0px;--z-index:10;}.elementor-508 .elementor-element.elementor-element-1725bb0c:not(.elementor-motion-effects-element-type-background), .elementor-508 .elementor-element.elementor-element-1725bb0c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF00;}body:not(.rtl) .elementor-508 .elementor-element.elementor-element-1725bb0c{left:0px;}body.rtl .elementor-508 .elementor-element.elementor-element-1725bb0c{right:0px;}.elementor-508 .elementor-element.elementor-element-1c1f0274{--display:flex;--justify-content:center;}.elementor-508 .elementor-element.elementor-element-2abea563 img{width:70%;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-508 .elementor-element.elementor-element-56c482ef{--width:36%;}.elementor-508 .elementor-element.elementor-element-63be7beb{text-align:left;}.elementor-508 .elementor-element.elementor-element-63be7beb img{width:100%;}.elementor-508 .elementor-element.elementor-element-5690a052{text-align:left;}.elementor-508 .elementor-element.elementor-element-5690a052 img{width:100%;}.elementor-508 .elementor-element.elementor-element-9482b99{text-align:left;}.elementor-508 .elementor-element.elementor-element-9482b99 img{width:100%;}.elementor-508 .elementor-element.elementor-element-2510fa76{--width:50%;}.elementor-508 .elementor-element.elementor-element-1725bb0c{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-508 .elementor-element.elementor-element-1c1f0274{--width:100%;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-508 .elementor-element.elementor-element-2abea563{padding:10px 0px 0px 0px;text-align:center;}.elementor-508 .elementor-element.elementor-element-2abea563 img{width:40%;}.elementor-508 .elementor-element.elementor-element-fe4885c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 10px) 0px;padding:0px 0px 10px 0px;text-align:center;}.elementor-508 .elementor-element.elementor-element-fe4885c img{width:43%;}.elementor-508 .elementor-element.elementor-element-7840d513{text-align:left;}.elementor-508 .elementor-element.elementor-element-7840d513 img{width:100%;}}@media(min-width:768px){.elementor-508 .elementor-element.elementor-element-56c482ef{--width:17.275%;}.elementor-508 .elementor-element.elementor-element-2510fa76{--width:25%;}.elementor-508 .elementor-element.elementor-element-1c1f0274{--width:20%;}}/* Start custom CSS for container, class: .elementor-element-975a1c9 *//* --- Glass Effect on Scroll for Header --- */ .elementor-508 .elementor-element.elementor-element-975a1c9.elementor-sticky--effects { /* This is the background color from your original design */ background-color: rgba(26, 61, 92, 0.20); /* Adjust the 0.85 for more/less transparency */ /* This creates the blur/glass effect */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* For Safari browser support */ /* This makes the change smooth instead of instant */ transition: background-color 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease; /* Added padding to transition */ /* --- New: Decrease Header Padding on Scroll --- */ padding-top: 5px !important; /* Adjust this value as needed */ padding-bottom: 5px !important; /* Adjust this value as needed */ } /* --- Logo Swap on Sticky Scroll --- */ /* 1. By default, HIDE the light logo. */ .elementor-508 .elementor-element.elementor-element-975a1c9 .logo-light { display: none; } /* 2. When the header becomes sticky... */ .elementor-508 .elementor-element.elementor-element-975a1c9.elementor-sticky--effects .logo-dark { /* ...HIDE the dark logo. */ display: none; } .elementor-508 .elementor-element.elementor-element-975a1c9.elementor-sticky--effects .logo-light { /* ...and SHOW the light logo. */ display: block; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-1725bb0c *//* --- Glass Effect on Scroll for Header --- */ .elementor-508 .elementor-element.elementor-element-1725bb0c.elementor-sticky--effects { /* This is the background color from your original design */ background-color: rgba(26, 61, 92, 0.20); /* Adjust the 0.85 for more/less transparency */ /* This creates the blur/glass effect */ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); /* For Safari browser support */ /* This makes the change smooth instead of instant */ transition: background-color 0.4s ease, backdrop-filter 0.4s ease, padding 0.4s ease; /* Added padding to transition */ /* --- New: Decrease Header Padding on Scroll --- */ padding-top: 5px !important; /* Adjust this value as needed */ padding-bottom: 5px !important; /* Adjust this value as needed */ } /* --- Logo Swap on Sticky Scroll --- */ /* 1. By default, HIDE the light logo. */ .elementor-508 .elementor-element.elementor-element-1725bb0c .logo-light { display: none; } /* 2. When the header becomes sticky... */ .elementor-508 .elementor-element.elementor-element-1725bb0c.elementor-sticky--effects .logo-dark { /* ...HIDE the dark logo. */ display: none; } .elementor-508 .elementor-element.elementor-element-1725bb0c.elementor-sticky--effects .logo-light { /* ...and SHOW the light logo. */ display: block; }/* End custom CSS */ /* Start custom CSS *//* --- Elite Glass Button with Multi-Layered Animation --- */ /* This targets the tag of an Elementor button */ .btn-elite-glass .elementor-button { /* --- Base Setup --- */ position: relative; /* Essential for all pseudo-elements */ overflow: hidden; /* Contains the shine effect */ background-color: transparent !important; /* Override Elementor defaults */ /* --- The Border (as a soft inner shadow for a premium look) --- */ border: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); /* --- Transitions for the button itself (lift and border glow) --- */ transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.5s cubic-bezier(0.19, 1, 0.22, 1); } /* --- The Background Glow Pseudo-Element --- */ .btn-elite-glass .elementor-button::before { content: ''; position: absolute; z-index: -1; /* Place BEHIND the text */ /* Make the glow area larger than the button for a softer falloff */ top: -20px; left: -20px; right: -20px; bottom: -20px; /* --- The Upgraded "Radial" Glow --- */ /* This creates a soft light in the center that fades out */ background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 65%); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); /* Initial state: invisible and slightly scaled down */ opacity: 0; transform: scale(0.9); /* Transition for the glow effect */ transition: opacity 0.4s ease-out, transform 0.4s ease-out; } /* --- The Shine Sweep Pseudo-Element --- */ .btn-elite-glass .elementor-button::after { content: ''; position: absolute; top: 0; left: 0; z-index: 1; /* Place ABOVE the background, but below the text */ /* A wide, skewed gradient for the shine */ width: 200%; height: 100%; background: linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.3) 50%, transparent 80%); /* Initial state: Off-screen to the left */ transform: translateX(-100%) skewX(-25deg); /* This ensures the shine doesn't block mouse clicks */ pointer-events: none; /* Transition for the shine sweep (slower and more elegant) */ transition: transform 0.85s cubic-bezier(0.19, 1, 0.22, 1); } /* --- HOVER and ACTIVE States --- */ /* 1. Animate the button itself: lift, grow, and add depth */ .btn-elite-glass .elementor-button:hover, .btn-elite-glass.is-active .elementor-button { transform: translateY(-3px) scale(1.03); /* Lift and grow subtly */ box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5), /* Brighter inner border */ 0 10px 30px rgba(0, 0, 0, 0.1); /* Soft drop shadow for depth */ } /* 2. Animate the background glow into view */ .btn-elite-glass .elementor-button:hover::before, .btn-elite-glass.is-active .elementor-button::before { opacity: 1; transform: scale(1); } /* 3. Animate the shine sweep ONLY ON HOVER (not for the static active state) */ .btn-elite-glass .elementor-button:hover::after { transform: translateX(50%) skewX(-25deg); } /* --- Premium "Fill and Lift" CTA Button Effect --- */ /* This targets the tag of an Elementor button with our class */ .btn-cta-premium .elementor-button { /* --- Base Setup --- */ position: relative; /* Essential for the fill pseudo-element */ overflow: hidden; /* Keeps the fill effect contained */ display: inline-block; /* --- Initial Appearance --- */ background-color: white !important; color: #1a3d5c !important; /* The dark blue from your branding */ border: 1px solid white; /* A solid border to start */ /* --- Transitions --- */ /* We transition the button's own properties: transform and shadow */ transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1); } /* --- The Color Fill Pseudo-Element --- */ .btn-cta-premium .elementor-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #1a3d5c; /* The dark blue fill color */ z-index: 0; /* Place it behind the text */ /* Initial state: Off-screen to the left */ transform: translateX(-101%); /* Transition for the fill sweep */ transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } /* --- Target the text itself for color change --- */ /* We need to ensure the text is on top of the fill and transitions its color */ .btn-cta-premium .elementor-button .elementor-button-text { position: relative; z-index: 1; /* Puts the text on top of the ::before pseudo-element */ transition: color 0.4s ease-out; } /* --- The HOVER State --- */ /* 1. Animate the fill into view */ .btn-cta-premium .elementor-button:hover::before { transform: translateX(0); } /* 2. Change the text color to white */ .btn-cta-premium .elementor-button:hover .elementor-button-text { color: white; } /* 3. Lift the button and add a dynamic shadow */ .btn-cta-premium .elementor-button:hover { transform: translateY(-4px); /* A more pronounced lift */ box-shadow: 0 12px 25px -5px rgba(26, 61, 92, 0.4); /* A soft, colored shadow */ }/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Clash Display'; font-display: auto; src: url('https://www.miamcourse.com/wp-content/uploads/2025/07/ClashDisplay-Variable.ttf') format('truetype'); } /* End Custom Fonts CSS */