/* RockYourTops.com Modern CSS Override
   Add this file AFTER the existing style.css so it overrides the older HTML5UP styles.
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&display=swap');

:root{
  --ryt-black:#070707;
  --ryt-charcoal:#111318;
  --ryt-surface:#181b22;
  --ryt-card:#ffffff;
  --ryt-light:#f6f4ef;
  --ryt-muted:#68707c;
  --ryt-text:#141414;
  --ryt-white:#ffffff;
  --ryt-gold:#d8a735;
  --ryt-gold-2:#f2c94c;
  --ryt-border:rgba(255,255,255,.14);
  --ryt-shadow:0 22px 60px rgba(0,0,0,.22);
  --ryt-radius:24px;
  --ryt-radius-sm:14px;
  --ryt-max:1180px;
}

html{scroll-behavior:smooth;}

body,
input,
textarea,
select{
  font-family:'Inter', Arial, sans-serif !important;
  font-size:18px;
  line-height:1.65;
  color:var(--ryt-text);
  letter-spacing:0;
  background:var(--ryt-light);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body{padding-top:82px;}

p, ul, ol, dl, table{margin-bottom:1.15rem;}

strong,b{font-weight:800;}

a{color:var(--ryt-gold);text-decoration:none;}
a:hover{color:var(--ryt-gold-2);}

h1,h2,h3,h4,h5,h6{
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1.05;
}

h2{font-size:clamp(2.2rem,5vw,5.6rem);}
header p{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.65;color:inherit;opacity:.9;}

/* Modern fixed header */
#header{
  height:82px;
  line-height:82px;
  background:rgba(7,7,7,.78);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 38px rgba(0,0,0,.22);
}

#header h1{
  left:clamp(16px,4vw,54px);
  height:82px;
  line-height:82px;
}

#header h1 a{
  color:#fff;
  font-size:clamp(1.05rem,1.6vw,1.55rem);
  letter-spacing:-.04em;
  text-transform:uppercase;
}

#header h1 a::after{
  content:'';
  display:inline-block;
  width:10px;
  height:10px;
  margin-left:10px;
  border-radius:999px;
  background:var(--ryt-gold);
  box-shadow:0 0 22px rgba(242,201,76,.75);
}

#header nav{right:clamp(14px,4vw,54px);height:82px;line-height:82px;}
#header nav ul li{margin-left:.25rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;}
#header nav ul li a{
  height:42px;
  line-height:42px;
  margin-top:20px;
  padding:0 15px;
  border-radius:999px;
  color:rgba(255,255,255,.86);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
#header nav ul li a:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
  transform:translateY(-1px);
}
#header nav ul li:last-child a{
  color:#111;
  background:linear-gradient(135deg,var(--ryt-gold),var(--ryt-gold-2));
  font-weight:900;
  box-shadow:0 10px 28px rgba(216,167,53,.28);
}

/* Layout */
.main{overflow:hidden;}
.main > .content{width:var(--ryt-max);max-width:calc(100% - 48px);}
.main.fullscreen{min-height:calc(100vh - 82px);}

.main.style1{
  min-height:calc(100vh - 82px);
  padding:clamp(5rem,10vw,9rem) 24px;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 20% 15%,rgba(242,201,76,.22),transparent 32%),
    linear-gradient(135deg,rgba(0,0,0,.86),rgba(0,0,0,.48)),
    var(--hero-bg, none);
  background-size:cover;
  background-position:center;
  color:#fff;
}

.main.style1::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.62));
  z-index:-1;
}

.main.style1 > .content{
  max-width:980px;
  margin:auto;
}

.main.style1 h2{
  text-shadow:0 20px 50px rgba(0,0,0,.55);
}

.main.style1 p{
  max-width:760px;
  margin:1.25rem auto 0;
  color:rgba(255,255,255,.88);
  font-weight:500;
}

.main.style2{
  min-height:78vh;
  padding:clamp(4rem,8vw,8rem) 24px;
  background-size:cover !important;
  background-position:center !important;
  background-attachment:scroll !important;
  position:relative;
}

.main.style2::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.22));
  pointer-events:none;
}

.main.style2.right::before{background:linear-gradient(270deg,rgba(0,0,0,.72),rgba(0,0,0,.22));}

.main.style2 > .content{
  width:min(520px,calc(100% - 32px));
  z-index:1;
}

.box,
.box.style2{
  border-radius:var(--ryt-radius);
  background:rgba(255,255,255,.91);
  color:#141414;
  box-shadow:var(--ryt-shadow);
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.box.style2{padding:clamp(1.6rem,4vw,3rem);}

.main.style3{
  padding:clamp(4rem,8vw,7rem) 24px;
}
.main.style3.primary{background:var(--ryt-light);}
.main.style3.secondary{background:#fff;}
.main.style3 .content > header{max-width:820px;margin:0 auto 2.4rem;}

/* Buttons */
input[type='button'],
input[type='submit'],
input[type='reset'],
.button,
button{
  height:auto;
  min-height:56px;
  line-height:1.1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:18px 28px;
  border:0;
  border-radius:999px;
  color:#111 !important;
  background:linear-gradient(135deg,var(--ryt-gold),var(--ryt-gold-2));
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:0 14px 34px rgba(216,167,53,.28);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
input[type='button']:hover,
input[type='submit']:hover,
input[type='reset']:hover,
.button:hover,
button:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,var(--ryt-gold-2),var(--ryt-gold));
  box-shadow:0 18px 44px rgba(216,167,53,.38);
}
.button.style2,button.style2{
  color:#fff !important;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:none;
}
.button.style2:hover,button.style2:hover{background:rgba(255,255,255,.16);}
.button.down{display:none;}

/* Forms */
input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='url'],
select,
textarea{
  border:1px solid rgba(20,20,20,.12);
  background:#fff;
  border-radius:14px;
  padding:15px 16px;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--ryt-gold) !important;
  box-shadow:0 0 0 4px rgba(216,167,53,.18);
}

/* Gallery */
.gallery{
  width:var(--ryt-max);
  gap:18px;
  margin-top:1.5rem;
}
.gallery article{
  width:calc(50% - 9px);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.14);
  background:#111;
}
.gallery article .image::before{
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.18));
  z-index:1;
}
.gallery article img{
  aspect-ratio:4/3;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
}
.gallery article:hover img{transform:scale(1.045);filter:saturate(1.08) contrast(1.04);}

/* Coupon / custom blocks */
#Coupon{
  border:2px dashed var(--ryt-gold) !important;
  border-radius:22px;
  padding:24px !important;
  margin:24px 0 !important;
  background:linear-gradient(135deg,rgba(216,167,53,.12),rgba(255,255,255,.92));
  box-shadow:0 14px 34px rgba(0,0,0,.08);
}
.Thumb{max-width:220px;border-radius:16px;padding:12px;}
.bmenu{margin:18px 0;}
.bmenu a{width:100%;}
.bold{font-weight:900;}

/* Footer */
#footer{
  background:linear-gradient(180deg,#111318,#070707);
  color:rgba(255,255,255,.7);
  padding:34px clamp(18px,4vw,54px);
  border-top:1px solid rgba(255,255,255,.1);
}
#footer a{color:#fff;}
#footer a:hover{color:var(--ryt-gold-2);}
#footer ul.menu li{border-left-color:rgba(255,255,255,.18);}

/* Mobile */
@media screen and (max-width:736px){
  body{padding-top:68px;font-size:16px;}
  #header{height:68px;line-height:68px;}
  #header h1{height:68px;line-height:68px;left:16px;}
  #header h1 a{font-size:.92rem;}
  #header nav{
    position:fixed;
    left:0;
    right:0;
    top:68px;
    height:auto;
    line-height:1;
    background:rgba(7,7,7,.94);
    border-top:1px solid rgba(255,255,255,.1);
    overflow-x:auto;
    white-space:nowrap;
    padding:8px 10px;
  }
  #header nav ul li{font-size:.72rem;margin-left:0;}
  #header nav ul li a{height:36px;line-height:36px;margin-top:0;padding:0 12px;}
  .main.fullscreen,.main.style1{min-height:auto;}
  .main.style1{padding:5rem 18px 4rem;}
  .main.style1 h2{font-size:clamp(2.35rem,13vw,4rem);}
  .main.style2{padding:4rem 18px;min-height:auto;}
  .main.style2::before,.main.style2.right::before{background:rgba(0,0,0,.55);}
  .main.style2 .content{width:100%;max-width:100%;}
  .box,.box.style2{border-radius:18px;padding:1.35rem;}
  .gallery{display:grid;grid-template-columns:1fr;width:100%;gap:14px;}
  .gallery article{width:100%;}
  ul.actions:not(.fixed) li .button,
  ul.actions:not(.fixed) li button{width:100%;}
}