/* Start custom CSS for html, class: .elementor-element-60edffc *//* ==================================
GRAPHIC ROOM STUDIO
LOGO PRICING SECTION
CLEAN PREMIUM GLASS STYLE
================================== */
.grs-service-section{
padding:30px 20px;
background:transparent;
}
.grs-service-header{
text-align:center;
margin-bottom:60px;
}
.grs-service-badge{
display:inline-block;
margin: 10px;
padding:12px 24px;
border-radius:50px;
background:#1f1f1f;
border:1px solid rgba(200,155,31,.20);
color:#DDB548;
font-size:12px;
font-weight:600;
letter-spacing:2px;
text-transform:uppercase;
}
.grs-service-header h2{
margin:20px 0 15px;
font-size:56px;
font-weight:800;
line-height:1.1;
color:#DDB548;
}
.grs-service-header p{
max-width:700px;
margin:auto;
color:#C8C8C8;
font-size:16px;
line-height:1.8;
}
/* GRID */
.grs-pricing-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
}
/* CARD */
.grs-card{
position:relative;
overflow:hidden;
padding:30px;
border-radius:28px;
background:
linear-gradient(
145deg,
rgba(31,31,31,.90),
rgba(18,18,18,.95)
);
backdrop-filter:blur(18px);
border:1px solid rgba(200,155,31,.12);
transition:.35s ease;
}
/* SOFT GOLD GLOW */
.grs-shape{
position:absolute;
width:180px;
height:180px;
top:-90px;
right:-90px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(200,155,31,.12),
transparent 70%
);
}
/* GLASS SHINE */
.grs-card:before{
content:'';
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.06),
transparent
);
transform:skewX(-25deg);
transition:.8s;
}
.grs-card:hover:before{
left:150%;
}
/* HOVER */
.grs-card:hover{
transform:translateY(-10px);
border-color:rgba(221,181,72,.35);
box-shadow:
0 20px 40px rgba(0,0,0,.35);
}
/* PACKAGE TAG */
.grs-plan{
display:inline-block;
padding:8px 16px;
border-radius:50px;
background:rgba(200,155,31,.10);
border:1px solid rgba(200,155,31,.15);
color:#DDB548;
font-size:11px;
font-weight:700;
letter-spacing:1px;
}
/* PRICE */
.grs-card h3{
margin:25px 0;
font-size:50px;
font-weight:800;
color:#EFEFEF;
line-height:1;
}
/* FEATURES */
.grs-card ul{
list-style:none;
padding:0;
margin:0 0 25px;
}
.grs-card ul li{
padding:12px 0;
color:#C8C8C8;
font-size:14px;
border-bottom:
1px solid rgba(255,255,255,.05);
}
/* FEATURED */
.featured{
border:1px solid rgba(221,181,72,.35);
background:
linear-gradient(
180deg,
rgba(200,155,31,.08),
rgba(18,18,18,.95)
);
}
.grs-popular{
position:absolute;
top:15px;
right:15px;
padding:8px 14px;
border-radius:30px;
background:
linear-gradient(
135deg,
#C89B1F,
#DDB548
);
color:#000;
font-size:10px;
font-weight:700;
letter-spacing:1px;
}
/* BUTTON */
.grs-btn,
.grs-btn:hover,
.grs-btn:focus,
.grs-btn:active,
.grs-btn:visited{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:52px;
border-radius:14px;
text-decoration:none;
color:#000 !important;
font-weight:700;
letter-spacing:.5px;
}
/* BUTTON STYLE */
.grs-btn{
background:
linear-gradient(
135deg,
#C89B1F,
#DDB548
);
transition:.3s ease;
}
.grs-btn:hover{
transform:translateY(-3px);
box-shadow:
0 10px 25px rgba(200,155,31,.25);
}
/* MOBILE */
@media(max-width:1024px){
.grs-pricing-grid{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:767px){
.grs-service-header h2{
font-size:34px;
}
.grs-pricing-grid{
grid-template-columns:repeat(2,1fr);
gap:15px;
}
.grs-card{
padding:18px;
}
.grs-card h3{
font-size:30px;
}
.grs-card ul li{
font-size:12px;
}
.grs-btn{
height:45px;
font-size:11px;
}
.grs-popular{
font-size:8px;
padding:6px 10px;
}
}
```/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-cff6d31 *//* =========================
ADD-ONS SECTION
========================= */
.grs-addons-section{
position:relative;
padding:80px 0;
}
/* GRID */
.grs-addon-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
}
/* CARD */
.grs-addon-card{
display:flex;
align-items:center;
gap:10px;
padding:16px 18px;
border-radius:18px;
background:
linear-gradient(
145deg,
rgba(31,31,31,.95),
rgba(18,18,18,.95)
);
border:1px solid rgba(200,155,31,.12);
backdrop-filter:blur(15px);
transition:.35s ease;
overflow:hidden;
position:relative;
}
/* SHINE EFFECT */
.grs-addon-card::before{
content:'';
position:absolute;
top:0;
left:-150%;
width:60%;
height:100%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.05),
transparent
);
transform:skewX(-25deg);
transition:.8s;
}
.grs-addon-card:hover::before{
left:180%;
}
.grs-addon-card:hover{
transform:translateY(-4px);
border-color:rgba(221,181,72,.35);
box-shadow:
0 10px 25px rgba(0,0,0,.30);
}
/* TITLE */
.grs-addon-title{
flex:1;
color:#EFEFEF;
font-size:14px;
font-weight:500;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* PRICE */
.grs-addon-price{
color:#DDB548;
font-size:15px;
font-weight:700;
white-space:nowrap;
}
/* PLUS BUTTON */
.grs-addon-btn{
width:28px;
height:28px;
min-width:28px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none !important;
background:
linear-gradient(
135deg,
#C89B1F,
#DDB548
);
color:#000 !important;
font-size:18px;
font-weight:700;
transition:.3s ease;
}
.grs-addon-btn:hover,
.grs-addon-btn:focus,
.grs-addon-btn:active,
.grs-addon-btn:visited{
color:#000 !important;
text-decoration:none !important;
}
.grs-addon-btn:hover{
transform:scale(1.12);
}
/* TABLET */
@media(max-width:1024px){
.grs-addon-grid{
grid-template-columns:repeat(3,1fr);
}
}
/* MOBILE */
@media(max-width:767px){
.grs-addon-grid{
grid-template-columns:repeat(2,1fr);
gap:10px;
}
.grs-addon-card{
padding:12px;
}
.grs-addon-title{
font-size:11px;
}
.grs-addon-price{
font-size:12px;
}
.grs-addon-btn{
width:24px;
height:24px;
min-width:24px;
font-size:16px;
}
}/* End custom CSS */