/*** Basic Reset & Typography ***/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    line-height: 1.6;
}

/*** Layout Container ***/
.container {
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}


/*** Header ***/
.site-header {
    background: #fff;
    padding: 20px 0;
}

.site-title a {
    text-decoration: none;
    color: #333;
    font-size: 28px;
    font-weight: bold;
}

.main-nav .menu {
    list-style: none;
    display: flex;
    gap: 15px;
}

.main-nav a {
    text-decoration: none;
    padding: 5px 8px;
}

.site-content {
    padding:40px 0;
}

/*** Index & Archive Posts ***/
.entry-title a {
    color: #222;
    text-decoration: none;
    font-size: 24px;
}

.entry-title a:hover {
    text-decoration: underline;
}

.entry-meta {
    color: #777;
    margin-bottom: 10px;
}

.entry-excerpt {
    margin-bottom: 0px;
}

/*** Single Post ***/
.single-title {
    font-size: 32px;
    margin-bottom: 10px;
}

.single-meta {
    color: #777;
    margin-bottom: 20px;
}

.single-thumbnail img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.single-content {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.single-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

/*** Page Template ***/
.page-title {
    font-size: 30px;
    margin-bottom: 20px;
}

.page-content {
    font-size: 18px;
    line-height: 1.8;
    position: relative;
}

/*** Footer ***/
.site-footer {
    text-align: center;
    padding: 25px 0;
    font-size: 14px;
    color: #666;
}


/*Page No Title */
body.page-template-page-no-title > .site-content {
    padding: 3px 0 0 0;
}

/*main contact ngisor slider*/
.main_contact {
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    margin-top: -50px;
    position: relative;
    margin-bottom: 50px;
    padding:20px;
    line-height: 120%;
    z-index: 1;
}
.main_contact img {
    width: 50px;
    height: auto;
}

/*-------------------------------------------
Block || 2 block
-------------------------------------------*/
    /*edited block -image text- wp custom class .main_contact*/
    .main_contact .wp-block-media-text__content  {
        margin-left: 20px;
        font-size: 16px;
    }
    @media (max-width: 900px) {
        .main_contact img {
        width: 40px;
        }
        :where(.wp-block-columns.main_contact.is-layout-flex) {
            gap: 10px;
        }
    }
    /*paksa 2 column pada mobile*/
    @media (max-width: 781px) {

        .wp-block-columns.main_contact:not(.is-not-stacked-on-mobile)>.wp-block-column {
            flex-basis: 46%!important;
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
            padding:20px;
            position: relative;
        }

        .main_contact {
            box-shadow:none;
            padding:0px;
        }
    }
    /*ciutkan ikon*/
    @media (max-width: 600px) {
    .main_contact img {
        width: 30px;
        }
        .main_contact .wp-block-media-text__content  {
            line-height: 110%;
        }
        .main_contact .wp-block-media-text>.wp-block-media-text__content {
            /*sejajar img & txt*/
        grid-row: 1!important;
        margin-left: 30px;
        }
    }
    @media (max-width: 400px) {
        .wp-block-columns.main_contact:not(.is-not-stacked-on-mobile)>.wp-block-column {
            padding: 10px;
        }
        .main_contact .wp-block-media-text__content {
            font-size: 13px;
        }
    }

    /*edited block -pullquote- wp custom class .company_summary*/
    .wp-block-pullquote.company_summary {
        position: relative;
        width: calc(100vw - 15px);
        max-width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        background: #f9f9f9;
        margin-top: -90px;
        padding: 60px 0 0;
        font-size: 22px;
        margin-bottom: 0px;
    }

    .wp-block-pullquote.company_summary blockquote {
        max-width: 1100px; /* optionalsesuai container*/
        margin: 0 auto;
        padding: 40px 60px 60px 40px;
        background: transparent; /* background di wrapper, bukan block */
    }

    /*edited block -image & text- wp custom class .product_home*/
    :where(.wp-block-columns.product_row1.is-layout-flex) {
            gap: 10px!important;
            margin-bottom: 10px;
        }
    .wp-block-column.product_home {
        background: #2267d6;
        padding:0px;
        color: #fff;
        font-size: 16px;
    }
    .product_home .wp-block-image.size-full {
        margin-bottom: 20px;
    }
    .product_home h2, .product_home p {
        margin:0 20px 20px;
        line-height: 120%;
        width: 80%;
    }
    .product_home .wp-block-heading a {
        color: #ffffff;
        text-decoration: none;
        transition: color 0.3s ease-out;
    }
    .product_home .wp-block-heading a:after {
        content: " \2192";
        left: 0px; /* Starting position */
        transition: left 0.3s ease-in-out; /* Transition for the 'left' property */
        position: relative;

    }
    .product_home .wp-block-heading a:hover:after {
        left: 10px;
    }
    .product_home .wp-block-heading a:hover {
        color: #333333;
    }
    /*:where(.wp-block-columns.product_row1.is-layout-flex), {
        gap: 2em!important;
    }
    */
    .label_section {
        margin-top: 50px;
        font-weight: normal;
        letter-spacing: 0.5px;
    }
    .label_section:after {
        content: "*";
        top: 5px;
        margin-left: 5px;
        position: relative;
    }
    .label_section:before {
        content: "*";
        top: 5px;
        right: 5px;
        position: relative;
    }
    .desc_label {
        margin-top: 10px;
        margin-bottom: 30px;
        line-height: 100%;
    }
    /*cta_end*/
    .wp-block-pullquote.cta_end {
        position: relative;
        width: calc(100vw - 15px);
        max-width: 100vw;
        margin-left: 50%;
        transform: translateX(-50%);
        background: #f9f9f9;
        margin-top: 50px;
        margin-bottom: 0;
        padding: 0px 0 0;
        font-size: 22px;
        background:#f9f9f9 url(../images/roof.png) bottom right no-repeat ;
        background-size: cover;
    }

    .wp-block-pullquote.cta_end blockquote {
        max-width: 1100px; /* optional sesuai container*/
        margin: 0 auto;
        padding: 40px;
        background: transparent; /* background di wrapper, bukan block */
    }

    /*footer*/
    .site-footer {
        color:#dfe2e7 ;
    }
    .footer_alamat {
        font-size: 16px;
        margin-bottom: -10px;
        width:70%;
        margin:0 auto;
    }
    .footer_logo {
        margin-bottom:30px;
    }
    /*Menu bottom*/
    .menu-footer-menu-container {
        display: flex;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        justify-content: center;
        /* Optional: For vertical centering if the container has a defined height */
        align-items: center; 
        flex-wrap: wrap; 
    }
    .menu-footer-menu-container ul,
    .menu-footer-menu-container li {
        display: flex;
        flex-wrap: wrap;
    }
    .menu-footer-menu-container li {
        margin-left: 5px;
        margin-right: 5px;
    }
    .menu-footer-menu-container li a {
        color: #dfe2e7;
        text-decoration: none;
        font-size: 12px;
        font-weight: bold;
        white-space: nowrap;
    }
    .menu-footer-menu-container li a:hover {
        text-decoration: underline;
    }
    .menu-footer-menu-container ul {
        display: flex;
        justify-content: center;
        align-items: center;       
    }


/*contact form7*/
div.wpcf7 {
    margin: 20px 0 0 0;
    padding: 0px;
    position: relative;
    width: 100%;
    text-align: center;
}
input[type="text"], input[type="email"], textarea {
    border-radius: 0;
    padding:5px;
    width: 300px;
    border: solid 1px #3b7c00;
    font-size: 16px;
}
input[type="text"], input[type="email"], textarea {
    width: 300px;
    padding: 15px;
    margin-top: 10px;
    width: 500px;
    border-radius: 7px;
}
.wpcf7-form-control.wpcf7-submit.has-spinner {
    padding: 15px 40px;
    background: #3b7c00;
    border-radius: 7px;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
}
.wpcf7-form-control.wpcf7-submit.has-spinner:active {
  transform: translateY(2px); /* Moves the button down slightly */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.24); /* Adjusts shadow for a pressed look */
  border:none;
  background-color: #45a049; /* Darker color on press */
}
.wpcf7-spinner {
    position: absolute;
    margin-left: 20px;
    margin-top: 15px;
}
@media (max-width: 560px) {
    input[type="text"], input[type="email"], textarea {
        width: 100%;
    }
}

/*block list bawaan wordpress*/

ul.wp-block-list li {
    margin-left: 50px;
    font-size: 90%;
}
ul.wp-block-list  {
    margin-bottom: 15px;
    margin-top: 15px;   
}
/*1column center*/
/* jika kamu menaruh class pada column Gutenberg */
.wp-block-column.centercolumn {
  width: 80% !important;
  margin: 0 auto;
  flex: 0 0 80% !important; /* jika parent adalah flex */
}
/*gallery*/
.wp-block-gallery .wp-block-image.popup-image {
    border:solid 10px #efefef;
}
/*smart slider*/
@media (max-width: 700px) {
    .main_contact {
        margin-top:-25px;
    }
}



    @media (max-width: 781px) {
        .wp-block-pullquote.company_summary blockquote,
        .wp-block-pullquote.cta_end blockquote {
            text-align: left;
            padding: 30px;
            font-size: 80%;
        }
        .desc_label {font-size: 37px!important; }
    }
    @media (max-width: 500px) { 
        .main_contact img {
            width: 25px;
        }
        .main_contact {
            /*font-size: 13px;*/
        }
        .main_contact .wp-block-media-text>.wp-block-media-text__content {
            margin-left: 30px;
            padding: 0px 0 0px 5px;
        }
        .wp-block-pullquote.company_summary {
            padding: 40px 0 0;
        }
    }