/* TESTIMONIAL CSS */

.testimonial {padding-block: 120px; }
.testimonial .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.testimonial .review-card {border: 1px solid var(--_c-br); border-radius: 20px 0 20px 20px; padding: 26px 30px 25px; position: relative; z-index: 1;} 
.testimonial .review-card ul {display: flex; align-items: center; gap: 5px; margin-top: 10px;}
.testimonial .quote-icon {width: 60px; height: 60px; background-color: var(--c-primary); display: flex; align-items: center; justify-content: center; border-radius: 50% 0 50% 50%; position: absolute; top: 0; right: 0; transition: var(--trans-5);}
.testimonial .quote-icon img {width: 32px; height: 22px; object-fit: cover; transition: var(--trans-5);}
.testimonial .review-card:hover .quote-icon {background-color: var(--c-heading);}
.testimonial .review-card:hover .quote-icon img {filter: invert(1);}
.testimonial .customer {display: flex; align-items: center; justify-content: start; gap: 20px; margin-bottom: 20px;}
.testimonial .text-content > :first-child {display: block; line-height: 20px; font-size: calc(var(--fs-base, 16px) + 4px); font-weight: 700;}
.testimonial .text-content > :nth-child(2) {color: var(--c-text);}
.testimonial .customer img {border-radius: 50%;}
.testimonial .review-card ul img {filter: var(--c-filter-secondary);}
.testimonial .btns {display: flex; align-items: center; justify-content: center; position: absolute; top: -155px; right: 0; z-index: 100; gap: 10px;}
.testimonial .btns button {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--c-primary); transition: var(--trans-5); border-radius: 50%;}
.testimonial .btns button img {filter: invert(1);}
.testimonial .btns button:hover {background-color: var(--c-heading);}


@media only screen and (max-width: 991px) {
    .testimonial {padding-block: 90px;}
    .testimonial .wrapper {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and (max-width: 768px) {
    .testimonial {padding-block: 60px;}
    .testimonial .wrapper {gap: 15px;}
    .testimonial .review-card {padding: 15px;}
    .testimonial .customer {gap: 12px; margin-bottom: 12px;}
    .testimonial .text-content > :first-child {max-width: 93px;}
}
@media only screen and (max-width: 576px) {
    .testimonial {padding-block: 45px;}
    .testimonial .wrapper {grid-template-columns: 1fr;}
    .testimonial .text-content > :first-child {max-width: 100px;}
}
@media only screen and (max-width: 475px) {
    .testimonial .text-content > :first-child {max-width: 133px;}
}

/* CONTACT US PAGE */

.contact-info {padding-block: 120px 90px;}
.contact-info .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.contact-info .box {display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: var(--_c-category-bg); padding: 40px 40px 41px; border-radius: 20px;}
.contact-info .img {width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background-color: var(--c-primary); border-radius: 50%; transition: var(--trans-4); position: relative; z-index: 1;}
.contact-info .img img {filter: invert(1);}
.contact-info .img::before {position: absolute; top: 0; left: 0; right: 0; bottom: 0; content: ""; border-radius: 50%; background-color: var(--c-heading); transform: scale(0); transform-origin: center;transform-style: preserve-3d; transition: all 0.4s cubic-bezier(0.62, 0.21, 0.45, 1.52); z-index: -1;}
.contact-info .box:hover .img::before {transform: scaleX(1);}
.contact-info .text {display: block; font-size: var(--fs-base, 16px); text-transform: capitalize; color: var(--c-text); margin-block: 20px 5px;}
.contact-info .num {display: block; font-family: var(--ff-primary); font-size: calc(var(--fs-xs, 24px) - 2px); font-weight: 700; line-height: 32px; color: var(--c-heading); text-align: center;}
.contact-info .box a {transition: var(--trans-4);}
.contact-info .box a:hover {color: var(--c-primary);}
.contact-form {padding-bottom: 120px;}
.contact-form .wrapper {display: grid; grid-template-columns: repeat(2, 1fr); background-color: var(--c-heading); gap: 30px; padding: 60px 40px 60px 60px; border-radius: 20px;}
.contact-form iframe {width: 100%; height: 100%; border: 0; border-radius: 20px;}
.contact-form .detail > :first-child {font-size: var(--fs-md, 45px); font-weight: 700; letter-spacing: -1.44px; line-height: 1.2em; text-transform: capitalize; color: #fff; margin-bottom: 26px;}
.contact-form form {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
.contact-form form :where(input, textarea) {height: 57px; font-family: var(--ff-secondary); background-color: #ffffff0d; border: 1px solid #ffffff1a; padding-inline: 20px; border-radius: 10px;}
.contact-form form textarea {height: 175px; grid-area: 3 / 1 / 4 / 3;}
.contact-form form .btn__primary {width: fit-content; grid-area: 4 / 1 / 5 / 3; justify-content: center;}
.contact-form form .btn__primary::before {background-color: #fff;}
.contact-form form .btn__primary:hover {color: var(--c-heading);}
.contact-form form .btn__primary:hover img {filter: unset;}

@media only screen and (max-width: 1200px) {
    .contact-form form {gap: 20px;}
}

@media only screen and (max-width: 991px) {
    .contact-info {padding-block: 90px;}
    .contact-info .box {padding: 25px;} 
    .contact-info .wrapper {gap: 20px;}
    .contact-form {padding-bottom: 90px;}
    .contact-form .wrapper {grid-template-columns: 1fr;}
    .contact-form iframe {height: 420px;}
}
@media only screen and (max-width: 768px) {
    .contact-info {padding-block: 60px;}
    .contact-info .wrapper {grid-template-columns: repeat(2, 1fr); gap: 15px;}
    .contact-form {padding-bottom: 60px;} 
    .contact-info .wrapper > :first-child {grid-area: 2 / 1 / 3 / 3;}
    .contact-form .wrapper {padding: 40px;}
    .contact-form iframe {height: 350px;}
}
@media only screen and (max-width: 576px) {
    .contact-info {padding-block: 45px;}
    .contact-form {padding-bottom: 45px;} 
    .contact-info .img {width: 60px; height: 60px;}
    .contact-form .wrapper {padding: 20px;}
    .contact-form form {grid-template-columns: 1fr;}
    .contact-form form textarea {grid-area: unset;}
    .contact-form form :where(input, textarea) {height: 45px;}
    .contact-form form textarea {height: 140px;}
    .contact-form form .btn__primary {grid-area: unset;}
}

@media only screen and (max-width: 475px) {
    .contact-info .wrapper {grid-template-columns: 1fr;}
    .contact-info .text {margin-block: 10px 5px;}
    .contact-info .num {line-height: 25px;}
    .contact-info .wrapper > :first-child {grid-area: unset;} 
}

/* LOGIN AND SIGNUP PAGE */
.sign-up {padding-block: 112px 120px;}
.sign-up > :first-child {font-size: calc(var(--fs-xl, 65px) - 5px); line-height: 1.0em; font-weight: 700; text-align: center; padding-bottom: 60px;}
.sign-up .sign-form {max-width: 590px; margin-inline: auto; background-color: #fff; box-shadow: 0px 0px 80px rgba(0, 0, 0, 0.06); border-radius: 20px; padding: 60px 50px 52px;}
.sign-up .sign-form input { border-radius: 10px; border: 1px solid #1312221a; background-color: #eeeff2b3; width: 100%; height: 60px;    color: var(--c-heading); font-size: var(--fs-base, 16px); font-weight: 400; font-style: normal; padding-left: 30px; padding-right: 30px;  transition: var(--trans-5); font-family: var(--ff-secondary); margin-bottom: 20px;}
.sign-up .sign-form input:focus {background-color: transparent; border-color: var(--c-primary);}
.sign-up .sign-form .btn__primary {width: 100%; justify-content: center;}
.sign-up .continue {margin-top: 30px;}
.sign-up .continue.create {margin-top: unset;}
.sign-up .btns {display: flex; align-items: center; justify-content: start; gap: 14px;}
.sign-up .btns > * { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #868689; background-color: #fff;    color: var(--c-heading); font-size: var(--fs-base, 16px); line-height: 28px;  font-family: var(--ff-secondary); font-weight: 500; padding: 10px 15px 10px; border-radius: 5px; letter-spacing: -0.01em; transition: var(--trans-3);}
.sign-up .btns  > *:hover {border-color: var(--c-primary);}
.sign-up .account {display: flex; align-items: center; justify-content: center; gap: 3px; color: var(--c-text); padding-top: 22px;}
.sign-up .account a {color: var(--c-primary);}
.sign-up .forget-password {display: flex; align-items: center; justify-content: space-between;padding-top: 44px;}
.sign-up .custom-box {display: flex; align-items: center; justify-content: start; gap: 9px; cursor: pointer;}
.sign-up .custom-box > :nth-child(2) {color: var(--c-text);}
.sign-up .forget-password a {font-weight: 400; transition: var(--trans-4);}
.sign-up .forget-password a:hover {color: var(--c-primary);}
.sign-up .custom-box input {height: unset; display: none; margin-bottom: unset;}
.sign-up .custom-check {width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border: 1px solid #e3e4ea; border-radius: 4px; position: relative;}
.sign-up .custom-check:has(input:checked) {border-color: var(--c-primary);}
.sign-up .custom-check:has(input:checked)::after {position: absolute; top: 0px; left: 0px; bottom: 0; right: 0; content: ""; width: 8px;    height: 8px; background: var(--c-primary); border-radius: 2px; margin: 3px auto 0px; transition: var(--trans-3); transform: scale(1.0);}


@media only screen and (max-width: 991px) {
    .sign-up {padding-block: 90px;}
}
@media only screen and (max-width: 768px) {
    .sign-up {padding-block: 60px;}
    .sign-up > :first-child {padding-bottom: 30px;}
    .sign-up .btns {justify-content: center; flex-wrap: wrap;}
}
@media only screen and (max-width: 576px) {
    .sign-up {padding-block: 45px;}
    .sign-up .sign-form {padding: 35px;}
    .sign-up .sign-form input {height: 45px;}
}