i.hugeicon-flip-box{
    background-image: url('../img/flip_box.svg');
}

/* Main Section */
.huge-flip-box-widget {
    max-width: 1420px;
    margin: 0 auto;
    padding: 10px 20px;
}

.huge-flip-box-widget .elementor-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.huge-flip-box-widget .huge-flip-box-widget-container .header {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 40px;
    gap: 10px;
}

.huge-flip-box-widget .huge-flip-box-widget-container .header span {
    font-size: 1.5rem;
    font-weight: 700;
}

.huge-flip-box-widget .huge-flip-box-widget-container .header h2 {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
}

/* Column Styling */
.huge-flip-box-widget .elementor-column {
    padding: 10px;
}

/* Template 1: SVG Flip Box */
.huge-flip-box-widget .elementor-template1-grid .elementor-column {
    max-width: 200px;
    flex: 0 0 200px;
}

.huge-flip-box-widget .flip-box {
    width: 100%;
    height: 250px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    perspective: 1500px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.huge-flip-box-widget .flip-box-front,
.huge-flip-box-widget .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 10px;
}

.huge-flip-box-widget .flip-box-back {
    transform: rotateY(-180deg);
    background: #fff;
}

.huge-flip-box-widget .flip-box:hover .flip-box-front,
.huge-flip-box-widget .flip-box.hover .flip-box-front {
    transform: rotateY(180deg);
}

.huge-flip-box-widget .flip-box:hover .flip-box-back,
.huge-flip-box-widget .flip-box.hover .flip-box-back {
    transform: rotateY(0);
}

.huge-flip-box-widget .flip-box .svg_icon {
    max-width: 80px;
    margin-bottom: 15px;
}

.huge-flip-box-widget .flip-box h3 {
    font-size: 1.2rem;
    font-weight: 600;
}

/* Template 2: Hover Zoom Flip Box */
.huge-flip-box-widget .elementor-template2-grid .elementor-column {
    max-width: 200px;
    flex: 0 0 200px;
}

.huge-flip-box-widget .mainFlipCard {
    width: 100%;
    height: 250px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.huge-flip-box-widget .mainFlipCard .flipCard_Front {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.huge-flip-box-widget .mainFlipCard .flipCard_Front .card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.huge-flip-box-widget .mainFlipCard:hover .card-image {
    transform: scale(1.1);
}

.huge-flip-box-widget .mainFlipCard .card-content h3 {
    position: absolute;
    bottom: 10px;
    color: #fff;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.huge-flip-box-widget .mainFlipCard .flipCard_Back {
    display: none; /* Zoom only, no flip */
    background: #fff;
    padding: 20px;
}

/* Template 3: Demo Flip Box Layouts (Pricing) */
.huge-flip-box-widget .elementor-template3-grid .elementor-column {
    max-width: 300px;
    flex: 0 0 300px;
}

.huge-flip-box-widget .pricing-card {
    width: 100%;
    height: 400px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.huge-flip-box-widget .pricing-front,
.huge-flip-box-widget .pricing-back {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.huge-flip-box-widget .pricing-back {
    transform: rotateY(-180deg);
    position: absolute;
    top: 0;
}

.huge-flip-box-widget .pricing-card:hover .pricing-front {
    transform: rotateY(180deg);
}

.huge-flip-box-widget .pricing-card:hover .pricing-back {
    transform: rotateY(0);
}

.huge-flip-box-widget .pricing-toggle {
    text-align: center;
    margin-top: 20px;
}

.huge-flip-box-widget .pricing-toggle input {
    display: none;
}

.huge-flip-box-widget .pricing-toggle label {
    cursor: pointer;
}

.huge-flip-box-widget .pricing-toggle span {
    color: #1d3557;
}

/* Template 4: Social Media Flip Box */
.huge-flip-box-widget .elementor-template4-grid .elementor-column {
    max-width: 200px;
    flex: 0 0 200px;
}

.huge-flip-box-widget .social-card {
    width: 100%;
    height: 200px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    perspective: 1500px;
    border-radius: 10px;
}