@import url("products.css");

/*=========================
CONTACT HERO
=========================*/

.container {
    justify-content: center;
    transform:translateX(-588px);
    width: 95%;
    position: relative;
    top: 16%;
}

.alamat{
    transform: translateY(8px);
}

.contact-hero .product-features{

    width:100%;
    justify-content:flex-start;
    gap:0;

}

.contact-hero .feature{

    border-right:1px solid #EEDFBF;

}

.organic-card{
    top:37%;
}

.organic-logo {
  position: absolute;
  top: 54%;
  right: 60px;
  width: 140px;
  z-index: 4;
}

.hero-highlights{
    min-width:127%;
    margin-bottom: 15%;
}

.contact-hero .feature:last-child{

    border-right:none;

}

.contact-hero .feature{

    flex:1;
    height:180px;
}

.contact-hero .feature h3{

    min-height:0px;

}

.contact-hero .feature p{

    min-height:65px;

}

.hero-title span:last-child{
    font-size:55px;
}

@media(max-width:768px){

.contact-hero .product-features{

    width:100%;

    grid-template-columns:1fr 1fr;

}
.organic-logo{
    display:none;
}

}

/*=========================
CONTACT INFO
=========================*/

.contact-info{

    margin-top:-40px;
    position:relative;
    z-index:20;

}

.contact-info-card{

    background:#FFFCF7;

    border:1px solid #EFE2C0;

    border-radius:24px;

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

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.info-item{

    display:flex;
    align-items:center;
    transform: translateY(-20px);
    gap:18px;

    padding:28px 26px;

    border-right:1px solid #EFE2C0;

}

.info-item:last-child{

    border-right:none;

}

.info-icon{

    width:64px;
    height:64px;

    flex-shrink:0;

    border-radius:50%;

    background:#FFF8EC;

    border:1px solid #E7DAB3;

    display:flex;
    align-items:center;
    justify-content:center;

}

.info-icon i{

    font-size:34px;
    color:#2F6C33;

}

.info-content h4{

    color:#1B4F2D;

    font-size:18px;

    margin-bottom:8px;

    font-weight:700;

}

.info-content p,
.info-content a{

    color:#333;

    line-height:1.7;

    text-decoration:none;

    font-size:16px;

}

.info-content a:hover{

    color:#2F6C33;

}

@media(max-width:1100px){

.contact-info-card{

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

}

.info-item:nth-child(2){

    border-right:none;

}

.info-item:nth-child(-n+2){

    border-bottom:1px solid #EFE2C0;

}

}

@media(max-width:768px){

.contact-info{

    margin-top:40px;

}

.contact-info-card{

    grid-template-columns:1fr;

}

.info-item{

    border-right:none;
    border-bottom:1px solid #EFE2C0;

}

.info-item:last-child{

    border-bottom:none;

}

}

/*=========================
CONTACT FORM
=========================*/

.contact-form-section{

    padding:15px 0;
    margin-top: 27px;
}

.contact-grid{

    display:grid;
    grid-template-columns:1.2fr .9fr;
    gap:35px;

}

.contact-form-card,
.company-card{

    background:#FFFDF8;
    border:1px solid #F0DFC2;
    border-radius:24px;
    padding:35px;

}

.contact-form-card h2,
.company-card h2{

    color:#174F2A;
    font-size:38px;
    margin-bottom:8px;

}

.contact-subtitle,
.company-subtitle{

    color:#666;
    margin-bottom:30px;

}

.company-subtitle{

    display:flex;
    align-items:center;
    gap:8px;

}

.company-subtitle i{

    color:#79A82D;

}

.form-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;

}

.form-group{

    display:flex;
    flex-direction:column;
    margin-bottom:20px;

}

.form-group label{

    margin-bottom:10px;
    font-weight:600;
    color:#234D2E;

}

.form-group span{

    color:#D62D2D;

}

.form-group input,
.form-group select,
.form-group textarea{

    border:1px solid #E7DAB3;
    border-radius:12px;
    padding:15px 18px;
    font-size:15px;
    outline:none;
    transition:.3s;

}

.form-group textarea{

    resize:vertical;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:#4F8D34;

}

.contact-submit{

    width:100%;
    background:#0E5928;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:18px;
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    transition:.3s;

}

.contact-submit:hover{

    background:#1A6A33;

}

.contact-note{

    margin-top:22px;
    text-align:center;
    color:#666;
    display:flex;
    justify-content:center;
    gap:8px;

}

.company-card{

    position:relative;

}

.company-leaf{

    position:absolute;
    right:25px;
    top:100px;
    width:85px;

}

.company-list{

    margin:30px 0;

}

.company-item{

    display:flex;
    gap:16px;
    margin-bottom:28px;

}

.company-icon{

    width:54px;
    height:54px;
    border-radius:50%;
    border:1px solid #E8D7B2;
    background:#FFF8EC;

    display:flex;
    justify-content:center;
    align-items:center;

}

.company-icon i{

    color:#2F6C33;
    font-size:28px;

}

.company-item h4{

    color:#1B4F2D;
    margin-bottom:6px;

}

.map-box{

    border-radius:18px;
    overflow:hidden;
    height:230px;

}

.map-box iframe{

    width:100%;
    height:100%;
    border:none;

}

@media(max-width:992px){

.contact-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.contact-form-section{

    padding:60px 0;

}

.form-grid{

    grid-template-columns:1fr;

}

.contact-form-card,
.company-card{

    padding:25px;

}

.contact-form-card h2,
.company-card h2{

    font-size:30px;

}

.company-leaf{

    display:none;

}

}

/*=========================
TOAST
=========================*/

.toast{

    position:fixed;

    top:30px;
    right:30px;

    display:flex;
    align-items:center;
    gap:18px;

    width:360px;

    padding:18px 22px;

    background:white;

    border-radius:16px;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

    border-left:6px solid #2E7D32;

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transform:translateY(-20px);

    transition:.35s;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.toast-icon{

    font-size:38px;

    color:#2E7D32;

}

.toast-content h4{

    color:#1B4F2D;

    margin-bottom:5px;

}

.toast-content p{

    color:#666;

    line-height:1.5;

    font-size:14px;

}

/*=========================
LOADING
=========================*/

#loadingOverlay{

    position:fixed;

    inset:0;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(4px);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

    opacity:0;

    visibility:hidden;

    transition:.3s;

}

#loadingOverlay.show{

    opacity:1;

    visibility:visible;

}

.loading-box{

    background:white;

    width:330px;

    border-radius:20px;

    padding:35px;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.spinner{

    width:60px;
    height:60px;

    margin:auto;

    border-radius:50%;

    border:5px solid #E9E9E9;

    border-top:5px solid #2F6C33;

    animation:spin 1s linear infinite;

}

.loading-box h3{

    margin-top:22px;

    color:#174F2A;

}

.loading-box p{

    margin-top:10px;

    color:#777;

}

@keyframes spin{

from{

    transform:rotate(0deg);

}

to{

    transform:rotate(360deg);

}

}

/*=========================
FAQ
=========================*/

.contact-faq{

    padding:90px 0;

}

.contact-faq .container{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;

}

.faq-card{

    background:#FFFDF7;
    border:1px solid #EFE1C2;
    border-radius:26px;
    padding:40px;
    transform: translateX(5px);
    
}

.section-tag{

    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#7AA631;

    font-weight:700;

    margin-bottom:12px;

}

.faq-card h2{

    color:#1C4F2D;

    font-size:38px;

    margin-bottom:30px;

}

.faq-item{

    border:1px solid #EFE1C2;

    border-radius:14px;

    overflow:hidden;

    margin-bottom:14px;

    background:#fff;

}

.faq-item summary{

    padding:18px 22px;

    cursor:pointer;

    font-weight:600;

    list-style:none;

}

.faq-item summary::-webkit-details-marker{

    display:none;

}

.faq-item summary::after{

    content:"+";

    float:right;

    font-size:24px;

    color:#2F6C33;

}

.faq-item[open] summary::after{

    content:"−";

}

.faq-item p{

    padding:0 22px 20px;

    color:#666;

    line-height:1.8;

}

/*=========================
PARTNER CARD
=========================*/

.partner-card{

    position:relative;

    overflow:hidden;

    border-radius:26px;

    min-height:470px;

    background:#1E5A2B;
    transform: translateX(15px);
}

.partner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(90deg,
    rgba(14,73,34,.92),
    rgba(25,86,39,.82),
    rgba(32,92,44,.10));

    z-index:1;

}

.partner-content{

    position:relative;

    z-index:2;

    padding:45px;

    color:#fff;

    width:58%;

}

.partner-content h2 {
  font-size: 49px;
  line-height: 1.15;
  margin-bottom: 18px;
  width: 200%;
}

.partner-content p{
    width: 200%;
    line-height:1.8;

    opacity:.92;

    margin-bottom:30px;

}

.partner-features{

    width: 200%;
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-bottom:35px;

}

.partner-features div{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

}

.partner-features i{

    font-size:28px;

}

.partner-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:#fff;

    color:#1E5A2B;

    text-decoration:none;

    padding:16px 26px;

    border-radius:999px;

    font-weight:700;

}

.partner-image{

    position:absolute;

    right:-10px;

    bottom:0;

    width:53%;

    z-index:0;

}

@media(max-width:992px){

.contact-faq .container{

grid-template-columns:1fr;

}

.partner-content{

width:100%;

}

.partner-image{

opacity:.18;

width:90%;

right:-40px;

}

}

.cta-footer{
    margin-top: -5%;
}

.contact-info{
    margin-top:44px;
    position:relative;
    z-index:20;
}

.contact-bar{
    display:block;
    width:100%;
    max-width:1320px;
    margin:auto;

    border-radius:24px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.contact-bar{
    width:100%;
    height:auto;
}