.elementor-18 .elementor-element.elementor-element-6687cef{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(2, 1fr);--gap:40px 40px;--row-gap:40px;--column-gap:40px;--grid-auto-flow:row;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-18 .elementor-element.elementor-element-7e94b4f{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-fbac846{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-df07e61{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-856ec48{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-aa83306{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-e483c93{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-a24618d{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-70db9c9{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-57b6a5e{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-b48c05f{background-color:#FFFFFF;padding:40px 40px 40px 40px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#E5E5E5;border-radius:20px 20px 20px 20px;box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.25);}.elementor-18 .elementor-element.elementor-element-f21b228{--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:0px;--padding-left:0px;--padding-right:0px;}@media(max-width:1024px){.elementor-18 .elementor-element.elementor-element-6687cef{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-18 .elementor-element.elementor-element-6687cef{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS */<style>
    .tasbih-container {
        background: white;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 30px;
        width: 90%;
        max-width: 500px;
        text-align: center;
        transition: all 0.3s ease;
        margin: 20px auto;
        position: relative;
    }
    
    .counters-wrapper {
        display: flex;
        justify-content: space-around;
        margin: 20px 0;
    }
    
    .counter-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .counter-label {
        color: #555;
        font-size: 14px;
        margin-bottom: 5px;
    }
    
    .tasbih-title {
         text-align: center;
        color: #000000;
        font-size: 24px;
        margin-bottom: 20px;
        font-weight: bold;
    }
    
    .tasbih-counter {
        font-size: 40px;
        color: #3c6382;
        font-weight: bold;
        min-width: 60px;
    }
    
    .button-group {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    
    .tasbih-btn {
        border: none;
        padding: 12px 20px;
        border-radius: 50px;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-weight: bold;
    }
    
    .count-btn {
        background: #018502;
        color: white;
        flex-grow: 1;
        margin: 0 5px;
    }
    
    .count-btn:hover {
        background: #3c6382;
        transform: scale(1.05);
    }
    
    .reset-btn {
        background: #67902C;
        color: white;
    }
    
    .reset-btn:hover {
        background: #eb2f06;
        transform: scale(1.05);
    }
    
    .bead {
        width: 20px;
        height: 20px;
        background: #b5b5b5;
        border-radius: 50%;
        display: inline-block;
        margin: 5px;
        transition: all 0.3s ease;
    }
    
    .bead.active {
        background: #f6b93b;
        transform: scale(1.3);
    }
    
    .beads-container {
        margin: 20px 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .vibration {
        animation: vibrate 0.3s linear;
    }
    
    @keyframes vibrate {
        0% { transform: translateX(0); }
        25% { transform: translateX(-3px); }
        50% { transform: translateX(0); }
        75% { transform: translateX(3px); }
        100% { transform: translateX(0); }
    }
    
    .celebration {
        animation: celebrate 0.5s ease;
    }
    
    @keyframes celebrate {
        0% { transform: scale(1); }
        50% { transform: scale(1.1); }
        100% { transform: scale(1); }
    }
</style>/* End custom CSS */