/* Header part */
:root { --primary: #1A63FD; } body { font-family: "Product Sans"; margin: 0; padding: 0; } .sam30-relative { position: relative; } .sam30-container { width: 100%; max-width: 1400px; margin: auto; padding-left: 15px; padding-right: 15px; } /* header start */ .sam30-navbar { margin: 0; z-index: 99; position: fixed; top: 0; width: 100%; transition: all 0.3s ease-in-out; left: 0; } .sam30-navbar-inner { display: flex; justify-content: space-between; align-items: center; background-color: #181b2e; color: #fff; padding: 18px 20px; transition: all 0.3s ease; } .sam30-logo img { width: 100%; max-width: 120px; } .sam30-navbar-menus { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; gap: 20px; } .sam30-navbar-menus a { font-size: 16px; font-weight: 400; line-height: 22.99px; text-align: left; color: #ffffff; cursor: pointer; transition: all 0.3s ease; } .sam30-navbar-menus a:hover{ color:#fff; } .sam30-dropdown-content-menu-inner a:hover { color: #a6c2ff; } .sam30-search-input { padding: 6px 30px 6px 14px; border-radius: 18px; border: 1px solid #ffffff; background-color: transparent; color: white; font-size: 16px; font-weight: 400; line-height: 22.99px; } .sam30-search-input::placeholder { color: white; } span.sam30-search-icon { position: absolute; right: 10px; top: 9px; } .sam30-search-icon img { max-width: 16px; } .sam30-login-btns { display: flex; gap: 20px; } .sam30-open-account-btn, .sam30-login-btn { box-shadow: 2px 2px 5px 0px #538bff99; backdrop-filter: blur(18px); border: 1px solid #5093ff; background-color: #1a63fd; color: #fff; padding: 8px 15px; border-radius: 18px; cursor: pointer; font-size: 16px; font-weight: 400; line-height: 19.36px; text-align: center; position: relative; overflow: hidden; transition: all 0.3s ease; } .sam30-open-account-btn:hover, .sam30-login-btn:hover, .sam30-open-free-demat-account-btn-dasktop:hover, .sam30-open-free-demat-account-btn-mobile:hover { background-color: var(--primary); box-shadow: 2px 4px 15px 4px #538bff99; } button.sam30-login-btn { padding: 8px 30px; } button.sam30-open-account-btn:before, button.sam30-login-btn:before, a.sam30-open-account-btn:before, a.sam30-login-btn:before, .sam30-join-samco-team-member-btn:after { content: ""; position: absolute; top: 0; width: 100%; height: 100%; background: linear-gradient(120deg, transparent, hsla(0, 0%, 100%, 0.5), transparent); animation: shineAnimation 4s ease-in-out infinite; } @keyframes shineAnimation { 0% { left: -100%; transition-property: left; } 11%, to { left: 100%; transition-property: left; } } .sam30-desktop-menu-btn { background: none; cursor: pointer; border: none; padding: 0; width: 25px; padding-right:40px; } .sam30-desktop-navbar-dropdown-menu { width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; position: absolute; top: 50px; z-index: -1; } .sam30-desktop-navbar-dropdown-menu.open, .products-dropdown-active.sam30-products-dropdown-menu { max-height: 2000px; } /* .sam30-navbar-products.sam30-products-active { font-weight: 800; } */ .sam30-desktop-dropdown-content { padding: 15px 0; background-color: #00000075; -webkit-backdrop-filter: blur(80px); /* Safari-specific */ backdrop-filter: blur(80px); /* Other browsers */ color: #fff!important; transition: all 0.3s ease-in-out; } h3.sam30-dropdown-content-menu-heading{ font-size: 20px; } .sam30-dropdown-content-menu-inner a { margin-bottom: 10px; font-size: 16px; font-weight: 400; text-align: left; color: #ffffff; transition: all 0.3s ease; display: block; } .sam30-desktop-dropdown-content h4 { color: var(--primary); margin-bottom: 15px; margin-top: 20px; } .sam30-navbar-menu-link, .sam30-login-btns, .sam30-search-container { display: none; } .sam30-mobile-search-btn { background-color: transparent; border: none; padding: 0; height: 40px; width: 30px; } .sam30-search-sidebar { position: fixed; top: 0; right: -575px; width: 100%!important; max-width: 575px!important; height: 100vh!important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: right 0.3s ease-in-out; background-color: #00000075!important; color: #fff; backdrop-filter: blur(80px); padding: 20px 20px; z-index: 11!important; } .sam30-search-sidebar.active { right: 0; } button.sam30-searchclosebutton { background-color: transparent; border: none; padding: 0; } .sam30-searchSidebar-inner { display: flex; width: 100%; align-items: center; gap: 10px; } input#sam30-searchInput { width: 100%; padding: 10px 5px; border: none; outline: none; background-color: transparent; color: white; font-size:16px; font- } ul#sam30-searchResults { padding: 30px 0; list-style: none; display: flex; flex-direction: column; gap: 15px; max-height: calc(100% - 15px); overflow-y: auto; } ul#sam30-searchResults li { color: #9d9d9d; display: flex; align-items: center; gap: 15px; } header.sam30-navbar.sticky { top: 0; transition: all 0.3s ease-in-out; } header.sam30-navbar.sticky .sam30-navbar-inner { margin: 0 0; border-radius: 0; backdrop-filter: blur(80px); -webkit-backdrop-filter: blur(80px); background-color: #181b2e8c; } header.sam30-navbar.sticky .sam30-desktop-dropdown-content { margin: 0 0; } .sam30-dropdown-content-menu-inner-padding li{ list-style-type:none; } .sam30-menu-icon{ max-width:unset; } .mobvisible{ display:none; }.swiper-button-next, .swiper-button-prev{z-index:8!important;} /* Responsive Styles */ @media (min-width: 1024px) { .sam30-navbar-menu-link, .sam30-login-btns, .sam30-search-container { display: flex; } .desktop-product-menu-content, .sam30-mobile-search-btn { display: none; } .sam30-navbar { top: 36px; } .sam30-navbar-inner { margin: 0 15px; border-radius: 24px; } .sam30-desktop-navbar-dropdown-menu { border-radius: 0 0 20px 20px; min-height: auto; } .sam30-desktop-dropdown-content { display: grid; grid-template-columns: repeat(6, 1fr); padding: 60px 25px 0; gap: 10px; margin: 0 15px; border-radius: 0 0 20px 20px; } .sam30-dropdown-content-menu-inner { margin-bottom: 40px; } .sam30-desktop-dropdown-content h4 { font-size: 18px; margin-bottom: 15px; margin-top: 30px; } h3.sam30-dropdown-content-menu-heading { margin-bottom: 10px; color:#fff; } } @media (min-width: 1400px) { .sam30-navbar-inner { margin: 0 50px; } .sam30-logo { padding-left: 15px; } .sam30-logo img { max-width: 125px; } .sam30-navbar-menus { gap: 45px; } .sam30-desktop-dropdown-content { padding: 65px 60px 0; margin: 0 50px; } } @media (max-width: 1024px) { .sam30-desktop-navbar-dropdown-menu.open { overflow-y: auto; height: calc(100% - 65px); -webkit-overflow-scrolling: touch; } .sam30-desktop-navbar-dropdown-menu { position: fixed; top: 65px; } .sam30-desktop-dropdown-content { min-height: calc(100vh - 65px); } .sam30-dropdown-content-menu-inner { display: block; overflow: hidden; max-height: 0; transition: max-height 0.4s ease-in-out; } .sam30-dropdown-content-menu-inner-padding { padding: 15px 20px; } .sam30-dropdown-content-menu-heading { cursor: pointer; padding: 6px 20px; border-bottom: 1px solid #484848; position: relative; color:#fff; font-weight:400; } .sam30-dropdown-content-menu-heading:before { content: ""; background-image: url('data:image/svg+xml,'); position: absolute; right: 10px; top: 7px; background-repeat: no-repeat; height: 30px; width: 30px; background-position: center; transition: transform 0.4s ease-in-out; } .sam30-dropdown-content-menu-heading.active:before { transform: rotate(45deg); } .sam30-dropdown-content-menu-heading.active + .dropdown-content-menu-inner { max-height: 2000px; } @media (max-width:767px){ .sam30-desktop-menu-btn{ padding-right:0px; } .search_result{ background: transparent!important; } .search_result ul li{ border-bottom: 1px solid #383f64; padding: 7px 0px; } .search_result ul li .symbole_name{ color:#fff!important; } .search_result ul li a{ color:#fff!important; font-size:16px!important; } .search_result ul li a img{ filter: brightness(200); } .mobvisible{ display:block; } .menucta{ display:flex; justify-content:center; align-items:center; padding: 12px 16px; } .menucta a{ font-size: 16px; font-weight: 400; line-height: 22.99px; text-align: center; color: #ffffff; width:50%; cursor: pointer; transition: all 0.3s ease; background-color:#1a63fd; border: 1px solid #5093ff; padding: 8px 15px; border-radius: 18px; margin-right: 15px; } .menucta a:nth-last-child(1){ margin-right:0px; } .sam30-samco-andekha-sach br{display:none;} } } /* header End */ /* end menu css */ #captcha_img{border-radius: 0px 5px 5px 0px;} .range-value { margin-top: 7px !important; }@media (max-width: 767px) {h3.sam30-dropdown-content-menu-heading{font-size: 18px;line-height: 26px;}.sam30-dropdown-content-menu-heading:before{border-radius:30px;width: 24px;height:24px;top: 2px;}.sam30-features-next, .sam30-features-prev{z-index: 8!important;}}
:root{
--navy-1:#06122B; --navy-2:#091B44; --navy-3:#0B1F52;
--h1-grad-1:#C9D7FF; --h1-grad-2:#7FA3FF;
--muted:#A7B7DE; --white:#fff;
--capsule-h:64px; --capsule-w:540px; --radius:36px;
/* circles scale so full rings are always visible */
--ring3: min(1100px, 1100px); /* outer */
--ring2: calc(var(--ring3) * .78);
--ring1: calc(var(--ring3) * .52);
--intro-bg:#f3f8ff;
--card-edge:#FFFFFF;
--blue-1:#2E66FF; --blue-2:#5891FF;
--text:#1A2B4A; --muted:#5D6E90;
--success:#18B27A;
--radius-xxl:40px;
--shadow: 0 20px 50px rgba(20,40,90,.18), 0 6px 16px rgba(20,40,90,.12);
--card-h:410px;
}
.g-recaptcha{overflow: hidden;}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Product Sans","Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;color:var(--white);background:#000}
/* ===== FIRST SECTION ===== */
.samrecomm-banner{
min-height:100svh;
padding:160px 16px 0;
position:relative; isolation:isolate;
overflow:visible; /* let full circles show */
background:
radial-gradient(600px 500px at 50% 10%, rgba(46,102,255,.35), transparent 60%),
linear-gradient(180deg,#050A23 0%, #18358D 55%, #6885cd 100%);
}
.samrecomm-banner::after{
content:"";position:absolute;
background:radial-gradient(1400px 820px at 50% -12%, rgba(255,255,255,.08), transparent 62%);
pointer-events:none;z-index:0;
}
.samrecomm-banner__wrap{width:min(100%,1100px);margin-inline:auto;text-align:center;position:relative;z-index:1}
.samrecomm-banner__title{
margin:0;
font-size:clamp(38px,5.5vw,60px); line-height:clamp(44px,5.5vw,70px);
background:linear-gradient(180deg,#fff,#7993E3);
-webkit-background-clip:text;background-clip:text;color:transparent;
text-shadow:0 18px 40px rgba(10,20,60,.55);
}
.samrecomm-banner__sub{margin:22px 0 32px;color:#D5DCEE;font-size:clamp(22px,2.1vw,24px);font-weight:400;}
.samrecomm-banner__form{margin:0 auto;max-width:450px;}
.samrecomm-banner__capsule{
height:var(--capsule-h); display:flex; align-items:center; gap:8px;
padding:8px; border-radius:var(--radius);
background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
box-shadow:0 18px 40px rgba(7,18,43,.55),0 4px 10px rgba(7,18,43,.35),0 0 0 1px rgba(255,255,255,.07) inset;
backdrop-filter:blur(8px) saturate(140%); transform:translateZ(0); transition:transform .25s ease; perspective:1000px;
}
.samrecomm-banner__capsule:hover{ transform:translateY(-2px) }
.samrecomm-banner__dial{
flex:0 0 auto; display:inline-flex; align-items:center; gap:10px;
padding:0 16px; height:48px; border-radius:28px; font-size:18px;
background:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
color:#E6EEFF; font-weight:700; letter-spacing:.2px;
}
.samrecomm-banner__input{
flex:1 1 auto; height:48px; min-width:120px; background:transparent; border:0; outline:0; color:var(--white);
font-size:20px; padding:0 6px; caret-color:#fff; font-weight:400; font-family: "Product Sans", "Inter";
}
.samrecomm-banner__input::placeholder{color:rgba(255,255,255,.6)}
.samrecomm-banner__submit{
flex:0 0 auto; width:77px; height:52px; border-radius:50px; border:0; display:grid; place-items:center;
background:linear-gradient(90deg,#255BDF,#143AAF);
box-shadow:0 10px 30px rgba(46,102,255,.55), inset 0 0 0 1px rgba(255,255,255,.2);
opacity:.6; cursor:not-allowed; transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.samrecomm-banner__submit[aria-disabled="false"]{opacity:1;cursor:pointer}
.samrecomm-banner__submit[aria-disabled="false"]:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(46,102,255,.65),inset 0 0 0 1px rgba(255,255,255,.25)}
.samrecomm-banner__capsule.is-invalid{box-shadow:0 18px 40px rgba(7,18,43,.55),0 4px 10px rgba(7,18,43,.35),0 0 0 2px rgba(255,75,95,.65),0 0 0 1px rgba(255,255,255,.06) inset}
.samrecomm-banner__input:-webkit-autofill,
.samrecomm-banner__input:-webkit-autofill:hover,
.samrecomm-banner__input:-webkit-autofill:focus{ -webkit-text-fill-color:#fff !important; transition:background-color 9999s ease-out,color 9999s ease-out; box-shadow:0 0 0 1000px transparent inset !important }
.samrecomm-banner__input:-moz-autofill{ box-shadow:0 0 0 1000px transparent inset !important; -moz-text-fill-color:#fff !important }
.samrecomm-banner__legal{margin-top:15px;font-size:12px;color:rgba(255,255,255,.75);font-weight:300;}
.samrecomm-banner__legal a{color:#CFE1FF;text-decoration:none}
.samrecomm-banner__trust{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;color:#D5DCEE;font-weight:400;font-size:16px;}
.samrecomm-banner__trust img{width:26px;height:26px;}
.samrecomm-banner__trustItem{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.samrecomm-banner__pipe{opacity:.4;user-select:none;display:inline-block;padding:0 6px}
/* ===== APP BLOCK (inside same section) ===== */
.samrecomm-app{
position:relative; isolation:isolate;
margin-top:35px; padding:0 16px 72px;
overflow:visible;
max-height: 650px;
}
.samrecomm-app__wrap{width:min(100%,1200px);margin-inline:auto;position:relative}
/* scene gives enough vertical room so large ring isn't cropped */
.samrecomm-app__scene{
position:relative;
min-height: calc(var(--ring3) + 10px);
}
/* STATIC RINGS — perfectly centered horizontally AND vertically */
.samrecomm-app__rings{
position:absolute; left:50%; top:45%;
transform:translate(-50%,-50%);
pointer-events:none; z-index:1;
}
.samrecomm-app__ring{
position:absolute; left:50%; top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
border:1px solid rgba(221,234,255,.14);
box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;
}
.samrecomm-app__ring--1{ width:var(--ring1); height:var(--ring1) }
.samrecomm-app__ring--2{ width:var(--ring2); height:var(--ring2) }
.samrecomm-app__ring--3{ width:var(--ring3); height:var(--ring3) }
/* PHONE — centered on same origin */
.samrecomm-app__phone{
position:absolute; left:50%; top:35%;
transform:translate(-50%,-50%) perspective(1200px);
z-index:2; display:block; width:min(82%, 800px);
filter: drop-shadow(0 40px 80px rgba(8,16,40,.65)) drop-shadow(0 8px 22px rgba(8,16,40,.35));
transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
/* FLOATING TIPS */
.samrecomm-app__tip{
position:absolute; z-index:3; padding:10px 22px; border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.08); color:#EAF2FF; font-weight:700; letter-spacing:.2px;
box-shadow:0 16px 40px rgba(9,16,40,.35), inset 0 0 0 1px rgba(255,255,255,.06);
backdrop-filter: blur(6px) saturate(140%); white-space:nowrap;
}
/* Floating pill labels */
.samrecomm-app__tip{
position:absolute; z-index:3;
padding:10px 22px; border-radius:999px;
background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
border:1px solid rgba(255,255,255,.08);
color:#EAF2FF; font-weight:700; letter-spacing:.2px;
box-shadow:0 16px 40px rgba(9,16,40,.35), inset 0 0 0 1px rgba(255,255,255,.06);
backdrop-filter: blur(6px) saturate(140%);
white-space:nowrap;
/* floating animation */
animation: tip-bob 2.6s ease-in-out infinite;
will-change: transform;
}
/* position the two labels around the centered phone/rings */
.samrecomm-app__tip--top{
left:18%;
top:12%; /* adjust as needed */
transform:translateX(-15%);
animation-delay: .3s; /* slight offset so they don’t move in sync */
}
.samrecomm-app__tip--bottom{
left:60%; /* or: top: 70% */
transform:translateX(-10%);
animation-delay: 1.6s;
}
@keyframes tip-bob{
0%,100% { transform: translateX(var(--tx, 0)) translateY(0) }
50% { transform: translateX(var(--tx, 0)) translateY(-6px) }
}
/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
.samrecomm-app__tip{ animation:none }
}
/* anchored around the centered phone */
.samrecomm-app__tip--top{ left:20%; transform:translateX(-12%) }
.samrecomm-app__tip--bottom{ left:50%; top:60%; }
/* REVEAL HELPERS */
.reveal{opacity:0;transform:translateY(18px);will-change:opacity,transform}
.reveal.in{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.form.in{transition-duration:.8s}
@media (max-width:1024px){
.samrecomm-app__phone{ width:min(88%, 680px) }
.samrecomm-app__tip--top{ transform:translateX(-20%) }
}
@media (max-width:760px){
.samrecomm-banner__pipe{display:none;}
.samrecomm-banner{padding-top:100px;padding-bottom: 0px;margin-bottom: -1px;overflow:hidden;}
.samrecomm-app{ padding-bottom:56px }
.samrecomm-app__phone{ width:min(96%, 560px) }
.samrecomm-app__tip{ font-weight:600; padding:8px 12px; font-size:14px; font-weight:500; }
.samrecomm-app__tip--top{ transform:translateX(-30%); left: 0%; }
}
/* Introduction section */
.samrecomm-introduce{
background:#6885cc;
color:var(--text);
font-family:"Product Sans","Inter",system-ui,-apple-system,Arial,sans-serif;
position: relative;
z-index: 4;
/* border-radius:60px 60px 0px 0px; */
}
.samrecomm-introdiv{
border-radius:50px 50px 0px 0px;
background:var(--intro-bg);
position: relative;
padding: 48px 0px;
/* box-shadow:0px -10px 100px 0px #00000036; */
}
.samrecomm-introduce__wrap{width:min(1340px,100%);margin:0 auto}
/* row: Say NO ... | SEBI to far-right */
.samrecomm-introduce__row{
display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px;
}
.samrecomm-introduce__eyebrow{margin:0;font-size:clamp(14px,2.1vw,18px);color:var(--muted)}
.samrecomm-introduce__typed{display:inline-flex;align-items:center;margin-left:6px}
.samrecomm-introduce__typedWord{
min-width:12ch;
background:linear-gradient(180deg,#ff7a7a,#e34b4b);
-webkit-background-clip:text;background-clip:text;color:transparent;
font-weight:800;
}
.samrecomm-introduce__caret{
width:1px;height:1.1em;background:#e34b4b;margin-left:2px;
animation: blink 1s step-end infinite;
}
@keyframes blink{50%{opacity:0}}
.samrecomm-introduce__badge{
justify-self:end; display:inline-flex; align-items:center; gap:6px;
background:#E8FFF2; color:#1B8F58; border:1px solid #C9F4DF;
padding:8px 10px; border-radius:999px; font-weight:700; white-space:nowrap;
}
.samrecomm-introduce__titleRow{display:flex;align-items:center;justify-content:center;gap:15px;flex-wrap:wrap;margin-top:6px}
.samrecomm-introduce__title{color:#383838;font-size:clamp(32px,4.6vw,40px);font-weight:600;text-align: center;line-height:clamp(40px,5.5vw,70px);}
.samrecomm-introduce__brand{
background: linear-gradient(90deg, #1E3A8A, #2563EB, #1E3A8A);
background-size: 200% auto; /* make gradient wider than text */
color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: samrecomm-gradient-slide 4s linear infinite;}
/* Animation */
@keyframes samrecomm-gradient-slide {
0% { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
}
.samrecomm-introduce__pill{background:#E7EFFF;border:1px solid #2563EB;padding:8px 20px;border-radius:999px;font-weight:500;color:#2563EB;box-shadow:0 6px 16px rgba(46,102,255,.15)}
.samrecomm-introduce__desc{margin:6px 0 20px;font-weight:400;color:#545F77;font-size:clamp(16px,2vw,20px);text-align:center;}
/* grid 65 / 35 */
.samrecomm-introduce__grid{
display:grid; grid-template-columns:63% 35%; gap:25px;
}
.samrecomm-introduce__card{
position:relative; overflow:hidden;
}
.samrecomm-introduce__card--right{
background: linear-gradient(180deg,#6a95ff 0%, #98b7ff 100%);
}
.samrecomm-introduce__cardHead{padding:18px 20px 10px}
.samrecomm-introduce__cardHead h3{margin:0 0 6px;font-size:26px;font-weight:500; color:#2046A5;text-align: center;}
.samrecomm-introduce__cardHead p{margin:0;color:#425884;font-weight:400;font-size:16px;text-align: center;}
/* LEFT internals */
.samrecomm-introduce__leftBody{
position:absolute; inset:72px 16px 16px 16px; display:grid; grid-template-columns: minmax(200px, 42%) 1fr; gap:14px;
}
.samrecomm-introduce__phone{
width:100%; height:100%; object-fit:contain; object-position:left bottom;
transform: rotate(-6deg);
filter: drop-shadow(0 28px 50px rgba(3,12,44,.35));
pointer-events:none;
}
/* RIGHT scroller (3D flatter, shows ~3 items) */
.samrecomm-introduce__scroller{
position:absolute; inset:72px 16px 16px 16px; overflow:hidden; border-radius:18px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.95) 32%, rgba(0,0,0,.95) 88%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.95) 32%, rgba(0,0,0,.95) 88%, transparent 100%);
/* background: rgba(255,255,255,.12); */
transform: perspective(100px) rotateX(8deg); /* narrower top, wider bottom */
}
.samrecomm-introduce__list{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column; gap:12px;
animation: mb-scroll 24s linear infinite;
transform-origin:50% 100%;
margin-bottom:10px;
animation-play-state: running;
}
/* Seamless loop: we’ll clone this list with JS; this anim distance equals 50% of total */
@keyframes mb-scroll{
0% { transform: translateY(0) }
100% { transform: translateY(-50%) }
}
.mbCard{
width:76%;
margin:0 auto;
display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px;
background:linear-gradient(180deg,#ffffff,#f6f8ff);
border:1px solid rgba(0,0,0,.06);
border-radius:14px; padding:12px 14px;
box-shadow:0 14px 28px rgb(0 18 58 / 3%), 0 4px 10px rgb(0 18 58 / 4%);
}
.mbCard__logo{
display:grid; place-items:center; width:42px; height:42px; border-radius:10px;
background:#fff; color:#5c77ff; font-weight:800; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
text-transform:uppercase;
}
.mbCard__logo img{width:100%; height:100%;border-radius: 10px;border: 1px solid #eeeeee;box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);}
.mbCard__name{font-weight:500; color:#545F77; overflow-wrap:anywhere}
.mbCard__gain{font-weight:800; color:#545F77; text-align:right}
.mbCard__gain.pos{color:#11b882}
.mbCard__gain small{display:block; font-weight:600; color:#545F77}
/* Responsive */
@media (max-width: 980px){
.samrecomm-introduce{}
.samrecomm-introdiv{border-radius: 30px 30px 0px 0px;padding: 30px 0px;margin-bottom: -1px;}
.samrecomm-introduce__grid{grid-template-columns:1fr}
.samrecomm-introduce__leftBody{grid-template-columns:1fr; align-items:center}
.samrecomm-introduce__phone{height:190px; width:auto; transform:none; margin:0 auto}
.samrecomm-introduce__infoPanel{order:2}
.samrecomm-introduce__pill{font-size:14px;padding: 6px 14px;}
.samrecomm-introduce__desc{margin-top: 20px;padding: 0 20px;}
.samrecomm-introduce__scroller{transform: unset; margin-top: 58px;-webkit-mask-image: unset;
mask-image: unset;height:340px}
.mbCard{width:100%;}
.mbCard__logo{width: 60px;
height: 60px;}
.mbCard__gain{font-size:20px;}
.mbCard__gain small{font-size:16px;}
.samrecomm-banner{overflow: hidden;}
}
/* Introduction section */
/* Say no to section */
.samrecomm-sayno {
display: flex;
justify-content: center;
align-items: center;
gap: .25rem;
font-family: inherit;
line-height: 1.2;
font-size: clamp(22px, 2.5vw, 24px);
}
/* Label */
.samrecomm-sayno__label {
font-weight: 500;
color: #575757; /* adjust */
}
/* Quotes + text */
.samrecomm-sayno__quotes {
color: #d92952; /* red for quotes + text */
font-weight: 500;
white-space: nowrap;
display: inline-flex;
align-items: center;
}
.samrecomm-sayno__rotator {
display: inline-block;
margin: 0 .15rem;
will-change: transform, opacity;
}
/* Anim states (JS applies these) */
.samrecomm-sayno__in {
animation: samrecomm-sayno-in 500ms cubic-bezier(.2,.8,.2,1) both;
}
.samrecomm-sayno__out {
animation: samrecomm-sayno-out 300ms ease both;
}
/* Drop in from top */
@keyframes samrecomm-sayno-in {
0% { transform: translateY(-16px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* Fade away in place */
@keyframes samrecomm-sayno-out {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
.samrecomm-sayno__rotator,
.samrecomm-sayno__in,
.samrecomm-sayno__out {
animation: none !important;
transition: none !important;
}
}
/* Say no to section */
/* Tabs sections */
:root { --sam-delay: 10000ms; } /* 10s */
.samrecomm-tabs {
padding:7px 0px 0px;
border-radius:28px;
}
.samrecomm-tabs__bar{ margin-bottom:8px; }
.samrecomm-tabs__bar-scroller{
display:flex; gap:20px; overflow-x:visible; -webkit-overflow-scrolling:touch;
padding:0 2px 14px; margin:0 -2px -8px;
justify-content: center;
}
@media (max-width: 767px){
.samrecomm-tabs__bar-scroller{
display:flex; gap:20px; overflow-x:visible; -webkit-overflow-scrolling:touch;
padding:12px 0px; margin:0px;
justify-content: center;
}
}
@media (min-width:901px){ .samrecomm-tabs__bar-scroller{ justify-content:center; } }
.samrecomm-tabs__btn{
cursor:pointer; position:relative; flex:0 0 auto;
padding:12px 22px;
font-family: Product Sans;
font-weight:400; font-size:18px; line-height:1.1;
color:#434343; background:#fff;
border:1px solid #C8C8C8; /* white border */
border-radius:9999px;
width:108px; height:45px;
/* box-shadow:0 6px 18px rgba(19,40,80,0.10); */
transition:box-shadow .18s ease, border-color .18s ease, color .18s ease;
white-space:nowrap;
overflow: visible;
}
.samrecomm-tabs__btn:hover { box-shadow:0 8px 22px rgba(19,40,80,0.16); cursor: pointer; }
.samrecomm-tabs__btn.is-active {
color:#2563EB;
border:1px solid #a2baee;
box-shadow:0 4px 10px rgb(37 99 235 / 27%);
background:#e6effe;
}
/* SVG stroke overlay */
.samrecomm-tabs__ring{
position:absolute; inset:0;
left: -1.2px; /* tweak this */
top: -1px; /* and this */
width: calc(100% + 1.5px); /* 2 * |left| */
height: calc(100% + 2.2px); /* 2 * |top| */
z-index: 5;
pointer-events:none;
overflow:visible;
}
/*
.samrecomm-tabs__btn:nth-child(2) .samrecomm-tabs__ring{
position:absolute; inset:0;
left: -2.5px;
top: -1.0px;
width: calc(100% + 5.5px);
height: calc(100% + 2.3px);
z-index: 5;
pointer-events:none;
}
.samrecomm-tabs__btn:nth-child(3) .samrecomm-tabs__ring{
position:absolute; inset:0;
left: -2.5px;
top: -1.0px;
width: calc(100% + 5.5px);
height: calc(100% + 2.3px);
z-index: 5;
pointer-events:none;
} */
.samrecomm-tabs__ring-rect{
fill:none; stroke:#2563EB; stroke-width:1;
vector-effect:non-scaling-stroke;
stroke-linecap:round; stroke-linejoin:round;
shape-rendering:geometricPrecision;
opacity:0;
}
/* .samrecomm-tabs__ring-rect{
fill:none; stroke:#2563EB; stroke-width:1;
vector-effect:non-scaling-stroke;
stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:0; stroke-dashoffset:0;
opacity:0;
shape-rendering:geometricPrecision;
} */
@keyframes ringfill { to { stroke-dashoffset:0; } }
.samrecomm-tabs__panes{ margin-top:24px; }
.samrecomm-tabs__grid{ display:grid; grid-template-columns:3.5fr 2fr; gap:28px; }
@media (max-width:900px){ .samrecomm-tabs__grid{ grid-template-columns:1fr; }
.samrecomm-sayno{text-align: center;
flex-direction: column;
gap: .3rem;margin-bottom:20px;}
.samrecomm-tabs{
background: linear-gradient(180deg, #294FBC 0%, #E6EDFE 100%);
padding:30px 15px 70px;
}
.samrecomm-introduce__cardHead{padding: 4px 20px 10px;}
.samrecomm-sayno::after {
content: "";
display: block;
width: 50px;
height: 5px;
background: #ccc;
border-radius: 50px;
margin: 16px auto 0;
}
}
.samrecomm-tabs__box{
min-height:420px; border-radius:40px; border:5px solid #fff; overflow:hidden;
box-shadow:0 24px 68px rgba(19,40,80,0.18),0 2px 6px rgba(19,40,80,0.10);
}
.samrecomm-tabs__box--left { background:linear-gradient(180deg,#294FBC 0%, #E6EDFE 100%); }
.samrecomm-tabs__box--right{ background:linear-gradient(180deg,#DAE7F9 0%, #B8CFF9 100%); }
.samrecomm-tabs__pane{ display:none; }
.samrecomm-tabs__pane.is-active{ display:block; }
/* left side widgets */
/* ---------- Base + tokens ---------- */
.samrecomm-tabs-pp {
--pp-card-radius: 18px;
--pp-green: #16A34A;
--pp-blue-ink: #2250BE;
--pp-title: #425884;
--pp-subtle: #52658D;
--pp-shadow: 0 4px 12px rgba(24, 43, 142, 0.10);
--pp-card-bg: linear-gradient(180deg, #FBFBFD 0%, rgba(255,255,255,0.70) 100%);
color: #0B1B4B;
}
.samrecomm-tabs-pp__wrap{
display:flex;
gap:60px;
justify-content: center;
align-items: center;
}
/* .samrecomm-tabs-pp__wrap{
display:grid;
grid-template-columns: 0.95fr 1.05fr;
gap:28px;
align-items: stretch;
} */
/* ---------- Left image ---------- */
.samrecomm-tabs-pp__left{ display:flex; align-items:center; justify-content:center; }
.samrecomm-tabs-pp__img{
width:100%;
max-width: 272px;
height:auto;
margin-top:30px;
border-radius:34px 34px 0px 0px;
box-shadow: 0 12px 28px rgba(11,27,75,0.25);
object-fit:cover;
}
/* ---------- Right content ---------- */
.samrecomm-tabs-pp__title{
margin:0px 0 20px;
font-weight:400;
font-size:26px;
line-height:1.15;
color:#ffffff; /* expect on gradient panels; adjust if needed */
-webkit-text-stroke: 0 transparent;
}
.samrecomm-tabs-pp__card{
background: var(--pp-card-bg);
border-radius: var(--pp-card-radius);
box-shadow: var(--pp-shadow);
padding:20px 20px;
display:flex;
align-items:center;
gap:18px;
animation: samrecomm-tabs-pp-float 6s ease-in-out infinite alternate;
will-change: transform;
max-width: 375px;
}
.samrecomm-tabs-pp__card--success{ margin-bottom:24px; }
@keyframes samrecomm-tabs-pp-float{
from{ transform: translateY(0); }
to { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce){
.samrecomm-tabs-pp__card{ animation:none; }
}
/* Success widget layout */
.samrecomm-tabs-pp__donut{
position:relative;
width:90px; min-width:100px; height:100px;
display:grid; place-items:center;
}
.samrecomm-tabs-pp__donut-track{
fill:none;
stroke:#E6ECF8;
stroke-width:12;
}
.samrecomm-tabs-pp__donut-bar{
fill:none;
stroke: var(--pp-green);
stroke-width:12;
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50% 50%;
stroke-dasharray: 327; /* updated in JS */
stroke-dashoffset: 327; /* updated in JS */
transition: stroke-dashoffset .9s ease;
}
.samrecomm-tabs-pp__donut-text{
position:absolute; inset:0;
display:grid; place-items:center;
font-weight:700; font-size:22px; color: var(--pp-green);
}
.samrecomm-tabs-pp__success-copy{ flex:1; }
.samrecomm-tabs-pp__success-title{
font-weight:500; font-size:18px; color: var(--pp-title);
margin-bottom:6px;
}
.samrecomm-tabs-pp__success-desc{
margin:0; font-size:16px; line-height:1.5; color: var(--pp-subtle);
}
/* KPI row */
.samrecomm-tabs-pp__kpis{
display:flex; justify-content: flex-start; gap:24px;
}
.samrecomm-tabs-pp__card--kpi{ padding:20px 20px; width:fit-content; min-width:174px; }
.samrecomm-tabs-pp__kpi-inner{
display:grid; grid-template-columns: auto 1fr; gap:14px; align-items:center; justify-content:start;
}
.samrecomm-tabs-pp__kpi-icon svg{ width:36px; height:36px; display:block; }
.samrecomm-tabs-pp__kpi-value{
font-weight:600; font-size:22px; line-height:1; color: var(--pp-green); margin-bottom:6px;
}
.samrecomm-tabs-pp__kpi-label{
font-size:18px; color: var(--pp-title);font-weight: 500;
}
.samrecomm-tabs-pp .samrecomm-tabs-pp__card--kpi{ text-align:center; }
.samrecomm-tabs-pp .samrecomm-tabs-pp__kpi-inner{
display:flex; /* override grid */
flex-direction:column; /* stack vertically on desktop */
align-items:center;
justify-content:center;
gap:10px;
width:100%;
}
.samrecomm-tabs-pp .samrecomm-tabs-pp__kpi-main{
display:flex;
flex-direction:column; /* value above label */
align-items:center;
}
/* ---------- Responsive ---------- */
@media (max-width: 1024px){
.samrecomm-tabs-pp__wrap{ grid-template-columns: 1fr; }
.samrecomm-tabs-pp__left{ order:2; } /* image goes down */
.samrecomm-tabs-pp__right{ order:1; }
.samrecomm-tabs__box--left{
background: transparent;
border: 0px;
box-shadow: none;
border-radius: unset;
min-height: fit-content;
}
.samrecomm-tabs__box--right{
background: transparent;
border: 0px;
box-shadow: none;
border-radius: unset;
}
.samrecomm-tabs-pp__left{display:none;}
.samrecomm-introduce__titleRow{margin-top:0px;}
}
@media (max-width: 640px){
.marmanage{margin:10px 20px 0px!important;}
.samrecomm-tabs-pp__title{ font-size:26px; color:#fff;text-align: center; margin-bottom:34px; } /* darker title on light bg on small screens */
.samrecomm-tabs-pp__kpis{ grid-template-columns: 1fr; }
.samrecomm-tabs-pp__card{ padding:18px; width:100%; max-width: 100%; }
.samrecomm-tabs-pp__donut{ width:96px; min-width:96px; height:96px; }
.samrecomm-tabs-pp__kpi-inner{ grid-template-columns: auto 1fr; }
.samrecomm-tabs__btn.is-active{
background: linear-gradient(90deg, #3381d4, #0061F2);
color:#fff;
border:0px;
box-shadow:
0 4px 8px rgba(0, 0, 0, 0.12),
0 8px 20px rgba(41, 79, 188, 0.2);
}
.samrecomm-tabs__ring-rect{stroke: #ffffffc9;}
.samrecomm-tabs__btn{ color:#e1e1e1; background:transparent;}
}
@media (max-width: 390px){
.samrecomm-tabs-pp__kpi-value{ font-size:24px; }
}
@media (max-width:640px){
.samrecomm-tabs-pp .samrecomm-tabs-pp__card--kpi{ text-align:left; }
.samrecomm-tabs-pp .samrecomm-tabs-pp__kpi-inner{
flex-direction:row;
align-items:center;
justify-content:flex-start;
}
.samrecomm-tabs-pp .samrecomm-tabs-pp__kpi-main{ align-items:flex-start; }
.samrecomm-tabs-pp .samrecomm-tabs-pp__kpi-icon{ margin-right:12px; }
}
/* Tabs sections */
/* Marquee top recommendation section */
/* ===== Section header (unchanged) ===== */
.samrecomm-marquee{
background: var(--intro-bg, #fff);
position: relative;
padding: 10px 0 40px;
font-family: "Product Sans",sans-serif;
}
.samrecomm-introduce__titleRow{ display:flex; justify-content:center; }
.samrecomm-introduce__title{
color:#383838; margin:0; font-size: clamp(32px, 4.6vw, 40px); font-weight:600; text-align:center;
}
.samrecomm-introduce__brand{ color:#2046A5; }
.samrecomm-introduce__desc{
text-align:center; max-width:820px; margin:10px auto 0px; color:#525252; line-height:1.5;
}
.marbottom{margin-bottom:30px;}
.samrecomm-introduce__scroller.is-paused .samrecomm-introduce__list{
animation-play-state: paused;
}
/* ===== Single-card carousel shell ===== */
.samrecomm-rcards{
--card-w: 280px; /* your original card size */
--card-h: 320px;
--gap: 35px; /* spacing between cards in the track */
--arrow-hit: 44px; /* min arrow touch target */
position: relative;
width: 100%;
padding: 20px 0 0;
}
.samrecomm-rcards__viewport{
overflow: hidden;
position: relative;
/* center-align feel with a little breathing room top/bottom on small screens */
padding: 20px 0 40px;
}
.samrecomm-rcards__track{
display: flex;
gap: var(--gap);
will-change: transform;
touch-action: pan-y;
user-select: none;
-webkit-user-drag: none;
transform: translate3d(0,0,0);
transition: transform .38s ease;
/* keep the row centered visually so first paint shows a centered card */
justify-content: flex-start;
}
/* ===== Arrows ===== */
.samrecomm-rcards__arrow{
position:absolute; top: 36%; translate: 0 -50%;
width: var(--arrow-hit); height: var(--arrow-hit);
display:grid; place-items:center;
border-radius: 999px; background:#fff;
border:1px solid #E0E7FF; box-shadow: 0 6px 18px rgb(20 41 73 / 58%);
z-index:4; cursor:pointer;
}
.samrecomm-rcards__arrow svg{ width:22px; height:22px; }
.samrecomm-rcards__arrow--left{ left:8px; }
.samrecomm-rcards__arrow--right{ right:8px; }
.samrecomm-rcards__arrow[disabled]{ opacity:.4; cursor:not-allowed; }
/* ===== Card (your original visuals preserved) ===== */
.samrecomm-rcards__card{
flex: 0 0 var(--card-w);
height: var(--card-h);
background:#FBFBFD;
border:1px solid #B3CAED;
border-radius:30px;
box-shadow:0 4px 12px rgba(0,53,128,0.11);
padding:16px 20px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
position: relative;
transform-style: preserve-3d;
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
will-change: transform;
}
.samrecomm-rcards__card:hover{
transform: perspective(900px) translateY(-4px) scale(1.015);
box-shadow: 0 14px 40px rgba(20,41,73,0.18);
}
.samrecomm-rcards__glare{
position: absolute; top:-20%; left:-20%; width:140%; height:140%;
pointer-events:none; opacity:0; transition:opacity .25s ease; mix-blend-mode:screen; transform: translateZ(60px);
background: radial-gradient(circle at 50% 50%,rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.00) 60%);
z-index:1;
}
.samrecomm-rcards__card:hover .samrecomm-rcards__glare{ opacity:1; }
@media (prefers-reduced-motion: reduce){
.samrecomm-rcards__card{ transition: box-shadow .2s ease; }
.samrecomm-rcards__card:hover{ transform:none; box-shadow:0 10px 28px rgba(20,41,73,0.16); }
}
/* Header */
.samrecomm-rcards__head{
display:grid; grid-template-columns:48px 1fr; grid-auto-rows:min-content;
gap:0 10px; align-items:self-start; position:relative; min-height:64px;
}
.samrecomm-rcards__logo{ width:48px;height:48px;border-radius:50%;overflow:hidden;display:inline-block; }
.samrecomm-rcards__logo img{ width:100%;height:100%;object-fit:cover;display:block; }
.samrecomm-rcards__topline{ display:flex; align-items:baseline; gap:4px; margin-top:2px; }
.samrecomm-rcards__badge{
font-size:12px; font-weight:600; letter-spacing:.3px; padding:4px 8px; border-radius:999px; line-height:1;
background:#E6F7EB; color:#0A7C2D; border:1px solid #BFE8C7;
}
.samrecomm-rcards__card--sell .samrecomm-rcards__badge{
background:#FFE7E7; color:#DE4646; border:1px solid #FFB3B3;
}
.samrecomm-rcards__symbol{ font-weight:700; color:#434343; text-transform:uppercase; font-size:18px; letter-spacing:.5px; line-height:1.05; }
.samrecomm-rcards__name{ grid-column:2/-1; margin-top:-16px; color:#85869F; font-size:14px; font-weight:500; line-height:1.1; }
/* Lock overlay */
.samrecomm-rcards__card--locked .samrecomm-rcards__head::before{
/* blur the original header underneath */
content:"";
position:absolute; inset: -6px -6px 0 -6px; height:76px;
backdrop-filter: blur(30px);
background: rgba(255,255,255,0.65);
border-radius:24px;
z-index:2;
}
.samrecomm-rcards__lock{
position:absolute; inset:-6px -6px 0 -6px; height:76px; display:flex; align-items:center; gap:18px;
padding:10px 14px; z-index:3;
}
.samrecomm-rcards__lock-ico{
width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
background: radial-gradient(60% 60% at 50% 50%, #FFFFFF 0%, #F4F6FF 100%);
box-shadow: 0 8px 24px rgba(129,140,248,0.35);
flex:0 0 48px; border: 1px solid #CCCCCC;
}
.samrecomm-rcards__lock-ico img{ width:26px; height:26px; display:block; }
.samrecomm-rcards__lock-text{ font-weight:400; font-size:18px; line-height:1.2; color:#4B4B4B; }
.samrecomm-rcards__lock-sub{ display:none; font-weight:700; font-size:12px; color:#64748B; margin-top:2px; }
/* Rows + TP */
.samrecomm-rcards__rows{ margin-top:6px; display:grid; gap:10px; }
.samrecomm-rcards__row{ display:flex; align-items:center; justify-content:space-between; font-size:15px; }
.samrecomm-rcards__row .lbl{ color:#6B6B6B; font-weight:400; font-size:16px; }
.samrecomm-rcards__row .val{ color:#434343; font-weight:700; font-size:16px; }
.samrecomm-rcards__tp{
margin-top:6px; border:1px solid #64B4AA; background:#D6F4EF; border-radius:12px;
padding:12px 14px; display:flex; align-items:center; justify-content:space-between;
font-weight:500; font-size:16px; color:#0F766E;
}
.samrecomm-rcards__pct{ color:#0F766E; font-size:18px; font-weight:600; }
.samrecomm-rcards__card--sell .samrecomm-rcards__tp{ background:#FFDEDE; border:1px solid #FFA1A1; color:#DE4646; }
.samrecomm-rcards__card--sell .samrecomm-rcards__pct{ color:#DE4646; }
/* Footer */
.samrecomm-rcards__foot{ display:flex; align-items:center; gap:8px; margin-top:12px; color:#9293A6; font-size:14px; font-weight:400; }
.samrecomm-rcards__dot{ width:8px;height:8px;border-radius:50%; background:#2ECC71; box-shadow:0 0 0 3px rgba(46,204,113,.15); }
/* for safari mozilla and IE */
.samrecomm-rcards__card--locked .samrecomm-rcards__head::before { content: none; }
.samrecomm-rcards .samrecomm-rcards__head { position: relative; }
.samrecomm-rcards .samrecomm-rcards__blur{
position: absolute;
inset: -6px -6px 0 -6px;
height: 76px;
border-radius: 24px;
z-index: 2;
background: rgba(255, 255, 255, 0.65);
-webkit-backdrop-filter: blur(30px) saturate(120%);
backdrop-filter: blur(30px) saturate(120%);
}
.samrecomm-rcards .samrecomm-rcards__lock {
z-index: 3;
background: linear-gradient(135deg,
rgba(255,255,255,1) 0%,
rgba(244,246,255,1) 100%);
border: 1px solid rgba(67,67,67,0.08);
border-radius: 24px;
/* box-shadow: 0 8px 20px rgba(20,41,73,0.10); */
backdrop-filter: none;
}
/* Base highlight: gradient border, soft glow, slight emphasis */
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked){
position: relative;
border: 2px solid transparent; /* enable gradient border below */
background:
linear-gradient(#FBFBFD, #FBFBFD) padding-box,
linear-gradient(90deg, #2669E9, #43B4D4) border-box;
box-shadow: 0 10px 28px rgba(32, 70, 165, 0.18);
transform: perspective(900px) translateY(-2px) scale(1.01);
z-index: 1;
}
/* Subtle breathing glow behind the card */
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked)::before{
content:"";
position:absolute;
inset:-10px -12px -14px -12px; /* spill a bit outside for glow */
border-radius:36px;
pointer-events:none;
background: radial-gradient(40% 60% at 50% 10%,
rgba(68,113,228,0.35) 0%,
rgba(67,180,212,0.18) 35%,
rgba(67,180,212,0.00) 70%);
filter: blur(18px);
opacity:.8;
z-index:-1;
animation: samrecomm-unlocked-glow 3.6s ease-in-out infinite;
}
/* Slightly richer TP chip for unlocked BUY */
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked) .samrecomm-rcards__tp{
background: #E9FBF7;
border-color: #5AC7B9;
color:#0A7C2D;
}
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked) .samrecomm-rcards__pct{
color:#0A7C2D;
}
/* Bring the logo a touch forward on unlocked cards */
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked) .samrecomm-rcards__logo{
box-shadow: 0 6px 18px rgba(35,98,253,0.16);
transform: translateZ(20px);
background: linear-gradient(135deg, #2669E9, #43B4D4);
background-color: #2669E9;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-weight: 600;
}
/* Keep your existing hover but make unlocked pop a hair more */
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked):hover{
transform: perspective(900px) translateY(-6px) scale(1.02);
box-shadow: 0 18px 48px rgba(20,41,73,0.22);
}
/* Active dot: make it pulse on unlocked to signal "live" */
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked) .samrecomm-rcards__dot{
background:#2ECC71;
box-shadow: 0 0 0 3px rgba(46,204,113,.18);
animation: samrecomm-dot-pulse 1.8s ease-in-out infinite;
}
/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce){
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked){ transform: none; }
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked)::before,
.samrecomm-rcards .samrecomm-rcards__card:not(.samrecomm-rcards__card--locked) .samrecomm-rcards__dot{
animation: none;
}
}
/* Keyframes */
@keyframes samrecomm-unlocked-glow{
0% { opacity:.65; transform: translateY(0) scale(1); }
50% { opacity:.95; transform: translateY(-2px) scale(1.02); }
100% { opacity:.65; transform: translateY(0) scale(1); }
}
@keyframes samrecomm-dot-pulse{
0% { box-shadow: 0 0 0 3px rgba(46,204,113,.18); }
50% { box-shadow: 0 0 0 6px rgba(46,204,113,.10); }
100% { box-shadow: 0 0 0 3px rgba(46,204,113,.18); }
}
/* Fallback blur */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))){
.samrecomm-rcards__card--locked .samrecomm-rcards__head::before{ content:none; }
.samrecomm-rcards__blur{
position:absolute; inset:-6px -6px 0 -6px; height:76px; border-radius:24px; z-index:2;
background: rgba(255, 255, 255, 0.9);
}
.samrecomm-rcards .samrecomm-rcards__lock{
z-index:3; background:linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(244,246,255,0.92) 100%);
border:1px solid rgba(67,67,67,0.08); border-radius:24px;
}
}
/* CTA (unchanged) */
.samrecomm-rcardsbtn{ display:flex; justify-content:center; margin-top:40px; }
.samrecomm-rcardsbtn__cta{
display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:999px; border:1px solid #2563EB22;
background:#F7FAFF; cursor:pointer;
}
.samrecomm-rcardsbtn__ico svg{ width:18px; height:18px; }
/* Focus ring for clickable items */
.samrecomm-rcards [data-url]{ cursor: pointer; }
.samrecomm-rcards [data-url]:focus-visible{
outline: 2px solid #2362FD; outline-offset: 2px; border-radius: 16px;
}
@media (max-width: 768px){
.samrecomm-rcards__viewport{
overflow: hidden; /* hide neighbors completely */
padding-left: 0; /* no artificial left gap */
padding-right: 0; /* no artificial right gap */
padding: 10px 0px 30px;
}
.samrecomm-introduce__titleRow .samrecomm-rcardsbtn {margin-bottom: 0px;
margin-top: 20px;}
.maradjust{margin-bottom: 30px!important;
margin-top: 40px!important;}
/* keep the row left-aligned so JS controls position precisely */
#samrecommTrack{ justify-content: flex-start; }
}
/* Marquee top recommendation section */
/* unlock recommendations CTA */
.samrecomm-rcardsbtn{
display:flex; justify-content:center; align-items:center;
padding:0px 16px 32px;
}
/* ===== Button ===== */
.samrecomm-rcardsbtn__cta{
position:relative; overflow:hidden;
display:inline-flex; align-items:center; gap:14px;
padding:14px 30px;
border-radius:40px; border:1px solid #A7C1FF;
color:#FFFFFF; font-weight:600; font-size:18px; letter-spacing:.2px; line-height:1;
background: linear-gradient(180deg, #3B82F6 0%, #2563EB 60%, #1D4ED8 100%);
box-shadow: 0 10px 24px rgba(37,99,235,0.35), inset 0 1px 0 rgba(255,255,255,0.20);
cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.samrecomm-rcardsbtn__cta:hover{
/* transform:translateY(-2px); */
box-shadow: 0 14px 32px rgba(37,99,235,0.45), inset 0 1px 0 rgba(255,255,255,0.25);
}
.samrecomm-rcardsbtn__cta:active{
transform:translateY(0);
box-shadow: 0 8px 20px rgba(37,99,235,0.35), inset 0 2px 0 rgba(0,0,0,0.08);
filter:brightness(.98);
}
.samrecomm-rcardsbtn__cta::before{
content:"";
position:absolute; top:0; left:-120%; /* start well outside */
width:100%; height:100%; border-radius:inherit; pointer-events:none;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
-webkit-animation: samrcbtn-shine 4s ease-in-out infinite;
animation: samrcbtn-shine 4s ease-in-out infinite;
will-change:left;
}
@-webkit-keyframes samrcbtn-shine{
0% { left:-120%; }
12% { left:100%; }
100% { left:100%; }
}
@keyframes samrcbtn-shine{
0% { left:-120%; }
12% { left:100%; }
100% { left:100%; }
}
.samrecomm-rcardsbtn__cta::after{
content:"";
position:absolute; inset:0; border-radius:14px; pointer-events:none;
background: linear-gradient(120deg,
rgba(255,255,255,0.25) 0%,
rgba(255,255,255,0.00) 30%,
rgba(255,255,255,0.25) 60%,
rgba(255,255,255,0.00) 100%);
background-size:220% 220%;
opacity:0; transition: opacity .2s ease, transform .5s ease;
}
.samrecomm-rcardsbtn__cta:hover::after{
opacity:.8; transform:translateX(0px);
}
/* Icon circle */
.samrecomm-rcardsbtn__ico{
width:28px; height:28px; border-radius:50%; flex:0 0 28px;
display:grid; place-items:center;
background: radial-gradient(60% 60% at 50% 50%, #FFFFFF 0%, #E6EDFE 100%);
box-shadow: 0 6px 16px rgba(59,130,246,0.35);
}
.samrecomm-rcardsbtn__ico svg{ width:20px; height:20px; display:block; }
.samrecomm-rcardsbtn__label{ white-space:nowrap; }
/* Focus (cross-browser, incl. IE) */
.samrecomm-rcardsbtn__cta:focus{
outline:3px solid #A7C1FF; outline-offset:3px;
}
.samrecomm-rcardsbtn__cta:focus-visible{
outline:3px solid #A7C1FF; outline-offset:3px;
}
@media (max-width:640px){
.samrecomm-researchpricing__left{
display: flex;
width:100%;
flex-direction: column;
gap: .8rem;
justify-content: center;
align-items: center;
}
.samrecomm-rcardsbtn{ padding:0px 14px 28px; margin-top: 40px;
margin-bottom: 60px; }
.samrecomm-rcardsbtn__cta{
width:100%; justify-content:center; padding:16px 18px; font-size:15.5px; border-radius:50px;
}
}
@media (prefers-reduced-motion: reduce){
.samrecomm-rcardsbtn__cta{ transition: box-shadow .15s ease; }
.samrecomm-rcardsbtn__cta::before,
.samrecomm-rcardsbtn__cta::after{ -webkit-animation:none; animation:none; display:none; }
.samrecomm-rcardsbtn__cta:hover{ transform:none; }
}
/* unlock recommendations CTA */
/* Samco Broking section */
:root{
--samBlue-600:#2563EB; --samBlue-700:#1E3A8A;
--text-1:#1F2A44; --text-2:#414C64;
--brand-ink:#2046A5; --chip-bg:#E7EFFF; --chip-stroke:#2563EB; --chip-text:#2250BC;
--tab-active-bg:#D3E2FF; --tab-active-stroke:#6BA8F3; --tab-inactive-bg:#FFFFFF; --tab-inactive-stroke:#DCDCDC;
--pipe:#A7C5F0; --green:#16A34A; --userBlue:#3166DF;
}
/* Soft gradient + blur patches */
.samrecomm-broking-softpatch{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#E4EFFF 0%,#E8FFF9 100%);}
.samrecomm-broking-softpatch::before,.samrecomm-broking-softpatch::after{content:"";position:absolute;z-index:-1;background:#C2D9F8;opacity:.9;filter:blur(170px);border-radius:50%;}
.samrecomm-broking-softpatch::before{width:520px;height:520px;left:-140px;top:-120px;}
.samrecomm-broking-softpatch::after{width:600px;height:600px;right:-180px;bottom:-160px;}
/* Layout: left padded, right edge-to-edge visual rail */
.samrecomm-brokinginvest__container{
max-width:1340px;margin:0 auto;
display:grid;grid-template-columns:minmax(0,640px) 1fr;align-items:stretch;
min-height:560px;
}
.samrecomm-brokinginvest__left{padding:88px 24px 80px;display:flex;flex-direction:column;gap:0px;min-width:0;}
.samrecomm-brokinginvest__right{position:relative;}
.samrecomm-brokinginvest__visual{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
/* .samrecomm-brokinginvest__img{position:absolute;max-width:none;height:auto;width:auto;transition:transform .45s ease,opacity .25s ease,filter .45s ease;object-fit:contain;} */
/* defaults */
.samrecomm-brokinginvest__img{ position:absolute; max-width:none; }
.visual-app .samrecomm-brokinginvest__img{ height:auto; top:10%; margin: 0 auto; }
.visual-web .samrecomm-brokinginvest__img{ height:88%; top:auto; filter: unset; right:auto; }
.visual-tv .samrecomm-brokinginvest__img{ height:88%; top:auto; filter: unset; right:auto; }
.visual-options .samrecomm-brokinginvest__img{ height:auto; top:10%; margin: 0 auto; right:auto; filter: unset; }
.visual-mtf .samrecomm-brokinginvest__img{ height:auto; top:10%; margin: 0 auto; right:auto; filter: unset; }
.visual-api .samrecomm-brokinginvest__img{ height:88%; top:auto; filter: unset; right:auto; }
.visual-rankmf .samrecomm-brokinginvest__img{ height:auto; top:10%; margin: 0 auto; }
/* …add/adjust per tab */
/* Typography + UI */
.samrecomm-brokinginvest__pill{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border:1px solid var(--chip-stroke);background:var(--chip-bg);color:var(--chip-text);border-radius:60px;font-size:16px;font-weight:500;line-height:1;box-shadow:0 4px 12px rgba(0,0,0,.13);width:max-content;}
.samrecomm-brokinginvest__h1{margin:6px 0 2px;font-size:52px;line-height:58px;font-weight:600;letter-spacing:.2px;color:#383838;}
.samrecomm-brokinginvest__h1 .samrecomm-brokinginvest__brand{background:linear-gradient(90deg,var(--samBlue-700) 0%,var(--samBlue-600) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.samrecomm-brokinginvest__tabs{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}
.samrecomm-brokinginvest__tab{font-family: Product Sans;display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:50px;cursor:pointer;user-select:none;border:1px solid var(--tab-inactive-stroke);background:var(--tab-inactive-bg);font-size:16px;font-weight:400;color:#1F2A44;white-space:nowrap;transition:box-shadow .2s,background-color .2s,border-color .2s,transform .06s;}
.samrecomm-brokinginvest__tab:active{transform:translateY(1px);}
.samrecomm-brokinginvest__tab.is-active{font-weight:500;color:#2046A5;background:var(--tab-active-bg);border-color:var(--tab-active-stroke);box-shadow:4px 6px 10px rgb(90 131 182 / 25%);}
.samrecomm-brokinginvest__sub{color:var(--text-2);font-size:18px;line-height:28px;margin:20px 0 25px;}
.samrecomm-brokinginvest__trust{display:flex;align-items:center;gap:25px;flex-wrap:wrap;color:var(--brand-ink);font-weight:500;font-size:18px;margin-top:20px;}
.samrecomm-brokinginvest__trust .pipe{width:1px;height:18px;background:var(--pipe);display:inline-block;}
.samrecomm-brokinginvest__trust span svg{width:30px;height:30px;}
/* Responsive */
@media (max-width:1024px){
.samrecomm-brokinginvest__container{grid-template-columns:minmax(0,560px) 1fr;min-height:520px;}
.samrecomm-brokinginvest__h1{font-size:42px;line-height:52px;}
}
@media (max-width:880px){
.samrecomm-brokinginvest__container{grid-template-columns:1fr;min-height:auto;}
.samrecomm-brokinginvest__left{padding:36px 16px 14px;}
.samrecomm-brokinginvest__right{position:relative;min-height:360px;}
.samrecomm-brokinginvest__visual{position:relative;inset:auto;height:360px;}
.samrecomm-brokinginvest__img{left:50%;transform:translateX(-50%);}
.visual-app .samrecomm-brokinginvest__img{height:130%;top:0%;right:auto;}
.visual-web .samrecomm-brokinginvest__img{height:100%;right:auto;}
/* Tabs scroll horizontally + center active */
.samrecomm-brokinginvest__tabs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;padding-bottom:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.samrecomm-brokinginvest__tabs::-webkit-scrollbar{display:none;}
.samrecomm-brokinginvest__h1{margin-top:2px;}
.visual-app .samrecomm-brokinginvest__img{ height:130%; top:0%; right:auto; left:50%; transform:translateX(-50%); }
.visual-web .samrecomm-brokinginvest__img{ height:100%; right:auto; left:50%; transform:translateX(-50%); }
.visual-options .samrecomm-brokinginvest__img{ height:130%; top:0%; right:auto; left:50%; transform:translateX(-50%); }
.visual-mtf .samrecomm-brokinginvest__img{ height:130%; top:0%; right:auto; left:50%; transform:translateX(-50%); }
.visual-rankmf .samrecomm-brokinginvest__img{ height:130%; top:0%; right:auto; left:50%; transform:translateX(-50%); }
.visual-tv .samrecomm-brokinginvest__img{ height:100%; right:auto; left:50%; transform:translateX(-50%); }
.visual-api .samrecomm-brokinginvest__img{ height:100%; right:auto; left:50%; transform:translateX(-50%); }
}
@media (max-width:560px){
.samrecomm-brokinginvest__h1{font-size:34px;line-height:42px;}
.samrecomm-brokinginvest__sub{font-size:16px;line-height:24px;margin:5px 0px 5px;}
.samrecomm-brokinginvest__tab{font-size:16px;padding:10px 16px;}
.samrecomm-brokinginvest__trust{display:none;}
}
/* Why samco Section */
.samrecomm-whysambg{
background-color: #F3F8FF;
}
.samrecomm-whysam{
position:relative;
overflow:hidden;
background: linear-gradient(0deg, #082386 0%, #020820 100%);
padding:72px 16px 180px;
border-bottom-left-radius:50px;
border-bottom-right-radius:50px;
}
.samrecomm-whysam::after{
content:"";
position:absolute;
left:20%;
bottom:-140px;
width:1200px;
height:450px;
transform:translateX(-50%);
background: rgba(63,98,188,0.4);
filter: blur(70px);
z-index:0;
}
.samrecomm-whysam__container{
width:min(100%,1340px);
margin:0 auto;
position:relative;
z-index:1;
}
.samrecomm-whysam__header{
text-align:center;
margin-bottom:40px;
}
.samrecomm-whysam__title{
margin:0 0 4px;
font-size:48px;
font-weight:600;
background:linear-gradient(180deg, #EAF1FF 30%, #7993E3 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.samrecomm-whysam__subtitle{
font-size:22px;
color:#A7B3D6;
}
/* Right logo */
.samrecomm-whysam__logo{
position:absolute;
right:-34px;
top:55px;
width:130px;
height:auto;
opacity:0.9;
}
/* Rows */
.samrecomm-whysam__row{
display:flex;
align-items:center;
gap:28px;
margin-top:120px;
}
.samrecomm-whysam__row:first-of-type { margin-top: 70px; }
.samrecomm-whysam__row--mirror{flex-direction:row-reverse}
.samrecomm-whysam__col--30{flex:0 0 35%;display: flex;justify-content: center;}
.samrecomm-whysam__col--70{flex:1 1 65%}
/* Device image with glow */
.samrecomm-whysam__device-wrap{
position:relative;
display:inline-block;
}
.samrecomm-whysam__device-wrap::before{
content:"";
position:absolute;
left:50%;
top:50%;
width:400px;
height:280px;
background:#004BFF;
opacity:1;
filter:blur(80px);
transform:translate(-50%,-50%);
border-radius:50%;
z-index:-1;
}
.samrecomm-whysam__device-img{
width:auto;
height:600px;
object-fit:cover;
border-radius:28px;
box-shadow:0 18px 60px rgba(0,0,0,0.35);
}
/* Content */
.samrecomm-whysam__heading{
font-size:32px;
font-weight:500;
margin:0 0 12px;
color:#EDF3FF;
}
.samrecomm-whysam__desc{
margin:0 0 28px;
color:#CFE0FF;
font-size: 18px;
font-weight: 300;
line-height:1.6;
}
.samrecomm-whysam__grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.samrecomm-whysam__card{
background:rgba(251,251,253,0.07);
border:1px solid rgba(179,202,237,0.31);
box-shadow:0 4px 12px rgba(0,53,128,0.08);
border-radius:20px;
padding:18px 16px 26px;
color:#E9F1FF;
line-height:1.4;
}
/* === Broad Recommendations content inside each .samrecomm-whysam__card === */
.samrecomm-whysam .samrecomm-whysam-card{ display:flex; flex-direction:column; gap:12px; }
.samrecomm-whysam .samrecomm-whysam-card__head{ display:flex; align-items:center; gap:12px; }
.samrecomm-whysam .samrecomm-whysam-card__icon{
width:46px;height:46px;border-radius:6px;background:transparent;border:1px dashed #637296;
display:flex;align-items:center;justify-content:center;flex:0 0 46px;
}
.samrecomm-whysam .samrecomm-whysam-card__icon svg{ width:30px;height:30px; }
.samrecomm-whysam .samrecomm-whysam-card__title{ font-size:20px;font-weight:500;color:#E9F1FF;margin:0;letter-spacing:.2px; }
.samrecomm-whysam .samrecomm-whysam-card__list{ list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px; }
.samrecomm-whysam .samrecomm-whysam-card__li{ display:flex;align-items:flex-start;gap:10px;font-weight:400;color:#D1D8EA;font-size:16px;line-height:1.5; }
.samrecomm-whysam .samrecomm-whysam-card__dot{ width:6px;height:6px;border-radius:50%;background:#D1D8EA;margin-top:.55em;flex:0 0 6px; }
/* Active card glow */
.samrecomm-whysam__card--active{
border-color: rgba(179,202,237,0.65);
box-shadow:
0 0 0 1px rgba(121,147,227,0.55),
0 10px 30px rgba(0,53,128,0.25),
0 0 40px rgba(64,115,255,0.25) inset;
background: rgba(251,251,253,0.11);
box-shadow: 2px 2px 20px #ffffff4f;
}
/* Image swap animation */
.samrecomm-whysam__device-img{ transition: opacity .45s ease, transform .45s ease; opacity: 1; transform: translateY(0); }
.samrecomm-whysam__device-img.is-fade-out{ opacity: 0; transform: translateY(10px); }
.samrecomm-whysam__device-img.is-fade-in{ opacity: 1; transform: translateY(0); }
/* Cursor hint */
.samrecomm-whysam__card{ cursor: pointer; }
/* progress bar */
.samrecomm-whysam__card { position: relative; overflow: hidden; }
.samrecomm-whysam__progress{
position:absolute; left:0; right:0; bottom:0; height:1px;
background: linear-gradient(90deg, #FFFFFF, rgba(255, 255, 255));
transform-origin: left center; transform: scaleX(0); pointer-events:none;
}
.samrecomm-whysam__card--active .samrecomm-whysam__progress { animation: samrecomm-progress linear forwards; }
@keyframes samrecomm-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Responsive */
@media(max-width:992px){
.samrecomm-whysam{padding-top:50px;padding-bottom: 140px;}
.samrecomm-whysam__logo{right: -23px;top: 40px;width: 100px;}
.samrecomm-whysam__row, .samrecomm-whysam__row--mirror{flex-direction:column}
.samrecomm-whysam__col--30, .samrecomm-whysam__col--70{width:100%;flex:unset;background:transparent;}
.samrecomm-whysam__device-wrap{margin:0 auto 24px;text-align: center;background:transparent;box-shadow:none;}
}
@media(max-width:640px){
.samrecomm-whysam__title{font-size:34px; text-align: center;}
.samrecomm-whysam__heading{font-size:22px;display:none;}
.samrecomm-downloadapp__desc{text-align: center;}
.samrecomm-whysam__subtitle{font-size:16px}
.samrecomm-whysam__grid{grid-template-columns:1fr}
}
/* ====== ADDITIVE: MOBILE-ONLY ENHANCEMENTS (no desktop UI changes) ====== */
/* 1) Mobile-only heading (just after section subtitle) */
.samrecomm-whysam__heading--mobileonly{ display:none; margin-top:14px; text-align:center; }
/* 2) Mobile image sizing */
@media (max-width:640px){
/* Hide the Row-1 heading (we show the same text above as mobile-only heading) */
#whysam-row1 .samrecomm-whysam__heading{ display:none; }
/* Hide both row descriptions on mobile as requested */
#whysam-row1 .samrecomm-whysam__desc,
#whysam-row2 .samrecomm-whysam__desc{ display:none; }
.samrecomm-whysam__row:first-of-type{margin-top:22px;}
/* Keep desktop smooth; disable only while dragging */
.samrecomm-whysam__card { transition: transform 300ms ease, box-shadow 300ms ease; }
#whysam-device-1, #whysam-device-2 { transition: transform 300ms ease, opacity 300ms ease; }
.is-dragging { transition: none !important; }
.marbottommanage{margin-bottom:30px;}
/* for sticky why samco heading */
.samrecomm-whysam__row{gap:0px;margin-top:30px;}
/* Show the mobile-only heading */
.samrecomm-whysam__heading--mobileonly{ display:block;font-size: 22px; margin: 30px 0px 0px; }
/* Center Row-2 heading text */
#whysam-row2 .samrecomm-whysam__heading{ text-align:center; margin-bottom:22px;}
/* Device image is smaller and full-width friendly */
.samrecomm-whysam__device-img{
width:46%;
height:auto;
max-width:520px;
border-radius:20px;
}
.samrecomm-whysam__card{
padding: 20px 20px;
}
.samrecomm-whysam .samrecomm-whysam-card__title{
font-size:18px;
}
.samrecomm-whysam .samrecomm-whysam-card__li{
font-size:16px;
}
.samrecomm-whysam__header{margin-bottom:0px;}
/* Show only one card at a time */
.samrecomm-whysam__grid .samrecomm-whysam__card{ display:none; }
.samrecomm-whysam__grid .samrecomm-whysam__card.is-visible{ display:block; }
/* Arrow buttons beside image (mobile only) */
.samrecomm-whysam__navbtn{
position:absolute; top:50%; transform:translateY(-50%);
width:42px; height:42px; border-radius:50%;
background:rgba(255,255,255,0.1);
border:1px solid rgba(179,202,237,0.4);
display:flex; align-items:center; justify-content:center;
backdrop-filter: blur(6px);
cursor:pointer; z-index:2;
}
.samrecomm-whysam__navbtn svg{ width:22px; height:22px; }
.samrecomm-whysam__navbtn--prev{ left:-6px; }
.samrecomm-whysam__navbtn--next{ right:-6px; }
/* Add a little separation under image before the card */
.samrecomm-whysam__col--30{ margin-bottom:8px; }
}
/* Subtle disabled state if needed */
.samrecomm-whysam__navbtn[disabled]{ opacity:.4; pointer-events:none; }
/* why samco */
/* Samco Segments */
/* ============= SEGMENTS ============= */
:root{
--seg-width: 1280px;
--seg-bg-left: #D5E6F8;
--seg-bg-right:#F0F1FA;
--seg-pill-bg:#FFFFFF;
--seg-pill-stroke:#6BA8F3;
--seg-text:#2046A5;
}
/* ===== Container ===== */
.samrecomm-segments{
width:100%;
display:flex;
justify-content:center;
position: absolute;
margin-top: -60px;
isolation: isolate;
overflow:visible;
}
/* background glow under the track */
.samrecomm-segments::before{
content: "";
position: absolute;
left: 53%;
transform: translateX(-50%);
bottom: -85px;
width: 1200px;
height: 176px;
background: rgb(63 98 188 / 58%);
border-radius: 1000px / 200px;
filter: blur(160px);
z-index: 0;
pointer-events: none;
}
/* track wrapper */
.samrecomm-segments__wrap{
width:min(var(--seg-width), 100%);
height:120px;
background: linear-gradient(90deg, var(--seg-bg-left) 0%, var(--seg-bg-right) 100%);
border-radius:40px;
padding:18px 20px;
box-shadow:
0 10px 24px rgba(18,36,78,0.08),
inset 0 0 0 1px rgba(107,168,243,0.12);
display:flex;
z-index: 2;
position: relative;
align-items:center;
isolation: isolate;
justify-content: center;
overflow:visible; /* keeps inner scroll tidy on mobile */
}
/* scroller row */
.samrecomm-segments__scroller{
display:flex;
gap:23px;
width:100%;
overflow-x:visible; /* desktop: visible; mobile will override to auto */
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
z-index: 3;
position: relative;
justify-content: center; /* desktop centered; mobile will left-align */
padding-bottom:2px; /* avoid iOS scrollbars overlapping pills */
}
/* optional scrollbar styling */
.samrecomm-segments__scroller::-webkit-scrollbar{height:4px}
.samrecomm-segments__scroller::-webkit-scrollbar-thumb{
background:rgba(0, 0, 0, 0.052); border-radius:8px;
}
/* pill */
.samrecomm-segments__pill{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:12px;
height:52px;
padding:0 24px;
background:var(--seg-pill-bg);
border:1px solid var(--seg-pill-stroke);
border-radius:999px;
color:var(--seg-text);
font-weight:400;
line-height:1;
scroll-snap-align:center; /* desktop center; mobile will use start */
text-wrap:nowrap;
font-size:18px;
box-shadow: 0 8px 18px rgba(14,53,122,0.10);
text-decoration: none;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.samrecomm-segments__pill:hover{
background: #f9fbff;
transform: scale(1.06);
box-shadow: 0 10px 24px rgba(14,53,122,0.20),
0 6px 12px rgba(14,53,122,0.10);
}
.samrecomm-segments__pill:active{
transform: scale(0.97);
box-shadow: 0 4px 10px rgba(14,53,122,0.15);
}
.samrecomm-segments__icon{
width:24px; height:24px; display:inline-block; flex:0 0 24px;
color:var(--seg-text);
}
.samrecomm-segments__label{font-size:18px}
/* ============= RESPONSIVE ============= */
@media (max-width: 1024px){
.samrecomm-segments__wrap{height:auto; padding:16px;border-radius: 0px;}
.samrecomm-segments__scroller{gap:18px;}
.samrecomm-segments__pill{height:52px; padding:0 18px}
.samrecomm-segments__label{font-size:18px}
}
@media (max-width: 640px){
.samrecomm-brokinginvest__pill{margin-bottom:10px;}
.samrecomm-segments{padding:0px 0px;overflow:hidden;}
.samrecomm-whysam__card,
#whysam-device-1,
#whysam-device-2 { will-change: transform; }
.samrecomm-segments__wrap{
border-radius:0px;
padding:16px 12px; /* small left padding so 1st pill isn’t flush */
}
.samrecomm-segments__scroller{
gap:18px;
padding-bottom: 6px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: 12px;
justify-content: flex-start;
}
.samrecomm-segments__pill{
height:48px; padding:0 16px; gap:10px;
scroll-snap-align: start;
box-shadow:none;
}
.samrecomm-segments__icon{width:20px; height:20px}
.samrecomm-segments__label{font-size:16px; font-weight:500}
}
/* Samco Pricing */
.samrecomm-pricing{
background:#f7fbff;
padding: 120px 0px 0px;
}
.samrecomm-pricing__titleRow {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
margin-top: 8px;
position: relative;
z-index: 10;
}
.samrecomm-pricing__title {
color: #383838;
margin: 0;
font-size: clamp(30px, 4.6vw, 48px);
font-weight: 600;
}
:root{
--sam-blue-ink:#2046A5; /* active Broking text */
--sam-capsule-bg:#EBF3FF; /* whole track bg */
--sam-pill-active:#F8FBFF; /* active broking capsule */
--sam-pill-shadow:2px 2px 10px 0 rgba(150,180,223,.60);
--sam-prime-stroke:#DAAE4A;
--sam-prime-grad-from:#FCE385;
--sam-prime-grad-to:#F5A214;
--sam-prime-text:#5A4100;
--sam-research-text:#CCA45A;
--sam-research-grad-start:#16387A; /* active Research radial start */
--sam-research-grad-end:#00153E; /* active Research radial end */
--sam-track-h:58px;
--sam-track-r:60px;
--sam-side-pad:22px;
--sam-font-size:18px;
}
/* ------------------------------
Section wrapper
--------------------------------*/
.samrecomm_pricing_details{
padding:40px 16px 50px;
display:grid;
place-items:center;
z-index: 12;
position: relative;
}
.samrecomm_pricing_details__wrap{
width:min(1340px, 94vw);
}
/* ------------------------------
TAB STRIP (capsule)
--------------------------------*/
.samrecomm_pricing_details__tabs{
position:relative;
width:fit-content;
margin-inline:auto;
border:1px solid #BCD7FD;
background:var(--sam-capsule-bg);
border-radius:var(--sam-track-r);
height:var(--sam-track-h);
padding:6px;
display:flex;
align-items:center;
gap:6px;
}
/* Moving active capsule */
.samrecomm_pricing_details__indicator{
position:absolute;
top:5px;
left:-1px;
height:calc(var(--sam-track-h) - 12px);
border-radius:calc(var(--sam-track-r) - 6px);
background:var(--sam-pill-active);
box-shadow:var(--sam-pill-shadow);
transition:
transform 420ms cubic-bezier(.21,.72,.21,1),
width 420ms cubic-bezier(.21,.72,.21,1),
background 280ms ease,
box-shadow 280ms ease;
will-change:transform,width;
z-index:0;
}
/* When Research is active, swap the indicator look */
.samrecomm_pricing_details__indicator--research{
background: radial-gradient(120% 180% at 25% 30%, var(--sam-research-grad-start) 0%, var(--sam-research-grad-end) 70%);
box-shadow:
0 10px 30px rgba(0,21,62,.45),
inset 0 1px 1px rgba(255,255,255,.10);
}
/* Buttons */
.samrecomm_pricing_details__btn{
position:relative;
z-index:1;
appearance:none;
border:0;
background:transparent;
padding:0 var(--sam-side-pad);
height:calc(var(--sam-track-h) - 12px);
border-radius:calc(var(--sam-track-r) - 6px);
display:inline-flex;
align-items:center;
gap:12px;
font-family: "Product Sans", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
font-size:var(--sam-font-size);
font-weight:500;
letter-spacing:.2px;
cursor:pointer;
white-space:nowrap;
user-select:none;
}
.samrecomm_pricing_details__btn:focus-visible{
outline:2px solid rgba(32,70,165,.5);
outline-offset:3px;
border-radius:999px;
}
/* States */
.samrecomm_pricing_details__btn[data-tab="broking"]{
color:var(--sam-blue-ink);
}
.samrecomm_pricing_details__btn[data-tab="research"]{
color:var(--sam-research-text);
}
/* Elevated text color when on top of dark indicator */
.samrecomm_pricing_details__btn--on-dark{
color:#E7C57B;
}
/* PRIME label */
.samrecomm_pricing_details__prime{
display:inline-flex;
align-items:center;
justify-content:center;
padding:6px 14px;
border-radius:999px;
border:1px solid var(--sam-prime-stroke);
background:linear-gradient(90deg, var(--sam-prime-grad-from) 0%, var(--sam-prime-grad-to) 100%);
box-shadow:2px 2px 10px rgba(151,151,151,.60);
font-size:13px;
font-weight:800;
letter-spacing:.3px;
line-height:1;
color:var(--sam-prime-text);
}
/* ------------------------------
PANELS
--------------------------------*/
.samrecomm_pricing_details__panel{
display:none;
}
.samrecomm_pricing_details__panel[aria-hidden="false"]{
display:block;
animation: sam-fade-in .25s ease;
}
@keyframes sam-fade-in{
from{ opacity:0; transform:translateY(6px); }
to{ opacity:1; transform:translateY(0); }
}
/* ------------------------------
RESPONSIVE
--------------------------------*/
@media (max-width:820px){
:root{
--sam-track-h:56px;
--sam-font-size:15px;
--sam-side-pad:14px;
}
.samrecomm_pricing_details__wrap{ width:min(800px, 98vw); }
.samrecomm-pricing__title{text-align: center;line-height:42px;margin: auto 20px;}
.samrecomm-pricing{padding:70px 0px 0px;}
.samrecomm-introduce__desc{margin-top:20px;}
}
@media (max-width:560px){
:root{
--sam-track-h:52px;
--sam-font-size:15px;
--sam-side-pad:12px;
}
.samrecomm_pricing_details{ padding:0px; }
.samrecomm_pricing_details__prime{ padding:5px 12px; font-size:12px; }
}
/* Broking Pricing */
:root{
--brand:#2046A5; --text:#1b2559; --muted:#626262;
--card-bg:#FBFBFD; --card-bd:#B3CAED; --shadow:0 4px 12px rgba(186,212,248,.6);
--icon-bg:#E7EEFF; --icon-bd:#CFD9FF;
}
/* ---------- Container ---------- */
.samrecomm-brokingpricing{ max-width:1340px; margin:32px auto 0px; padding:0 16px; }
/* ---------- Desktop / Tablet grid ---------- */
.samrecomm-brokingpricing__grid{
display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.samrecomm-brokingpricing__card{
background:var(--card-bg); border:1px solid var(--card-bd); box-shadow:var(--shadow);
border-radius:40px; padding:28px; display:flex; flex-direction:column; min-height:280px;
transition:transform .25s ease, box-shadow .25s ease;
backface-visibility:hidden;
}
/* Hover lift ONLY for desktop grid cards */
@media (hover:hover){
.samrecomm-brokingpricing__grid .samrecomm-brokingpricing__card:hover{
transform:translateY(-2px); box-shadow:0 8px 24px rgba(186,212,248,.7);
}
}
.samrecomm-brokingpricing__head{ display:flex; align-items:center; gap:14px; margin-bottom:12px }
.samrecomm-brokingpricing__iconbox{
width:54px;height:54px; display:grid; place-items:center;
background:var(--icon-bg); border:1px solid var(--icon-bd); border-radius:16px; flex:0 0 54px;
}
.samrecomm-brokingpricing__title{ font-size:18px; color:var(--brand); font-weight:600 }
.samrecomm-brokingpricing__sub{ font-size:18px; color:var(--muted); margin:4px 0 8px }
.samrecomm-brokingpricing__spacer{ flex:1 }
.samrecomm-brokingpricing__price{ display:flex; align-items:flex-end; gap:4px }
.samrecomm-brokingpricing__rupee{ font-size:26px; font-weight:500; color:var(--brand) }
.samrecomm-brokingpricing__amount{ font-size:80px; font-weight:500; color:var(--brand); line-height:.9 }
.ico{ width:26px; height:26px; stroke:var(--brand); fill:none; stroke-width:2 }
/* Dots hidden by default */
.samrecomm-brokingpricing__dots{ display:none !important }
/* Tablet */
@media (max-width:1024px){
.samrecomm-brokingpricing__grid{ grid-template-columns:repeat(2,1fr) }
}
.samrecomm_pricing_details__panels{margin-top:40px;}
.samrecomm-brokingpricing__sub{font-size:16px;}
/* ---------- Mobile 3D carousel ---------- */
.samrecomm-brokingpricing__carousel{ display:none }
/* Smooth GPU transforms + safer dragging */
#news-wrapper { will-change: transform; }
#news-viewport, #news-wrapper { user-select: none; -webkit-user-select: none; }
#news-viewport.is-dragging { cursor: grabbing; }
/* Bullets container (assumes ) */
#news-bullets{
display:flex;
justify-content:center;
align-items:center;
gap:8px;
margin-top:12px;
}
/* Bullet buttons */
#news-bullets .samrecomm-inthenews__bullet{
appearance:none;
border:0;
width:8px;
height:8px;
border-radius:999px;
background:rgba(32,70,165,0.35); /* #2046A5 with opacity */
opacity:.9;
transition:width .25s ease, transform .25s ease, background-color .25s ease, opacity .25s ease;
padding:0;
}
#news-bullets .samrecomm-inthenews__bullet.active{
width:20px; /* pill for active */
background:#2046A5;
opacity:1;
}
#news-bullets .samrecomm-inthenews__bullet:focus-visible{
outline:2px solid #2046A5;
outline-offset:2px;
box-shadow:0 0 0 2px rgba(32,70,165,0.15);
}
/* Optional: dim disabled arrows */
.samrecomm-inthenews__arrow[disabled],
.samrecomm-inthenews__arrow.is-disabled{
opacity:.35; pointer-events:none;
}
@media (max-width:768px){
.samrecomm-brokingpricing__grid{ display:none } /* keep desktop DOM intact */
.samrecomm-brokingpricing{ padding-left:0px; padding-right:0px }
.samrecomm-brokingpricing__carousel{
display:block; position:relative; height:320px; perspective:1100px;
overflow:hidden; /* show only peeks of sides */
}
.samrecomm-brokingpricing__track{
position: relative; /* the stage stays fixed */
width: 100%;
overflow: hidden; /* belt doesn’t move */
touch-action: pan-y; /* allow vertical scroll, block horizontal */
user-select: none;
-webkit-user-drag: none;
height: 315px !important;
}
/* Mobile clones (no hover), with smooth transition */
.samrecomm-brokingpricing__card--mobile{
position: absolute;
top: 0;
left: 50%;
width: 70%; /* tweak to taste */
max-width: 420px; /* optional clamp */
transform: translateX(-50%);
will-change: transform;
transition: transform 320ms cubic-bezier(.2,.75,.25,1), opacity 200ms ease;
}
/* Positions (use --dragX for swipe progress) */
/* .samrecomm-brokingpricing__card--mobile.pos-center{
transform: translateX(calc(-50% + var(--dragX, 0px))) scale(1);
z-index: 3;
opacity: 1;
}
.samrecomm-brokingpricing__card--mobile.pos-left{
transform: translateX(calc(-152% + var(--dragX, 0px))) scale(.88);
z-index: 2;
opacity: .95;
}
.samrecomm-brokingpricing__card--mobile.pos-right{
transform: translateX(calc(52% + var(--dragX, 0px))) scale(.88);
z-index: 2;
opacity: .95;
}
.samrecomm-brokingpricing__card--mobile.pos-out{
transform: translateX(220%);
opacity: 0;
pointer-events: none;
} */
#news-wrapper{ will-change: transform; }
#news-viewport.is-dragging { cursor: grabbing; }
#news-viewport, #news-wrapper { user-select:none; -webkit-user-select:none; }
/* .samrecomm-brokingpricing__card--mobile.pos-center{
transform: translateX(calc(-50% + var(--dragX, 0px))) scale(1);
z-index: 3;
opacity: 1;
}
.samrecomm-brokingpricing__card--mobile.pos-left{
transform: translateX(calc(-85% + var(--dragX, 0px))) scale(.70);
z-index: 2;
opacity: .95;
}
.samrecomm-brokingpricing__card--mobile.pos-right{
transform: translateX(calc(-15% + var(--dragX, 0px))) scale(.70);
z-index: 2;
opacity: .95;
}
.samrecomm-brokingpricing__card--mobile.pos-out{
transform: translateX(220%);
opacity: 0;
pointer-events: none;
} */
.samrecomm-brokingpricing__title{
font-size:16px;
font-weight:500;
}
.samrecomm-brokingpricing__iconbox{
width: 44px;
height: 44px;
flex: 0 0 44px;
}
/* Corner peeks: push sides further out; slight 3D slant */
.pos-center{ transform: translateX(calc(-50% + var(--dragX))) translateZ(0) scale(1); z-index:3 }
.pos-left { transform: translateX(calc(-13% - 56% + var(--dragX))) rotateY(10deg) translateZ(-140px) scale(.8); z-index:1; filter:saturate(.92) }
.pos-right { transform: translateX(calc(-88% + 56% + var(--dragX))) rotateY(-10deg) translateZ(-140px) scale(.8); z-index:2; filter:saturate(.92) }
.pos-out { transform: translateX(calc(-50% + var(--dragX))) translateZ(-280px) scale(.74); opacity:0; pointer-events:none; z-index:0 }
/* Mobile dots */
.samrecomm-brokingpricing__dots {
display: flex !important;
gap: 8px;
justify-content: center;
}
/* Bullet buttons (same style as news bullets) */
.samrecomm-brokingpricing__dot {
appearance: none;
border: 0;
width: 8px;
height: 8px;
border-radius: 999px;
background: rgba(32,70,165,0.35); /* #2046A5 with opacity */
opacity: .9;
transition: width .25s ease, transform .25s ease, background-color .25s ease, opacity .25s ease;
padding: 0;
cursor: pointer;
}
/* Active (pill shape) */
.samrecomm-brokingpricing__dot[aria-current="true"],
.samrecomm-brokingpricing__dot.active {
width: 20px;
background: #2046A5;
opacity: 1;
}
/* Accessibility focus */
.samrecomm-brokingpricing__dot:focus-visible {
outline: 2px solid #2046A5;
outline-offset: 2px;
box-shadow: 0 0 0 2px rgba(32,70,165,0.15);
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
.samrecomm-brokingpricing__card--mobile {
transition: none;
}
}
}
/* Samco Research Pricing Section */
.samrecomm-researchpricing {
position: relative;
box-sizing: border-box;
padding: 28px 36px;
border-radius: 40px;
border: 2px solid transparent;
background-clip: padding-box, border-box;
background-origin: border-box;
background-image: linear-gradient(#000, #000), linear-gradient(to right, #2669E9, #43B4D4);
box-shadow: 14px 22px 52px #00358061;
color: #D7DEF5;
}
/* Glow */
.samrecomm-researchpricing::before{
content:"";
position:absolute; inset:0;
border-radius: 40px;
pointer-events:none;
background:
radial-gradient(120% 80% at 30% 50%, rgba(22,57,125,.55) 0%, transparent 60%),
radial-gradient(120% 80% at 80% 50%, rgba(22,57,125,.35) 0%, transparent 65%);
filter: blur(18px);
z-index: 0;
}
.samrecomm-researchpricing__inner{
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
gap: 20px 36px;
align-items: center;
}
/* -------- Left block -------- */
.samrecomm-researchpricing__left{
display:flex;
align-items:flex-end; /* label hugs logo baseline */
gap:12px;
min-width:0;
}
.samrecomm-researchpricing__logo{
width: clamp(280px, 24vw, 260px);
max-width:100%;
height:auto;
display:block;
}
.samrecomm-researchpricing__label{
margin-bottom: 18px;
padding: 4px 14px;
font-size: 16px;
font-weight: 600;
color:#0A235C;
background:#E7EFFF;
border-radius:10px;
white-space:nowrap;
}
.samrecomm-researchpricing__right{
display:grid;
grid-template-columns: repeat(2, minmax(240px,1fr));
gap: 24px 40px;
align-content:start;
justify-content:stretch;
width:100%; /* key: occupy the whole track */
min-width:0;
margin-right:0;
}
/* Item */
.samrecomm-researchpricing__benefit{
display:grid;
grid-template-columns: 20px 1fr; /* icon + text */
align-items:start; /* top-align when text wraps */
column-gap:10px;
row-gap:0;
font-size:18px;
line-height:1.45;
min-width:0;
}
.samrecomm-researchpricing__icon{
width:20px; height:20px;
border-radius:4px;
background: rgba(67,180,212,0.15);
display:flex; align-items:center; justify-content:center;
flex:0 0 20px;
margin-top:2px; /* optical align to first text line */
}
/* Let text wrap naturally; no clipping */
.samrecomm-researchpricing__benefit span:last-child{
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
min-width:0;
}
@media (max-width: 1366px){
.samrecomm-researchpricing{
padding: 26px 30px;
}
.samrecomm-researchpricing__inner{
grid-template-columns: minmax(260px, 0.9fr) minmax(420px, 1.1fr);
gap: 18px 28px;
}
.samrecomm-researchpricing__logo{
width: clamp(280px, 22vw, 260px);
}
.samrecomm-researchpricing__label{
font-size:15px; padding:3px 12px; margin-bottom:16px;
}
.samrecomm-researchpricing__right{
grid-template-columns: repeat(2, minmax(220px,1fr));
gap: 14px 22px;
}
.samrecomm-researchpricing__benefit{
font-size:16px; line-height:1.45;
}
.samrecomm-researchpricing__icon{ width:18px; height:18px; }
}
@media (max-width: 1219px){
.samrecomm-researchpricing__inner{
grid-template-columns: minmax(240px, 0.8fr) 1fr;
gap: 16px 24px;
}
.samrecomm-researchpricing__logo{
width: clamp(280px, 24vw, 260px);
}
.samrecomm-researchpricing__right{
grid-template-columns: repeat(2, minmax(210px,1fr));
gap: 12px 20px;
}
}
@media (max-width: 900px){
.samrecomm-researchpricing{
padding: 22px 20px 50px;
border-radius: 28px;
}
.samrecomm-researchpricing__inner{
grid-template-columns: 1fr; /* stack */
align-items:flex-start;
gap: 18px;
}
.samrecomm-researchpricing__left{
align-items:center;
}
.samrecomm-researchpricing__label{
margin-bottom: 0;
}
.samrecomm-researchpricing__right{
grid-template-columns: 1fr; /* 1 column on mobile */
gap: 20px 0;
}
.samrecomm-researchpricing__benefit{
font-size:16px;
}
}
/* Samco Testimonial Section */
:root{
--sam-bg-from:#020820;
--sam-bg-to:#082386;
--sam-star:#FFD54A; /* warm glowing yellow */
--sam-card-bg:rgba(255,255,255,.08);
--sam-card-border:rgba(255,255,255,.16);
--sam-card-shadow:0 18px 50px rgba(3,11,34,.45);
--sam-text-dim:rgba(255,255,255,.82);
--sam-gap:36px; /* space between cards */
--sam-card-w:320px; /* base card width */
--sam-radius-outer:50px;
--sam-radius-card:40px;
--sam-pad-x:28px; /* side padding for wrapper so edges breathe */
--sam-speed:80s; /* marquee duration; increase for slower scroll */
}
/* ---------------- Section ---------------- */
.samrecomm-testimonials_before{
background-color:#F3F8FF;
}
.samrecomm-testimonials{
position:relative;
/* border-radius:0px 0px 50px 50px; */
background:linear-gradient(to bottom, var(--sam-bg-from), var(--sam-bg-to));
padding:56px 0 60px;
overflow:hidden;
}
.samrecomm-testimonials__inner{
max-width:100%;
margin:0 auto;
text-align:center;
}
.samrecomm-testimonials__title{
margin:0 0 8px;
font-size:clamp(24px,4.6vw,42px);
font-weight:700;
letter-spacing:.2px;
}
.samrecomm-testimonials__desc{
margin:0 0 36px;
font-size:clamp(14px,1.4vw,16px);
color:var(--sam-text-dim);
}
/* --------------- Marquee rail --------------- */
.samrecomm-testimonials__rail{
position:relative;
overflow:visible;
padding-inline:var(--sam-pad-x);
margin-top:60px;
}
.samrecomm-testimonials__track{
display:flex;
gap:var(--sam-gap);
width:max-content;
will-change:transform;
padding-bottom:50px;
animation:none;
/* animation:samrec-marquee var(--sam-speed) linear infinite; */
}
/* Seamless loop: move by half because JS duplicates children once */
@keyframes samrec-marquee{
0%{ transform:translateX(0) }
100%{ transform:translateX(-50%) }
}
/* --------------- Card ---------------- */
.samrecomm-testimonials__card{
flex:0 0 var(--sam-card-w);
background:var(--sam-card-bg);
border:1px solid var(--sam-card-border);
border-radius:var(--sam-radius-card);
padding:22px 22px 30px;
text-align:left;
box-shadow:14px 22px 52px 0px #00000029;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.samrecomm-testimonials__card:hover {
transform: translateY(-12px) scale(1.01);
box-shadow: 0 22px 24px rgba(0,0,0,0.35);
}
/* Stars (SVG, glowing) */
.samrecomm-testimonials__stars{
display:flex; gap:6px; margin:2px 0 16px;
}
.samrecomm-testimonials__stars svg{
width:22px; height:22px; fill:var(--sam-star);
filter: drop-shadow(0 0 6px rgba(255,213,74,.9));
}
/* Quote */
.samrecomm-testimonials__text{
margin:0 0 22px;
font-size:18px;
line-height:1.7;
color:#fff;
font-weight: 400;
}
/* User */
.samrecomm-testimonials__user{
display:flex; align-items:center; gap:12px;
}
.samrecomm-testimonials__avatar{
width:40px; height:40px; border-radius:50%; object-fit:cover;
box-shadow:0 4px 10px rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.25);
}
.samrecomm-testimonials__name{
font-weight:500; font-size:20px;
}
/* Edge gradient fade (optional but nice) */
/* .samrecomm-testimonials__rail:before,
.samrecomm-testimonials__rail:after{
content:""; position:absolute; top:0; height:100%; width:120px; pointer-events:none;
}
.samrecomm-testimonials__rail:before{
left:0; background:linear-gradient(to right, rgba(2,8,32,1), rgba(2,8,32,0));
}
.samrecomm-testimonials__rail:after{
right:0; background:linear-gradient(to left, rgba(8,35,134,1), rgba(8,35,134,0));
} */
/* ----------- Responsive tweaks ----------- */
@media (max-width: 1024px){
:root{ --sam-card-w:300px; --sam-gap:28px }
}
@media (max-width: 768px){
#news-viewport { touch-action: pan-y; }
.samrecomm-inthenews__arrow.is-disabled { opacity:.4; pointer-events:none; }
/* Make sure the carousel can capture horizontal swipes */
#news-viewport {
padding:0px;
overflow: hidden;
position: relative;
touch-action: pan-y; /* allow vertical page scroll, we manage X */
-ms-touch-action: pan-y; /* old Edge */
overscroll-behavior: contain; /* stop bounce affecting parent */
}
#news-wrapper {
display: flex; /* single row */
flex-wrap: nowrap;
will-change: transform; /* smoother */
}
.samrecomm-inthenews__card { /* avoid child stealing touch */
touch-action: pan-y;
}
.samrecomm-inthenews__arrow.is-disabled{ opacity:.4; pointer-events:none; }
.samrecomm-testimonials__text{font-size:16px;}
.samrecomm-testimonials__track{gap:22px;}
.samrecomm-testimonials__card{flex: 0 0 330px;}
:root{ --sam-card-w:250px; --sam-gap:22px; --sam-pad-x:18px }
}
@media (max-width: 480px){
:root{ --sam-card-w:220px; --sam-gap:18px; --sam-pad-x:14px }
}
/* Samco in the news section */
.samrecomm-inthenews{background:#F3F8FF;padding:56px 20px 40px;}
.samrecomm-inthenews__title{
text-align:center;margin:0 0 18px;font-weight:700;
font-size:clamp(34px,4.8vw,44px);color:#383838;line-height:44px;
}
.samrecomm-inthenews__title .brand{color:#2046A5}
/* viewport keeps arrows centered vertically */
.samrecomm-inthenews__viewport{
position:relative; /* ⬅ make arrows relative to this */
max-width:1320px;
margin:0 auto;
overflow:hidden;
padding-right: 1px;
padding-right: 56px; /* was 1px */
padding-left: 56px;
}
.samrecomm-inthenews__wrapper{
display:flex;gap:24px; /* gutter between cards */
will-change:transform;transition:transform .6s ease-in-out;
padding:20px 2px 26px; overflow:visible;
margin-left:-56px;
margin-right:-56px;
}
/* Responsive card basis: 4 / 2 / 1 per row */
.samrecomm-inthenews__card{flex:0 0 calc((100% - 24px*3)/4)}
@media (max-width:991.98px){ .samrecomm-inthenews__card{flex:0 0 calc((100% - 24px)/2)} }
@media (max-width:575.98px){ .samrecomm-inthenews__card{flex:0 0 100%} }
/* Entire card is the link */
.samrecomm-inthenews__box{
display:flex;flex-direction:column;min-height:220px;height:100%;
background:#fff;border:1px solid #D8E6FB;border-radius:30px;
box-shadow:0 4px 12px rgba(186,212,248,.2);
padding:20px 18px 18px;text-decoration:none;color:inherit;outline:0;
transition:transform .25s ease, box-shadow .25s ease;
}
.samrecomm-inthenews__box:hover{transform:translateY(-6px);box-shadow:0 8px 20px rgba(32,70,165,.22)}
.samrecomm-inthenews__box *{text-decoration:none} /* kill any underline inside */
.samrecomm-inthenews__logo{height:28px;display:block;object-fit:contain;margin:2px 0 14px;filter:none; align-self: flex-start;}
.samrecomm-inthenews__titletext{font-size:18px;line-height:1.55;color:#1f1f1f;margin:0 0 14px}
.samrecomm-inthenews__date{font-size:14px;color:#5c6a85;margin-top:auto}
/* Arrows — now inside viewport only */
.samrecomm-inthenews__arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:44px;height:44px;border-radius:50%;
display:flex;align-items:center;justify-content:center;cursor:pointer;
background:#fff;border:1px solid #D8E6FB;
user-select:none;z-index:2;transition:background .2s ease, box-shadow .2s ease;
}
.samrecomm-inthenews__arrow:hover{background:#EBF3FF;}
.samrecomm-inthenews__arrow--left{left:4px}
.samrecomm-inthenews__arrow--right{right:4px}
.samrecomm-inthenews__arrow svg{width:18px;height:18px}
/* Responsive arrow positions */
@media (min-width:992px){
.samrecomm-inthenews__arrow--left{left:4px}
.samrecomm-inthenews__arrow--right{right:4px;}
}
@media (max-width:991.98px){
.samrecomm-inthenews__arrow--left{left:6px;display:none;}
.samrecomm-inthenews__arrow--right{right:6px;display:none;}
}
@media (max-width:575.98px){
.samrecomm-inthenews__arrow--left{left:4px}
.samrecomm-inthenews__arrow--right{right:4px}
}
/* Bullets */
.samrecomm-inthenews__bullets{
display:flex;justify-content:center;gap:10px;margin-top:10px; margin-bottom:40px;
}
.samrecomm-inthenews__bullet{
width:10px;height:10px;border-radius:50%;background:#cfd9e8;cursor:pointer;transition:background .2s ease,transform .2s ease
}
.samrecomm-inthenews__bullet.active{background:#2046A5;transform:scale(1.12)}
/* join samco community section */
.samrecomm-community{
font-family: "Product Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
padding: 24px 16px;
}
.samrecomm-community__box{
max-width: 1340px;
margin: 0 auto;
min-height: 220px;
border-radius: 50px;
border: 1px solid #C6CFEA;
background: linear-gradient(180deg, #DAE7F9 0%, #B7CEF9 100%);
box-shadow: 0 4px 12px rgba(186, 212, 248, 0.6);
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 24px;
padding: 28px 36px;
}
/* LEFT */
.samrecomm-community__badge{
display:inline-flex;align-items:center;gap:10px;
padding:6px 16px;border:1px solid #9DB9E5;
border-radius:50px;background:transparent;
box-shadow:0 4px 12px rgba(0,0,0,0.13);
margin-bottom:4px; font-size:16px;
}
.samrecomm-community__dot {
width: 10px;
height: 10px;
background: #16A34A;
border-radius: 999px;
flex: 0 0 10px;
position: relative;
}
/* Pulse ring effect */
.samrecomm-community__dot::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background: #16A34A;
border-radius: 999px;
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
animation: samrecomm-pulse 1.8s ease-out infinite;
}
@keyframes samrecomm-pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.6;
}
70% {
transform: translate(-50%, -50%) scale(2.2);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(2.2);
opacity: 0;
}
}
.samrecomm-community__badgeText{font-size:16px;color:#2250BC;text-shadow:0 4px 12px rgba(0,0,0,0.13);font-weight:500;}
.samrecomm-community__titleRow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.samrecomm-community__title{font-size:clamp(32px,3.2vw,42px);margin:0;font-weight:700;color:#383838;}
.samrecomm-community__title span{color:#2250BC;}
.samrecomm-community__members{
padding:8px 16px;border-radius:999px;border:1px solid #2563EB;
background:#E7EFFF;color:#2250BC;box-shadow:0 4px 12px rgba(0,0,0,0.13);font-weight:600;
}
.samrecomm-community__desc{margin:4px 0 0;max-width:720px;color:#353535;font-size:clamp(18px,1.6vw,16px);}
/* RIGHT (stacked: avatars top, button bottom, aligned right) */
.samrecomm-community__right{
display:flex;
flex-direction:column;
align-items:flex-end;
justify-content:space-between;
gap:10px;
}
.samrecomm-community__avatars{
display:flex;align-items:center;justify-content:flex-end;
}
.samrecomm-community__avatars img{
width:75px;height:75px;border-radius:999px;object-fit:cover;
border:1px solid #fff;
box-shadow:14px 22px 52px rgba(0,0,0,0.25);
margin-left:-10px;
}
.samrecomm-community__avatars img:first-child{margin-left:0;}
.samrecomm-community__cta{
display:inline-flex;align-items:center;gap:10px;
padding:14px 36px;border-radius:999px;
background:linear-gradient(180deg,#4F83FF 0%,#1D53C9 100%);
border:1px solid #4F83FF; font-size:18px;
color:#fff;text-decoration:none;font-weight:600;
transition:.18s;box-shadow:0 6px 18px rgba(29,83,201,0.35);
}
.samrecomm-community__cta:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(29,83,201,0.45);}
.samrecomm-community__ctaIcon{width:20px;height:20px;fill:currentColor;}
/* Responsive */
@media (max-width:1024px){
.samrecomm-community__title{line-height: 40px;
margin: 10px 0px 10px 0px;}
.samrecomm-community__members{margin-bottom:15px;}
.samrecomm-community__box{grid-template-columns:1fr;row-gap:26px;border-radius:40px;}
.samrecomm-community__avatars{margin-bottom:20px;}
.samrecomm-community__right{align-items:flex-start;}
.samrecomm-inthenews__viewport{padding-right: 10px;
padding-left: 10px;}
.samrecomm-community{padding:24px 0px;}
.samrecomm-inthenews__wrapper{margin-left:0px; margin-right:0px;}
}
@media (max-width:640px){
.samrecomm-community__avatars img{width:60px;height:60px;margin-left:-8px;}
.samrecomm-community__cta{width:100%;justify-content:center;}
}
/* Download samco app section */
.samrecomm-downloadapp__outer {
width: 100%;
padding: 80px 16px 80px;
display: flex;
justify-content: center;
}
.samrecomm-downloadapp {
width: 1340px;
min-height: 480px;
border-radius: 50px;
background: linear-gradient(180deg, #020820 0%, #082386 100%);
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1.05fr 0.95fr; /* left = content, right = image */
align-items: stretch;
box-shadow: 0 20px 60px rgba(2, 8, 32, 0.45);
}
.samrecomm-downloadapp__left {
padding: 66px 56px 40px;
display: flex;
flex-direction: column;
gap: 14px;
color: #E9F1FF;
}
.samrecomm-downloadapp__title {
margin: 0;
font-weight: 700;
line-height: 1.15;
font-size: clamp(28px, 3.6vw, 44px);
}
.samrecomm-downloadapp__desc {
margin: 0;
color: #dadee9;
font-size: clamp(18px, 1.4vw, 20px);
line-height: 1.5;
max-width: 640px;
font-weight: 300;
margin-bottom:14px;
}
.samrecomm-downloadapp__stores {
display: flex; gap: 24px; flex-wrap: wrap;
margin-top: 12px;
}
.samrecomm-downloadapp__storeBtn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 22px;
border-radius: 14px;
color: #ffffff;
text-decoration: none;
font-weight: 600;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
border: 1px solid rgba(255,255,255,.28);
}
.samrecomm-downloadapp__storeBtn svg { width: 32px; height: 32px; }
.samrecomm-downloadapp__storeBtn small { display:block; font-size: 14px; }
.samrecomm-downloadapp__storeBtn span { display:block; font-size: 16px; margin-top:2px; }
.samrecomm-downloadapp__storeBtn:hover {
transform: translateY(-1px);
border-color: rgba(255,255,255,.5);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.28),
0 10px 30px rgba(0, 120, 255, .45);
}
.samrecomm-downloadapp__right {
display: flex;
align-items: flex-end;
justify-content: flex-start;
padding-top: 26px;
position: relative;
}
.samrecomm-downloadapp__right::before {
content: "";
position: absolute;
width: 430px;
height: 430px;
border-radius: 50%;
background: rgba(68, 113, 228, 0.6); /* #4471E4 with 60% opacity */
filter: blur(60px); /* layer blur effect */
top: 50%;
left: 43%;
transform: translate(-50%, -50%);
z-index: 0; /* sit behind the phone */
}
.samrecomm-downloadapp__phones {
width: min(86%, 560px);
height: 100%;
object-fit: contain;
object-position: bottom center;
position: relative;
z-index: 1;
}
@media (max-width: 980px){
.samrecomm-downloadapp {
grid-template-columns: 1fr; border-radius:40px;
}
.samrecomm-downloadapp__right{
order: 1; /* image on top for mobile */
}
.samrecomm-downloadapp__left{
padding: 50px 30px 30px;
}
.samrecomm-downloadapp__storeBtn{
width: 200px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.samrecomm-downloadapp__phones{margin:0 auto;}
.samrecomm-whysam .samrecomm-whysam-card__icon{width: 40px;
height: 40px;flex: 0 0 40px;}
}
/* ripple effect hero section */
/* Wrapper */
.samrecomm-herosec{
position: relative;
/* overflow: hidden; */
display: flex;
align-items: center;
justify-content: center;
padding-top: 60px;
}
/* Centering layer */
.samrecomm-herosec__inner{
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Ripple effect behind the phone */
.samrecomm-herosec__ripples{
position: absolute;
inset: 0;
display: grid;
place-items: center;
z-index: 0;
pointer-events: none;
}
.samrecomm-herosec__ripples span{
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px solid rgb(255 255 255 / 17%);
opacity: 0;
-webkit-animation: samrecomm-ripple 10s linear infinite;
animation: samrecomm-ripple 10s linear infinite;
transform-origin: center center;
will-change: transform, opacity;
backface-visibility: hidden;
/* animation-name: samrecomm-ripple;
animation-duration: 10s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-iteration-count: 1; */
}
.samrecomm-herosec__ripples span:nth-child(1){ -webkit-animation-delay: 0s; animation-delay: 0s; }
.samrecomm-herosec__ripples span:nth-child(2){ -webkit-animation-delay: 2s; animation-delay: 2s; }
.samrecomm-herosec__ripples span:nth-child(3){ -webkit-animation-delay: 4s; animation-delay: 4s; }
/* Default ripple keyframes (desktop) */
@-webkit-keyframes samrecomm-ripple{
0% { transform: scale(.66); opacity: 1; }
33% { transform: scale(1.3); opacity: .7; }
66% { transform: scale(2.2); opacity: .35; }
100% { transform: scale(3.2); opacity: 0; }
}
@keyframes samrecomm-ripple{
0% { transform: scale(.66); opacity: 1; }
33% { transform: scale(1.3); opacity: .7; }
66% { transform: scale(2.2); opacity: .35; }
100% { transform: scale(3.2); opacity: 0; }
}
/* Phone image */
.samrecomm-herosec__imagewrap{
position: relative;
z-index: 2;
height: 660px;
}
.samrecomm-herosec__image{
width: 800px;
/* height: 800px;
max-width: min(90vw, 800px);
max-height: min(90vh, 650px); */
object-fit: contain;
filter: drop-shadow(0 22px 48px rgba(0,0,0,.45))
drop-shadow(0 8px 20px rgba(7,33,128,.35));
will-change: transform;
}
/* Capsules */
.samrecomm-herosec__capsule{
position: absolute;
z-index: 3;
white-space: nowrap;
background: rgba(13,42,139,.96);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: 14px;
line-height: 1;
padding: 12px 18px;
border-radius: 999px;
box-shadow: 0 10px 24px rgba(0,0,0,.25);
border: 1px solid rgba(255,255,255,.12);
}
.samrecomm-herosec__capsule--top{
top: 10%;
left: 5%;
}
.samrecomm-herosec__capsule--bottom{
right: 6%;
bottom: 14%;
}
@media (max-width: 767px) {
.search {
background: linear-gradient(
135deg,
#0b1b4b 0%,
#0f2d72 40%,
#001344 100%
);
background: -webkit-linear-gradient(
135deg,
#0b1b4b 0%,
#0f2d72 40%,
#001344 100%
);
color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
transition: right 0.3s ease-in-out;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9;
width: 100%;
height: 100vh;
padding: 10px;
overflow: auto;
}
}
/* Responsive tweaks */
@media (max-width: 992px){
.samrecomm-herosec{ padding: 36px 16px; }
.samrecomm-herosec__capsule{ font-size: 13px; padding: 10px 16px; }
.samrecomm-introduce__cardHead h3{color: #1b3a8d; font-weight:600;}
.samrecomm-introduce__cardHead p{color: #263a63;margin-top:20px;}
}
/* Mobile adjustments */
@media (max-width: 640px){
.samrecomm-herosec__ripples{max-width: 100%;}
.samrecomm-herosec{ padding: 28px 12px; }
.samrecomm-herosec__capsule{
font-size: 12px;
padding: 9px 14px;
}
.samrecomm-downloadapp__outer{padding: 40px 0px 80px;}
.samrecomm-herosec__capsule--top{ top: 6%; left: 4%; }
.samrecomm-herosec__capsule--bottom{ right: 4%; bottom: 8%; }
.samrecomm-herosec__image{width:100%;filter: none;}
.samrecomm-herosec__imagewrap{height:328px;}
/* Smaller ripple on mobile */
@-webkit-keyframes samrecomm-ripple{
0% { transform: scale(.33); opacity: 1; }
33% { transform: scale(1.0); opacity: .7; }
66% { transform: scale(1.6); opacity: .35; }
100% { transform: scale(2.2); opacity: 0; }
}
@keyframes samrecomm-ripple{
0% { transform: scale(.33); opacity: 1; }
33% { transform: scale(1.0); opacity: .7; }
66% { transform: scale(1.6); opacity: .35; }
100% { transform: scale(2.2); opacity: 0; }
}
}
/* Motion respect */
@media (prefers-reduced-motion: reduce){
.samrecomm-herosec__ripples span{
-webkit-animation: none;
animation: none;
opacity: .25;
transform: scale(2);
}
}
@media (max-width: 420px) {
.samrecomm-herosec__imagewrap {
height: 280px;
}
.samrecomm-tabs-pp__card{
padding:12px;
min-width: 160px;
}
.samrecomm-tabs-pp__kpis{gap:18px;}
.samrecomm-tabs-pp__kpi-value {
font-size: 20px;
}
.samrecomm-tabs-pp__kpi-label{font-size:16px;}
.samrecomm-tabs-pp .samrecomm-tabs-pp__kpi-inner{gap:0px;}
.samrecomm-tabs-pp__kpi-icon svg{width: 30px;height: 30px;}
.samrecomm-tabs-pp .samrecomm-tabs-pp__kpi-icon{margin-right:6px;}
.samrecomm-tabs-pp__wrap{display:block;}
}
.loading-aof{position:fixed;z-index:999;height:2em;text-align:center;width:2em;overflow:show;margin:auto;top:0;left:0;bottom:0;right:0;-webkit-animation:linear infinite rotate}.loading-aof:before{content:'';display:block;position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(rgba(20,20,20,.8),rgba(0,0,0,.8));background:-webkit-radial-gradient(rgba(20,20,20,.8),rgba(0,0,0,.8))}.loading-aof:not(:required){font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.loading-aof:not(:required):after{content:'';display:block;font-size:10px;width:1em;height:1em;margin-top:-.5em;-webkit-animation:150ms linear infinite spinner;-moz-animation:150ms linear infinite spinner;-ms-animation:spinner 150ms infinite linear;-o-animation:150ms linear infinite spinner;animation:150ms linear infinite spinner;border-radius:.5em;-webkit-box-shadow:rgba(255,255,255,.75) 1.5em 0 0 0,rgba(255,255,255,.75) 1.1em 1.1em 0 0,rgba(255,255,255,.75) 0 1.5em 0 0,rgba(255,255,255,.75) -1.1em 1.1em 0 0,rgba(255,255,255,.75) -1.5em 0 0 0,rgba(255,255,255,.75) -1.1em -1.1em 0 0,rgba(255,255,255,.75) 0 -1.5em 0 0,rgba(255,255,255,.75) 1.1em -1.1em 0 0;box-shadow:rgba(255,255,255,.75) 1.5em 0 0 0,rgba(255,255,255,.75) 1.1em 1.1em 0 0,rgba(255,255,255,.75) 0 1.5em 0 0,rgba(255,255,255,.75) -1.1em 1.1em 0 0,rgba(255,255,255,.75) -1.5em 0 0 0,rgba(255,255,255,.75) -1.1em -1.1em 0 0,rgba(255,255,255,.75) 0 -1.5em 0 0,rgba(255,255,255,.75) 1.1em -1.1em 0 0}@-webkit-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-o-keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spinner{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none!important;margin:0}input[type=number]{-moz-appearance:textfield!important}