/*
 * Styles for the global "Start Your Engagement" CTA + form section
 * (template-parts/content-engagement-cta.php).
 *
 * Self-contained on purpose: this section is reused on pages that don't
 * load custom.css / custom-responsive.css (those only enqueue on the
 * home-new / AI / web-development templates), so every rule this section
 * needs is duplicated here rather than depended on from those files.
 */
:root{--common_gradiant:linear-gradient(93.78deg,#ff5b2e -7.25%,#f5e12d 127%);--primary:#ff5b2e;--white:#fff;--grey:#949494;--grey_one:#f8f8f8;--grey_two:#434343;--grey_three:#5e5e5e;--black:#1e1e1e;}

.mb-22{margin-bottom:22px;}
.mb-60{margin-bottom:60px;}
.common_paddding{padding:150px 0;}
.section-sub{max-width:960px;margin-right:auto;margin-left:auto;color:var(--grey);font-size:clamp(16px,1.4vw,20px);font-weight:400;line-height:120%;}
.banner-cta-wrap{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;}

.cta_section{position:relative;overflow:hidden;padding-bottom:70px;}
.cta_section:after{background-repeat:no-repeat;background-position:center;background-size:cover;content:'';background-image:url(../images/common/ninja_tech_bg.webp);width:100%;height:auto;position:absolute;min-height:772px;bottom:-182px;z-index:0;}
.cta-inner{text-align:center;display:flex;flex-direction:column;align-items:center;}
.cta-title{font-family:"Roboto",sans-serif;font-size:clamp(28px,4vw,76px);font-weight:600;color:var(--black);line-height:1.2;max-width:1200px;}

.engagement-form-wrap{width:100%;max-width:clamp(320px,90vw,914px);background:#fff;border-radius:clamp(12px,1.5vw,20px);padding:clamp(24px,3vw,52px);margin-top:clamp(28px,3.5vw,48px);text-align:left;border:1px solid #F2F2F2;backdrop-filter:blur(13px);z-index:9;scroll-margin-top:120px;}
.engagement-form-title{font-family:"Roboto",sans-serif;font-size:clamp(18px,2.2vw,30px);font-weight:700;color:var(--black);margin-bottom:clamp(16px,2vw,28px);text-align:center;}
.engagement-form{display:flex;flex-direction:column;gap:clamp(12px,1.5vw,16px);}
.engagement-form-row p{display:flex;gap:clamp(12px,1.5vw,16px);}
.engagement-form-row p span{width:100%;}
.engagement-form-row .file-upload-button p span{width:auto;}
.engagement-form-row .file-upload-button label{background:url(../images/common/file-upload.svg) no-repeat left center;padding-left:36px;}
.engagement-form-submit p{line-height:normal;margin:0;}

.engagement-input{flex:1;width:100%;padding:clamp(10px,1vw,12px) 0;border:none;border-bottom:1px solid #E3E3E3;background:transparent;font-size:clamp(16px,1vw,18px);font-family:"Roboto",sans-serif;color:var(--black);outline:none;transition:border-color 0.2s;}
.engagement-input:focus{border-color:var(--primary);}
.engagement-input::placeholder{color:#999;}
.engagement-textarea{height:clamp(60px,6vw,90px);resize:none;}

.custom-select-wrap{position:relative;flex:1;width:100%;}
.custom-select-trigger{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 12px 0;border-bottom:1px solid #E3E3E3;cursor:pointer;user-select:none;transition:border-color 0.2s;}
.custom-select-wrap.open .custom-select-trigger{border-color:var(--primary);}
.custom-select-text{font-size:18px;font-family:"Roboto",sans-serif;color:#999;transition:color 0.2s;}
.custom-select-wrap.has-value .custom-select-text{color:var(--black);}
.custom-select-option{padding:10px 14px;font-size:14px;font-family:"Roboto",sans-serif;color:var(--black);border-radius:6px;cursor:pointer;transition:background 0.15s,color 0.15s;}
.custom-select-option:hover{background:#fff4f1;color:var(--primary);}
.custom-select-option.active{background:var(--primary);color:#fff;}

.engagement-form-row select{-webkit-appearance:none;appearance:none;flex:1;width:100%;padding:clamp(10px,1vw,12px) 24px clamp(10px,1vw,12px) 0;border:none;border-bottom:1px solid #E3E3E3;background:url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5L7 10L12 5' stroke='%23999999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center;font-size:clamp(16px,1vw,18px);font-family:"Roboto",sans-serif;color:#999;outline:none;transition:border-color 0.2s;cursor:pointer;}
.engagement-form-row select:focus{border-color:var(--primary);}
.engagement-form-row select.has-value{color:var(--black);}

.file-upload-button{position:relative;}
.file-upload-button span,.file-upload-button label{display:flex;align-items:center;font-size:16px;font-style:normal;font-weight:300;line-height:150%;letter-spacing:-0.176px;font-family:"Archivo",sans-serif;}
.file-upload-button span img{width:24px;height:24px;object-fit:contain;margin-right:12px;}

.engagement-form-submit{display:flex;justify-content:center;margin-top:clamp(12px,1.5vw,20px);position:relative;display:inline;overflow:hidden;border-radius:30px;transition:all 0.6s ease;width:100%;max-width:173px;margin:0 auto;}
.engagement-form-submit .cta-btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:10px 84px 14px 34px!important;border-radius:30px;background:#FF5B2E!important;color:#fff;font-size:16px;font-weight:600;text-decoration:none;overflow:hidden;transition:background 0.5s ease,box-shadow 0.5s ease-in-out;z-index:2;}
.engagement-form-submit::before{content:"";position:absolute;width:24px;height:24px;background:#FF6F47;border-radius:50%;right:40px;top:50%;transform:translateY(-50%);transition:all 0.6s ease;z-index:3;pointer-events:none;}
.engagement-form-submit::after{content:"";position:absolute;right:45px;top:50%;transform:translateY(-50%);width:14px;height:14px;background:url(../images/common/arrow.webp) no-repeat center;background-size:contain;z-index:4;pointer-events:none;}
.engagement-form-submit:hover::before{width:140%;height:140%;right:-20%;border-radius:50px;z-index:1;}
.engagement-form-submit:hover .cta-btn{background:transparent;}
.engagement-form-submit:hover{box-shadow:0 0 0 6px #FF5B2E66;}
.engagement-form-submit .wpcf7-spinner{position:absolute;}
.engagement-form-submit input.wpcf7-submit:hover,.engagement-form-submit .page-template-tpl-contact input.wpcf7-submit:hover{background:#FF6F47!important;}
.engagement-form-submit .cta-btn:hover{box-shadow:none;}

@media(max-width:1600px){
  .common_paddding{padding:100px 0;}
  .mb-60{margin-bottom:50px;}
}
@media(max-width:1400px){
  .mb-60{margin-bottom:40px;}
}
@media(max-width:1200px){
  .common_paddding{padding:80px 0;}
}
@media(max-width:992px){
  .common_paddding{padding:60px 0;}
}
@media(max-width:768px){
  .common_paddding{padding:40px 0;}
  .mb-22{margin-bottom:16px;}
  .mb-60{margin-bottom:30px;}
}
@media(max-width:600px){
  .engagement-form-row p{flex-direction:column;gap:clamp(12px,3vw,16px);}
  .engagement-form-row .custom-select-trigger{padding:10px 0;}
  .engagement-form-row .custom-select-text{font-size:16px;}
  .engagement-form-row select{padding:10px 24px 10px 0;font-size:16px;}
}
@media(max-width:576px){
  .mb-60{margin-bottom:20px;}
}