/*
|------------------------------|
|- 0. Global Below The Fold ---|
|- 1. Services Section --------|
|- 2. Trust Section -----------|
|- 3. Steps Section -----------|
|- 4. Reviews Section ---------|
|- 5. Guarantees Section ------|
|- 6. Compare Section ---------|
|- 7. Team Section ------------|
|- 8. Featured Section --------|
|- 9. FAQ Section -------------|
|- 10. Customer Satisfaction --|
|- 11. Responsive Style Guide -|
|- sm:  639px -----------------|
|- md:  767px -----------------|
|- lg:  1023px ----------------|
|- xl:  1279px ----------------|
|- 2xl: 1535px ----------------|
|------------------------------|
*/

/*
|-----------------------|
|- 1. Services Section -|
|-----------------------|
*/
.services .with-badge { position: relative; }
.services .badge { position: absolute; right: 10px; top: 10px; box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.35); }
.services ul li { margin: 8px 0; }

@media screen and (max-width: 1023px) {
    .services .with-badge,
    .services .wp-block-column figure, 
    .services .wp-block-column img { width: 100% !important; }
    .services .wp-block-columns { flex-wrap: wrap !important; }
    .services .wp-block-columns .wp-block-column { flex-basis: calc(50% - 30px) !important; }
}

@media screen and (max-width: 639px) {
    .services .wp-block-columns .wp-block-column { flex-basis: 100% !important; }
    .services .badge p { font-size: 10px !important; }
}

/*
|--------------------|
|- 2. Trust Section -|
|--------------------|
*/
@media screen and (max-width: 1023px) {
    .trust .trust-row { gap: 30px !important; }
    .trust .trust-row > .wp-block-group { flex-basis: 100%; display: flex; gap: 20px; }
    .trust .trust-row > .wp-block-group > .wp-block-group { margin: 0 !important; display: flex; gap: 5px; flex-direction: column; }
    .trust svg { margin: 0 !important; flex: 1 0 100% !important; max-width: 68px !important; }
    .trust h3,
    .trust p { margin: 0 !important; text-align: left; }
    .trust p { font-size: 14px !important; }
}

/*
|--------------------|
|- 3. Steps Section -|
|--------------------|
*/
.steps .columns > .column { position: relative; flex-basis: calc(33.33% - 30px); }
.steps .columns > .column::after { content: ''; position: absolute; width: 50%; height: 2px; background: var(--wp--preset--color--primary); top: 23px; z-index: -1; right: 0; }
.steps .columns > .column::before { content: ''; position: absolute; width: 60%; height: 2px; background: var(--wp--preset--color--primary); top: 23px; z-index: -1; left: -30px; }
.steps .columns > .column:first-child:before { display:none; }
.steps .columns > .column:last-child:after { display:none; }

@media screen and (max-width: 1023px) {  
    .steps h3 { text-align: left !important; margin-bottom: 10px !important; font-size: 24px !important; }
    .steps .columns { flex-wrap: wrap !important; }
    .steps .columns > .column { flex-basis: 100%; display: flex; gap: 20px; }
    .steps .columns > .column::before { width: 2px !important; height: 100% !important; top: 30px !important; left: 15px !important; }
    .steps .columns > .column:first-child::before { display: block !important; }
    .steps .columns > .column::after, 
    .steps .columns > .column:last-child::before { display: none !important; }
    .steps .columns > .column .wp-block-group[style*="font-size:30px"] { margin: 0 !important;  max-width: 32px !important; width: 32px; }
    .steps .columns > .column .wp-block-group[style*="font-size:30px"] p { font-size: 20px !important; }
    .steps .columns > .column > .wp-block-group:nth-of-type(2) p { font-size: 16px !important; text-align: left; }
}

/*
|----------------------|
|- 4. Reviews Section -|
|----------------------|
*/
.reviews .wp-gr { font-size: 14px; line-height: 20px; color: #333; overflow: hidden; }
.reviews .wp-gr .grw-row { display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.reviews .wp-gr .wp-google-left img { width: 50px; height: 50px; border-radius: 50%; float: left; box-shadow: 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24); }
.reviews .wp-gr .wp-google-stars .wp-stars { display: flex; gap: 4px; }
.reviews .grw-header .wp-google-place { position: relative; display: flex; gap: 10px; padding: 20px; min-height: 165px; width: 100%; border: 1px solid #e9e9e9; border-radius: 4px; background-color: var(--wp--preset--color--white); }
.reviews .wp-gr .grw-header .wp-google-left { position: relative; width: 50px; }
.reviews .wp-gr .grw-header .wp-google-left::before { content: ""; position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid'%3E%3Cpath d='M22.56 12.25c0-.78-.07-1.53-.20-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z' fill='%234285F4'/%3E%3Cpath d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z' fill='%2334A853'/%3E%3Cpath d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z' fill='%23FBBC05'/%3E%3Cpath d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z' fill='%23EA4335'/%3E%3Cpath d='M1 1h22v22H1z' fill='none'/%3E%3C/svg%3E"); background-size: cover; z-index: 1; }
.reviews .wp-gr .grw-header .wp-google-left img { display: none !important; }
.reviews .grw-header .wp-google-right div:nth-child(2) { display: flex; gap: 5px; margin-bottom: 5px; }
.reviews .grw-header .wp-google-rating { font-size: 21px; font-weight: 600; color: #427fed; }
.reviews .grw-header .wp-google-name { font-size: 22px; font-weight: 700; margin-bottom: 10px; }
.reviews .grw-header .wp-google-name a { text-decoration: none; }
.reviews .grw-header .wp-google-powered:nth-child(2) { display: none; }
.reviews .grw-header .wp-google-powered~.wp-google-powered { display: none; }
.reviews .grw-header .wp-google-stars .wp-stars svg { height: 14px; width: 14px; }
.reviews .grw-header .wp-google-stars { display: flex; align-items: center; }
.reviews .grw-header .wp-google-wr { position: absolute; left: 0; bottom: 0; right: 0; margin: auto; padding: 0 20px 20px; }
.reviews .grw-header .wp-google-wr a { display: flex; gap: 7px; justify-content: center; align-items: center; font-size: 16px; color: #fff; width: 100%; padding: 12px 15px; text-transform: capitalize; background: #0a6cff; white-space: nowrap; text-decoration: none; box-shadow: 0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24); transition: all .2s ease-in-out; }
.reviews .grw-header .wp-google-wr a svg { height: 16px; width: 16px; background-color: #fff; border-radius: 50%; padding: 1px; }

.reviews .grw-content { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 800px; overflow: hidden; }
.reviews .grw-content .grw-reviews { display: flex; scroll-behavior: smooth; scroll-snap-type: x mandatory; padding: 15px 0; overflow: hidden; margin: 0 25px; gap: 10px; }
.reviews .grw-content .grw-review { display: flex; justify-content: center; align-items: center; scroll-snap-align: start; transform-origin: center; transform: scale(1); transition: transform .5s; flex: 0 0 32.4%; }
.reviews .grw-content .grw-review .grw-review-inner { position: relative; padding: 15px; width: 100%; background-color: #fafafa; border-radius: 4px; border: 1px solid #e9e9e9; }
.reviews .grw-content .grw-review .grw-review-inner > svg { position: absolute!important; top: 10px!important; right: 10px!important; width: 18px!important; height: 18px!important; }
.reviews .grw-content .grw-review .wp-google-feedback::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3)!important; -webkit-border-radius: 4px!important; border-radius: 4px!important; }
.reviews .grw-content .grw-review .wp-google-feedback::-webkit-scrollbar-thumb { -webkit-border-radius: 10px!important; border-radius: 10px!important; background: #ccc!important; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5)!important; }
.reviews .grw-content .grw-review .wp-google-feedback::-webkit-scrollbar { width: 4px!important; }
.reviews .grw-content .wp-google-left { white-space: nowrap; text-overflow: ellipsis; line-height: 24px; margin-bottom: 15px; }
.reviews .grw-content .wp-google-left img { margin-right: 10px; }
.reviews .grw-content .wp-google-left .wp-google-name { font-size: 16px; font-weight: 700; color: var(--wp--preset--color--primary); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
.reviews .grw-content .wp-google-left .wp-google-time { color: #555; font-size: 13px; }
.reviews .grw-content .wp-google-stars { margin-bottom: 10px; }
.reviews .grw-content .wp-google-stars .wp-stars svg { width: 19px; height: 19px; }
.reviews .grw-content .wp-google-feedback { height: 100px!important; overflow-y: auto!important; }
.reviews .grw-content .wp-google-feedback .wp-google-text { color: #222; overflow: hidden; white-space: pre-wrap; word-break: break-word; }
.reviews .grw-content .grw-controls { position: absolute; width: 100%; }
.reviews .grw-content .grw-controls .grw-btns { position: absolute; height: 33px; width: 33px; cursor: pointer; }
.reviews .grw-content .grw-controls .grw-prev { left: 0; margin-left: -5px; }
.reviews .grw-content .grw-controls .grw-next { right: 0; margin-right: -5px!important; }
.reviews .grw-content .grw-controls .grw-btns svg path { fill: #aaa; }

.reviews .grw-content .grw-dots { display: flex; gap: 3px; }
.reviews .grw-content .grw-dots .grw-dot { display: inline-block; width: 9px; height: 9px; background-color: #ccc; border-radius: 20px; cursor: pointer; opacity: .4; transition: all .2s ease-in-out; }
.reviews .grw-content .grw-dots .grw-dot.active { background-color: #427fed; opacity: 1; }
.reviews .grw-content .grw-content-inner { position: relative; display: flex; align-items: center; width: 800px; }
.reviews .wp-block-button.is-style-secondary .wp-block-button__link { display: flex; justify-content: center; align-items: center; gap: 10px; }

@media screen and (min-width: 1024px) {  
    .reviews .grw-header .wp-google-wr a:hover { background: #1f67e7!important; box-shadow: 0 0 2px rgba(0,0,0,.12),0 3px 5px rgba(0,0,0,.24); }
    .reviews .grw-content .grw-controls .grw-btns:hover svg path { fill: #555; }
}

@media screen and (max-width: 1023px) {  
    .reviews .total-review { font-size: 24px !important;line-height: normal !important; }
    .reviews .wp-gr { padding-bottom: 25px; }
    .reviews .wp-gr .grw-row { flex-direction: column !important; }
    .reviews .grw-content .grw-content-inner { width: 620px !important; }
    .reviews .grw-content .grw-review { flex: 0 0 48.8% !important; }
}

@media screen and (max-width: 767px) {
    .reviews .grw-content .grw-content-inner { width: 320px !important; }
    .reviews .grw-content .grw-review { flex: 0 0 100% !important; }
}

/*
|-------------------------|
|- 5. Guarantees Section -|
|-------------------------|
*/
@media screen and (max-width: 1023px) {
    .guarantees p { font-size: 20px !important; }
    .guarantees .wp-block-columns .wp-block-column { flex-basis: calc(50% - 30px) !important; }
}

/*
|----------------------|
|- 6. Compare Section -|
|----------------------|
*/
.compare .wp-block-table { position: relative; }
.compare .compare-services .wp-block-table:not(:first-of-type),
.compare .compare-services.active .wp-block-buttons { display: none; }
.compare .compare-services.active .wp-block-table:not(:first-of-type) { display: block; }
.compare table svg { display: inline; height: 20px; vertical-align: middle; margin-top: -4px; margin-right: 10px; }
.compare table thead tr th { border-bottom: 1px solid #202020 !important; font-size: 16px; font-weight: 700; color: #5E5E5E; padding: 10px 0; }
.compare table tbody tr td { border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important; color: #5E5E5E; padding: 14px 0; }

@media screen and (max-width: 767px) {
    .compare table svg { height: 15px !important; }
    .compare table thead tr th { font-size: 14px !important; line-height: normal !important; vertical-align: middle; }
    .compare table thead tr th svg, 
    .compare table thead tr th mark { display: none !important; }
    .compare table tbody tr td { padding: 12px 0; font-size: 14px; }
}

@media screen and (max-width: 639px) {
    .compare h2 { display: none !important; }
}

/*
|-------------------|
|- 7. Team Section -|
|-------------------|
*/
@media screen and (max-width: 1023px) {  
    .team h2 { text-align: center; }
    .team p { font-size: 16px !important; line-height: 1.5; }
    .team .buttons-container { width: 100% !important; }
    .team .wp-block-buttons { max-width: 100% !important; }
}

@media screen and (max-width: 639px) {
    .team { background-color: var(--wp--preset--color--white) !important; }
}

/*
|-----------------------|
|- 8. Featured Section -|
|-----------------------|
*/
@media screen and (max-width: 1023px) {  
    .featured > .wp-block-group > .wp-block-group { flex-wrap: wrap !important; gap: 20px 0 !important; }
    .featured > .wp-block-group > .wp-block-group > .wp-block-group { flex-basis: 45% !important; }
}

@media screen and (max-width: 639px) {
    .featured > .wp-block-group { padding-top: 0px !important; padding-bottom: 10px !important; }
    .featured > .wp-block-group > .wp-block-group { gap: 50px 0 !important; justify-content: center !important; }
    .featured > .wp-block-group > .wp-block-group > .wp-block-group { flex-basis: 55% !important; }
}

/*
|------------------|
|- 9. FAQ Section -|
|------------------|
*/
.faq .schema-faq-plus-minus { position: relative; width: 12px; height: 12px; cursor: pointer; }
.faq .schema-faq-plus-minus::before,
.faq .schema-faq-plus-minus::after { content: ""; display: block; background-color: var(--wp--preset--color--black); position: absolute; top: 50%; left: 0; transition: 0.35s; width: 100%; height: 2px; }
.faq .schema-faq-plus-minus:before { transform: translatey(-50%); }
.faq .schema-faq-plus-minus:after { transform: translatey(-50%) rotate(90deg); }
.faq .schema-faq-section.active .schema-faq-plus-minus:before { transform: translatey(-50%) rotate(-90deg); opacity: 0; }
.faq .schema-faq-section.active .schema-faq-plus-minus:after { transform: translatey(-50%) rotate(0); }
.faq .schema-faq-section.active .schema-faq-plus-minus::before,
.faq .schema-faq-section.active .schema-faq-plus-minus::after { background-color: var(--wp--preset--color--white); }
.faq .schema-faq-section.active .schema-faq-question { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--white); }
.faq .schema-faq-question { cursor: pointer; }
.faq .schema-faq-answer { display: none; padding: 20px; }

@media screen and (max-width: 1023px) {  
    .faq .schema-faq-question p { font-size: 16px !important; }
    .faq .schema-faq-answer p { font-size: 14px !important; }
}

/*
|-----------------------------|
|- 10. Customer Satisfaction -| 
|-----------------------------|
*/
@media screen and (max-width: 1023px) {  
    .customer-satisfaction .content p { font-size: 16px !important; }
}

@media screen and (max-width: 639px) {
    .customer-satisfaction .wp-block-buttons { flex-wrap: wrap !important; }
    .customer-satisfaction .wp-block-buttons .wp-block-button { width: 100% !important; }
}