:root {
  --sarraf-gold-1: #efc53f;
  --sarraf-gold-2: #f1c63d;
  --sarraf-gold-3: #fcea78;
  --sarraf-gold-4: #f9d64d;
  --sarraf-gold-5: #f6cf45;
  --sarraf-gold-6: #deab24;

  --gold-bg: linear-gradient(135deg, 
    var(--sarraf-gold-1) 0%, 
    var(--sarraf-gold-2) 25%, 
    var(--sarraf-gold-3) 50%, 
    var(--sarraf-gold-4) 55%, 
    var(--sarraf-gold-5) 75%, 
    var(--sarraf-gold-6) 100%
  );
  
  --gold-bg-hover: linear-gradient(45deg, 
    var(--sarraf-gold-6) 0%, 
    var(--sarraf-gold-4) 25%, 
    var(--sarraf-gold-3) 50%, 
    var(--sarraf-gold-2) 75%, 
    var(--sarraf-gold-1) 100%
  );

  --gold-linear: linear-gradient(to right, 
    var(--sarraf-gold-6), 
    var(--sarraf-gold-3), 
    var(--sarraf-gold-1), 
    var(--sarraf-gold-3), 
    var(--sarraf-gold-6)
  );

  --apply-gold-text: var(--gold-linear);
  --mask-clip: text;
  --gold-border-logic: linear-gradient(white, white), var(--gold-bg);
}
button.filter-btn:hover,
.Copyright a,
.freelance h5, .live i,
.Packages sup,
ul.Quick-Links a:hover,
.Consult a:hover,
.pan i,
.date-tim li i,
.Custom i,
.Provides .nav-pills .nav-link.active,
.nav-pills .show>.nav-link,
.Packages-icon li a,
.Copyright-2 a,
.Experience span,
.Project sup, .Expert > a:hover,
.Jakki a,
.studies a:hover,
.strategy a:hover,
.contact-details i,
.Online.Media i,
.Coping span,
.Jessica span,
.Creativ i,
.Social-work span,
.Posted span,
.Commens-data span,
.Informatio i,
input[type=checkbox]:checked + label:before,
.studies a.on,
.icon-gp i,
.contact-details.social i {
    background: var(--gold-linear);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; 
}


.mobile-nav > ul > li > a, 
.dropdown > a,
.mobile-nav > ul > li.active > a {
    background: var(--gold-linear);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-nav ul li:hover > a, 
.dropdown:hover > a {
    background: var(--gold-bg-hover); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Background Color */

button.one,

.drop-box:before,

button.filter-btn.active-filter.active-work:after,

.our-portfolio button.filter-btn:hover:after,

.header-for-top-bar,

.Packages:before,

section.Together:before,

#scroll,.pan:before,

li.date,.service:hover:after,

.service i,

.history-timeline:before,

.years,

.btn-one:after,

.Finance:hover .Busi,

.accordion-button:not(.collapsed),

.tim,

.search-cross-btn,


 footer.two:before,

.progress-bar,

.Business-Growth-three .parallax:before,

.Project:before,

.Case,

.Expert-icon:hover i.fa.fa-share-alt,

.baner:before,

.Expert span,

.logo-head:after,

.pagenashion-number a.two,

.pagenashion-number a.pagenashion:hover,

li.atems:hover .atem-number,

.tag a:hover,

li.Photo:before,

.few,

button.slick-arrow:hover,

.aptent li:before,

.Reply a,

.navNext i:hover,

.navPrev i:hover,

.owl-carousel:after,

section.error:before,

.slider-nav-three h3.slick-current{

    background:var(--gold-bg) ;

}





/* Border Color */

.Packages:hover,

.service:hover,

.slider-nav-two .slick-current img,

.slick-dots li.slick-active button:before{

    border-color: #ff5240;

}