:root {
      --elixir-primary: #2c4a8c;
      --elixir-warning: #f5a623;
    }

    /* Prevent horizontal scroll caused by elements bleeding outside viewport */
    html, body { overflow-x: hidden; }
    body { font-family: 'Nunito Sans', sans-serif; }

    #whatsapp-float {
  position: fixed;
  bottom: 84px; /* sits above the back-to-top button */
  right: 28px;
  z-index: 1000;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  text-decoration: none;
  transition: transform .3s, box-shadow .3s;
  animation: waPulse 2.5s ease-in-out infinite;
}
#whatsapp-float:hover {
  transform: scale(1.12) translateY(-3px);
  box-shadow: 0 8px 28px rgba(37,211,102,0.55);
  color: #fff;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.4); }
  50%       { box-shadow: 0 4px 20px rgba(37,211,102,0.45), 0 0 0 12px rgba(37,211,102,0); }
}

    .top-header {
      background-color: var(--elixir-primary);
      padding: 8px 0;
      font-size: 13px;
    }
    .top-header a { color: #fff; text-decoration: none; }
    .top-header .icon-warn { color: var(--elixir-warning); margin-right: 6px; }

    .navbar-elixir {
      background: #fff;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      position: fixed;
      top: 0;
      width: 100%;
    }
    .navbar-elixir .nav-link {
      font-weight: 600;
      font-size: 14px;
      color: #333 !important;
      padding: 8px 14px !important;
      transition: color .2s;
    }
    .navbar-elixir .nav-link:hover { color: var(--elixir-primary) !important; }
    .btn-contact-nav {
      border: 2px solid var(--elixir-primary);
      color: var(--elixir-primary);
      border-radius: 50px;
      font-size: 13px;
      font-weight: 700;
      padding: 6px 20px;
      transition: all .2s;
    }
    .btn-contact-nav:hover {
      background: var(--elixir-primary);
      color: #fff;
    }

    .hero-section {
      min-height: 90vh;
      background: linear-gradient(rgba(20,38,80,0.7), rgba(20,38,80,0.75)),
        url('/src/cover.jpg') center/cover no-repeat;
      display: flex;
      align-items: center;
      color: #fff;
    }
    .hero-section h1 { font-family: 'Poppins', sans-serif; font-weight: 700; line-height: 1.15; color: white; letter-spacing: .20px; }
    .hero-section .lead { font-size: 1.15rem; opacity: .9; max-width: 540px; }
    .btn-hero-primary { background: var(--elixir-primary); border: none; color: #fff; border-radius: 4px; padding: 12px 28px; font-weight: 700; transition: opacity .2s; }
    .btn-hero-primary:hover { opacity: .88; color: #fff; }
    .btn-hero-warning { background: var(--elixir-warning); border: none; color: #fff; border-radius: 4px; padding: 12px 28px; font-weight: 700; transition: opacity .2s; }
    .btn-hero-warning:hover { opacity: .88; color: #fff; }

    .about-section { padding: 90px 0; background: #fff; }
    .about-section .section-label { color: var(--elixir-primary); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
    .about-section h2 { font-family: 'Poppins', sans-serif; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 700; color: #1a2d5a; margin-top: 8px; }
    .ring-icon {
      width: 72px; height: 72px;
      border: 2px solid var(--elixir-primary);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.4rem; color: var(--elixir-primary);
      margin-bottom: 14px;
    }
    .about-img-wrap { position: relative; border-radius: 12px; overflow: hidden; }
    .about-img-wrap img { width: 100%; height: 420px; object-fit: cover; border-radius: 12px; }
    .about-badge {
      position: absolute; bottom: 24px; left: -18px;
      background: var(--elixir-primary); color: #fff;
      padding: 16px 22px; border-radius: 10px;
      text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }
    .about-badge span { font-size: 2.4rem; font-weight: 800; display: block; line-height: 1; }
    .about-badge small { font-size: 12px; opacity: .85; }
    hr.short {
      width: 60px; border-top: 3px solid var(--elixir-warning);
      opacity: 1; margin: 12px auto 0;
    }
    hr.short.left { margin-left: 0; }

    /* Floating about badges — kept inside on all screens */
    .about-float-badge {
      position: absolute;
      background: #fff;
      border-radius: 50px;
      padding: 10px 18px;
      box-shadow: 0 8px 32px rgba(44,74,140,0.18);
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
      right: 8px;
    }
    @media (max-width: 575px) {

      .about-float-badge { display: none; }
    }

    .services-section { padding: 90px 0; background: #f4f6fb; }
    .services-section h2 { font-family: 'Poppins', sans-serif; font-size: clamp(1.6rem,3vw,2.1rem); font-weight: 700; color: #1a2d5a; }
    .service-card {
      background: #fff;
      border-radius: 12px;
      padding: 36px 28px;
      height: 100%;
      transition: box-shadow .25s, transform .25s;
      border: 1px solid #e8edf6;
    }
    .service-card:hover { box-shadow: 0 12px 36px rgba(44,74,140,0.12); transform: translateY(-4px); }
    .service-card .svc-icon {
      width: 56px; height: 56px;
      background: #eef2fc;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.35rem; color: var(--elixir-primary);
      margin-bottom: 18px;
    }
    .service-card h5 { font-family: 'Poppins', sans-serif; font-size: 1rem; font-weight: 700; color: #1a2d5a; }
    .service-card p {
      font-size: 14px;
      color: #666;
      margin-bottom: 16px;
      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .service-card a { font-size: 13px; font-weight: 700; color: var(--elixir-primary); text-decoration: none; }
    .service-card a:hover { text-decoration: underline; }

    .why-section { padding: 90px 0; background: #fff; }
    .why-section h2 { font-family: 'Poppins', sans-serif; font-size: clamp(1.6rem,3vw,2.1rem); font-weight: 700; color: #1a2d5a; }
    .why-section .why-img { border-radius: 12px; width: 100%; height: 460px; object-fit: cover; }
    .why-item { display: flex; gap: 16px; margin-bottom: 32px; }
    .why-item .wi-icon {
      width: 48px; height: 48px; min-width: 48px;
      border-radius: 50%; background: #eef2fc;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; color: var(--elixir-primary);
    }
    .why-item h5 { font-size: 1rem; font-weight: 700; color: #1a2d5a; margin-bottom: 6px; }
    .why-item p { font-size: 14px; color: #666; margin: 0; }

    .cta-band {
      background: var(--elixir-primary);
      padding: 40px 0;
      color: #fff;
    }
    .cta-band h4 { font-family: 'Poppins', sans-serif; font-size: 1.4rem; font-weight: 700; margin: 0; }
    .btn-cta { background: #fff; color: var(--elixir-primary); border-radius: 50px; font-weight: 700; padding: 10px 28px; border: none; }
    .btn-cta:hover { background: var(--elixir-warning); color: #fff; }

    .contact-section { padding: 90px 0; background: var(--elixir-primary); }
    .contact-section h2 { font-family: 'Poppins', sans-serif; font-size: clamp(1.6rem,3vw,2.1rem); font-weight: 700; color: #fff; }
    .contact-info-card {
      background: rgba(255,255,255,0.08);
      border: 2px solid var(--elixir-warning);
      border-radius: 12px;
      padding: 36px 28px;
      color: #fff;
      height: 100%;
    }
    .contact-info-card h5 { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; margin-bottom: 24px; }
    .ci-item { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px; }
    .ci-item .ci-icon { font-size: 1rem; color: var(--elixir-warning); margin-top: 3px; }
    .ci-item p, .ci-item a { color: rgba(255,255,255,.88); font-size: 14px; margin: 0; text-decoration: none; word-break: break-all; }
    .ci-item strong { color: #fff; display: block; margin-bottom: 2px; font-size: 13px; }
    .contact-form-card {
      background: #fff;
      border-radius: 12px;
      padding: 36px 32px;
    }
    .contact-form-card h5 { font-family: 'Poppins', sans-serif; font-weight: 700; color: #1a2d5a; margin-bottom: 20px; }
    .contact-form-card .form-control, .contact-form-card .form-select {
      border-radius: 6px;
      border: 1px solid #d8e0ee;
      font-size: 14px;
      padding: 10px 14px;
      margin-bottom: 14px;
    }
    .contact-form-card .form-control:focus, .contact-form-card .form-select:focus {
      border-color: var(--elixir-primary);
      box-shadow: 0 0 0 3px rgba(44,74,140,0.1);
    }
    .btn-submit { background: var(--elixir-warning); border: none; color: #fff; font-weight: 700; padding: 12px 32px; border-radius: 6px; width: 100%; font-size: 15px; transition: opacity .2s; }
    .btn-submit:hover { opacity: .88; color: #fff; background:var(--elixir-warning); }

    .footer-top { background:white; padding: 70px 0 40px; color: rgba(61, 78, 111, 0.95); }
    .footer-top h5 { color: #333; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 15px; margin-bottom: 20px; }
    .footer-top p { font-size: 14px; }
    .footer-link { display: block; color: rgba(61, 78, 111, 0.95); text-decoration: none; font-size: 14px; margin-bottom: 10px; transition: color .2s; }
    .footer-link:hover { color: var(--elixir-warning); }
    .footer-newsletter-form { display: flex; gap: 0; }
    .footer-newsletter-form input { border-radius: 4px 0 0 4px; border: none; padding: 10px 14px; font-size: 13px; flex: 1; }
    .footer-newsletter-form button { background: var(--elixir-warning); border: none; color: #fff; font-weight: 700; padding: 10px 18px; border-radius: 0 4px 4px 0; font-size: 13px; }
    .footer-social a {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px;
      background: rgba(255,255,255,0.12);
      border-radius: 50%; color: #fff; font-size: 13px;
      margin-right: 8px; text-decoration: none;
      transition: background .2s;
    }
    .footer-social a:hover { background: var(--elixir-warning); }
    .footer-bottom {
      background: var(--elixir-primary);
      padding: 18px 0;
      text-align: center;
      color: rgba(255,255,255,.8);
      font-size: 13px;
    }
    .footer-bottom a { color: rgba(255,255,255,.8); text-decoration: none; }

    #footer-services-list .footer-link{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display:block;
}
    @media (max-width: 768px) {
       
      .about-badge { left: 8px; }
      .hero-section { min-height: 80vh; }
      
    }

    @keyframes fadeInUp {
      from { opacity:0; transform:translateY(70px); }
      to   { opacity:1; transform:translateY(0); }
    }
    @keyframes fadeInRight {
      from { opacity:0; transform:translateX(-80px) rotate(-2deg); }
      to   { opacity:1; transform:translateX(0) rotate(0); }
    }
    @keyframes fadeInLeft {
      from { opacity:0; transform:translateX(80px) rotate(2deg); }
      to   { opacity:1; transform:translateX(0) rotate(0); }
    }
    @keyframes superBounce {
      0%   { opacity:0; transform:translateY(-120px) scale(0.7); }
      55%  { opacity:1; transform:translateY(18px) scale(1.05); }
      75%  { transform:translateY(-10px) scale(0.97); }
      88%  { transform:translateY(6px) scale(1.02); }
      100% { opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes elasticPop {
      0%   { opacity:0; transform:scale(0); }
      50%  { opacity:1; transform:scale(1.25); }
      70%  { transform:scale(0.88); }
      85%  { transform:scale(1.08); }
      100% { opacity:1; transform:scale(1); }
    }
    @keyframes slideReveal {
      0%   { opacity:0; transform:translateY(40px) skewY(4deg); }
      100% { opacity:1; transform:translateY(0) skewY(0); }
    }
    @keyframes flipInX {
      0%   { opacity:0; transform:perspective(600px) rotateX(-90deg); }
      60%  { opacity:1; transform:perspective(600px) rotateX(12deg); }
      80%  { transform:perspective(600px) rotateX(-6deg); }
      100% { opacity:1; transform:perspective(600px) rotateX(0); }
    }
    @keyframes swingIn {
      0%   { opacity:0; transform-origin:top center; transform:rotateX(-100deg); }
      60%  { opacity:1; transform:rotateX(15deg); }
      80%  { transform:rotateX(-8deg); }
      100% { opacity:1; transform:rotateX(0); }
    }
    @keyframes glideUp {
      0%   { opacity:0; transform:translateY(100px) scale(0.9); filter:blur(6px); }
      60%  { filter:blur(0); }
      100% { opacity:1; transform:translateY(0) scale(1); filter:blur(0); }
    }
    @keyframes zoomRotate {
      0%   { opacity:0; transform:scale(0.5) rotate(-15deg); }
      60%  { transform:scale(1.08) rotate(3deg); }
      100% { opacity:1; transform:scale(1) rotate(0); }
    }
    @keyframes rippleIn {
      0%   { opacity:0; transform:scale(0.3); box-shadow:0 0 0 0 rgba(44,74,140,0.4); }
      50%  { box-shadow:0 0 0 20px rgba(44,74,140,0); }
      100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(44,74,140,0); }
    }
    @keyframes floatUp {
      0%   { opacity:0; transform:translateY(60px) scale(0.95); }
      40%  { opacity:1; }
      60%  { transform:translateY(-8px) scale(1.02); }
      80%  { transform:translateY(4px) scale(0.99); }
      100% { opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes rollIn {
      0%   { opacity:0; transform:translateX(-200px) rotate(-120deg); }
      100% { opacity:1; transform:translateX(0) rotate(0); }
    }
    @keyframes splashIn {
      0%   { opacity:0; transform:scale(2) rotate(45deg); filter:blur(12px); }
      60%  { filter:blur(0); }
      100% { opacity:1; transform:scale(1) rotate(0); filter:blur(0); }
    }
    @keyframes counterPulse {
      0%,100% { transform:scale(1); }
      50%      { transform:scale(1.08); color:var(--elixir-warning); }
    }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
    @keyframes shimmer { to { left:100%; } }
    @keyframes ctaShimmer {
      0%   { left:-100%; }
      100% { left:200%; }
    }
    @keyframes orbFloat1 {
      0%,100%{ transform:translate(0,0) scale(1); }
      50%    { transform:translate(40px,30px) scale(1.1); }
    }
    @keyframes orbFloat2 {
      0%,100%{ transform:translate(0,0) scale(1); }
      50%    { transform:translate(-30px,40px) scale(1.08); }
    }

    #hero-canvas {
      position:absolute; top:0; left:0; width:100%; height:100%;
      pointer-events:none; z-index:1;
    }
    .hero-section { position:relative; overflow:hidden; }
    .hero-section .container { position:relative; z-index:2; }

    .typing-cursor::after {
      content:'|';
      animation:blink .7s infinite;
      color:var(--elixir-warning);
    }

    .animated-underline {
      display:inline-block;
      position:relative;
    }
    .animated-underline::after {
      content:'';
      position:absolute; bottom:-6px; left:0;
      width:100%; height:3px;
      background:var(--elixir-warning);
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .6s cubic-bezier(.23,1,.32,1);
    }
    .animated-underline.line-drawn::after { transform:scaleX(1); }

    .tilt-card { transition:transform .15s ease, box-shadow .15s ease; transform-style:preserve-3d; }
    .magnetic-btn { transition:transform .2s cubic-bezier(.23,1,.32,1), box-shadow .2s; }
    .magnetic-btn:hover { box-shadow:0 16px 40px rgba(44,74,140,0.35); }

    .ring-icon { transition:transform .3s, box-shadow .3s; }
    .ring-icon:hover, .animated .ring-icon {
      box-shadow:0 0 0 6px rgba(44,74,140,0.15), 0 0 0 12px rgba(44,74,140,0.07);
    }

    .counter-num { display:inline-block; }
    .counter-num.counting { animation:counterPulse .4s ease infinite; }

    .skill-bar-wrap { margin-bottom:14px; }
    .skill-bar-bg {
      height:6px; background:#e8edf6; border-radius:99px; overflow:hidden;
      position:relative;
    }
    .skill-bar-fill {
      height:100%; border-radius:99px;
      background:linear-gradient(90deg,var(--elixir-primary),var(--elixir-warning));
      width:0; transition:width 1.4s cubic-bezier(.23,1,.32,1);
      position:relative;
    }
    .skill-bar-fill::after {
      content:'';
      position:absolute; top:0; left:-100%; height:100%; width:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
      animation:shimmer 2s infinite;
    }

    .word-reveal .word {
      display:inline-block;
      opacity:0;
      padding: 2px;
      transform:translateY(30px) rotate(3deg);
      transition:opacity .5s ease, transform .5s cubic-bezier(.23,1,.32,1);
    }
    .word-reveal.animated .word { opacity:1; transform:translateY(0) rotate(0); }

    .anim-fade-up,
    .anim-fade-right,
    .anim-fade-left,
    .anim-bounce,
    .anim-flip,
    .anim-swing,
    .anim-glide,
    .anim-zoom-rotate,
    .anim-ripple,
    .anim-float,
    .anim-roll,
    .anim-splash,
    .anim-elastic {
      opacity: 0;
    }

    .anim-fade-up.animated     { animation:glideUp .85s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-fade-right.animated  { animation:fadeInRight .8s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-fade-left.animated   { animation:fadeInLeft .8s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-bounce.animated      { animation:superBounce .9s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-flip.animated        { animation:flipInX .8s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-swing.animated       { animation:swingIn .8s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-glide.animated       { animation:slideReveal .75s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-zoom-rotate.animated { animation:zoomRotate .8s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-ripple.animated      { animation:rippleIn .8s ease forwards; }
    .anim-float.animated       { animation:floatUp 1s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-roll.animated        { animation:rollIn .8s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-splash.animated      { animation:splashIn .9s cubic-bezier(.23,1,.32,1) forwards; }
    .anim-elastic.animated     { animation:elasticPop .8s cubic-bezier(.23,1,.32,1) forwards; }

    .anim-delay-1  { animation-delay:.08s !important; }
    .anim-delay-2  { animation-delay:.16s !important; }
    .anim-delay-3  { animation-delay:.26s !important; }
    .anim-delay-4  { animation-delay:.38s !important; }
    .anim-delay-5  { animation-delay:.50s !important; }
    .anim-delay-6  { animation-delay:.64s !important; }
    .anim-delay-7  { animation-delay:.80s !important; }
    .anim-delay-8  { animation-delay:.98s !important; }

    .orb {
      position:absolute; border-radius:50%;
      pointer-events:none; z-index:0;
      filter:blur(60px); opacity:.12;
    }
    .orb-1 {
      width:400px; height:400px;
      background:var(--elixir-primary);
      top:-100px; right:-100px;
      animation:orbFloat1 8s ease-in-out infinite;
    }
    .orb-2 {
      width:300px; height:300px;
      background:var(--elixir-warning);
      bottom:-80px; left:-80px;
      animation:orbFloat2 10s ease-in-out infinite;
    }

    .service-card {
      position:relative; overflow:hidden;
    }
    .service-card::before {
      content:'';
      position:absolute; top:-50%; left:-50%;
      width:200%; height:200%;
      background:radial-gradient(circle,rgba(44,74,140,0.08) 0%,transparent 60%);
      opacity:0; transition:opacity .4s;
      pointer-events:none;
    }
    .service-card:hover::before { opacity:1; }
    .service-card::after {
      content:'';
      position:absolute; bottom:0; left:0;
      width:100%; height:3px;
      background:linear-gradient(90deg,var(--elixir-primary),var(--elixir-warning));
      transform:scaleX(0); transform-origin:left;
      transition:transform .4s cubic-bezier(.23,1,.32,1);
      pointer-events:none;
    }
    .service-card:hover::after { transform:scaleX(1); }

    .why-item {
      transition:transform .3s, box-shadow .3s;
      border-radius:12px; padding:12px 14px;
    }
    .why-item:hover {
      transform:translateX(8px);
      background:rgba(44,74,140,0.04);
      box-shadow:inset 3px 0 0 var(--elixir-primary);
    }

    .cta-band {
      position:relative; overflow:hidden;
    }
    .cta-band::before {
      content:'';
      position:absolute; top:0; left:-100%;
      width:60%; height:100%;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
      animation:ctaShimmer 3s ease-in-out infinite;
    }

    #scroll-progress {
      position:fixed; top:0; left:0; height:3px; z-index:9999;
      background:linear-gradient(90deg,var(--elixir-primary),var(--elixir-warning));
      width:0; transition:width .1s linear;
    }

    #back-to-top {
      position:fixed; bottom:28px; right:28px; z-index:1000;
      width:46px; height:46px; border-radius:50%;
      background:var(--elixir-primary); color:#fff;
      border:none; font-size:18px;
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 4px 20px rgba(44,74,140,0.35);
      opacity:0; transform:translateY(20px);
      transition:opacity .3s, transform .3s;
      cursor:pointer;
    }
    #back-to-top.visible { opacity:1; transform:translateY(0); }
    #back-to-top:hover   { background:var(--elixir-warning); transform:translateY(-3px); }

    .section-line {
      height:3px;
      background:linear-gradient(90deg,transparent,var(--elixir-primary),var(--elixir-warning),transparent);
      transform:scaleX(0); transform-origin:left;
      transition:transform 1.2s cubic-bezier(.23,1,.32,1);
    }
    .section-line.animated { transform:scaleX(1); }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
    }
  
    /* PREMIUM VIEW MORE BUTTON */

.premium-view-btn{
  background: linear-gradient(135deg,#2c4a8c,#1f3c7a);
  color:#fff;
  border:none;
  padding:14px 34px;
  font-size:15px;
  font-weight:600;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  letter-spacing:.4px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(44,74,140,0.35);
  transition:all .35s ease;
}

/* hover lift effect */

.premium-view-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(44,74,140,0.45);
}

/* arrow animation */

.premium-view-btn i{
  transition:transform .35s ease;
}

.premium-view-btn:hover i{
  transform:translateY(4px);
}

/* shimmer animation */

.premium-view-btn::before{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:120%;
  height:100%;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  transition:.6s;
}

.premium-view-btn:hover::before{
  left:120%;
}

/* pulse animation */

.premium-view-btn{
  animation:viewBtnPulse 2.5s infinite;
}

@keyframes viewBtnPulse{
  0%{
    box-shadow:0 10px 30px rgba(44,74,140,0.35);
  }
  50%{
    box-shadow:0 15px 40px rgba(44,74,140,0.55);
  }
  100%{
    box-shadow:0 10px 30px rgba(44,74,140,0.35);
  }
}

.resp2{
  display: none;
}

@media (max-width: 480px){
  .resp{
    display: none;
  }

  .resp2{
    display: block;

  }
   .navbar-brand img {
    width: 80%;
}
}