/*   
Theme Name: TLC Dental 2025
Theme URI: http://digwp.com
Description: This is just a BLANK starter WordPress Theme template -- WordPress v2.9.1
Author: Chris Coyier
Author URI: http://chriscoyier.net
Version: 1
*/

@font-face {
	font-family: 'Gotham-Light';
	src: url('fonts/Gotham-Light.otf');
}

@font-face {
	font-family: 'Gotham-Regular';
	src: url('fonts/Gotham-Regular.ttf');
}

@font-face {
	font-family: 'Gotham-Bold';
	src: url('fonts/Gotham-Bold.otf');
}


* { margin: 0; padding: 0; }
body { background: white; font-size: 16px; font-family: 'Gotham-Light'; color: #000; }

h1, h2, h3 { font-weight: normal; margin: 0 0 10px 0; }
h1 { line-height: 48px; font-size: 34px; }
h2 {  line-height: 40px; }
h3 { line-height: 30px; font-size: 20px; }

p { margin: 0 0 10px 0; }
a { text-decoration: none !important; }
a:hover { text-decoration: none !important; } 

blockquote { }
blockquote p { }

ul, ol { margin: 0 0 10px 0; }

.post { }

.entry { }
.entry a { color: #DE96D6; }
.entry a:hover { }
.entry img { margin: 10px 0 15px; }

pre { }
code, tt { }

#meta { }
.postmetadata { }

#sidebar { }

.navgation { }
   .next-posts { }
   .prev-posts { }

#searchform { }
	#s { }
	#searchsubmt { }
	
ol.commentlist { list-style: none; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor { }
ol.commentlist li.byuser { }
ol.commentlist li.comment-author-admin { }
ol.commentlist li.comment { border-bottom: 1px dotted #666; padding: 10px; }
ol.commentlist li.comment div.comment-author { }
ol.commentlist li.comment div.vcard { }
ol.commentlist li.comment div.vcard cite.fn { font-style: normal; }
ol.commentlist li.comment div.vcard cite.fn a.url { }
ol.commentlist li.comment div.vcard img.avatar { float:right; margin: 0 0 10px 10px; }
ol.commentlist li.comment div.vcard img.avatar-32 { }
ol.commentlist li.comment div.vcard img.photo { }
ol.commentlist li.comment div.vcard span.says { }
ol.commentlist li.comment div.commentmetadata { }
ol.commentlist li.comment div.comment-meta { font-size: 10px; }
ol.commentlist li.comment div.comment-meta a { color: #ccc; }
ol.commentlist li.comment p { }
ol.commentlist li.comment ul { }
ol.commentlist li.comment div.reply { font-size: 11px; }
ol.commentlist li.comment div.reply a { font-weight: bold; }
ol.commentlist li.comment ul.children { list-style: none; margin: 10px 0 0; }
ol.commentlist li.comment ul.children li { }
ol.commentlist li.comment ul.children li.alt { }
ol.commentlist li.comment ul.children li.bypostauthor { }
ol.commentlist li.comment ul.children li.byuser { }
ol.commentlist li.comment ul.children li.comment { }
ol.commentlist li.comment ul.children li.comment-author-admin { }
ol.commentlist li.comment ul.children li.depth-2 { border-left: 5px solid #555; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-3 { border-left: 5px solid #999; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-4 { border-left: 5px solid #bbb; margin: 0 0 10px 10px; }
ol.commentlist li.comment ul.children li.depth-5 { }
ol.commentlist li.comment ul.children li.odd { }
ol.commentlist li.even { background: #fff; }
ol.commentlist li.odd { background: #f6f6f6; }
ol.commentlist li.parent { border-left: 5px solid #111; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even { }
ol.commentlist li.thread-odd { }

form { }
input[type=text] { }
textarea { }


.nm { margin: 0 !important; }
.np { padding: 0; }
.np-right { padding-right: 0px; }
.np-left { padding-left: 0px; }

.mtop1 { margin-top: 10px; }
.mtop2 { margin-top: 20px; }
.mtop3 { margin-top: 30px; }
.mtop5 { margin-top: 50px; }

.mbottom1 { margin-bottom: 10px; }
.mbottom2 { margin-bottom: 20px; }
.mbottom3 { margin-bottom: 30px; }
.mbottom5 { margin-bottom: 50px; }

.img-flex img { width: 100%; height: inherit; }
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.light { font-family: 'Gotham-Light', Arial, Helvetica, Verdana, sans-serif; }
.strong, strong { font-family: 'Gotham-Bold', Arial, Helvetica, Verdana, sans-serif; }

.queen-blue { color: #4a7096; }
.pearl-aqua { color: #84cfc5; }
.crayola-gold { color: #e4c081; }
.white { color: #fff !important; }

.bg-queen-blue { background: #4a7096; }
.bg-pearl-aqua { background: #84cfc5; }
.bg-orchid { background: #DE96D6;}
.bg-white { background: #fff; }

.blue-border { border: solid 3px #4a7096; }
.blue-border-price { border: solid 3px #4a7096; padding: 20px; border-radius: 30px; }
.rounded-image img { border-radius: 30px; }

.btn, .sidr-class-btn, .wp-block-button__link { border-radius: 40px; padding: 15px 20px; border: none; outline: none; width: 100%; }
.sidr-class-btn { text-transform: uppercase; color: #fff;  background: #DE96D6; }

.wp-block-button .wp-block-button__link { margin: 0; }

.wp-block-button.bg-orchid .wp-block-button__link { background: #DE96D6; color: #fff; padding: 15px 40px; }
.wp-block-button.bg-orchid .wp-block-button__link:hover { background: #e49bdc; }

.wp-block-button.bg-queen-blue .wp-block-button__link { background: #4a7096; color: #fff; padding: 8px 40px; }
.wp-block-button.bg-queen-blue .wp-block-button__link:hover { background: #517aa3; }

.wp-block-buttons>.wp-block-button { display: block; margin: 10px 0;  border-radius: 30px;  padding: 0px; font-size: 13px; }

.header { padding: 15px 0;}

.logo img { width: 250px; }

.navbar-menu ul { text-align: right; }
.navbar-menu ul li { list-style-type: none; display: inline-block; margin: 0 10px; }

.contact-mobile { display: inline; padding: 8px 20px; border-radius: 30px; margin-right: 10px; }
.contact-mobile img { width: 30px; }
#responsive-menu-button img { width: 35px; }

.sidr { background: #fff; width: 280px;}
.sidr.left { left: -285px;}
.sidr ul li a , .sidr ul li ul li a{ color: #84CFC5; font-family: 'Gotham-Light', Arial, Helvetica, Verdana, sans-serif; }
.sidr-class-btn, .wp-block-button__link { font-family: 'Gotham-Bold', Arial, Helvetica, Verdana, sans-serif; width: 90%; margin: 0 15px;}
.sidr-class-close-menu { margin-left: 15px; }
.sidr ul li span { color: #000000; display: inline-block; float: right;}

/* Parent li must be positioned */
.nav .menu > .menu-item {
    position: relative;
    padding-right: 18px; /* space for triangle */
}

/* Hide submenus */
.nav .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    padding: 10px 0;
    min-width: 200px;
    list-style: none;
    box-shadow: 0 6px 25px rgba(0,0,0,0.15);
    border-radius: 6px;
    z-index: 999;
    left: 0 !important;      /* Forces it to align from the left edge */
    right: auto !important;  /* Prevent themes from shifting it right */
    text-align: left;    
}

/* Triangle style */
.nav .menu > .menu-item > a:after {
    content: "";  position: absolute; right: 0; top: 50%;
    transform: translateY(-50%) rotate(180deg); /* pointing left */
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #dcbc84; /* triangle color */
    transition: 0.2s ease-in-out;
}

/* --- If the menu has children, flip arrow DOWN on hover --- */
.nav .menu > .menu-item-has-children:hover > a:after {
    transform: translateY(-50%) rotate(90deg);  /* pointing down */
}

/* Show on hover */
.nav .menu > .menu-item-has-children:hover > .sub-menu {
    display: block;
}

/* Submenu item style */
.nav .sub-menu li a { display: block;  padding: 12px 20px;  color: #2d4c79;
    text-decoration: none;  font-size: 15px; }
.nav .sub-menu li a:hover {  background: #f3f7f9; }
.nav .sub-menu .menu-item > a {  position: relative; padding-right: 18px; }

/* Default arrow LEFT for submenu items that have children */
.nav .sub-menu .menu-item-has-children > a:after {
    content: ""; position: absolute; right: 8px; /* slight indent */
    top: 50%; transform: translateY(-50%) rotate(180deg); /* ◄ */
    width: 0; height: 0; border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #dcbc84;
    transition: 0.2s; right: 0 !important; /* move arrow further to the edge */
}

/* Hover = arrow down for nested submenu */
.nav .sub-menu .menu-item-has-children:hover > a:after {
    transform: translateY(-50%) rotate(90deg); /* ▼ */
}


/* Hide the built-in chevron icons from SIDR */
.sidr .sub-toggle i.fa {  display: none !important; }

/* Triangle for SIDR submenu toggle */
.sidr .sub-toggle {
    position: absolute; right: 15px;     /* push to far right */
    top: 50%;  transform: translateY(-50%);
    width: 12px;  height: 12px;
}

/* Triangle shape (RIGHT-FACING) */
.sidr .sub-toggle:after {
    content: "";   position: absolute;
    right: 0;  top: 50%;
    transform: translateY(-50%) rotate(180deg); /* ◄ */
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #dcbc84; /* your triangle color */
    transition: 0.2s ease;
}

/* When submenu is OPEN → triangle points DOWN */
.sidr .sub-toggle.is-open:after {
    transform: translateY(-50%) rotate(90deg); /* ▼ */
}

/* Make room for triangle on the right */
.sidr .sidr-class-menu a {
    padding-right: 40px !important;  position: relative;  display: block; font-size: 18px;
}


.banner { background: #E6E6E6; padding: 5% 0; }
.banner.home { background: #F8F8F8; padding: 20px 0; }
.banner.home .content { padding-top: 8%; padding-right: 5%; }
.banner.pages { background-size: cover !important; background-position: center !important; }
.banner.pages .btn { width: 80% !important;}

.why-choose-tlc { padding: 50px 0; height: 420px; background: url('images/TLC-website-dental-chair.png');
    background-size: cover; position: relative; background-position: center center; }
.why-choose-tlc::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(74, 112, 150, 0.8); /* Blue overlay with 50% opacity */
    z-index: 0;
}
.why-choose-tlc-list { margin-top: -15%; }
.why-choose-tlc-list img { width: 100px;}
.why-choose-tlc-list .entry { margin: 0 10px; padding: 50px 15px 20px; border-radius: 20px; border: solid 3px #4a7096; height: 350px;  }

/* .treatments .column { padding: 10px; } */
.treatments .entry { position:relative; background-size: contain !important; 
    height: 490px; background-repeat: no-repeat !important; margin-bottom: 20px; }
.treatments .entry .content { position: absolute; bottom: 8%; padding: 0 40px;}


.faq { background: #F8F8F8; padding: 50px 20px; }

.contact-banner { height: 420px; background: url('images/contact-us.png'); background-size: cover; background-position: center center; border-radius: 20px;}
.contact-info { padding: 50px 30px; margin-top: -13%; border-radius: 20px; }

.footer { padding: 50px 0; }
.footer li { list-style: none;}
.footer li a { color: #fff; }
.footer .copyright { border-top: solid 1px #fff; padding-top: 20px;}

.search-wrapper { display: flex;  align-items: center; width: 100%; gap: 10px; }
.input-container { position: relative; flex: 1; }
.input-container input { width: 100%; padding: 8px 45px 8px 18px; border: 2px solid #c9d4e3;
    border-radius: 40px; font-size: 14px; outline: none; box-sizing: border-box; }
.input-container .triangle { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
    width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
    border-right: 8px solid #d1a552; }
.go-btn { background: #0f2e55; color: #d1a552; border: none;
    padding: 8px 20px; border-radius: 40px; font-weight: bold;
    cursor: pointer; white-space: nowrap; }
.go-btn:hover { opacity: 0.9; }

/* Outer wrapper (select + button) */
.search-select-wrapper {
    display: flex;  align-items: center;  gap: 12px;  width: 100%;
}

/* Select container (to hold arrow) */
.select-container { position: relative; width: 100%; }

/* Custom select */
.custom-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    padding: 12px 45px 12px 20px;
    /* space on RIGHT for arrow */
    font-size: 16px;  color: #1f3b6e;  border: 2px solid #8ea4c0;
    border-radius: 40px; background-color: #fff; cursor: pointer;
}

/* Right-side gold triangle */
.select-arrow {
    position: absolute;
    right: 18px; /* stays on the RIGHT side */
    top: 50%;  transform: translateY(-50%);
    width: 0; height: 0;

    /* Triangle pointing LEFT */
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid #e6c879;
    /* arrow now points LEFT */
}

.banner.home .container .row { display: flex; align-items: center; }
.banner.home .content { flex: 1; padding: 20px; }
.banner.home .image { flex: 3; max-width: 60%; }

.page-content h2 { color: #4a7096; }
.page-content p, .page-content li {  font-family: 'Gotham-Regular', Arial, Helvetica, Verdana, sans-serif;  }
.page-content li { margin-left: 25px; }


.mid-section { padding: 40px 0; }
.mid-section .btn { width: initial; padding: 8px 30px;  }

@media screen and (max-width: 1199px) {
    .treatments .entry { height: inherit; }
    .why-choose-tlc-list {  margin-top: -20%; }
    .why-choose-tlc-list .entry { height: 375px;}
}


@media screen and (max-width: 991px) {
    .md-hide { display: none;}
    #responsive-menu-button, .md-show { display: inline-block !important;}
   
    .sidr-class-logo {width: 200px; margin: 15px 10px;}

     .why-choose-tlc-list .entry { height: inherit; padding: 50px 30px; margin: 0; border: solid 4px #4a7096;}
     .contact-info { margin-top: -22%; }
}

@media (max-width: 768px) {
    .logo img { width: 200px;}
    .banner.home .container .row {
        flex-direction: column; /* Stack the content and image vertically */
        align-items: center; 
    }

    .banner.home .content {
        order: 2; /* Move the content below the image */
        text-align: center; padding: 20px;
    }

    .banner.home .image { order: 1; width: 100%; flex: 1; max-width: 100%; }

    .banner.pages { background: transparent !important; padding: 0;}
    .banner.pages .btn { width: 50% !important;}

    .why-choose-tlc-list {  margin-top: -25%; }

    .wp-block-columns {  flex-direction: column; }

    .text-col {  order: 2;  }
    .image-col { order: 1; }
   
}


@media screen and (max-width: 427px) {

    .sm-hide { display: none;}
    .sm-show { display: inline-block !important;}
    .logo img { width: 60px; }

    .banner.pages .btn { width: 100% !important;}

    .why-choose-tlc { height: 900px; background-size: 235%; background-position: top; background-repeat: no-repeat;}
    .why-choose-tlc-list { margin-top: -160%; }
    .why-choose-tlc-list .entry { border: solid 3px #4a7096; }
    .treatments .entry .content { padding: 0 20px; font-size: 14px; }
    .contact-banner { background-size: 235%;  background-position-y: 60%; } 
    .contact-info { margin-top: -40%;  }

    h1 { line-height: 36px; font-size: 30px; }
}

@media screen and (max-width: 376px) {
    .treatments .entry h2 { font-size: 18px; }
    .treatments .entry .text { font-size: 14px; }
}