*,
::after,
::before {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
img {
max-width: 100%;
vertical-align: middle;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Poppins", sans-serif;
margin: 0;
}
h1 {
font-size: 55px;
font-weight: bold;
line-height: 1.18;
color: #0e384c;
}
h2 {
font-size: 45px;
font-weight: bold;
line-height: 1.22;
color: #fff;
}
h3 {
font-size: 28px;
font-weight: 500;
line-height: 1.36;
color: #0e384c;
}
h4 {
font-size: 24px;
font-weight: normal;
line-height: 1.5;
color: #116694;
}
h5 {
font-size: 20px;
font-weight: 600;
line-height: 1.5;
color: #0e384c;
}
p {
font-size: 16px;
font-weight: normal;
line-height: 1.75;
letter-spacing: normal;
color: #0e384c;
font-family: "Poppins", sans-serif;
margin: 0;
}
@media (width <= 991.98px) {
h1 {
font-size: 48px;
line-height: 1.21;
}
h2 {
font-size: 35px;
line-height: 1.28;
}
h3 {
font-size: 25px;
line-height: 1.28;
}
h4 {
font-size: 22px;
line-height: 1.45;
}
p {
font-size: 14px;
line-height: 1.71;
}
}
.eyebrow {
font-size: 16px;
font-weight: normal;
line-height: 1.75;
letter-spacing: 0.5px;
color: #116694;
text-transform: uppercase;
} .container {
max-width: 1290px;
width: 100%;
margin: 0 auto;
}
@media (width <= 1399.99px) {
.container {
max-width: 1110px;
}
}
@media (width <= 1199.98px) {
.container {
max-width: 930px;
}
}
@media (width <= 991.98px) {
.container {
max-width: 690px;
}
}
@media (width <= 767.98px) {
.container {
max-width: 510px;
}
}
@media (width <=575.98px) {
.container {
max-width: 100%;
padding-inline: 15px;
}
} .btn {
padding: 10px 32px;
font-size: 16px;
font-weight: 600;
border-radius: 25px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.3s ease;
letter-spacing: 0.11px;
text-decoration: none;
} .btn-primary {
background-color: #198dcc;
color: #fff;
border-color: #198dcc;
}
.btn-primary:hover {
background-color: #116694;
border-color: #116694;
} .btn-primary-outline {
background-color: #fff;
color: #198dcc;
border-color: #198dcc;
}
.btn-primary-outline:hover {
background-color: #116694;
color: #fff;
border-color: #116694;
} header {
background-color: #fff;
border-bottom: solid 1px #d2d2d2;
height: 116px;
position: absolute;
left: 0;
top: 0;
width: 100%;
transition: all 0.3s ease; padding-top: 10px;
}
header .inner-row {
display: flex;
justify-content: space-between;
align-items: center;
}
header .inner-row .logo {
margin-bottom: -40px;
}
header .inner-row .header-buttons {
display: flex;
align-items: center;
gap: 30px;
position: relative;
}
header .inner-row .logo img {
transition: all 0.3s ease;
max-height: 155px;
width: auto;
}
header.main-header.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
transform: translateY(-20px);
opacity: 0;
animation: slideDown 0.4s ease forwards;
height: 105px;
}
header.main-header.fixed-header .logo img {
max-width: 141px;
}
header.main-header.fixed-header .inner-row .logo {
margin-bottom: 0px;
}
header .inner-row .header-buttons div#google_translate_element {
position: absolute;
right: 0;
top: -28px;
}
header.main-header.fixed-header .btn {
padding: 8px 18px;
font-size: 14px;
}
header .inner-row .header-buttons div#google_translate_element .goog-te-gadget {
font-size: 0;
}
header .inner-row .header-buttons div#google_translate_element .goog-te-gadget > span {
display: none;
}
header .inner-row .header-buttons div#google_translate_element .goog-te-gadget select.goog-te-combo {
border: 0;
padding: 0;
color: #0e384c;
font-size: 13px;
outline: none;
} @keyframes slideDown {
from {
transform: translateY(-20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@media (width <= 991.98px) {
header .inner-row .logo img {
max-width: 198px;
}
}
@media (width <= 767.98px) {
header .inner-row .header-buttons {
height: 20px;
width: 130px;
margin-left: auto;
}
header .inner-row .header-buttons .btn {
display: none;
}
header .inner-row .logo img {
max-width: 180px;
}
header .inner-row .logo {
margin-right: auto;
}
} .hero-wrapper {
min-height: 960px;
display: flex;
align-items: center;
background-image: url(//htxdentalcare.com/wp-content/themes/houston-crossroads/images/hero-img-2-x.png);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.btn-group {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}
.hero-wrapper .left {
max-width: 600px;
}
.hero-wrapper .left h1,
.hero-wrapper .left h4 {
margin-bottom: 15px;
}
.hero-wrapper .left p {
margin-bottom: 30px;
}
@media (width <=1199.98px) {
.hero-wrapper .left {
max-width: 450px;
}
}
@media (width <=991.98px) {
.hero-wrapper .left {
max-width: 405px;
}
}
@media (width <=767.98px) {
.hero-wrapper .left {
max-width: 450px;
}
.hero-wrapper {
min-height: 1199px;
background-image: url(//htxdentalcare.com/wp-content/themes/houston-crossroads/images/hero-mobile-2-x.png);
align-items: start;
padding-top: 190px;
}
.btn-group {
display: none;
}
} .review-slider {
background-color: #0e384c;
}
.review-slider p {
color: #fff;
}
.review-slider .inner-row {
position: relative;
top: -80px;
}
.review-slider .grw-review-inner.grw-backgnd.grw-round {
padding: 30px !important;
border-radius: 20px !important;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05) !important;
background-color: #fff !important;
}
@media (width <=767.98px) {
.review-slider {
margin-bottom: -30px;
}
} .tabs-wrapper {
background-color: #0e384c;
padding-bottom: 149px;
}
.tabs-title {
margin-bottom: 45px;
}
.tabs-wrapper .tabs-title .eyebrow {
color: #39b9ff;
}
.tabs-title .eyebrow {
display: block;
margin-bottom: 8px;
text-transform: uppercase;
}
.tabs-wrapper .inner-row {
display: flex;
align-items: start;
} .tabs {
flex: 45%;
background: #fff;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 15px 0;
}
.tab {
padding: 32px 45px;
border-bottom: 1px solid #a6a6a6;
cursor: pointer;
transition: background .15s, color .15s;
}
.tabs .tab:last-child {
border-bottom: 0;
}
.tab.active h3 {
color: #116694;
font-weight: bold;
}
.tab:hover h3 {
color: #116694;
text-decoration: underline;
} .tab-contents {
flex: 55%;
padding-top: 45px;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.tab-content img {
width: 100%;
max-height: 340px;
object-fit: cover;
margin-bottom: 30px;
border-radius: 0 20px 20px 0;
height: 340px;
object-position: left;
}
.tab-content p {
color: #fff;
line-height: 1.75;
padding-left: 45px;
}
@media (width <=1199.98px) {
.tabs {
flex: 47%;
}
.tab-contents {
flex: 53%;
}
.tab {
padding: 30px 45px;
}
.tab-content p {
padding-left: 30px;
}
}
@media (width <=991.98px) {
.tabs {
flex: 69%;
}
.tab-contents {
flex: 53%;
}
.tab:hover h3 {
text-decoration: none;
}
} @media (max-width: 767.98px) {
.inner-row {
flex-direction: column;
}
.tabs {
border-radius: 12px;
}
.tab-contents {
display: none;
}
.tabs .tab-content {
display: none;
padding: 30px 45px;
background: #fff;
color: #0e384c;
border-bottom: 1px solid #a6a6a6;
flex-direction: column-reverse;
gap: 20px;
}
.tabs .tab-content.active {
display: flex;
padding-top: 10px;
}
.tab.active {
padding-bottom: 0;
border-bottom: 0;
}
.tabs .tab-content img {
max-height: 240px;
border-radius: 8px;
margin-bottom: 12px;
}
.tabs .tab-content p {
color: #0e384c;
padding: 0;
}
.tabs-wrapper {
padding-bottom: 90px;
}
.tabs .tab-content:last-child {
border-bottom: 0;
}
}
@media (width <=576.98px) {
.tab {
padding: 20px;
}
.tabs .tab-content.active {
padding: 10px 20px 20px 20px;
}
.tabs {
padding: 10px 0;
}
.tabs .tab-content img {
max-height: 180px;
margin-bottom: 0;
}
} .services {
padding: 90px 0;
background-image: linear-gradient(to bottom, #fff 21%, #eee);
}
.services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 30px;
}
.service-card {
background: #fff;
padding: 31px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border-radius: 20px;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.service-icon {
margin-bottom: 30px;
}
.services .btn-group {
justify-content: center;
margin-top: 60px;
}
.service-card p {
font-size: 14px;
line-height: 1.71;
margin-top: 8px;
}
.services .tabs-title h2 {
color: #0e384c;
}
.services .tabs-title .eyebrow {
color: #116694;
}
@media (width <=1199.98px) {
.service-card {
padding: 15px;
}
}
@media (width <=991.98px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.service-card {
padding: 30px;
}
}
@media (width <=767.98px) {
.services {
padding: 75px 0;
}
.service-icon {
text-align: left;
display: flex;
justify-content: start;
}
.service-icon img {
width: auto;
float: left;
display: inline-block;
}
}
@media (width <=576.98px) {
.services-grid {
grid-template-columns: 1fr;
}
.service-icon {
margin-bottom: 20px;
}
} .doctor-profile {
background-color: #eee;
padding: 83px 0;
}
.doctor-profile .tabs-title h2 {
color: #0e384c;
}
.profile-container {
display: grid;
grid-template-columns: 1fr 1.1fr;
grid-column-gap: 75px;
align-items: center;
}
.profile-container .profile-content h3 {
font-weight: 600;
margin-bottom: 25px;
}
.doctor-profile .profile-image img {
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
border-radius: 20px;
height: 543px;
object-fit: cover;
object-position: center;
}
.swiper-arrow-container :where(.swiper-button-next, .swiper-button-prev) {
position: static;
margin: 0;
}
.swiper-arrow-container:has([style="display: none;"]) {
display: none;
}
.swiper-arrow-container {
display: flex;
align-items: center;
gap: 30px;
margin-top: 30px;
}
.swiper-arrow-container .swiper-button-prev {
background-image: url(//htxdentalcare.com/wp-content/themes/houston-crossroads/images/arrow-left.svg);
width: 45px;
height: 45px;
background-size: cover;
background-repeat: no-repeat;
}
.swiper-arrow-container .swiper-button-next {
background-image: url(//htxdentalcare.com/wp-content/themes/houston-crossroads/images/arrow-right.svg);
width: 45px;
height: 45px;
background-size: cover;
background-repeat: no-repeat;
}
.doctor-profile .swiper-slide {
background: #eeeeee;
height: 100%;
}
.swiper-arrow-container :where(.swiper-button-next, .swiper-button-prev):after {
display: none;
}
.doctor-profile .profile-content {
width: 100%;
}
@media (width <=1199.98px) {
.profile-container {
grid-column-gap: 30px;
grid-template-columns: 1fr 1.4fr;
}
}
@media (width <=991.98px) {
.doctor-profile .profile-image img {
height: 531px;
}
.profile-container {
grid-template-columns: 1fr 1fr;
}
}
@media (width <=767.98px) {
.doctor-profile {
padding: 60px 0;
}
.profile-container {
display: flex;
flex-direction: column-reverse;
gap: 30px;
}
.doctor-profile .tabs-title {
margin-bottom: 30px;
}
.profile-container .profile-content h3 {
margin-bottom: 15px;
}
.doctor-profile .profile-image {
width: 100%;
}
.doctor-profile .profile-image img {
height: 260px;
width: 100%;
}
} .split-view-main-wrap {
overflow: hidden;
background-image: linear-gradient(to top, #fff 82%, #eee);
}
.split-view-wrap {
position: relative;
margin: 75px 0;
}
.split-view-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 75px;
}
.split-view-row .split-view-containt {
padding: 89px 0;
}
.split-view-row .split-view-containt h2 {
color: #0e384c;
margin-bottom: 15px;
}
.split-view-row .split-view-containt p {
margin-bottom: 30px;
}
.split-view-img-inner {
background-image: url(//htxdentalcare.com/wp-content/themes/houston-crossroads/images/insurance-img-2-x.png);
width: 47vw;
height: 600px;
position: absolute;
background-repeat: no-repeat;
background-position: left top;
background-size: cover;
right: 0;
border-radius: 20px 0 0 20px;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
}
.split-view-row .split-view-containt ul {
list-style: none;
margin: 0;
padding: 0;
font-size: 16px;
font-weight: 500;
line-height: 1.75;
color: #0e384c;
}
.split-view-row .split-view-containt ul li {
position: relative;
padding-left: 40px;
margin-bottom: 20px;
}
.split-view-row .split-view-containt ul li:last-child {
margin-bottom: 0;
}
.split-view-row .split-view-containt ul li::before {
content: "";
background-image: url(//htxdentalcare.com/wp-content/themes/houston-crossroads/images/shape.png);
width: 25px;
height: 25px;
position: absolute;
left: 0;
top: 3px;
}
.split-view-img {
height: 600px;
}
.split-view-main-wrap.split-view-swipe .split-view-img .split-view-img-inner {
right: auto;
left: 0;
border-radius: 0 20px 20px 0;
}
@media (width <= 1199.98px) {
.split-view-img-inner {
background-position: center left;
}
section.split-view-main-wrap.split-view-swipe .split-view-row {
grid-template-columns: 1fr 1.2fr;
}
}
@media (width <= 991.98px) {
.split-view-row {
grid-template-columns: 1.1fr 1fr;
grid-column-gap: 45px;
}
.split-view-img-inner {
width: 45vw;
}
.split-view-row .split-view-containt ul li {
font-size: 14px;
}
section.split-view-main-wrap.split-view-swipe .split-view-row {
grid-template-columns: 1fr 1.1fr;
}
}
@media (width <= 767.98px) {
.split-view-row {
display: flex;
flex-direction: column;
gap: 45px;
}
.split-view-row .split-view-containt {
padding: 0;
}
.split-view-img {
height: 300px;
}
section.split-view-main-wrap .split-view-img-inner {
width: 100%;
border-radius: 0;
height: 310px;
background-position: center top;
}
.split-view-main-wrap.split-view-swipe .split-view-img .split-view-img-inner {
border-radius: 0;
}
section.split-view-main-wrap.split-view-swipe .split-view-row {
flex-direction: column-reverse;
}
} .practice-section {
padding: 75px 0 90px 0;
}
.practice-container {
display: grid;
grid-template-columns: 1.5fr 1.7fr 1fr;
gap: 30px;
margin: 0 auto;
align-items: start;
margin-bottom: 45px;
}
.practice-hours h2 {
margin-bottom: 30px;
}
.practice-section h3 {
font-weight: 600;
line-height: 1.36;
color: #0e384c;
}
.hours-list {
list-style: none;
padding: 0;
margin: 0 0 30px;
}
.hours-list li {
margin-bottom: 20px;
display: flex;
gap: 30px;
text-transform: uppercase;
font-size: 24px;
line-height: 1.5;
letter-spacing: normal;
color: #0e384c;
}
.title-wrap h2 {
color: #0e384c;
margin-bottom: 45px;
}
.hours-list li span {
min-width: 80px;
display: block;
font-size: 24px;
font-weight: bold;
line-height: 1.5;
letter-spacing: normal;
color: #116694;
}
.button-group {
display: flex;
gap: 15px;
}
.practice-info {
display: grid;
gap: 30px;
}
.hours-list li:last-child,
.hours-list {
margin: 0;
}
.practice-info .h4 {
font-weight: 900;
color: #632888;
text-transform: uppercase;
}
.practice-info .map-image img {
width: 100%;
height: 372px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
}
.photo-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
.photo-grid img {
width: 100%;
height: 171px;
object-fit: cover;
border-radius: 20px;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
}
.photo-grid-wrap {
display: grid;
gap: 30px;
}
.practice-container .practice-hours > .title-wrap {
display: none;
} @media (width <=1199.98px) {
.practice-info .map-image img {
min-height: 384px;
object-fit: cover;
}
.photo-grid img {
min-height: 177px;
}
.photo-grid-wrap {
display: none;
}
.practice-container {
grid-template-columns: 1.3fr 1.7fr;
}
}
@media (width <=991.98px) {
.practice-container {
display: flex;
flex-wrap: wrap;
row-gap: 60px;
}
.practice-container :where(.practice-hours, .practice-info) {
width: calc(50% - 15px);
}
.practice-container .photo-grid-wrap {
width: 100%;
}
.practice-info .map-image img {
min-height: 410px;
}
.photo-grid-wrap .photo-grid {
grid-template-columns: 1fr 1fr;
}
.practice-section {
padding: 75px 0 75px 0;
}
.hours-list li,
.hours-list li span {
font-size: 22px;
}
.hours-list li {
margin-bottom: 15px;
}
.practice-section h3 {
font-size: 22px;
}
.practice-section .container >.title-wrap {
display: none;
}
.practice-hours .title-wrap h2 {
margin-bottom: 30px;
}
.practice-container .practice-hours > .title-wrap {
display: block;
}
}
@media (width <=767.98px) {
.practice-container {
flex-direction: column;
row-gap: 25px;
}
.practice-container :where(.practice-hours, .practice-info) {
width: 100%;
}
section.practice-section .button-group {
display: none;
}
.practice-info .map-image img {
min-height: 220px;
height: 220px;
}
section.practice-section .practice-info {
row-gap: 25px;
}
}
@media (width <=576.98px) {
.hours-list li span {
min-width: 60px;
}
.photo-grid-wrap .photo-grid {
grid-template-columns: 1fr;
}
.photo-grid img {
min-height: 240px;
}
.practice-info .h4 {
text-align: center;
}
} .split-view-main-wrap.dark-blue-bg {
background: #115375;
}
.split-view-main-wrap.dark-blue-bg .split-view-containt :where(h2, p) {
color: #fff;
}
.split-view-main-wrap.dark-blue-bg .eyebrow {
color: #39b9ff;
}
.split-view-main-wrap.dark-blue-bg .split-view-img-inner {
background-image: url(//htxdentalcare.com/wp-content/themes/houston-crossroads/images/last-chance-2-x.png);
}
section.split-view-main-wrap.dark-blue-bg .split-view-row .split-view-containt ul {
color: #fff;
}
section.split-view-main-wrap.dark-blue-bg .split-view-containt ul li::before {
filter: invert(30%) sepia(317%) saturate(711%) hue-rotate(199deg) brightness(381%) contrast(406%);
}
section.split-view-main-wrap.last-chance-section .split-view-img-inner {
height: 482px;
}
section.split-view-main-wrap.last-chance-section .split-view-img {
height: 482px;
}
@media (width <=1199.98px) {
.split-view-img-inner {
width: 43vw;
}
.split-view-main-wrap.dark-blue-bg .split-view-row .split-view-containt {
padding: 65px 0;
}
.split-view-row {
grid-template-columns: 1.2fr 1fr;
}
}
@media (width <=991.98px) {
.split-view-wrap .btn-group {
flex-wrap: wrap;
row-gap: 20px;
}
}
@media (width <=767.98px) {
.split-view-main-wrap.dark-blue-bg .split-view-row .split-view-containt {
padding: 0;
}
.split-view-main-wrap.dark-blue-bg .split-view-containt p {
margin: 0;
}
.split-view-main-wrap.dark-blue-bg .split-view-img-inner {
height: 300px;
}
.split-view-main-wrap.dark-blue-bg .split-view-wrap {
margin-bottom: 0;
}
section.split-view-main-wrap.last-chance-section .split-view-img,
section.split-view-main-wrap.last-chance-section .split-view-img-inner {
height: 245px;
}
}
@media (width <=576.98px) {
.split-view-main-wrap.dark-blue-bg .split-view-img-inner {
height: 245px;
}
.split-view-img {
height: 245px;
}
.split-view-row {
gap: 30px;
}
.split-view-wrap {
margin: 60px 0;
}
.split-view-main-wrap.dark-blue-bg {
margin-bottom: 0;
}
section.split-view-main-wrap.last-chance-section .split-view-img,
section.split-view-main-wrap.last-chance-section .split-view-img-inner {
height: 245px;
}
} footer.site-footer {
background-color: #0E384C;
position: relative;
padding: 66px 0 0;
}
.footer-title {
font-weight: 600;
font-size: 20px;
line-height: 24px;
letter-spacing: 0;
text-transform: capitalize;
color: #fff;
margin-bottom: 20px;
}
.site-footer .menu {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
row-gap: 10px;
}
.site-footer .menu .menu-item {
width: 50%;
padding-right: 15px;
}
.site-footer ul li a {
vertical-align: middle;
color: #fff;
text-decoration: none;
}
.site-footer ul li a:hover {
color: #198dcc;
}
.footer-logo .logo {
height: 206px;
width: auto;
object-fit: contain;
object-position: left;
}
.bottom_footer p {
font-weight: 400;
font-size: 16px;
line-height: 28.8px;
letter-spacing: 0;
text-align: center;
color: #fff;
}
.bottom_footer {
margin-top: 60px;
padding: 30px 0;
border-top: 1px solid #FFFFFF1F;
}
.footer_contact {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
row-gap: 12px;
}
.footer-row {
display: grid;
grid-template-columns: 1.5fr 2fr 1fr;
gap: 30px;
align-items: start;
margin-bottom: 20px;
}
.sticky-btn-xs {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: none;
z-index: 999;
}
@media (width <=991.98px) {
.footer-row {
display: flex;
flex-wrap: wrap;
column-gap: 45px;
}
.footer-logo .logo {
height: 146px;
}
}
@media (width <=767.98px) {
.sticky-btn-xs {
display: flex;
}
.footer-row .col:first-child {
width: 100%;
text-align: center;
}
footer.site-footer {
padding-bottom: 50px;
}
.sticky-btn-xs .btn {
width: 100%;
border-radius: 0;
border: 0;
padding: 15px 10px;
text-align: center;
}
.sticky-btn-xs .btn.btn-primary-outline {
background-color: #198dcc;
color: #fff;
}
.sticky-btn-xs .btn.btn-primary {
background-color: #116694;
}
}
div#wpadminbar {
display: none;
}
.service-icon img {
max-height: 50px;
width: auto;
}