/*
==========================================
PNJARA Custom Quote Frontend
Version : 1.0.0
==========================================
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');


.pcqm-wrapper{

    font-family:'Inter',sans-serif;

    max-width:1200px;

    margin:60px auto;

    padding:20px;

}

.pcqm-card{

    display:grid;

    grid-template-columns:420px 1fr;

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:
0 10px 30px rgba(0,0,0,.05),
0 25px 60px rgba(0,0,0,.08);

}

.pcqm-left{

    background:linear-gradient(
160deg,
#111111,
#2a2a2a
);

    color:#ffffff;

    padding:50px;

}

.pcqm-right{

    padding:50px;

}

.pcqm-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:100px;

    background:#FBA919;

    color:#DAA520;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:30px;

}

.pcqm-left h1{

font-size:44px;

font-weight:700;

letter-spacing:-1px;

line-height:1.15;

color:#ffffff;

}

.pcqm-description{

    color:#DAA520;

    font-size:16px;

    line-height:1.8;

}

.pcqm-benefits{

    margin:40px 0 0;

    padding:0;

    list-style:none;

}

.pcqm-benefits li{

    margin-bottom:18px;

    font-size:16px;

}

/*=========================================
FORM LAYOUT
=========================================*/

.pcqm-row{

	display:grid;

	grid-template-columns:1fr 1fr;

	gap:20px;

	margin-bottom:22px;

}

.pcqm-field{

	margin-bottom:22px;

}

.pcqm-field label{

	display:block;

	font-size:14px;

	font-weight:600;

	color:#333;

	margin-bottom:8px;

}

.pcqm-field input,

.pcqm-field textarea{

	width:100%;

	border:2px solid #ececec;

	border-radius:12px;

	background:#ffffff;

	font-size:15px;

	font-family:inherit;

	padding:15px 18px;

	transition:.25s ease;

	box-sizing:border-box;

}

.pcqm-field input{

	height:54px;

}

.pcqm-field textarea{

	resize:vertical;

	min-height:180px;

}

.pcqm-field input:focus,

.pcqm-field textarea:focus{

	outline:none;

	border-color:#FBA919;

	box-shadow:0 0 0 4px rgba(251,169,25,.18);

}

/*=========================================
UPLOAD
=========================================*/

.pcqm-upload{

	margin-top:15px;

	padding:24px;

	border:2px dashed #d8d8d8;

	border-radius:14px;

	background:#fafafa;

	text-align:center;

	transition:.25s;

}

.pcqm-upload:hover{

	border-color:#FBA919;

	background:#fffdf6;

}

.pcqm-upload label{

	display:block;

	font-weight:700;

	margin-bottom:12px;

}

.pcqm-upload input{

	margin-bottom:12px;

}

.pcqm-upload small{

	display:block;

	color:#666;

	font-size:13px;

}

/*=========================================
BUTTON
=========================================*/

.pcqm-submit{

	margin-top:28px;

}

.pcqm-submit button{
	
	letter-spacing:.5px;

	text-transform:uppercase;

	width:100%;

	height:58px;

	border:none;

	border-radius:12px;

	background:#FBA919;

	color:#111;

	font-size:16px;

	font-weight:700;

	cursor:pointer;

	transition:.25s;

}

.pcqm-submit button:hover{

	background:#111111;

	color:#ffffff;

	transform:translateY(-2px);

	box-shadow:0 12px 25px rgba(0,0,0,.18);

}

.pcqm-field input:hover,
.pcqm-field textarea:hover{

border-color:#cccccc;

}

.pcqm-submit button:active{

transform:scale(.98);

}

/*=========================================
RESPONSIVE
=========================================*/

@media (max-width:991px){

    .pcqm-card{

        grid-template-columns:1fr;

    }

    .pcqm-left{

        padding:40px;

    }

    .pcqm-right{

        padding:40px;

    }

    .pcqm-row{

        grid-template-columns:1fr;

    }

}

@media (max-width:576px){

    .pcqm-wrapper{

        padding:15px;

    }

    .pcqm-left{

        padding:30px;

    }

    .pcqm-right{

        padding:30px;

    }

    .pcqm-left h1{

        font-size:34px;

    }

}

.pcqm-upload{

    cursor:pointer;

}

.pcqm-upload:hover{

    transform:translateY(-2px);

}

.pcqm-logo{

    margin-bottom:30px;

}

.pcqm-logo img{

    width:320px;      /* Tukar saiz di sini */

    height:auto;

    display:block;

}