.elementor-309 .elementor-element.elementor-element-2057515{--display:flex;--min-height:350px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-309 .elementor-element.elementor-element-2057515:not(.elementor-motion-effects-element-type-background), .elementor-309 .elementor-element.elementor-element-2057515 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.maagoldllc.com/wp-content/uploads/2025/11/Products-1.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-309 .elementor-element.elementor-element-a54969c .elementor-heading-title{font-family:"Italiana", Sans-serif;font-size:50px;font-weight:600;color:#FFFFFF;}.elementor-309 .elementor-element.elementor-element-442e7d8{--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;}.elementor-309 .elementor-element.elementor-element-d112cf0{--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:80px;--padding-bottom:80px;--padding-left:0px;--padding-right:0px;}.elementor-309 .elementor-element.elementor-element-d112cf0.e-con{--flex-grow:0;--flex-shrink:0;}@media(min-width:768px){.elementor-309 .elementor-element.elementor-element-442e7d8{--content-width:1250px;}}@media(max-width:767px){.elementor-309 .elementor-element.elementor-element-a54969c .elementor-heading-title{font-size:30px;}.elementor-309 .elementor-element.elementor-element-d112cf0{--padding-top:40px;--padding-bottom:40px;--padding-left:10px;--padding-right:10px;}}/* Start custom CSS for html, class: .elementor-element-ef9bb3f *//* =========================
   Base Styles
   ========================= */
  .cat-container{
      overflow: hidden;
  } 
   
.expand-card {
    display: flex;
    position: relative;
}

.expand-card .panel {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 70vh;
    color: #fff;
    cursor: pointer;
    flex: 1;
    margin-right: 0.2rem;
    transition: all 700ms ease-in;
}

.expand-card .panel:last-child {
    margin-right: 0;
}

.expand-card .panel::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 15%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.expand-card h3 {
    font-size: 25px;
    font-weight: 600;
    color: #fff;
    text-transform: capitalize;
    position: absolute;
    bottom: 22px;
    left: -2%;
    width: 100%;
    height: 55%;
    transform: rotate(180deg);
    writing-mode: tb-rl;
    display: flex;
    align-items: center;
    z-index: 22;
    opacity: 1;
    transition: all 0.2s ease-in 0.3s;
}

.expand-card .content {
    position: absolute;
    bottom: 2%;
    font: normal 400 16px/20px "Work Sans", sans-serif;
    opacity: 0;
    transition: opacity 0.3s ease-in 0.4s;
}

.expand-card .panel .cstm-we-icon {
    position: absolute;
    top: 55%;
    margin-left: 1rem;
    width: 64px;
    height: 64px;
    opacity: 0;
    z-index: 22;
    transition: opacity 0.3s ease-in 0.4s;
}

/* Active Panel */
.expand-card .panel.active {
    flex: 6;
}

.expand-card .panel.active h3 {
    position: relative;
    bottom: -23vh;
    left: 0;
    height: 100%;
    margin-left:13px;
    padding-right: 1rem;
    transform: none;
    writing-mode: unset;
    opacity: 1;
    z-index: 22;
}

.expand-card .panel.active .cstm-we-icon,
.expand-card .panel.active .content {
    opacity: 1;
    z-index: 22;
    margin-left: 1rem;
    max-width: 90%;
}

/* =========================
   Media Queries (Responsive)
   ========================= */

/* Max-width 1040px */
@media (max-width: 1040px) {
    .expand-card .panel.active h3 {
        bottom: 25%;
    }
}

/* Max-width 768px */
@media (max-width: 768px) {
    .expand-card {
        flex-direction: column;
        gap: 1rem;
        height: 85vh;
    }
    .expand-card .panel {
        flex-direction: column;
    }
    .expand-card h3 {
        font-size: 1.5rem;
        transform: rotate(0);
        margin-left: 1rem;
        text-align: left;
        writing-mode: unset;
    }
    .expand-card .content {
        font: normal 400 12px/20px "Work Sans", sans-serif;
    }
    .expand-card .panel.active h3 {
        bottom: 20%;
    }
}

/* Max-width 550px */
@media (max-width: 550px) {
    .expand-card .panel {
        height: 60vh;
    }
    .content img {
        height: 30px !important;
    }
}

/* Max-width 468px */
@media (max-width: 468px) {
    .cat-container .expand-card .panel.active h3 {
        bottom: -10vh !important;
    }
}

/* Max-width 426px, 375px, 320px - same styles */
@media (max-width: 426px),
(max-width: 375px),
(max-width: 320px) {
    .panel .content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    .expand-card .panel .cstm-we-icon {
        top: 46% !important;
    }
    .expand-card .panel.active h3 {
        bottom: 10%;
    }
    .expand-card .panel.active .content p {
        margin-bottom: -10px;
    }
    .expand-card h3 {
        writing-mode: unset !important;
    }
}

/* Max-width 368px */
@media (max-width: 368px) {
    .expand-card .panel h3 {
        margin-left: 7rem;
    }
    .cat-container .expand-card .panel.active h3 {
        bottom: -4vh !important;
    }
}/* End custom CSS */