.elementor-kit-1987{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#D82929;--e-global-color-3759e81:#0D0D0D;--e-global-color-7a0262b:#000000A1;--e-global-color-d1bac13:#B60000;--e-global-color-c51f2ad:#DBDBDB;--e-global-color-87b8302:#9F231E;--e-global-color-db1d0c6:#3D5F8D;--e-global-color-a456f30:#0D5EAF;--e-global-color-kadence1:#3182CE;--e-global-color-kadence2:#2B6CB0;--e-global-color-kadence3:#1A202C;--e-global-color-kadence4:#2D3748;--e-global-color-kadence5:#4A5568;--e-global-color-kadence6:#718096;--e-global-color-kadence7:#EDF2F7;--e-global-color-kadence8:#F7FAFC;--e-global-color-kadence9:#FFFFFF;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );font-size:1.25rem;}.elementor-kit-1987.el-is-editing{--global-palette1:#3182CE;--global-palette2:#2B6CB0;--global-palette3:#1A202C;--global-palette4:#2D3748;--global-palette5:#4A5568;--global-palette6:#718096;--global-palette7:#EDF2F7;--global-palette8:#F7FAFC;--global-palette9:#FFFFFF;}.elementor-kit-1987 button,.elementor-kit-1987 input[type="button"],.elementor-kit-1987 input[type="submit"],.elementor-kit-1987 .elementor-button{background-color:var( --e-global-color-kadence6 );}.elementor-kit-1987 e-page-transition{background-color:var( --e-global-color-3759e81 );}.elementor-kit-1987 h1{font-size:4.5rem;}.elementor-kit-1987 h2{font-size:3rem;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Parent card that gets a ribbon */ .has-ribbon{ position: relative; /* anchors the ribbon */ overflow: visible; /* don't clip the ribbon corner */ } /* Ribbon block (same geometry as your original) */ .has-ribbon .ribbon{ position: absolute; top: -15px; right: -15px; width: 75px; height: 75px; overflow: hidden; z-index: 10; text-align: right; } /* Inner band + text (rotated) */ .has-ribbon .ribbon span{ position: absolute; top: 19px; right: -21px; display: block; width: 100px; transform: rotate(45deg); -webkit-transform: rotate(45deg); font-size: 15px; font-weight: bold; line-height: 20px; text-transform: uppercase; text-align: center; color: #fff; background: linear-gradient(#FF1414 0%, #A72626 100%); box-shadow: 0 3px 10px -5px rgba(0,0,0,1); z-index: 1; } /* Little triangle folds (exactly like your original) */ .has-ribbon .ribbon span::before{ content: ""; position: absolute; left: 0; top: 100%; z-index: -1; border-left: 3px solid #A72626; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #A72626; } .has-ribbon .ribbon span::after{ content: ""; position: absolute; right: 0; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #A72626; border-bottom: 3px solid transparent; border-top: 3px solid #A72626; } /* Optional: scale down a touch on small screens (tweak as you like) */ @media (max-width: 767px){ .has-ribbon .ribbon{ top: -12px; right: -12px; width: 68px; height: 68px; } .has-ribbon .ribbon span{ top: 17px; right: -19px; width: 92px; font-size: 13px; } }/* End custom CSS */