/* ----------------------------------- */
/* __---CONTACT PAGE CSS---___ */
/* ----------------------------------- */

.breadCrumb ul {display: flex; align-items: center; gap: 5px; margin-top: 13px;}
.breadCrumb li {display: flex; align-items: center}
.breadCrumb ul a {font-size: var(--fs-base); transition: var(--transition);}
.breadCrumb ul a:hover {color: var(--c-primary);}
.breadCrumb ul > :last-child {padding-left: 16px; position: relative; color: #000;}
.breadCrumb ul > :last-child::after {width: 7px; height: 10px; background: no-repeat center / cover url('../images/icons/chevron-right.svg'); position: absolute; left: 0; top: 50%; content: ""; transform: translateY(-50%); filter: var(--_c-light-filter);} 

.contact-banner .wrapper {height: 358px;  background: no-repeat center / cover url("../images/contact-banner.webp");  border-radius: 8px; margin-block: 13px 25px; }
.contact-banner .content {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--_c-gradient-bg); padding: 50px 55px; border-radius: 8px;}
.contact-banner .content > :first-child {font-size: calc(var(--fs-lg) + 2px ); font-weight: 800; text-align: center; color: var(--_c-dark); margin-bottom: 12px;}
.contact-banner .content > :nth-child(2) {font-size: calc(var(--fs-base) + 2px); text-align: center; color: var(--_c-dark);}
.contact-form form {display: flex; flex-direction: column; justify-content: end;}
.contact-form .wrapper {display: grid; grid-template-columns: minmax(430px, 900px) minmax(250px, 450px); gap: 20px; margin-bottom: 30px;}
.contact-form .title > :first-child {font-size: calc(var(--fs-md) + 2px); font-weight: 800; line-height: 1.15; margin-bottom: 25px;}
.contact-form .form-content {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;}
.contact-form .form-content > * {margin-bottom: 5px;}
.contact-form .form-content label {display: block; font-size: calc(var(--fs-xs) + 1px); font-weight: 700; margin-bottom: 7px; color: var(--_c-dark);}
.contact-form .form-content label > :first-child {color: var(--_c-dark-red);}
.contact-form .form-content input, textarea {height: 50px; font-size: calc(var(--fs-xs) + 1px); padding-inline: 16px; border-radius: 4px; box-shadow: var(--_c-shadow); outline: none; transition: var(--transition);}
.contact-form .form-content :where(input, textarea):hover {box-shadow: var(--_c-secondary-shadow);}
.contact-form .form-content :where(input, textarea)::placeholder {font-weight: 400; color: var(--_c-font-color);}  
.contact-form .form-content :where(input, textarea):focus-visible {box-shadow: 0 0 0 2px #000;}
.contact-form .form-content textarea {padding: 13px 13px 13px 15px; height: 162px;}
.contact-form .form-content input[type="checkbox"]  {height: 18px; width: 18px;}
.contact-form .form-content > :last-child {grid-area: 2 / 1 / 3 / 3;}
.contact-form .parentCheckbox {display: flex; align-items: center; gap: 15px; }
.contact-form .parentCheckbox > * {display: flex; align-items: center;}
.contact-form .parentCheckbox label {margin-bottom: unset;}
.contact-form .parentCheckbox label > :first-child {color: #000;}

.contact-form .checkmarked {display: block; padding-left: 30px; position: relative; cursor: pointer; user-select: none;}
.contact-form .checkmarked input { height: 0; width: 0; position: absolute; opacity: 0; cursor: pointer; }
.contact-form .checkmark {width: 19px; height: 19px; background-color: transparent; border: 1px solid #00000014; border-radius: 4px; position: absolute; top: 0; left: 0;}
.contact-form .checkmarked input:checked + .checkmark {background-color: #000; transition: var(--transition);}
.contact-form .checkmark::after {width: 11px; height: 11px;content: ""; background: no-repeat center / cover url("../images/icons/check.svg"); filter: invert(1); position: absolute; inset: 0; margin: auto; display: none;}
.contact-form .checkmarked input:checked + .checkmark::after {display: block;}


.contact-form button { width: 144px; padding-block: 8px; margin-top: 10px;}
.contact-form button:disabled {opacity: 0.5;}
.contact-form .details {width: 100%; height: auto; background: var(--_c-gradient-bg); padding: 25px; border-radius: 8px;}
.contact-form :where(.details, .service, .extra) > :first-child {font-size: calc(var(--fs-md) - 2px ); font-weight: 800; line-height: 1.15; color: var(--_c-dark);}
.contact-form :where(.details, .service, .extra) > :nth-child(2) {max-width: 355px; display: block; font-size: var(--fs-xs); text-decoration: underline; margin-block: 13px 26px; color: var(--_c-dark);}
.contact-form .details > :nth-child(3) {margin-bottom: 5px;}
.contact-form .details > :where(:nth-child(3), :nth-child(4)) {font-size: var(--fs-xs); color: var(--_c-dark-red); text-decoration: underline; }
.contact-form .details > :where(:nth-child(3), :nth-child(4)):hover {text-decoration: none;}
.contact-form .service {width: 100%; height: auto; background: var(--_c-secondary-gradient); padding: 25px; border-radius: 8px; margin-block: 25px;}
.contact-form .service > :nth-child(2) {text-decoration: none;}
.contact-form :where(.service, .extra) a {width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; font-size: var(--fs-xs); font-weight: 700; color: var(--_c-dark); background-color: #fff; padding: 10px 16px; border-radius: 4px; margin-bottom: 18px;}
.contact-form :where(.service, .extra) a > :nth-child(2) {color: var(--_c-dark); text-align: center; word-break: break-word; transition: var(--transition);}
.contact-form :where(.service, .extra) a:hover > :nth-child(2) {color: var(--c-primary);}
.contact-form :where(.service, .extra) a:hover img {filter: var(--_c-primary-filter); transition: var(--transition);} 
.contact-form .extra {width: 100%; height: auto; background: var(--_c-third-gradient); padding: 25px; border-radius: 8px;}
.contact-form .extra > * { color: #fff;}
.contact-form .extra > :nth-child(2) {text-decoration: none;}
.contact-form :where(.extra) a:hover img {filter: var(--_c-red-filter);}
.contact-form :where(.extra) a:hover > :nth-child(2) {color: var(--_c-dark-red);}
.contact-form .store-time {display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px;}
.contact-form .store-time > * {font-size: var(--fs-xs); color: #fff;}
.contact-map iframe {height: 450px; border: 0; border-radius: 8px;}

@media only screen and (max-width: 991px) {
    .contact-form .wrapper {max-width: 750px; grid-template-columns: 1fr; margin-inline: auto;}
    .contact-map iframe {height: 300px;}
}
@media only screen and (max-width: 768px) {
    .contact-form .form-content > * {margin-bottom: unset;}
}
@media only screen and (max-width: 576px) {
    .contact-form .form-content {grid-template-columns: 1fr;}
    .contact-form .form-content > :last-child {grid-area: unset;}
    .contact-banner .content > :first-child {font-size: 25px;}
}