/*

Theme Name: The Dental Inc. Blog

Theme URI: https://thetop10.in/dentalinc/

Author: The Dental Inc.

Description: WordPress blog theme using the exact header, inner banner and footer design from The Dental Inc. PHP website.

Version: 1.1.0

Text Domain: dentalinc-blog

*/



:root {
    --primary-color: #6B625B;
    --primary-color-rgb: 107, 98, 91;

    --primary-dark: #574C44;
    --primary-dark-rgb: 87, 76, 68;

    --primary-light: #D9CEC1;
    --primary-light-rgb: 217, 206, 193;

    --secondary-color: #EDE8E0;
    --secondary-color-rgb: 157, 135, 114;

    --accent-color: #6B625B;
    --accent-color-rgb: 107, 98, 91;

    --heading-font-color: #222222;
    --body-font-color: #A8A199;
    --muted-color: #A8A199;
    --subtitle-color: #282E24;
    --color-text: #666666;

    --bg-color-even: #EDE9E0;
    --bg-color-odd: #F9F8F4;
    --bg-light: #F9F8F4;

    --bg-dark-1: #9D8772;
    --bg-dark-2: #6B625B;
    --bg-dark-3: #574C44;
    --bg-dark-1-rgb: 157, 135, 114;

    --bg-grey: #EDE9E0;
    --border-color: #D9CEC1;

    --btn-hover-bg: #9C8D82;
    --swiper-theme-color: #6B625B;

    --footer-bg: #EDE9E0;
    --white: #FFFFFF;

    --shadow: 0 14px 40px rgba(107, 98, 91, .08);

    --body-font: "Inter", Helvetica, Arial, sans-serif;
    --heading-font: "Urbanist", Helvetica, Arial, sans-serif;

    --mainmenu-font-size: 15px;
    --mainmenu-font-weight: 600;
    --mainmenu-item-padding: 35px 0;
    --mainmenu-item-padding-hover: 20px 0;

    --logo-width: 150px;
}



*{box-sizing:border-box}

html{scroll-behavior:smooth;overflow-x:hidden}

body{margin:0;overflow-x:hidden;font-family:var(--body-font);font-size:16px;line-height:1.75;color:var(--body-font-color);background:#fff;-webkit-font-smoothing:antialiased}

img{max-width:100%;height:auto}

a{color:var(--primary-color);text-decoration:none;transition:.25s ease}

a:hover{color:var(--primary-dark)}

h1,h2,h3,h4,h5,h6{font-family:var(--heading-font);color:var(--heading-font-color);font-weight:600;line-height:1.2;margin:0 0 18px}

h1{font-size:clamp(38px,5vw,60px);letter-spacing:-.027em}

h2{font-size:clamp(32px,4vw,48px);letter-spacing:-.025em}

h3{font-size:28px} h4{font-size:21px} p{margin:0 0 18px}

ul,ol{padding-left:22px}

.container{width:min(1240px,calc(100% - 40px));max-width:1240px;margin-left:auto;margin-right:auto}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.relative{position:relative}.z-2{z-index:2}.bg-color-op-1{background:rgba(var(--primary-color-rgb),.1)}



/* ==================================================

   EXACT HEADER STYLE FROM THE PHP WEBSITE

================================================== */

header.tdi-main-header{width:100%;position:absolute;left:0;top:0;z-index:1001;margin:0;background:none;transition:.3s ease}

header.tdi-main-header.smaller{position:fixed;background:#fff;box-shadow:0 8px 30px rgba(var(--primary-color-rgb),.08)}

header.tdi-main-header .de-flex{display:flex;justify-content:space-between;align-items:center;min-height:90px}

header.tdi-main-header .de-flex>.de-flex-col{display:flex;justify-content:center;align-items:center}

header.tdi-main-header div#logo{transition:all .3s ease}

header.tdi-main-header div#logo img{display:block;max-width:var(--logo-width);height:auto}

header.tdi-main-header .logo-scroll,header.tdi-main-header .logo-mobile{display:none}

header.tdi-main-header.smaller .logo-main{display:none}

header.tdi-main-header.smaller .logo-scroll{display:block}

header.tdi-main-header nav{display:block}



#mainmenu{font-size:13px;margin:0 auto;padding:0;float:none;list-style:none}

#mainmenu ul{margin:0;padding:0;height:auto;background:#fff;color:var(--body-font-color)}

#mainmenu li{margin:0;padding:0;float:left;display:inline;list-style:none;position:relative}

#mainmenu>li{margin-right:30px}

#mainmenu>li:last-child{margin-right:0}

#mainmenu>li.has-child:after{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f078";padding-left:5px;font-size:8px;position:relative;top:-2px;color:rgba(0,0,0,.5)}

#mainmenu>li>a{padding:var(--mainmenu-item-padding);padding-right:6px;font-size:var(--mainmenu-font-size);font-weight:var(--mainmenu-font-weight);color:var(--heading-font-color);text-align:center;display:inline-block}

#mainmenu li.has-child>a{padding-right:0}

#mainmenu a.active{color:var(--primary-color)!important}

#mainmenu li ul{width:230px;height:auto;position:absolute;left:0;top:100%;z-index:1005;visibility:hidden;opacity:0;border-radius:3px;box-shadow:0 14px 35px rgba(var(--primary-color-rgb),.12);transition:.2s ease;overflow:hidden}

#mainmenu li:hover>ul{visibility:visible;opacity:1}

#mainmenu li li{font-size:14px;display:block;float:none;text-transform:none;width:100%}

#mainmenu li li a{display:block;padding:9px 15px;color:#606060;width:100%;text-align:left;font-weight:400;border-bottom:1px solid rgba(0,0,0,.06);background:#fff}

#mainmenu li li a:hover,#mainmenu ul li:hover>a{color:#fff;background:var(--primary-color)}



.menu_side_area{margin-left:20px;display:flex;align-items:center}

a.btn-main,.btn-main{background:var(--primary-color);color:#fff!important;font-family:var(--body-font);font-size:15px;font-weight:700;padding:6px 20px;text-decoration:none;border-radius:8px;border:none;position:relative;display:inline-block;text-align:center;outline:0}

a.btn-main:hover,.btn-main:hover{color:#fff!important;background:var(--primary-dark)}

#menu-btn{display:none;width:34px;height:34px;border:0;background:transparent;position:relative;cursor:pointer;padding:0;margin-left:12px;color:var(--heading-font-color)}

#menu-btn:before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f0c9";font-size:24px}

#menu-btn.menu-open:before{content:"\f00d"}



/* ==================================================

   EXACT ABOUT-PAGE INNER BANNER

================================================== */

#subheader{overflow:hidden;position:relative;padding:160px 0 120px;background:rgba(var(--primary-color-rgb),.1);text-align:center}

#subheader h1{margin:0;max-width:1050px;margin-left:auto;margin-right:auto;color:var(--heading-font-color)}

#subheader .border-bottom{border-bottom:solid 1px rgba(0, 0, 0, .3) !important;max-width:100%;margin-left:auto;margin-right:auto}

.crumb{color:#777;margin:0;padding:10px 10px 3px;font-weight:500;font-size:16px;display:inline-block;line-height:1.2em;border-radius:30px}

.crumb li{display:inline;text-decoration:none;letter-spacing:0}

.crumb li:after{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f054";font-size:10px;margin:0 10px;color:var(--primary-color)}

.crumb li:last-child:after{display:none}

.crumb a{color:var(--body-font-color);text-decoration:none}

.crumb li.active{color:var(--heading-font-color);font-weight:600}



#content{min-height:1px}

#back-to-top{background:var(--primary-color);position:fixed;bottom:-50px;right:20px;z-index:1020;width:40px;height:40px;border-radius:50%;transition:.3s ease}

#back-to-top:before{font-family:"Font Awesome 6 Free";font-weight:900;content:"\f077";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:14px}

#back-to-top.show{bottom:20px}



/* Blog listing */

.blog-main { padding:80px 0 90px; }

.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:46px 30px; }

.blog-card { min-width:0; }

.blog-card-media { position:relative; overflow:hidden; border-radius:20px; background:var(--bg-light); aspect-ratio: 16/10; }

.blog-card-media img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease; }

.blog-card:hover .blog-card-media img { transform:scale(1.035); }

.blog-date-badge { position:absolute; z-index:2; left:22px; top:22px; min-width:74px; padding:10px 12px 9px; text-align:center; background:var(--primary-color); color:var(--white); border-radius:8px; font-weight:700; line-height:1.05; }

.blog-date-badge strong { display:block;font-family:"Urbanist",Arial,sans-serif;font-size:30px; }

.blog-date-badge span { display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em;margin-top:4px; }

.blog-card-content { padding:22px 2px 0; }

.blog-card-title { font-size:22px; line-height:1.35; margin-bottom:15px; }

.blog-card-title a { color:var(--heading-font-color); }

.blog-card-title a:hover { color:var(--primary-color); }

.post-meta { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; font-size:13px; color:var(--muted-color); }

.post-meta span { display:inline-flex; align-items:center; gap:7px; }

.post-meta i { color:var(--primary-color); }

.author-avatar { width:24px;height:24px;border-radius:50%;object-fit:cover; }

.pagination-wrap { margin-top:20px; }

.nav-links { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }

.nav-links .page-numbers { min-width:42px;height:42px;padding:0 13px;border:1px solid var(--border-color);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--heading-font-color);background:var(--white); }

.nav-links .current,.nav-links .page-numbers:hover { background:var(--primary-color);border-color:var(--primary-color);color:var(--white); }

.pagination {

    justify-content:center;

}

/* Single */

.single-wrap { display:grid; grid-template-columns:minmax(0,2fr) minmax(280px,.85fr); gap:60px; align-items:start; }

.article-card { min-width:0; }

.single-featured { border-radius:20px;overflow:hidden;margin-bottom:32px;background:var(--bg-light); }

.single-featured img { width:100%;display:block; }

.single-meta { margin-bottom:25px; }

.entry-content { color:var(--body-font-color); }

.entry-content h2,.entry-content h3,.entry-content h4 { margin-top:34px; }

.entry-content img { border-radius:15px; }

.entry-content blockquote { margin:28px 0;padding:22px 28px;border-left:4px solid var(--primary-color);background:var(--bg-light);color:var(--heading-font-color);font-size:18px; }

.entry-content table { width:100%;border-collapse:collapse;margin:25px 0; }

.entry-content th,.entry-content td { border:1px solid var(--border-color);padding:12px; }

.entry-content th { background:var(--primary-light);color:var(--heading-font-color); }

.entry-tags { margin-top:34px;padding-top:24px;border-top:1px solid var(--border-color);display:flex;flex-wrap:wrap;gap:8px;align-items:center; }

.entry-tags a,.tagcloud a { display:inline-block;padding:7px 12px;border-radius:6px;background:var(--bg-light);color:var(--heading-font-color);font-size:13px!important; }

.entry-tags a:hover,.tagcloud a:hover { background:var(--primary-color);color:var(--white); }

.author-box { margin-top:36px;padding:28px;border-radius:16px;background:var(--bg-color-odd);display:flex;gap:20px;align-items:flex-start; }

.author-box img { width:76px;height:76px;border-radius:50%; }

.author-box h4 { margin-bottom:6px; }



/* Sidebar */

.blog-sidebar { position:sticky;top:24px; }

.widget { margin-bottom:34px;padding:28px;border:1px solid var(--border-color);border-radius:16px;background:var(--white); }

.widget h3,.widget h4 { font-size:21px;margin-bottom:22px;position:relative;padding-bottom:12px; }

.widget h3:after,.widget h4:after { content:"";position:absolute;left:0;bottom:0;width:42px;height:2px;background:var(--primary-color); }

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

.widget li + li { border-top:1px solid var(--border-color); }

.widget li { padding:11px 0; }

.popular-post { display:grid;grid-template-columns:78px 1fr;gap:14px;align-items:center;padding:12px 0; }

.popular-post img { width:78px;height:66px;object-fit:cover;border-radius:8px; }

.popular-post h5 { font-size:15px;line-height:1.35;margin:0 0 5px; }

.popular-post h5 a { color:var(--heading-font-color); }

.popular-post .date { font-size:12px;color:var(--muted-color); }

.search-form { display:flex;gap:8px; }

.search-form label { flex:1; }

.search-field { width:100%;height:44px;border:1px solid var(--border-color);border-radius:7px;padding:0 12px;color:var(--heading-font-color); }

.search-submit { border:0;border-radius:7px;background:var(--primary-color);color:var(--white);padding:0 16px;font-weight:700;cursor:pointer; }



/* Comments */

.comments-area { margin-top:50px;padding-top:36px;border-top:1px solid var(--border-color); }

.comment-list { list-style:none;padding:0; }

.comment-list .children { list-style:none; }

.comment-body { padding:22px 0;border-bottom:1px solid var(--border-color); }

.comment-author img { border-radius:50%;margin-right:10px; }

.comment-meta { font-size:13px;color:var(--muted-color); }

.comment-content { margin-top:12px; }

.comment-respond { margin-top:36px; }

.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea { width:100%;border:1px solid var(--border-color);border-radius:8px;padding:12px;background:var(--white);color:var(--heading-font-color); }

.comment-form .submit { border:0;border-radius:8px;background:var(--primary-color);color:var(--white);padding:12px 22px;font-weight:700;cursor:pointer; }



/* Empty / search */

.empty-state { max-width:760px;margin:0 auto;padding:50px;text-align:center;border-radius:18px;background:var(--bg-light); }







/* ==================================================

   EXACT FOOTER STYLE FROM THE PHP WEBSITE

================================================== */

.tdi-footer{position:relative;background:var(--footer-bg);color:rgba(255,255,255,.72);padding:75px 0 0;overflow:hidden}

.footer-logo-wrap{display:inline-block;margin-bottom:25px;}

.footer-logo-wrap img{display:block;width:100%;max-width:200px;height:auto;border-radius:12px}

.footer-brand p{max-width:390px;font-size:15px;line-height:1.9;color:rgba(255,255,255,.70);margin-bottom:25px}

.tdi-footer .footer-widget h4{position:relative;color:#fff;font-size:20px;font-weight:600;margin-bottom:28px;padding-bottom:13px}

.tdi-footer .footer-widget h4:after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;background:var(--primary-color);border-radius:10px}

.footer-links{list-style:none;padding:0;margin:0}

.footer-links li{margin-bottom:9px}

.footer-links li a{position:relative;color:rgba(255,255,255,.72);font-size:15px;transition:all .3s ease}

.footer-links li a:before{content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;font-size:12px;margin-right:8px;color:#fff;opacity:0;margin-left:-14px;transition:.3s ease}

.footer-links li a:hover{color:#fff;padding-left:14px}

.footer-links li a:hover:before{opacity:1;margin-left:0}

.footer-social{display:flex;gap:12px}

.footer-social a{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);transition:.3s ease}

.footer-social a:hover{color:#fff;background:var(--primary-color);border-color:var(--primary-color);transform:translateY(-3px)}

.footer-location-card{display:flex;gap:15px;;margin-bottom:18px;background:rgba(255,255,255,.025);border-radius:15px;transition:.3s ease}


.footer-location-icon,.footer-round-icon{width:48px;height:48px;min-width:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(var(--primary-color-rgb),.25);color:#fff;font-size:18px}

.footer-location-content h5,.footer-contact-row h5{color:#fff;font-size:15px;margin:0 0 5px;font-weight:600}

.footer-location-content p{font-size:14px;line-height:1.7;margin:0;color:rgba(255,255,255,.68)}

.footer-location-content a,.footer-contact-row a{color:rgba(255,255,255,.72)}

.footer-contact-row{display:flex;align-items:center;gap:15px;margin-top:18px}

.footer-contact-row a{font-size:14px;transition:.3s}

.footer-contact-row a:hover{color:#fff}

.footer-bottom{position:relative;margin-top:60px;border-top:1px solid rgba(255,255,255,.12)}

.footer-bottom-inner{min-height:70px;display:flex;align-items:center;justify-content:center;gap:30px;text-align:center}

.footer-bottom p{margin:0;color:rgba(255,255,255,.58);font-size:13px}

.footer-bottom a{color:rgba(255,255,255,.82)}



/* Floating controls copied from the PHP site behaviour */

.whatsapp-float{position:fixed;bottom:130px;right:20px;background:#25d366;color:#fff!important;border-radius:50%;width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:28px;z-index:999;box-shadow:0 3px 8px rgba(0,0,0,.2)}

.header-widget-area{display:none}



@media(max-width:1199px){

    #mainmenu>li{margin-right:20px}

    #mainmenu>li>a{font-size:14px}

    .footer-logo-wrap img{max-width:200px}

}



@media(max-width:991px){

    header.tdi-main-header{position:absolute;background:rgba(249,248,244,.96)}

    header.tdi-main-header.smaller{position:fixed;background:#fff}

    header.tdi-main-header .de-flex{min-height:82px;position:relative}

    header.tdi-main-header .logo-main{display:block}

    header.tdi-main-header .logo-scroll{display:none}

    .header-col-mid{position:absolute;left:0;right:0;top:82px;width:100%;display:block!important}

    #menu-btn{display:block}

    #mainmenu{display:none;background:#fff;width:100%;padding:8px 20px 18px;box-shadow:0 18px 30px rgba(var(--primary-color-rgb),.12);max-height:calc(100vh - 100px);overflow-y:auto}

    header.menu-open #mainmenu{display:block}

    #mainmenu li{float:none;display:block;width:100%;margin:0;border-bottom:1px solid #eee}

    #mainmenu>li>a{display:block;text-align:left;padding:12px 0;font-size:14px}

    #mainmenu>li.has-child:after{display:none}

    #mainmenu li ul{position:static;width:100%;visibility:visible;opacity:1;box-shadow:none;display:none;border-radius:0;overflow:visible;padding:0 0 8px 15px}

    #mainmenu li.submenu-open>ul{display:block}

    #mainmenu li li{border:0}

    #mainmenu li li a{padding:9px 12px;background:#fff;border-bottom:1px solid #f0f0f0}

    #mainmenu li li a:hover{background:var(--primary-color);color:#fff}

    .menu_side_area .btn-main{display:none}

    #subheader{padding:135px 0 80px}

    .footer-brand p{max-width:100%}

    .tdi-footer{padding-top:60px}

    .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

    .single-wrap{grid-template-columns:1fr}

    .blog-sidebar{position:static}

}



@media(max-width:767px){

    body{padding-bottom:60px}

    .container{width:min(100% - 28px,1240px)}

    header.tdi-main-header .de-flex{min-height:74px}

    header.tdi-main-header div#logo img{max-width:130px}

    .header-col-mid{top:74px}

    #subheader{padding:115px 0 65px}

    #subheader h1{font-size:38px}

    .crumb{font-size:14px;padding-top:8px}

    .blog-main{padding:58px 0 70px}

    .blog-grid{grid-template-columns:1fr;gap:38px}

    .blog-card-title{font-size:21px}

    .single-wrap{gap:38px}

    .author-box{flex-direction:column}

    .tdi-footer{padding-top:50px}

    .footer-logo-wrap img{max-width:180px}

    .footer-bottom{margin-top:40px}

    .footer-bottom-inner{flex-direction:column;align-items:center;padding:22px 0;gap:15px}

    .footer-location-card{padding:15px}

    .footer-location-icon,.footer-round-icon{width:42px;height:42px;min-width:42px}

    .header-widget-area{display:block}

    .header-widget-area>.bottom-contact{position:fixed;bottom:0;left:0;right:0;height:60px;background:rgba(255,255,255,.92);padding:10px;z-index:999;display:flex;gap:12px;justify-content:center;text-align:center;box-shadow:0 0 15px rgba(0,0,0,.3)}

    .header-widget-area .btn-get-started{font-weight:600;height:40px;font-size:12px;letter-spacing:.3px;padding:10px 18px;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#fff;background:var(--accent-color)}

    .header-widget-area .btn-get-started.blue{background:#252525}

    .whatsapp-float{bottom:130px;width:54px;height:54px;font-size:25px}

    #back-to-top.show{bottom:75px}

}





/* =========================================

   DENTAL INC BLOG CARD

\========================================= */



.tdi-blog-card {

    width: 100%;

    margin-bottom: 45px;

}





/* IMAGE */



.tdi-blog-image {

    position: relative;

    overflow: hidden;

    border-radius: 22px;

}



.tdi-blog-image > a {

    display: block;

}



.tdi-blog-featured-img {

    width: 100%;

    height: 310px;

    display: block;

    object-fit: cover;

    transition: transform .45s ease;

}



.tdi-blog-card:hover .tdi-blog-featured-img {

    transform: scale(1.04);

}





/* DATE BOX */



.tdi-blog-date {

    position: absolute;

    top: 28px;

    left: 28px;



    width: 72px;

    height: 92px;



    background: var(--primary-color);

    color: #ffffff;



    border-radius: 6px;



    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;



    box-shadow: 0 8px 22px rgba(0, 0, 0, .08);

}



.tdi-blog-date strong {

    display: block;

    font-size: 34px;

    line-height: 1;

    font-weight: 700;

    color: #ffffff;

}



.tdi-blog-date span {

    display: block;

    margin-top: 8px;

    font-size: 16px;

    line-height: 1;

    font-weight: 600;

    color: #ffffff;

}





/* CONTENT */



.tdi-blog-content {

    padding-top: 25px;

}



.tdi-blog-title {

    margin: 0 0 22px;

    font-size: 26px;

    line-height: 1.45;

    font-weight: 600;

}



.tdi-blog-title a {

    color: var(--heading-font-color);

    text-decoration: none;

    transition: color .25s ease;

}



.tdi-blog-title a:hover {

    color: var(--primary-color);

}





/* META */



.tdi-blog-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 24px;

}



.tdi-blog-author,

.tdi-blog-category {

    display: flex;

    align-items: center;

    gap: 9px;



    color: var(--body-font-color);

    font-size: 15px;

}



.tdi-blog-author img {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    object-fit: cover;

}



.tdi-blog-category i {

    color: var(--primary-color);

    font-size: 14px;

}



.tdi-blog-category a {

    color: var(--body-font-color);

    text-decoration: none;

    transition: color .25s ease;

}



.tdi-blog-category a:hover {

    color: var(--primary-color);

}





/* =========================================

   BLOG GRID

\========================================= */



.tdi-blog-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 45px 30px;

}





/* TABLET */



@media (max-width: 991px) {



    .tdi-blog-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .tdi-blog-featured-img {

        height: 280px;

    }



}





/* MOBILE */



@media (max-width: 767px) {



    .tdi-blog-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }



    .tdi-blog-featured-img {

        height: 260px;

    }



    .tdi-blog-date {

        top: 20px;

        left: 20px;

        width: 64px;

        height: 82px;

    }



    .tdi-blog-date strong {

        font-size: 29px;

    }



    .tdi-blog-date span {

        font-size: 14px;

    }



    .tdi-blog-title {

        font-size: 22px;

    }



}





/* SMALL MOBILE */



@media (max-width: 480px) {



    .tdi-blog-featured-img {

        height: 230px;

    }



    .tdi-blog-meta {

        gap: 15px;

    }



}


/* =========================================================
   SMILE COLLECTIVE BLOG COLOUR OVERRIDES
========================================================= */

body{
    color:var(--color-text);
    background:var(--bg-color-odd);
}

.blog-main{
    background:var(--bg-color-odd);
}

header.tdi-main-header.smaller{
    background:var(--bg-color-odd);
    box-shadow:0 8px 30px rgba(var(--primary-color-rgb),.08);
}

#mainmenu li ul{
    box-shadow:0 14px 35px rgba(var(--primary-color-rgb),.12);
}

a.btn-main,.btn-main,.search-submit,.comment-form .submit{
    background:var(--primary-color);
    color:var(--white)!important;
}

a.btn-main:hover,.btn-main:hover,.search-submit:hover,.comment-form .submit:hover{
    background:var(--btn-hover-bg);
    color:var(--white)!important;
}

/* Inner banner */
#subheader{
    background:var(--secondary-color);
}



/* Blog cards */
.blog-card-media,
.single-featured{
    background:var(--bg-color-even);
}

.blog-date-badge,
.tdi-blog-date{
    background:var(--primary-color);
    color:var(--white);
}

.blog-card-title a,
.tdi-blog-title a{
    color:var(--heading-font-color);
}

.blog-card-title a:hover,
.tdi-blog-title a:hover,
.tdi-blog-category a:hover{
    color:var(--primary-color);
}

.post-meta,
.tdi-blog-author,
.tdi-blog-category,
.tdi-blog-category a{
    color:var(--body-font-color);
}

.post-meta i,
.tdi-blog-category i{
    color:var(--primary-color);
}

/* Content */
.entry-content{
    color:var(--color-text);
}

.entry-content blockquote{
    background:var(--bg-color-even);
    border-left-color:var(--primary-color);
    color:var(--heading-font-color);
}

.entry-content th{
    background:var(--primary-light);
    color:var(--heading-font-color);
}

.entry-content th,
.entry-content td{
    border-color:var(--border-color);
}

.entry-tags a,
.tagcloud a{
    background:var(--bg-color-even);
    color:var(--heading-font-color);
}

.entry-tags a:hover,
.tagcloud a:hover{
    background:var(--primary-color);
    color:var(--white);
}

/* Author/sidebar */
.author-box{
    background:var(--bg-color-even);
    border:1px solid var(--border-color);
}

.widget{
    background:var(--bg-color-odd);
    border-color:var(--border-color);
}

.widget h3:after,
.widget h4:after{
    background:var(--primary-color);
}

.search-field,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
    background:var(--white);
    border-color:var(--border-color);
}

/* Footer - same light Smile Collective style */
.tdi-footer{
    background:var(--footer-bg);
    color:var(--color-text);
}


.footer-brand p,
.footer-links li a,
.footer-location-content p,
.footer-location-content a,
.footer-contact-row a,
.footer-bottom p,
.footer-bottom a{
    color:var(--color-text);
}

.tdi-footer .footer-widget h4,
.footer-location-content h5,
.footer-contact-row h5{
    color:var(--heading-font-color);
}

.tdi-footer .footer-widget h4:after,
.footer-links li a:before{
    background:var(--primary-color);
    color:var(--primary-color);
}

.footer-links li a:hover,
.footer-contact-row a:hover,
.footer-bottom a:hover{
    color:var(--primary-color);
}

.footer-social a{
    color:var(--primary-color);
    border-color:var(--border-color);
    background:var(--bg-color-odd);
}

.footer-social a:hover{
    color:var(--white);
    background:var(--primary-color);
    border-color:var(--primary-color);
}




.footer-location-icon,
.footer-round-icon{
    background:rgba(var(--primary-color-rgb),.12);
    color:var(--primary-color);
}

.footer-bottom{
    border-top-color:var(--border-color);
}

@media(max-width:991px){
    header.tdi-main-header{
        background:rgba(249,248,244,.96);
    }

    #mainmenu{
        background:var(--bg-color-odd);
        box-shadow:0 18px 30px rgba(var(--primary-color-rgb),.12);
    }

    #mainmenu li{
        border-bottom-color:var(--border-color);
    }

    #mainmenu li li a{
        background:var(--bg-color-odd);
        border-bottom-color:var(--border-color);
    }
}

@media(max-width:767px){
    .header-widget-area>.bottom-contact{
        background:rgba(249,248,244,.96);
    }

    .header-widget-area .btn-get-started{
        background:var(--primary-color);
    }
}

/* =====================================================
   BRAND CHANGE MODAL
===================================================== */

.brand-change-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.brand-change-modal.show {
    opacity: 1;
    visibility: visible;
}


/* Overlay */
.brand-change-overlay {
    position: absolute;
    inset: 0;

    background: rgba(52, 45, 39, 0.65);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}


/* Modal Box */
.brand-change-box {
    width: 100%;
    max-width: 680px;

    position: relative;
    z-index: 2;

    background: #F9F8F4;

    border: 1px solid #D9CEC1;

    padding: 48px 55px 45px;

    text-align: center;

    box-shadow:
        0 30px 80px rgba(60, 50, 42, 0.22);

    transform: translateY(25px) scale(.97);

    transition: transform .4s ease;
}

.brand-change-modal.show .brand-change-box {
    transform: translateY(0) scale(1);
}


/* Close */
.brand-modal-close {
    position: absolute;

    top: 14px;
    right: 18px;

    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    background: transparent;

    color: #6B625B;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition: all .25s ease;
}

.brand-modal-close:hover {
    color: #574C44;
    transform: rotate(90deg);
}


/* Small Top Label */
.brand-modal-label {
    display: inline-block;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;

    color: #9D8772;

    margin-bottom: 25px;
}


/* =====================================================
   LOGO TRANSITION
===================================================== */

.brand-logo-transition {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 25px;

    margin-bottom: 32px;
}


/* Logo Box */
.brand-logo-item {
    width: 185px;
    height: 95px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 15px 18px;

    background: #FFFFFF;

    border: 1px solid #E4DBD0;

    position: relative;
}


/* Old Brand */
.brand-logo-item.old-brand {
    opacity: .72;
}
.brand-logo-item.old-brand {
    padding:0;
    border:none;
}
.brand-logo-item.old-brand  img {
    max-height: 100%;
}
/* New Brand */
.brand-logo-item.new-brand {
    border-color: #CDBEAE;

    box-shadow:
        0 8px 25px rgba(107, 98, 91, .10);
}


/* Logo Images */
.brand-logo-item img {
    width: auto;
    max-width: 100%;
    max-height: 62px;

    object-fit: contain;
}


/* Arrow Transition */
.brand-transition-icon {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #9D8772;
}

.brand-transition-icon span {
    width: 12px;
    height: 1px;

    background: #D9CEC1;
}

.brand-transition-icon i {
    font-size: 20px;
}


/* =====================================================
   CONTENT
===================================================== */

.brand-modal-content {
    max-width: 520px;
    margin: auto;
}


.brand-small-heading {
    margin-bottom: 9px;

    color: #9D8772;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.brand-modal-content h2 {
    margin: 0 0 16px;

    color: #6B625B;

    font-size: 38px;

    line-height: 1.15;

    font-weight: 500;
}


.brand-modal-content h2 span {
    display: block;

    color: #574C44;

    margin-top: 5px;
}


.brand-modal-content > p:not(.brand-small-heading) {
    max-width: 470px;

    margin: 0 auto 26px;

    color: #8F877F;

    font-size: 15px;

    line-height: 1.75;
}


/* =====================================================
   BUTTON
===================================================== */

.brand-modal-actions {
    display: flex;

    justify-content: center;

    margin-top: 5px;
}


.brand-primary-btn {
    border: none;

    background: #6B625B;

    color: #FFFFFF;

    font-size: 13px;
    font-weight: 600;

    padding: 12px 25px;

    border-radius: 30px;

    cursor: pointer;

    transition: all .25s ease;
}


.brand-primary-btn:hover {
    background: #574C44;

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(87, 76, 68, .18);
}


/* Prevent page scrolling */
body.brand-modal-open {
    overflow: hidden;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .brand-change-box {
        max-width: 94%;

        padding:
            42px
            22px
            30px;
    }


    .brand-logo-transition {
        gap: 10px;
    }


    .brand-logo-item {
        width: 125px;
        height: 78px;

        padding: 10px;
    }


    .brand-logo-item img {
        max-height: 50px;
    }


    .brand-transition-icon span {
        display: none;
    }


    .brand-transition-icon i {
        font-size: 17px;
    }


    .brand-modal-content h2 {
        font-size: 28px;
    }


    .brand-modal-content > p:not(.brand-small-heading) {
        font-size: 14px;

        line-height: 1.65;
    }


    .brand-primary-btn {
        width: 100%;
    }

}

a {
    text-decoration: none !important;
}