/*
 Theme Name:   Twenty Twenty-Four
 Description:  Twenty Twenty-Four Child Theme
 Author:       Tryfon Tzanetis
 Author URI:   http://tafhub.com
 Description: Twenty Twenty-Four is designed to be flexible,
 versatile and applicable to any website. Its collection of templates and patterns tailor to different needs,
 such as presenting a business,
 blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process,
 is fully compatible with the site editor,
 and takes advantage of new design tools introduced in WordPress 6.4.
 Template:     twentytwentyfour
 Text Domain:  twentytwentyfourchild
*/

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=Manrope:wght@200..800&display=swap');

:root {
    --container-padding: 10rem;
    --inner-padding: 5rem;
    --total-padding: calc(var(--container-padding) + var(--inner-padding));
}
html {
    font-size: min(0.521vw, 10px);
}
body {
    background-color: #EFEDE7;
    font-optical-sizing: auto;
    font-weight: 200;
    font-family: 'Manrope', sans-serif;
    font-size: 2.8rem;
    line-height: normal;
    max-width: 1920px;
    margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
    font-optical-sizing: auto;
    font-weight: 600;
    font-family: 'Comfortaa', sans-serif;
    color: #163971;
}
h1, h2 {
    font-size: 7.2rem !important;
}
h2 {
    padding-left: var(--inner-padding);
    margin-bottom: 6rem !important;
}
h3,
h3.has-medium-font-size {
    color: #333333;
    font-size: 3.2rem !important;
    font-weight: 500 !important;
    margin-bottom: 1rem !important;
}
p {
    margin-bottom: 1em;
}

main > .wp-block-group {
    padding: 0 var(--container-padding) 13rem !important;
}
header > .wp-block-group {
    padding: 7.4rem var(--total-padding) var(--total-padding) !important;
}

.wp-block-navigation__container {
    gap: 4.4rem;
    font-weight: 200;
    color: #333333;
}

.wp-block-button .wp-block-button__link,
.btn {
    font-family: 'Comfortaa', sans-serif;
    font-size: 3.2rem;
    text-transform: uppercase;
    height: 8.2rem;
    line-height: normal;
    border-radius: 2rem;
    padding: 0 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F38392;
    border: none;
    color: #fff;
    cursor: pointer;
}
.wp-block-button .wp-block-button__link:hover,
.btn:hover {
    background-color: #E87D8C;
}

input:not([type="submit"]) {
    font-size: 2.8rem;
    height: 8.2rem;
    line-height: normal;
    border-radius: 2rem;
    padding: 0 2rem;
    width: 100%;
    border: none;
    box-sizing: border-box;
    margin-top: .5rem;
    background-color: #EFEDE7;
}
label {
    font-size: 2.8rem;
    font-weight: 500;
    color: #333333;
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.wpcf7-form-control-wrap:not(:last-of-type) {
    display: block;
    margin-bottom: 2.4rem;
}
.wpcf7-response-output {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.wp-block-site-logo img {
    width: 24rem;
}
.wpcf7-not-valid-tip {
    font-size: 2.2rem;
}
.wpcf7 p {
    margin-bottom: 0;
}
.wpcf7 br {
    display: none;
}
.wpcf7-submit {
    margin: 5rem auto 0;
}
.wpcf7-spinner {
    display: block;
    margin: 1rem auto;
}

.js-thanx {
    display: none;
}

.hero {
    border-radius: 2rem;
    background: #78bedc url('images/hero-img.png') no-repeat right 6.4rem top / 77rem;
    padding: calc(var(--inner-padding) + 1rem) var(--inner-padding);
}
.hero h1 {
    margin-bottom: 8rem;
}


.video {
    position: relative;
}
.video iframe {
    border-radius: 2.5rem;
    opacity: 0.01;
    position: relative;
    z-index: 2;
    transition: opacity 0.3s;
}
.video-cover img {
    width: 100%;
    border-radius: 2.5rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    z-index: 1;
}
.video-cover img:hover {
    opacity: 0.8;
}

.wp-block-separator {
    width: 102% !important;
    height: .7rem;
    background: url('images/line.svg') no-repeat center / 100% 100%;
    margin-bottom: var(--container-padding);
    margin-left: -1%;
    border: none;
}

.wp-block-separator.both-margin {
    margin-bottom: 13rem;
}

.table-wrap {
    background: #F5F3EF;
    border-radius: 2.5rem;
    padding: 3.9rem 0 2.8rem;
    max-width: calc(100vw - var(--container-padding) * 2);
    overflow-x: auto;
}
.table-wrap td, 
.table-wrap th {
    word-break: normal;
    overflow-wrap: break-word;
}
.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    font-weight: 200;
}
.wp-block-table td, .wp-block-table th, .wp-block-table thead {
    border: none;
}
.wp-block-table td {
    padding: 2.5rem 4.2rem;
}
.wp-block-table th {
    padding: 2.5rem;
}
.wp-block-table th,
.wp-block-table td:first-of-type {
    font-weight: 500;
    font-size: 3.2rem;
}

.wp-block-table td:nth-of-type(2) {
    background-color: #F5DDDD;
}
.wp-block-table th:nth-of-type(2) {
    border-radius: 1.5rem 1.5rem 0 0;
    background-color: #F5DDDD;
}
.wp-block-table tr:last-of-type td:nth-of-type(2) {
    border-radius: 0 0 1.5rem 1.5rem;
}

.cta {
    padding: calc(var(--inner-padding) + 2.8rem) var(--inner-padding) calc(var(--inner-padding) - 2rem);
    margin-top: 0;
    font-size: 3.2rem;
    font-weight: 200;
    line-height: normal;
}
.wp-block-column:first-of-type {
    padding-right: 6rem;
}
.wp-block-column:last-of-type {
    flex-basis: auto !important;
    flex-shrink: 0;
}
.cta .wp-block-button .wp-block-button__link {
    min-width: 41.2rem;
}
#table .cta .wp-block-column:first-of-type {
    flex-basis: 46% !important;
    padding-right: var(--inner-padding);
}
#about_tpa .cta .wp-block-column:first-of-type {
    flex-basis: 58% !important;
}

#about_tpa h2 {
    text-align: left;
}

.about-text {
    background-color: #E3DCE6;
    padding: 2.8rem var(--inner-padding) 3.6rem;
    border-radius: 2.5rem;
}
.about-doc .wp-block-column:first-of-type {
    padding-left: var(--inner-padding);
    padding-right: var(--inner-padding);
    flex-basis: 54% !important;
}
.about-doc strong {
    font-weight: 400;
}
.about-doc img {
    width: 100%;
    max-width: 42rem;
    border-radius: 1.6rem;
}

#footer {
    padding: 0 var(--container-padding) !important;
}
footer .wp-block-navigation__container {
    gap: .6rem
}
footer p {
    margin-top: 0;
    margin-bottom: .9rem;
}
.urologo img {
    width: 23.7rem !important;
    margin-top: 3.7rem;
}

/* Mobile */
.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
    background-color: #EFEDE7;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
.wp-block-navigation__responsive-close,
.wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    height: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    justify-content: center;
    align-items: center;
    padding-top: 16rem;
    padding-bottom: 16rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    font-size: 5rem;
    justify-content: center;
    align-items: center;
}
.wp-block-navigation__responsive-container-close {
    top: 6rem;
    right: var(--inner-padding);
}
.wp-block-navigation__responsive-container-close svg, .wp-block-navigation__responsive-container-open svg {
    width: 10rem;
    height: 10rem;
}


/* popups */
.bod-block-popup-wrap .bod-block-popup.fade {
    border-radius: 2.5rem;
    background-color: #78BEDC !important;
}
.bod-block-popup-wrap .bod-block-popup .bod-modal-title h2 {
    font-size: 5rem !important;
    color: #163971;
    padding-left: 0;
    margin-bottom: 0 !important;
}
.bod-block-popup-wrap button.bod-block-title-closer {
    font-size: 5rem !important;
    padding: 0.6rem !important;
    cursor: pointer;
}

.bod-modal-title,
.bod-modal-content {
    background: transparent !important;
}



/* Video Slider */
.vs-heading {
    margin: 5rem 0 3rem 2.5rem !important;
    font-weight: 700 !important;
}
.video-slider{
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    width: calc(100% + 1.5rem);
}
.video-slider .slick-track {
    display: flex;
    gap: 3rem;
}

.has-image .wp-block-getwid-video-popup__wrapper {
    min-height: 22rem;
    border-radius: 3rem;
}
.wp-block-getwid-video-popup__icon {
    width: 8rem;
    height: 8rem;
    line-height: 8rem;
    font-size: 3rem;
}
.wp-block-getwid-video-popup__caption .wp-block-getwid-video-popup__title {
    overflow: hidden;
    max-height: 8rem;
    -webkit-line-clamp: 2;
    display: box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    white-space: normal;
    text-align: left;
    font-size: 2.4rem;
    font-weight: 700;
    color: #163971;
}

/* Reviews Slider */
.reviews-slider {
    
}

.reviews-slider .wp-block-getwid-content-slider-slide__wrapper {
    padding: 0 var(--inner-padding);
}
.review-header {
    background-color: #E3DCE6;
    padding: 1rem;
    border-radius: 2.8rem;
    color: #163971;
    padding: 3rem 5rem;
    font-family: 'Comfortaa', sans-serif;
}

.review-header h4 {
    font-size: 3.2rem;
    font-weight: 700;
}
.review-header p {
    font-size: 2.4rem;
    font-weight: 600;
    margin: 1rem 0 0;
}

.review-text {
    padding: 4rem 2.5rem !important; 
    font-size: 2.4rem;
    line-height: 1.4;
}

.reviews-slider .slick-next, 
.reviews-slider .slick-prev {
    top: 9.5rem;
}

/* Slider Arrows */
.slick-next, .slick-prev {
    width: auto;
    height: auto;
    top: 16rem;
    transform: translateY(-50%);
}
.slick-next {
    right: -5rem;
}
.slick-prev {
    left: -5rem;
}
.slick-prev:before,
.slick-next:before {
    font-size: 5rem;
    color: #163971 !important;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    opacity: 1;
}
.slick-next:before {
    content: "\f054";
}
.slick-prev:before {
    content: "\f053";
}



@media (max-width: 781px) {
    :root {
        --container-padding: 4rem;
        --inner-padding: 2.4rem;
        --total-padding: calc(var(--container-padding) + var(--inner-padding));
    }

    h1 {
        font-size: 5.4rem !important;
    }
    h2 {
        font-size: 6.2rem !important;
    }
    h3, h3.has-medium-font-size {
        font-size: 2.8rem !important;
    }

    html {
        font-size: 0.926vw;
    }
    body {
        background-color: #EFEDE7;
        font-optical-sizing: auto;
        font-weight: 200;
        font-family: 'Manrope', sans-serif;
        font-size: 2.4rem;
        line-height: normal;
    }

    main > .wp-block-group {
        padding-bottom: 9rem !important;
    }
    .wp-block-separator.both-margin {
        margin-bottom: 9rem;
    }

    .wp-block-button .wp-block-button__link {
        height: 6rem;
    }

    .hero {
        background: #78bedc url('images/hero-img.png') no-repeat right 1.4rem bottom / 40%;
        padding: 5rem;
    }
    .hero p {
        font-size: 3.2rem;
        margin-bottom: 2rem;
    }
    .hero .wp-block-button .wp-block-button__link {
        height: 8.2rem;
    }

    #table .cta .wp-block-column:first-of-type,
    #about_tpa .cta .wp-block-column:first-of-type,
    .about-doc .wp-block-column:first-of-type {
        flex-basis: auto !important;
    }
    .about-doc .wp-block-column:last-of-type {
        flex-shrink: 0;
    }

    .wp-block-table th, .wp-block-table td:first-of-type,
    .wp-block-table td {
        font-size: 2.2rem;
        padding: 1.5rem 2.4rem;
    }
    .cta {
        font-size: 2.4rem;
    }
    .cta .wp-block-button .wp-block-button__link {
        min-width: 3.8rem;
    }
    .wp-block-separator {
        margin-bottom: 8rem;
    }

    #footer {
        padding: 0 !important;
    }
    #footer > .wp-block-columns {
        border-radius: 0 !important;
        padding: var(--total-padding) !important;
    }
    #footer .wp-block-column:last-of-type {
        flex-shrink: 8;
    }

    #footer .wp-block-site-logo img {
        width: 19.5rem;
    }
    #footer .urologo img {
        width: 19.1rem !important;
    }
    #footer .wp-block-column:first-of-type {
        flex-basis: 24% !important;
    }
    #footer .wp-block-column:last-of-type p:first-of-type br {
        display: none;
    }

}

@media (max-width: 480px) {
    html {
        font-size: 1.1vw;
    }
    body,
    .cta {
        font-size: 3.2rem;
    }
    :root {
        --container-padding: 2rem;
        --inner-padding: 3rem;
    }

    h3, h3.has-medium-font-size {
        font-size: 3.8rem !important;
    }
    .wp-block-table th, .wp-block-table td:first-of-type, .wp-block-table td {
        font-size: 2.8rem;
    }

    .wp-block-columns.is-not-stacked-on-mobile {
        flex-wrap: wrap !important;
        gap: 3.2rem;
    }
    .wp-block-button .wp-block-button__link {
        height: 8.2rem;
    }

    .wp-block-site-logo img {
        width: 32rem;
    }

    .about-doc .wp-block-column:last-of-type {
        padding-left: var(--inner-padding);
        padding-right: var(--inner-padding);
    }

    .table-wrap table {
        min-width: 134rem;
    }
    .wp-block-table th, .wp-block-table td:first-of-type, .wp-block-table td {
        font-size: 3.2rem;
    }

    .hero {
        background: #78bedc url(images/hero-img.png) no-repeat right 1.4rem bottom / 44%;
        padding: 4rem;
    }

    .about-doc img {
        max-width: 55rem;
    }

    .video-slider {
        margin: 0 !important;
        width: 100%;
    }
    .video-slider .slick-track {
        gap: 0;
    }

    .wp-block-getwid-video-popup__caption .wp-block-getwid-video-popup__title {
        font-size: 3.2rem;
        max-height: 16rem;
    }

    .wp-block-getwid-video-popup__icon {
        width: 12rem;
        height: 12rem;
        line-height: 12rem;
        font-size: 5rem;
    }

    .has-image .wp-block-getwid-video-popup__wrapper {
        min-height: 32rem;
    }

    .review-text {
        font-size: 3.2rem;
    }

    .slick-next, .slick-prev {
        display: none !important;
    }

    #footer .wp-block-column:first-of-type {
        flex-basis: 50% !important;
    }
    #footer .wp-block-column:nth-of-type(2) {
        flex-basis: 36% !important;
    }
    #footer .wp-block-site-logo img {
        width: 24.5rem;
    }
    #footer .urologo img {
        width: 24.1rem !important;
    }

    .bod-block-popup-wrap .bod-block-popup.size-m {
        width: 300px;
    }
    .bod-block-popup-wrap button.bod-block-title-closer {
        font-size: 8rem !important;
    }
}