/* ============================================================
   ROYAL DIET FOOD — XeOne Color Theme Override
   Add this file AFTER css/style.css:
   <link rel="stylesheet" href="css/royal-diet-theme.css">
   Theme colors only — layout, spacing and structure are preserved.
============================================================ */

:root{
   --royal-black: #070707;
   --royal-black-soft: #111111;
   --royal-charcoal: #1a1a1a;
   --royal-gold: #d2a53b;
   --royal-gold-light: #f5d477;
   --royal-gold-dark: #9b6b12;
   --royal-red: #c92027;
   --royal-red-dark: #8f1117;
   --royal-green: #65a832;
   --royal-white: #ffffff;
   --royal-offwhite: #f8f5ed;
   --royal-muted: #777777;
   --royal-border: rgba(210,165,59,.25);

   --royal-gold-gradient: linear-gradient(135deg,#8f6110 0%,#d2a53b 45%,#f5d477 72%,#b27b18 100%);
   --royal-red-gradient: linear-gradient(135deg,#8f1117 0%,#c92027 55%,#ed4b50 100%);
   --royal-dark-gradient: linear-gradient(135deg,#050505 0%,#151515 55%,#090909 100%);
   --royal-mixed-gradient: linear-gradient(135deg,#8f1117 0%,#c92027 42%,#d2a53b 100%);
}

/* ---------- Global ---------- */
html,
body{
   background: var(--royal-white);
   color: #444;
}

::selection{
   color: var(--royal-black);
   background: var(--royal-gold-light);
}

a,
a:hover,
a:focus{
   color: var(--royal-gold-dark);
}

.defaultcolor,
.defaultcolor:hover,
.defaultcolor:focus,
.heading-title > span,
.heading-title span,
.pickus,
.pickus:hover,
.pickus:focus{
   color: var(--royal-gold-dark) !important;
}

.darkcolor{
   color: var(--royal-black-soft) !important;
}

.whitecolor{
   color: var(--royal-white) !important;
}

.bglight{
   background: var(--royal-offwhite) !important;
}

/* ---------- Preloader ---------- */
.loader{
   background: var(--royal-black);
}

.loader .loader-blocks span{
   background: var(--royal-gold);
}

.loader .loader-blocks span:nth-child(3n){
   background: var(--royal-red);
}

/* ---------- Header / Navigation ---------- */
.site-header{
   color: var(--royal-white);
}

.transparent-bg{
   background: transparent;
}

.site-header .navbar.fixedmenu,
.site-header .navbar.scrolled,
.fixedmenu{
   background: rgba(7,7,7,.97) !important;
   box-shadow: 0 8px 30px rgba(0,0,0,.22);
   border-bottom: 1px solid rgba(210,165,59,.28);
}

.navbar-nav .nav-link,
.site-header .navbar-nav .nav-link{
   color: var(--royal-white) !important;
}

.navbar-nav .nav-item .nav-link::before,
.navbar-nav .nav-item .nav-link::after{
   background: var(--royal-gold) !important;
}

.navbar-nav .nav-item:hover .nav-link,
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus{
   color: var(--royal-gold-light) !important;
}

.navbar-nav .nav-item.active .nav-link{
   text-shadow: 0 0 18px rgba(245,212,119,.28);
}

.navbar-toggler span,
.sidemenu_btn span{
   background: var(--royal-gold) !important;
}

.sidemenu_btn:hover span{
   background: var(--royal-red) !important;
}

/* ---------- Side Menu ---------- */
.side-menu{
   background: var(--royal-dark-gradient) !important;
   border-left: 1px solid rgba(210,165,59,.3);
}

.side-menu .navbar-nav .nav-link{
   color: var(--royal-white) !important;
}

.side-menu .navbar-nav .nav-item{
   background: transparent;
}

.side-menu .navbar-nav .nav-item:hover,
.side-menu .navbar-nav .nav-item.active{
   background: var(--royal-gold-gradient) !important;
}

.side-menu .navbar-nav .nav-item:hover .nav-link,
.side-menu .navbar-nav .nav-item.active .nav-link{
   color: var(--royal-black) !important;
}

.side-menu .btn-close i{
   background: var(--royal-gold-light) !important;
}

.side-menu .btn-close:hover i{
   background: var(--royal-red) !important;
}

.side-footer .social-icons-simple li a{
   color: var(--royal-white) !important;
}

.side-footer .social-icons-simple li a:hover{
   color: var(--royal-gold-light) !important;
}

/* ---------- Revolution Slider ---------- */
.rev_slider_wrapper{
   background: var(--royal-black) !important;
}

.rev_slider .tp-caption h1,
.rev_slider .tp-caption h4{
   text-shadow: 0 3px 18px rgba(0,0,0,.75);
}

.tparrows{
   background: rgba(7,7,7,.75) !important;
   border: 1px solid rgba(210,165,59,.65) !important;
}

.tparrows:hover{
   background: var(--royal-gold-gradient) !important;
}

.tparrows:hover::before{
   color: var(--royal-black) !important;
}

.tp-bullet{
   background: rgba(255,255,255,.55) !important;
}

.tp-bullet.selected,
.tp-bullet:hover{
   background: var(--royal-gold) !important;
}

/* ---------- Buttons ---------- */
.button,
.btnprimary,
.btnsecondary{
   border-color: transparent !important;
}

.btnprimary,
.button.btnprimary{
   color: var(--royal-black) !important;
   background: var(--royal-gold-gradient) !important;
   box-shadow: 0 10px 24px rgba(210,165,59,.22);
}

.btnprimary:hover,
.btnprimary:focus,
.button.btnprimary:hover,
.button.btnprimary:focus{
   color: var(--royal-white) !important;
   background: var(--royal-red-gradient) !important;
   box-shadow: 0 12px 26px rgba(201,32,39,.26);
}

.btnsecondary,
.button.btnsecondary{
   color: var(--royal-white) !important;
   background: var(--royal-red-gradient) !important;
   box-shadow: 0 10px 24px rgba(201,32,39,.2);
}

.btnsecondary:hover,
.btnsecondary:focus,
.button.btnsecondary:hover,
.button.btnsecondary:focus{
   color: var(--royal-black) !important;
   background: var(--royal-gold-gradient) !important;
   box-shadow: 0 12px 26px rgba(210,165,59,.26);
}

/* ---------- Services Slider ---------- */
#services-slider .service-box{
   background: var(--royal-white);
   border-color: var(--royal-border);
}

#services-slider .service-box > span,
#services-slider .service-box > span i{
   color: var(--royal-gold-dark) !important;
}

#services-slider .service-box h4 a{
   color: var(--royal-black-soft) !important;
}

#services-slider .service-box:hover,
#services-slider .owl-item.center .service-box{
   color: var(--royal-white);
   background: var(--royal-dark-gradient) !important;
   border-color: var(--royal-gold) !important;
   box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

#services-slider .service-box:hover h4 a,
#services-slider .service-box:hover p,
#services-slider .owl-item.center .service-box h4 a,
#services-slider .owl-item.center .service-box p{
   color: var(--royal-white) !important;
}

#services-slider .service-box:hover > span,
#services-slider .service-box:hover > span i,
#services-slider .owl-item.center .service-box > span,
#services-slider .owl-item.center .service-box > span i{
   color: var(--royal-gold-light) !important;
}

.owl-dots .owl-dot span{
   background: #c9c9c9 !important;
}

.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span{
   background: var(--royal-gold) !important;
}

/* ---------- Feature Section ---------- */
.single-feature{
   background: var(--royal-white);
}

.single-feature .heading-title span{
   color: var(--royal-red) !important;
}

.single-feature .heading-title h2{
   color: var(--royal-black) !important;
}

/* ---------- Gradient Sections ---------- */
.gradient_bg,
.gradient_bg_default{
   background: var(--royal-dark-gradient) !important;
}

#our-process.gradient_bg_default,
#funfacts.gradient_bg{
   background: var(--royal-dark-gradient) !important;
   border-top: 2px solid var(--royal-gold-dark);
   border-bottom: 2px solid var(--royal-gold-dark);
}

/* ---------- Work Process ---------- */
.process-wrapp li{
   color: var(--royal-white);
}

.process-wrapp li::before,
.process-wrapp li::after{
   background: rgba(210,165,59,.42) !important;
}

.process-wrapp .pro-step{
   color: var(--royal-black) !important;
   background: var(--royal-gold-gradient) !important;
   border-color: var(--royal-gold-light) !important;
   box-shadow: 0 0 0 6px rgba(210,165,59,.12);
}

.process-wrapp li:hover .pro-step{
   color: var(--royal-white) !important;
   background: var(--royal-red-gradient) !important;
   border-color: var(--royal-red) !important;
}

/* ---------- Team ---------- */
.team-box .team-content,
.team-box .team-content.gradient_bg,
.team-box .team-content.gradient_bg_default{
   background: var(--royal-dark-gradient) !important;
   border-top: 3px solid var(--royal-gold);
}

.team-box:hover .team-content{
   background: var(--royal-mixed-gradient) !important;
}

.team-box .team-content h3,
.team-box .team-content p,
.team-box .progress p{
   color: var(--royal-white) !important;
}

.team-box .progress{
   background: rgba(255,255,255,.18) !important;
}

.team-box .progress-bar{
   background: var(--royal-gold-gradient) !important;
}

.team-box:hover .progress-bar{
   background: var(--royal-white) !important;
   color: var(--royal-black) !important;
}

/* ---------- Video Section ---------- */
#video-bg{
   background: var(--royal-white);
}

.button-play{
   color: var(--royal-black) !important;
   background: var(--royal-gold-gradient) !important;
   box-shadow: 0 0 0 10px rgba(210,165,59,.18);
}

.button-play:hover{
   color: var(--royal-white) !important;
   background: var(--royal-red-gradient) !important;
}

/* ---------- Portfolio / Gallery ---------- */
#portfolio-xe{
   background: var(--royal-offwhite) !important;
}

.cbp-l-filters .cbp-filter-item{
   color: var(--royal-black-soft) !important;
}

.cbp-l-filters .cbp-filter-item:hover,
.cbp-l-filters .cbp-filter-item.cbp-filter-item-active{
   color: var(--royal-white) !important;
   background: var(--royal-red) !important;
}

#flat-gallery .cbp-item .overlay{
   background: linear-gradient(135deg,rgba(7,7,7,.9),rgba(143,17,23,.82)) !important;
}

#flat-gallery .cbp-item .overlay h4,
#flat-gallery .cbp-item .overlay p{
   color: var(--royal-white) !important;
}

#flat-gallery .plus::before,
#flat-gallery .plus::after{
   background: var(--royal-gold-light) !important;
}

/* ---------- Mobile App Features ---------- */
#our-apps .feature-item .icon{
   color: var(--royal-gold-dark) !important;
   border-color: var(--royal-gold) !important;
}

#our-apps .feature-item:hover .icon{
   color: var(--royal-white) !important;
   background: var(--royal-red-gradient) !important;
   border-color: var(--royal-red) !important;
}

#our-apps .feature-item h4{
   color: var(--royal-black-soft) !important;
}

/* ---------- Counters ---------- */
#funfacts{
   background: var(--royal-dark-gradient) !important;
}

#funfacts .img-icon,
#funfacts .count_nums,
#funfacts .counters i{
   color: var(--royal-gold-light) !important;
}

#funfacts .title,
#funfacts h3{
   color: var(--royal-white) !important;
}

/* ---------- Pricing ---------- */
#our-pricings{
   background: var(--royal-offwhite) !important;
}

.price-table{
   background: var(--royal-white) !important;
   border: 1px solid var(--royal-border) !important;
   box-shadow: 0 12px 34px rgba(0,0,0,.07);
}

.price-table:hover{
   border-color: var(--royal-gold) !important;
   box-shadow: 0 20px 45px rgba(0,0,0,.13);
}

.price-table.active{
   background: var(--royal-dark-gradient) !important;
   border-color: var(--royal-gold) !important;
   box-shadow: 0 22px 48px rgba(0,0,0,.2);
}

.price-table.active h3,
.price-table.active p,
.price-table.active li,
.price-table.active li span{
   color: var(--royal-white) !important;
}

.price-table .ammount h2,
.price-table .ammount h2 i{
   color: var(--royal-gold-dark) !important;
}

.price-table.active .ammount h2,
.price-table.active .ammount h2 i{
   color: var(--royal-gold-light) !important;
}

.price-table ul li::before{
   color: var(--royal-gold-dark) !important;
}

.price-table ul li.not-support,
.price-table ul li.not-support span{
   color: #aaaaaa !important;
}

/* ---------- Testimonials ---------- */
.testimonial-bg{
   position: relative;
   background-color: var(--royal-black) !important;
}

.testimonial-bg::before{
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg,rgba(7,7,7,.94) 0%,rgba(7,7,7,.76) 48%,rgba(143,17,23,.34) 100%);
   pointer-events: none;
}

.testimonial-bg .container{
   position: relative;
   z-index: 1;
}

.testimonial-quote h3,
.testimonial-quote h6,
.testimonial-quote small{
   color: var(--royal-white) !important;
}

.testimonial-quote h6{
   color: var(--royal-gold-light) !important;
}

#owl-thumbs .owl-dot{
   border-color: transparent !important;
}

#owl-thumbs .owl-dot.active,
#owl-thumbs .owl-dot:hover{
   border-color: var(--royal-gold) !important;
}

/* ---------- Partner Logos ---------- */
#logos{
   background: var(--royal-white);
}

.logo-item{
   filter: grayscale(1);
   opacity: .7;
}

.logo-item:hover{
   filter: grayscale(0);
   opacity: 1;
}

/* ---------- Blog ---------- */
#our-blog .split-box{
   background: var(--royal-white);
}

#our-blog .heading-title span{
   color: var(--royal-red) !important;
}

/* ---------- Contact ---------- */
#contactus{
   background: var(--royal-white);
}

#contactus .heading-title span{
   color: var(--royal-red) !important;
}

.our-address h5{
   color: var(--royal-black-soft) !important;
}

.pickus{
   color: var(--royal-gold-dark) !important;
}

.pickus::before,
.pickus::after{
   background: var(--royal-gold) !important;
}

.pickus:hover{
   color: var(--royal-red) !important;
}

.getin_form .form-control{
   color: var(--royal-black-soft) !important;
   background: var(--royal-offwhite) !important;
   border-color: #ded8c9 !important;
}

.getin_form .form-control:focus{
   background: var(--royal-white) !important;
   border-color: var(--royal-gold) !important;
   box-shadow: 0 0 0 3px rgba(210,165,59,.12) !important;
}

.getin_form .form-control::placeholder{
   color: #8d8d8d !important;
}

#result .alert-success{
   color: #23450f;
   background: #edf7e6;
   border-color: var(--royal-green);
}

#result .alert-danger{
   color: #7c0e13;
   background: #fff0f0;
   border-color: var(--royal-red);
}

/* ---------- Google Map ---------- */
#map-container{
   background: #e9e4d9;
}

/* ---------- Footer ---------- */
#site-footer{
   color: #d8d8d8;
   background: var(--royal-black) !important;
   border-top: 2px solid var(--royal-gold-dark);
}

#site-footer .social-icons li a{
   color: var(--royal-white) !important;
   background: var(--royal-charcoal) !important;
   border-color: rgba(210,165,59,.32) !important;
}

#site-footer .social-icons li a:hover{
   color: var(--royal-black) !important;
   background: var(--royal-gold-gradient) !important;
   border-color: var(--royal-gold-light) !important;
}

#site-footer .copyrights,
#site-footer .copyrights a{
   color: #d0d0d0 !important;
}

#site-footer .copyrights a:hover{
   color: var(--royal-gold-light) !important;
}

/* ---------- Scroll To Top ---------- */
.scroll-top-arrow,
.back-top,
#back-top{
   color: var(--royal-black) !important;
   background: var(--royal-gold-gradient) !important;
}

.scroll-top-arrow:hover,
.back-top:hover,
#back-top:hover{
   color: var(--royal-white) !important;
   background: var(--royal-red-gradient) !important;
}

/* ---------- Fancybox ---------- */
.fancybox-bg{
   background: var(--royal-black) !important;
}

.fancybox-button{
   color: var(--royal-white) !important;
   background: rgba(201,32,39,.9) !important;
}

.fancybox-button:hover{
   color: var(--royal-black) !important;
   background: var(--royal-gold) !important;
}

/* ---------- General Decorative Elements ---------- */
.heading-title h2::after,
.heading-title h2::before{
   background: var(--royal-gold) !important;
}

hr,
.separator,
.divider{
   border-color: var(--royal-border) !important;
}

/* ---------- Responsive Header / Mobile Menu ---------- */
@media (max-width: 991px){
   .site-header .navbar{
      background: rgba(7,7,7,.97) !important;
      border-bottom: 1px solid rgba(210,165,59,.28);
   }

   .navbar-collapse{
      background: var(--royal-black-soft) !important;
   }

   .navbar-nav .nav-item{
      border-bottom-color: rgba(210,165,59,.12) !important;
   }

   .navbar-nav .nav-item:hover,
   .navbar-nav .nav-item.active{
      background: rgba(210,165,59,.11) !important;
   }

   .navbar-nav .nav-item:hover .nav-link,
   .navbar-nav .nav-item.active .nav-link{
      color: var(--royal-gold-light) !important;
   }
}

/* ---------- Optional Logo-Specific Accent Helpers ---------- */
.royal-gold-text{ color: var(--royal-gold) !important; }
.royal-red-text{ color: var(--royal-red) !important; }
.royal-green-text{ color: var(--royal-green) !important; }
.royal-dark-bg{ background: var(--royal-dark-gradient) !important; }
.royal-gold-bg{ background: var(--royal-gold-gradient) !important; }
.royal-red-bg{ background: var(--royal-red-gradient) !important; }