/* General Styles */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Technique Cards */
.technique-card {
    transition: transform 0.2s ease;
}

.technique-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* Breathing Circle Animation */
.breathing-circle-container {
    position: relative;
    height: 200px;
}

.breathing-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #7fb3d5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.8s ease-in-out;
}

/* States for the breathing circle */
.breathe-in {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: #5dade2;
}

.hold {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: #5dade2;
    border: 3px solid #f4d03f;
}

.breathe-out {
    transform: translate(-50%, -50%) scale(1);
    background-color: #7fb3d5;
}

@keyframes breathe {
                0%, 100% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(1.4);
                }
            }