.elementor-2173 .elementor-element.elementor-element-2782cbf > .elementor-container{min-height:770px;}.elementor-2173 .elementor-element.elementor-element-2782cbf{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-2173 .elementor-element.elementor-element-2782cbf > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}@media(min-width:768px){.elementor-2173 .elementor-element.elementor-element-d9564a8{width:100%;}.elementor-2173 .elementor-element.elementor-element-2ae57e3{width:100%;}}/* Start custom CSS for html, class: .elementor-element-d44636f *//* ==========================
   PRODUCT HERO BANNER
========================== */

.jts-product-banner{

    position:relative;

    width:100%;

    height:430px;

    overflow:hidden;

    background:#08071E;

}


/* BACKGROUND IMAGE */

.jts-product-banner::before{

    content:"";

    position:absolute;

    inset:0;


    background-image:url("https://jatimtamansteel.id/wp-content/uploads/2026/08/depan-produk.png");

    background-size:cover;

    background-position:center;


    transform:scale(1.12);


    animation:
    productZoom 8s ease forwards;


}



/* WHITE REVEAL */

.jts-product-banner::after{

    content:"";

    position:absolute;

    inset:0;

    background:white;

    transform:translateX(0);


    animation:
    productReveal 1.8s cubic-bezier(.77,0,.18,1) forwards;


}



/* CONTENT */

.product-overlay{

    position:absolute;

    z-index:3;

    left:14%;

    top:50%;

    transform:translateY(-50%);


}


.product-overlay h1{


    color:white;

    font-family:'Poppins',sans-serif;

    font-size:42px;

    font-weight:700;

    letter-spacing:3px;


    margin:0;


    opacity:0;


    animation:
    titleAppear 1s ease .8s forwards;


}



/* RED LINE */


.product-line{


    width:0;

    height:5px;

    background:#B5121B;


    margin-top:35px;


    animation:
    lineAppear 1.2s ease 1s forwards;


}



/* =====================
ANIMATION
===================== */


@keyframes productZoom{


    from{

        transform:scale(1.12);

    }


    to{

        transform:scale(1);

    }

}



@keyframes productReveal{


    from{

        transform:translateX(0);

    }


    to{

        transform:translateX(100%);

    }

}



@keyframes titleAppear{


    from{

        opacity:0;

        transform:translateX(-50px);

    }


    to{

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes lineAppear{


    from{

        width:0;

    }


    to{

        width:260px;

    }

}

/* =================================
   MOBILE PRODUCT BANNER
================================= */

@media (max-width:768px){


    .jts-product-banner{

        height:280px;

        background-position:center;

    }


    .jts-product-banner::before{

        background-size:auto 100%;

        background-position:center center;

        animation:
        productZoomMobile 7s ease forwards;

    }



    .product-overlay{

        left:25px;

        top:50%;

        transform:translateY(-50%);

    }



    .product-overlay h1{

        font-size:28px;

        letter-spacing:2px;

        font-weight:700;

    }



    .product-line{

        height:3px;

        margin-top:18px;

    }


}



/* =================================
   SMALL PHONE IPHONE SE
================================= */

@media(max-width:480px){


    .jts-product-banner{

        height:230px;

    }



    .jts-product-banner::before{

        background-size:auto 100%;

        background-position:center;

    }



    .product-overlay{

        left:20px;

    }



    .product-overlay h1{

        font-size:24px;

        letter-spacing:1.5px;

    }



    .product-line{

        margin-top:15px;

        height:3px;

    }


}



/* =================================
   MOBILE BACKGROUND ZOOM
================================= */


@keyframes productZoomMobile{


    from{

        transform:scale(1.15);

    }


    to{

        transform:scale(1);

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-804d119 *//*==================================================
  PRODUCT SECTION
==================================================*/

.product-section {

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 70px 0px 100px;

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;

    color: #222;

}


/*==================================================
  PRODUCT TITLE
==================================================*/

.product-title {

    margin-bottom: 45px;

}

.product-title h2 {

    margin: 0 0 15px;

    font-size: 42px;

    font-weight: 600;

    line-height: 1.3;

    color: #222;

}


/*==================================================
  RED LINE
==================================================*/

.product-title .line {

    width: 65px;

    height: 4px;

    background: #B5121B;

}


/*==================================================
  PRODUCT BOX
==================================================*/

.product-box {

    width: 100%;

    display: grid;

    grid-template-columns: 0.85fr 1.5fr;

    gap: 50px;

    align-items: center;

}


/*==================================================
  PRODUCT CONTENT
==================================================*/

.product-content {

    width: 100%;

    display: flex;

    align-items: center;

}


/*==================================================
  CONTENT CARD
==================================================*/

.content-card {

    width: 100%;

    padding: 25px 35px 25px 28px;

    box-sizing: border-box;

    border-left: 4px solid #B5121B;

}


/*==================================================
  CONTENT TITLE
==================================================*/

.content-card h4 {

    margin: 0 0 18px;

    font-size: 30px;

    font-weight: 600;

    line-height: 1.4;

    color: #222;

}


/*==================================================
  CONTENT DESCRIPTION
==================================================*/

.content-card p {

    margin: 0;

    font-size: 16px;

    line-height: 1.9;

    color: #555;

}


/*==================================================
  PRODUCT IMAGE
==================================================*/

.product-image {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

}


/*==================================================
  IMAGE FRAME
==================================================*/

.image-frame {

    width: 100%;

    padding: 0;

    margin: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    box-sizing: border-box;

}


/*==================================================
  TABLE IMAGE
==================================================*/

.image-frame img {

    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    max-height: 650px;

    object-fit: contain;

}


/*==================================================
  TABLET
==================================================*/

@media (max-width: 991px) {

    .product-section {

        padding: 60px 25px 80px;

    }


    .product-title {

        margin-bottom: 35px;

    }


    .product-title h2 {

        font-size: 38px;

    }


    .product-box {

        grid-template-columns: 1fr;

        gap: 40px;

        align-items: start;

    }


    .product-content {

        width: 100%;

    }


    .content-card {

        padding: 25px 30px 25px 25px;

    }


    .content-card h4 {

        font-size: 28px;

    }


    .content-card p {

        font-size: 15px;

        line-height: 1.85;

    }


    .product-image {

        width: 100%;

    }


    .image-frame img {

        max-height: 550px;

    }

}


/*==================================================
  MOBILE
==================================================*/

@media (max-width: 576px) {

    .product-section {

        padding: 50px 20px 60px;

    }


    .product-title {

        margin-bottom: 30px;

    }


    .product-title h2 {

        font-size: 30px;

    }


    .product-title .line {

        width: 55px;

        height: 3px;

    }


    .product-box {

        gap: 30px;

    }


    .content-card {

        padding: 20px 20px 20px 18px;

        border-left-width: 3px;

    }


    .content-card h4 {

        font-size: 24px;

        margin-bottom: 14px;

    }


    .content-card p {

        font-size: 14px;

        line-height: 1.8;

    }


    .image-frame img {

        max-height: 400px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c8d6a3a *//* === SECTION === */
.product-section-fb {
    max-width: 1400px;
    margin: auto;
    font-family: 'Poppins', sans-serif;
}

/* === PRODUCT BOX === */
.product-box-fb {
    display: flex;
    justify-content: flex-start;
}

/* === PRODUCT CONTENT === */
.product-content-fb {
    display: flex;
    width: 100%;
    max-width: 1400px;
}

/* === CONTENT CARD === */
.content-card-fb {
    background: #FFF;
    border: 1px solid #E8E8E8;
    border-left: 5px solid #B5121B;
    padding: 45px;
    width: 100%;
    transition: .35s;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 50px;
}

.content-card-fb:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

/* === TEKS (KIRI) === */
.card-text-fb {
    flex: 1;
}

.card-text-fb h4 {
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    margin: 0 0 20px;
}

.card-text-fb p {
    font-size: 17px;
    line-height: 1.9;
    color: #666;
    margin: 0;
}

/* === GAMBAR (KANAN - BESAR) === */
.image-frame-fb {
    flex: 0 0 500px;
    max-width: 500px;
    border-radius: 8px;
    overflow: hidden;
    background: #F8F8F8;
    padding: 8px;
    box-sizing: border-box;
    transition: .35s;
}

.image-frame-fb:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    transform: scale(1.02);
}

.image-frame-fb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    .product-section-fb {
        padding: 40px 20px;
    }

    .content-card-fb {
        padding: 30px;
        gap: 35px;
    }

    .card-text-fb h4 {
        font-size: 28px;
    }

    .card-text-fb p {
        font-size: 16px;
    }

    .image-frame-fb {
        flex: 0 0 280px;
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .content-card-fb {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .image-frame-fb {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .image-frame-fb img {
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .product-section-fb {
        padding: 30px 15px;
    }

    .content-card-fb {
        padding: 25px;
        border-left-width: 4px;
        gap: 20px;
    }

    .card-text-fb h4 {
        font-size: 24px;
    }

    .card-text-fb p {
        font-size: 15px;
        line-height: 1.8;
    }

    .image-frame-fb {
        padding: 5px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ed52c85 *//*==================================================
  DIMENSION SECTION
==================================================*/

.dimension-section {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 80px 30px 100px;

    box-sizing: border-box;

    font-family: Poppins, sans-serif;

    color: #111;
}


/*==================================================
  TITLE
==================================================*/

.dimension-title {
    text-align: center;
    margin-bottom: 45px;
}

.dimension-title > span {
    display: block;

    color: #B5121B;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 2px;

    margin-bottom: 8px;
}

.dimension-title h4 {
    margin: 0;

    font-size: 36px;

    font-weight: 600;

    line-height: 1.3;

    color: #111;
}

.dimension-title .line {
    width: 65px;
    height: 4px;

    background: #B5121B;

    margin: 18px auto 0;
}


/*==================================================
  DIMENSION TABLE
==================================================*/

.dimension-table {
    width: 100%;

    margin-bottom: 55px;
}

.dimension-table-inner {
    width: 100%;

    background: #fff;

    border: 1px solid #d5e0eb;

    border-radius: 6px;

    overflow: hidden;

    box-shadow: 0 8px 25px rgba(0, 35, 70, .08);

    position: relative;
}

.dimension-table-inner::before {
    content: "";

    display: block;

    width: 100%;

    height: 4px;

    background: #B5121B;
}

.dimension-table-inner img {
    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;
}


/*==================================================
  APPLICATION SECTION
==================================================*/

.application-section {
    width: 100%;

    margin-top: 10px;

    padding-top: 35px;

    border-top: 1px solid #dce5ee;
}


/*==================================================
  APPLICATION TITLE
==================================================*/

.application-title {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;
}

.application-title span {
    font-size: 22px;

    font-weight: 600;

    color: #111;

    white-space: nowrap;
}

.line-small {
    width: 45px;

    height: 3px;

    background: #B5121B;
}


/*==================================================
  APPLICATION GRID
==================================================*/

/*
 * WAJIB 6 ITEM DALAM 1 BARIS
 */

.dimension-app-grid {

    width: 100%;

    display: flex !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    justify-content: space-between;

    align-items: stretch;

    gap: 14px;

}


/*==================================================
  APPLICATION CARD
==================================================*/

.dimension-app-grid .app-item {

    /*
     * Semua item mendapat lebar yang sama
     */

    flex: 1 1 0 !important;

    width: 0 !important;

    min-width: 0 !important;

    max-width: none !important;

    min-height: 210px;

    background: #f5f8fb;

    border: 1px solid #d3dfeb;

    border-radius: 5px;

    padding: 10px;

    box-sizing: border-box;

    text-align: center;

    transition: all .3s ease;

}


/*==================================================
  PRODUCT IMAGE
==================================================*/

.dimension-app-grid .app-image {

    width: 100%;

    height: 140px;

    background: #fff;

    border: 1px solid #e0e7ee;

    border-radius: 3px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    box-sizing: border-box;
}


.dimension-app-grid .app-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    transition: transform .35s ease;
}


/*==================================================
  APPLICATION TEXT
==================================================*/

.dimension-app-grid .app-item p {

    margin: 11px 0 3px;

    min-height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 3px;

    font-size: 13px;

    line-height: 1.4;

    font-weight: 500;

    color: #222;

}


/*==================================================
  HOVER
==================================================*/

.dimension-app-grid .app-item:hover {

    background: #eaf2fa;

    border-color: #9db8d2;

    transform: translateY(-5px);

    box-shadow: 0 8px 20px rgba(0, 35, 70, .12);

}


.dimension-app-grid .app-item:hover .app-image img {

    transform: scale(1.08);

}


/*==================================================
  TABLET
==================================================*/

@media (max-width: 768px) {

    /*
     * Tetap 6 item satu baris
     */

    .dimension-app-grid {

        display: flex !important;

        flex-wrap: nowrap !important;

        overflow-x: auto;

        justify-content: flex-start;

        gap: 12px;

        padding-bottom: 10px;

    }


    .dimension-app-grid .app-item {

        flex: 0 0 180px !important;

        width: 180px !important;

        min-width: 180px !important;

    }

}


/*==================================================
  MOBILE
==================================================*/

@media (max-width: 600px) {

    .dimension-section {

        padding: 60px 15px 70px;

    }


    .dimension-title h4 {

        font-size: 25px;

    }


    .dimension-app-grid {

        overflow-x: auto;

        flex-wrap: nowrap !important;

        gap: 10px;

    }


    .dimension-app-grid .app-item {

        flex: 0 0 155px !important;

        width: 155px !important;

        min-width: 155px !important;

        min-height: 180px;

        padding: 8px;

    }


    .dimension-app-grid .app-image {

        height: 110px;

    }


    .dimension-app-grid .app-item p {

        font-size: 11px;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f41f44a *//* === SECTION RB === */
.product-section-rb {
    max-width: 1400px;
    margin: auto;
    font-family: 'Poppins', sans-serif;
}

/* === PRODUCT BOX RB === */
.product-box-rb {
    display: flex;
    justify-content: flex-start;
}

/* === PRODUCT CONTENT RB === */
.product-content-rb {
    display: flex;
    width: 100%;
    max-width: 1400px;
}

/* === CONTENT CARD RB === */
.content-card-rb {
    background: #FFF;
    border: 1px solid #E8E8E8;
    border-left: 5px solid #B5121B;
    padding: 45px;
    width: 100%;
    transition: .35s;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 50px;
}

.content-card-rb:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

/* === TEKS (KIRI) === */
.card-text-rb {
    flex: 1;
}

.card-text-rb h4 {
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    margin: 0 0 20px;
}

.card-text-rb p {
    font-size: 17px;
    line-height: 1.9;
    color: #666;
    margin: 0;
}

/* === GAMBAR (KANAN - BESAR) === */
.image-frame-rb {
    flex: 0 0 400px;
    max-width: 400px;
    border-radius: 8px;
    overflow: hidden;
    background: #F8F8F8;
    padding: 8px;
    box-sizing: border-box;
    transition: .35s;
}

.image-frame-rb:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    transform: scale(1.02);
}

.image-frame-rb img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

/* === RESPONSIVE === */
@media (max-width: 991px) {
    .product-section-rb {
        padding: 40px 20px;
    }

    .content-card-rb {
        padding: 30px;
        gap: 35px;
    }

    .card-text-rb h4 {
        font-size: 28px;
    }

    .card-text-rb p {
        font-size: 16px;
    }

    .image-frame-rb {
        flex: 0 0 280px;
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .content-card-rb {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .image-frame-rb {
        flex: 0 0 auto;
        max-width: 100%;
        width: 100%;
    }

    .image-frame-rb img {
        max-width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .product-section-rb {
        padding: 30px 15px;
    }

    .content-card-rb {
        padding: 25px;
        border-left-width: 4px;
        gap: 20px;
    }

    .card-text-rb h4 {
        font-size: 24px;
    }

    .card-text-rb p {
        font-size: 15px;
        line-height: 1.8;
    }

    .image-frame-rb {
        padding: 5px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-38382cb */.process-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}


.image-process-frame {
    width: 100%;
    /* max-height: 700px; */
    background: #FFF;
    border: 1px solid #E8E8E8;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .35s;
    box-sizing: border-box;
    overflow: hidden;
}


.image-process-frame img {
    width: auto;
    max-width: 100%;
    /* max-height: 600px; */
    height: auto;
    object-fit: cover;
    display: block;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-711b881 *//*==================================================
  ROUND BAR SECTION
==================================================*/

.roundbar-section {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 70px 30px 100px;

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;

    color: #111;
}


/*==================================================
  ROUND BAR HEADING
==================================================*/

.roundbar-heading {
    text-align: center;

    margin-bottom: 40px;
}

.roundbar-heading > span {
    display: block;

    color: #B5121B;

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 2px;

    margin-bottom: 8px;
}

.roundbar-heading h4 {
    margin: 0;

    font-size: 36px;

    font-weight: 600;

    line-height: 1.3;

    color: #111;
}

.roundbar-heading-line {
    width: 65px;

    height: 4px;

    background: #B5121B;

    margin: 17px auto 0;
}


/*==================================================
  MAIN LAYOUT
==================================================*/

.roundbar-layout {
    width: 100%;

    display: grid;

    grid-template-columns: 1.55fr 1fr;

    gap: 35px;

    align-items: start;
}


/*==================================================
  LEFT DIMENSION
==================================================*/

.roundbar-dimension {
    width: 100%;
}

.roundbar-dimension-card {
    width: 100%;

    background: #fff;

    border: 1px solid #d5e0eb;

    border-radius: 6px;

    overflow: hidden;

    box-shadow:
        0 8px 25px rgba(0, 35, 70, .08);

    position: relative;
}


/* RED TOP LINE */

.roundbar-dimension-card::before {
    content: "";

    display: block;

    width: 100%;

    height: 4px;

    background: #B5121B;
}


/* MAIN IMAGE */

.roundbar-dimension-card img {
    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;
}


/*==================================================
  RIGHT USAGE
==================================================*/

.roundbar-usage {
    width: 100%;
}


/*==================================================
  USAGE TITLE
==================================================*/

.roundbar-usage-heading {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;
}

.roundbar-usage-heading span {
    font-size: 22px;

    font-weight: 600;

    color: #111;

    white-space: nowrap;
}

.roundbar-usage-line {
    width: 45px;

    height: 3px;

    background: #B5121B;
}


/*==================================================
  USAGE GRID
==================================================*/

.roundbar-usage-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
}


/*==================================================
  USAGE ITEM
==================================================*/

.roundbar-usage-item {
    position: relative;

    width: 100%;

    min-height: 175px;

    background: #f5f8fb;

    border: 1px solid #d3dfeb;

    border-radius: 5px;

    padding: 9px;

    box-sizing: border-box;

    text-align: center;

    overflow: hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}


/* BLUE TOP LINE */

.roundbar-usage-item::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    height: 3px;

    background: #c4d8eb;

    transition: background .3s ease;
}


/*==================================================
  USAGE IMAGE
==================================================*/

.roundbar-usage-image {
    width: 100%;

    height: 115px;

    background: #fff;

    border: 1px solid #e1e7ed;

    border-radius: 3px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    box-sizing: border-box;
}


/* IMAGE */

.roundbar-usage-image img {
    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

    transition: transform .35s ease;
}


/*==================================================
  USAGE TEXT
==================================================*/

.roundbar-usage-item p {
    margin: 9px 0 2px;

    min-height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 3px;

    font-size: 12px;

    line-height: 1.4;

    font-weight: 500;

    color: #222;
}


/*==================================================
  HOVER
==================================================*/

.roundbar-usage-item:hover {
    background: #eaf2fa;

    border-color: #9db8d2;

    transform: translateY(-4px);

    box-shadow:
        0 8px 18px rgba(0, 35, 70, .11);
}

.roundbar-usage-item:hover::before {
    background: #6f96bd;
}

.roundbar-usage-item:hover .roundbar-usage-image img {
    transform: scale(1.06);
}


/*==================================================
  TABLET
==================================================*/

@media (max-width: 1000px) {

    .roundbar-layout {
        grid-template-columns: 1.4fr 1fr;

        gap: 25px;
    }

    .roundbar-usage-grid {
        gap: 10px;
    }

    .roundbar-usage-item {
        min-height: 160px;

        padding: 8px;
    }

    .roundbar-usage-image {
        height: 100px;
    }

    .roundbar-usage-item p {
        font-size: 11px;
    }
}


/*==================================================
  TABLET SMALL
==================================================*/

@media (max-width: 768px) {

    .roundbar-section {
        padding: 60px 20px 70px;
    }


    /*
     * IMAGE ATAS
     * USAGE DI BAWAH
     */

    .roundbar-layout {
        display: flex;

        flex-direction: column;

        gap: 35px;
    }


    .roundbar-dimension {
        width: 100%;
    }

    .roundbar-usage {
        width: 100%;
    }


    .roundbar-usage-grid {
        grid-template-columns: repeat(3, 1fr);

        gap: 12px;
    }


    .roundbar-usage-item {
        min-height: 175px;
    }


    .roundbar-usage-image {
        height: 115px;
    }
}


/*==================================================
  MOBILE
==================================================*/

@media (max-width: 600px) {

    .roundbar-section {
        padding: 50px 15px 60px;
    }

    .roundbar-heading {
        margin-bottom: 30px;
    }

    .roundbar-heading > span {
        font-size: 11px;
    }

    .roundbar-heading h4 {
        font-size: 28px;
    }

    .roundbar-usage-heading span {
        font-size: 20px;
    }

    .roundbar-usage-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 10px;
    }

    .roundbar-usage-item {
        min-height: 165px;

        padding: 8px;
    }

    .roundbar-usage-image {
        height: 105px;
    }

    .roundbar-usage-item p {
        font-size: 11px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-4d24f21 *//* Factory Section */

.factory-section{
    padding:80px 20px;
}


/* TITLE */

.factory-title{
    text-align:center;
    margin-bottom:40px;
}


.factory-title h2{
    margin:0;
    font-family:'Poppins','Noto Sans JP',sans-serif;
    font-size:42px;
    font-weight:700;
    color:#1c344d;
    letter-spacing:1px;
}


.factory-title h2 span{
    display:block;
    margin-top:8px;
    font-size:16px;
    font-weight:400;
    color:#777;
    letter-spacing:2px;
}


/* LINE */

.title-line{
    width:80px;
    height:3px;
    background:#B5121B;
    margin:25px auto 0;
    position:relative;
}


.title-line span{
    position:absolute;
    width:25px;
    height:3px;
    background:#E67E22;
    left:100%;
}



/* VIDEO */

.factory-video{
    max-width:1200px;
    margin:auto;
}


.factory-frame{

    position:relative;

    overflow:hidden;

    border-radius:12px;

    background:#111;

    box-shadow:
    0 20px 45px rgba(0,0,0,.25);

}


.factory-frame video{

    width:100%;

    height:auto;

    display:block;

    object-fit:cover;

}



/* DARK CINEMATIC EFFECT */

.video-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.05),
        rgba(0,0,0,.25)
    );

    pointer-events:none;

}/* End custom CSS */