/*
  Theme Name: Prince William Way Dental
  Author: Whetham Solutions
  Author URI: https://whethamsolutions.com
  Description: Wordpress theme for Prince William Way Dental. Use of this theme outside of this company's website is strictly prohibited.
  Template: ion
  Text Domain: pwwd
*/

:root {
    --tooth-color: #0085FF;
    --tooth-size: 1rem;
    --tooth-svg: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">\
  <path fill="%23000" d="M55.62 17.29C54.24 6.58 47.99 4 41.56 4c-3.76 0-6.39 1.37-8.73 2.7-.08.14-.19.26-.34.35l-.13.08c-1.38.8-3.1 1.79-8.27 2.74-.06.01-.12.02-.18.02a.998.998 0 0 1-.18-1.98c3.36-.62 5.13-1.24 6.32-1.8C27.97 5 25.6 4.02 22.42 4.02c-6.43 0-12.68 2.58-14.05 13.29-1.38 10.71 3.62 13.71 4.62 20.71s4.22 22 10.07 22 4.01-9.09 4.61-13.65c.63-4.8 2.77-6.59 4.32-6.55s3.69 1.75 4.32 6.55c.6 4.56-1.23 13.65 4.61 13.65s9.07-15 10.07-22 6-10 4.63-20.71z"/>\
</svg>');
}

.tooth-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tooth-list ul > li {
    position: relative;
    padding-left: calc(var(--tooth-size) + 0.6rem);
}

.tooth-list ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: clamp(3px, 0.4166666666666667vw, 8px);
    width: var(--tooth-size);
    height: var(--tooth-size);
    background-color: var(--tooth-color);
    -webkit-mask: var(--tooth-svg) no-repeat center / contain;
    mask: var(--tooth-svg) no-repeat center / contain;
}

.content-text h2,
.content-text h3 {
    margin: 0 0 20px;
}

.content-text p + h3,
.content-text ul + h3 {
    margin-top: 20px;
}

#btn-spacing {
    margin-top: 50px !important;
}

#coverContainer > .e-con-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    grid-gap: clamp(40px, 3.125vw, 60px) 30px !important;
    align-items: unset !important;
}

#coverContainer .cc-card {
    width: calc(25% - 25px);
    margin: 0 !important;
}

#coverContainer .cc-card .elementor-image-box-img {
    margin: 0 !important;
    display: block;
    height: 100%;
    width: 100% !important;
}

#coverContainer .cc-card .elementor-image-box-img img {
    border-radius: var(--radius-small) var(--radius-small) 0 0 !important;
}

#coverContainer .cc-card .tooth-list {
    padding: 30px 15px 40px;
    border: 1px solid #CCC;
    border-top: none;
    border-radius: 0 0 var(--radius-small) var(--radius-small) !important;
    height: 100%;
}

#coverContainer .cc-card h3 {
    text-align: center;
    margin: 0 0 20px;
}

#howitworks h2 {
    margin: 0 0 20px !important;
}

#howitworks ul li .elementor-icon-list-text {
    text-align: left !important;
    padding-left: clamp(10.666666666666666px, 0.8333333333333334vw, 16px) !important;
}

#howitworks ul li:not(:last-child) {
    margin: 0 0 20px !important;
}

#howitworks ul li .elementor-icon-list-icon {
    width: clamp(20px, 1.5625vw, 30px);
    flex: 0 0 clamp(20px, 1.5625vw, 30px);
    height: clamp(20px, 1.5625vw, 30px);
    top: 1px !important;
}

#howitworks ul li .elementor-icon-list-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

.mail-copied {
    z-index: 9999999999 !important;
}

.side-navigation .menu {
    max-width: clamp(300px, 20.833333333333332vw, 400px);
    width: clamp(300px, 20.833333333333332vw, 400px);
    flex: 0 0 clamp(300px, 20.833333333333332vw, 400px);
}

.pg-contact .footer-contact ul li svg, #footer .footer-contact ul li svg {
    top: 3px;
}

#footer {
    position: relative;
    z-index: 1000;
}

.page-id-587 #cdcpFloater {
    display: none !important;
}

#cdcpFloater {
    position: fixed;
    bottom: clamp(33.333333333333336px, 2.6041666666666665vw, 50px);
    right: clamp(33.333333333333336px, 2.6041666666666665vw, 50px);
    z-index: 999;
    width: clamp(175px, 12.8125vw, 246px);
    height: clamp(175px, 12.8125vw, 246px);
    transition: all 0.3s;
    transform-origin: bottom right;
}

#cdcpFloater.active {
    transform: scale(0.8);
    transition: all 0.3s;
}

#cdcpFloater .elementor-element,
#cdcpFloater .elementor-widget-container {
    height: 100% !important;
}

#cdcpFloater a {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #0085FF;
    border: 1px solid #FFF;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    text-align: center;
    color: #FFF;
    font-size: clamp(19px, 1.4583333333333333vw, 28px);
    font-weight: 700;
    line-height: 0.9;
    padding: clamp(21.333333333333332px, 1.6666666666666667vw, 32px) clamp(17.333333333333332px, 1.3541666666666667vw, 26px);
}

#cdcpFloater a svg {
    display: block;
    margin: 0 auto;
    width: clamp(39px, 3.0729166666666665vw, 59px);
    height: clamp(39px, 3.0729166666666665vw, 59px);
    margin: 0 0 5px;
}

#cdcpFloater a span {
    display: block;
    margin-top: clamp(20px, 1.5625vw, 30px);
    transition: all 0.3s;
}

#cdcpFloater a span em {
    border-radius: clamp(80px, 6.25vw, 120px);
    background-color: #0F1C3F;
    color: #FFF;
    text-align: center;
    font-size: clamp(17px, 0.9895833333333334vw, 19px);
    font-weight: 600;
    line-height: 1;
    padding: clamp(6px, 0.46875vw, 9px) clamp(15px, 1.0416666666666667vw, 20px);
    transition: all 0.3s;
    font-style: normal;
}

#cdcpFloater a:hover,
#cdcpFloater a:focus {
    background-color: #0F1C3F;
}

#cdcpFloater a:hover span em,
#cdcpFloater a:focus span em {
    background-color: #0085FF;
    transition: all 0.3s;
}

.single-post table td {
    font-size: clamp(15px, 0.9375vw, 18px);
    text-align: center;
    padding: 8px;
}

.single-post table tr:nth-child(odd) {
    background-color: #F2F2F2;
}

.single-post table thead tr {
    background-color: #0085FF !important;
    color: #FFF;
}

.single-post table {
    margin: 0 0 30px;
}


@media (max-width: 1199px) {
    #coverContainer .cc-card {
        width: calc(33% - 25px);
    }
}

@media (max-width: 991px) {
    #coverContainer .cc-card {
        width: calc(50% - 25px);
    }
}

@media (max-width: 767px) {
    #coverContainer .cc-card {
        width: 100%;
        padding: 0;
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: unset !important;
    }
    #coverContainer .cc-card .elementor-image-box-wrapper figure {
        position: unset !important;
        max-width: 100% !important;
    }
    #coverContainer .cc-card h3 {
        text-align: left;
    }
    #wcu-cdcp .elementor-icon-box-wrapper {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }
    #cdcpFloater {
        bottom: 10px;
        right: 10px;
        left: 10px;
        z-index: 999;
        width: calc(100% - 20px);
        height: auto;
    }
    #cdcpFloater a {
        flex-direction: row;
        justify-content: flex-start;
        border-radius: 0;
        grid-gap: 11px;
        text-align: left;
    }
    #cdcpFloater a svg {
        flex: 0 0 39px;
    }
    #cdcpFloater a span {
        margin-top: 0;
        margin-left: auto;
        flex: 0 0 40%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}