/* ===================================
HOME PAGE CONTACT FORM BANNER SIDE
=================================== */
   
.contact-page-form { /*  main form container  */
    gap: 20px;
    display: flex;
    flex-direction: column;
}


.cpf-grid-1, .cpf-grid-2 { /*  name, email, number, budget  */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


.cpf-grid-3 { /*  checkbox field + text area  */
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 20px;
}

.cpf-grid-4 { /*  submit btn field + policy cont */
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1rem !important;
}


.contact-page-form input{ /*  all input field  */
    border-radius: 100rem !important;
    border-color: var(--e-global-color-text) !important;
    border-width: 1.2px !important;
    min-height: 55px !important;
    padding: 0.5rem 2rem !important;
    color: var(--e-global-color-text) !important;
}

.contact-page-form input::placeholder{
    color: var(--e-global-color-text);
}

/* country code area */
.contact-page-form .intl-tel-input input { /*  flag field  */
    padding-left: 50px !important;
}

.contact-page-form .selected-dial-code{
    display: none !important;
}

.contact-page-form .iti-arrow{
    right: 35px !important;
}


.cpf-select select { /* form budget field */
    border-radius: 100rem !important;
    border-color: var(--e-global-color-text) !important;
    border-width: 1.4px !important;
    padding: 1rem 2rem !important;
    color: var(--e-global-color-text) !important;
    min-height: 55px;
}


.cpf-checkbox-cont p span input {
    display: none;
}

.cpf-checkbox-cont .wpcf7-checkbox {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 25px 15px;
    margin-top: 13px;
}

.cpf-checkbox-cont .wpcf7-list-item{
    margin: 0px !important;
}


.cpf-checkbox-cont .wpcf7-list-item-label{
    border: solid 1px;
    border-color: var(--e-global-color-text) !important;
    border-radius: 100rem;
    padding: 10px 23px 10px 20px;
    margin: 0px !important;
    
}

.cpf-checkbox-cont .wpcf7-list-item-label:hover{
    cursor: pointer;
}

.wpcf7-list-item input[type="checkbox"]:checked 
+ .wpcf7-list-item-label {
  background: #fff;
  color: #000;
  border-color: #fff;
}

/* Plus icon */
.wpcf7-list-item-label::after {
  content: "+";
    font-weight: 300;
    position: absolute;
    top: 0;
    right: 10px;
   
    color: #fff;
}

.wpcf7-list-item input[type="checkbox"]:checked 
+ .wpcf7-list-item-label::after {
  content: "✕"; 
  color: #000;
}

.wpcf7-list-item label {
  position: relative;
  display: inline-block;
}




.cpf-project textarea { /* form text area */
    border-radius: 3rem !important;
    border-color: var(--e-global-color-text) !important;
    border-width: 1.4px !important;
    padding: 1rem 2rem !important;
    color: var(--e-global-color-text) !important;
    height: 100px;
}

.cpf-project textarea::placeholder{
    color: var(--e-global-color-text);
}

.cpf-policy{ /*  policy cont  */
    width: 58%;
}


.cpf-policy label a{ /*  policy text link  */
    color: var(--e-global-color-text);
    text-decoration: underline;
}

.cpf-policy label a:hover{ /*  policy text on hover  */
 color: var(--e-global-color-accent) !important;
}


.cpf-submit-btn { /*  submit btn  */
    width: 38%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
} 

.cpf-submit-btn p { /*  submit btn inner cont  */
    width: 100% !important;
}

.cpf-submit-btn input{ /*  submit btn input  */
	width: 100% !important;
    background-color: var(--e-global-color-text) !important;
    color: var(--e-global-color-secondary) !important;
    font-weight: 550;
	text-transform: capitalize !important;
	font-size: 1.3rem !important;
    
}

.cpf-submit-btn input:hover{ /*  submit btn on hover  */
    background-color: var(--e-global-color-accent) !important;
    color: var(--e-global-color-text) !important;
}


/* MOBILE VIEW CSS  */
@media (width <= 767px){

.cpf-grid-1, .cpf-grid-2 { /*  name, number field main containers  */
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cpf-policy, .cpf-submit-btn, .cpf-submit-btn p, .cpf-submit-btn input { /*  policy & Submit btn  */
    width: 100%;
    justify-content: flex-start;
} 

}





/* ===================================
HOME PAGE CONTACT FORM BOTTOM SIDE
=================================== */

.contact-form-home { /*  main form container  */
    gap: 20px;
    display: flex;
    flex-direction: column;
}


.cfh-grid-1, .cfh-grid-2 { /*  name, number field main containers  */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


.cfh-grid-3 { /*  submit btn field cont  */
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1rem !important;
}


.contact-form-home input{ /*  all input field  */
    border-radius: 100rem !important;
    border-color: var(--e-global-color-670d70f) !important;
    border-width: 1.4px !important;
    min-height: 55px !important;
    padding: 0.5rem 2rem !important;
    color: white !important;
    
}


.intl-tel-input input { /*  flag field  */
    padding-left: 84px !important;
}


.cfh-policy{ /*  policy cont  */
    width: 58%;
}


.cfh-policy label a{ /*  policy text link  */
    color: var(--e-global-color-text);
    text-decoration: underline;
}

.cfh-policy label a:hover{ /*  policy text on hover  */
 color: var(--e-global-color-accent) !important;
}


.cfh-submit-btn { /*  submit btn  */
    width: 38%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
} 

.cfh-submit-btn p { /*  submit btn inner cont  */
    width: 100% !important;
}

.cfh-submit-btn input{ /*  submit btn input  */
	width: 100% !important;
    background-color: var(--e-global-color-text) !important;
    color: var(--e-global-color-secondary) !important;
    font-weight: 550;
	text-transform: capitalize !important;
	font-size: 1.3rem !important;
    
}

.cfh-submit-btn input:hover{ /*  submit btn on hover  */
    background-color: var(--e-global-color-accent) !important;
    color: var(--e-global-color-text) !important;
}


/* MOBILE VIEW CSS  */
@media (width <= 767px){

.cfh-grid-1, .cfh-grid-2 { /*  name, number field main containers  */
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cfh-policy, .cfh-submit-btn, .cfh-submit-btn p, .cfh-submit-btn input { /*  policy & Submit btn  */
    width: 100%;
    justify-content: flex-start;
} 

}