/* ═══════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════ */
:root {
  --teal:       #0d9fa1;
  --teal-dk:    #077273;
  --teal-lt:    #e6f7f7;
  --teal-mid:   #9dd9da;
  --red:        #d93535;
  --red-lt:     #fdf0f0;
  --ink:        #111b1b;
  --ink2:       #2c3e3e;
  --slate:      #5e7070;
  --pale:       #f4fafa;
  --white:      #ffffff;
  --border:     #daeaea;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --shadow-xs:  0 1px 4px rgba(13,159,161,.06);
  --shadow-sm:  0 4px 16px rgba(13,159,161,.10);
  --shadow-md:  0 10px 40px rgba(13,159,161,.14);
  --shadow-lg:  0 20px 64px rgba(13,159,161,.16);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--pale);color:var(--ink);overflow-x:hidden}
img{display:block;max-width:100%}
a{text-decoration:none !important;color:inherit}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--teal-lt)}
::-webkit-scrollbar-thumb{background:var(--teal);border-radius:2px}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
.header {
  position: fixed;top:0;left:0;right:0;z-index:1000;
  height: auto;
  display: flex;align-items:center;justify-content:space-between;
  padding: 0 4%;
  backdrop-filter: blur(20px);
  transition: box-shadow .3s;
      background: #fff;
}
.header.scrolled{box-shadow:0 2px 24px rgba(13,159,161,.10)}

.h-logo{display:flex;align-items:center;gap:10px}
.h-logo img{height:auto;width:90px;}
.h-logo-text{line-height:1.15}
.h-logo-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:700;color:var(--teal-dk);letter-spacing:.3px
}
.h-logo-name b{color:var(--red)}
.h-logo-sub{font-size:.65rem;color:var(--slate);font-weight:600;letter-spacing:.8px;text-transform:uppercase}

.h-nav{display:flex;align-items:center;gap:.2rem}
.h-nav a{
  padding:6px 13px;border-radius:8px;
  font-size:16px;font-weight:600;color:#000;
  transition:background .2s,color .2s
}
.h-nav a:hover,.h-nav a.on{background:var(--teal-lt);color:#000}

.h-right{display:flex;align-items:center;gap:.7rem}
.btn-call{
 display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 30px;
    border-radius: 5px;
    background: #f49c18;
    color: #f7f7f7;
    font-size: 18px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
}
.btn-call:hover{background:var(--teal-mid)}
.btn-order{
  display:flex;align-items:center;gap:6px;
  padding:8px 20px;border-radius:var(--r-sm);
  background:var(--teal);color:#fff;
  font-size:.8rem;font-weight:700;border:none;cursor:pointer;
  box-shadow:0 4px 16px rgba(13,159,161,.30);
  transition:.25s;white-space:nowrap
}
.btn-order:hover{background:var(--teal-dk);transform:translateY(-1px);box-shadow:0 6px 20px rgba(13,159,161,.35)}

.h-burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.h-burger span{display:block;width:22px;height:2px;background:var(--ink2);border-radius:2px;transition:.3s}

/* mobile nav */
.mob-menu{
  position:fixed;top:68px;left:0;right:0;z-index:999;
  background:#fff;border-bottom:1px solid var(--border);
  padding:1.2rem 4%;
  display:none;flex-direction:column;gap:.5rem;
  box-shadow:0 8px 32px rgba(0,0,0,.08)
}
.mob-menu.open{display:flex}
.mob-menu a{padding:.65rem .8rem;border-radius:8px;font-weight:600;font-size:.95rem;color:var(--ink2);transition:.2s}
.mob-menu a:hover{background:var(--teal-lt);color:var(--teal-dk)}


.menu-close{
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  display:none;
}
/* ═══════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════ */
.hero{
  position:relative;
  height:100vh;
  overflow:hidden;
}

.slide{
  position:absolute;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:1s ease;
}

.slide.active{
  opacity:1;
}

/* Dark overlay */
.overlay{
  position:absolute;
  width:100%;
  height:100%;
  /* background:linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0.`2)); */
}

/* Content */
.content{
  position:absolute;
  top:50%;
  left:8%;
  transform:translateY(-50%);
  color:#fff;
  max-width:500px;
}

.content h1{
  font-size:3rem;
  margin-bottom:10px;
}

.content h1 span{
  color:#00bcd4;
}

.content p{
  font-size:1rem;
  margin-bottom:20px;
}

/* Buttons */
.buttons{
  display:flex;
  gap:10px;
}

.btn{
  padding:12px 25px;
  background:#00bcd4;
  color:#fff;
  text-decoration:none;
  border-radius:5px;
  font-weight:600;
}

.btn.outline{
  background:transparent;
  border:2px solid #fff;
}

/* Dots */
.dots{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
}

.dots span{
  display:inline-block;
  width:10px;
  height:10px;
  margin:5px;
  background:#fff;
  opacity:0.5;
  border-radius:50%;
  cursor:pointer;
}

.dots span.active{
  opacity:1;
  width:25px;
  border-radius:20px;
}



.mobile-view{
    display:none;
}


@media (max-width:992px) {
  /*.slide {*/
  /*  background-image: url(../images/mobile-banner-1.jpg) !important;*/
  /*}*/
  
  .slide {
      background-image:none !important;
      padding:0 !important;
      min-height:425px;
  }
  
  .mobile-view {
      display:block;
}
}




/* ═══════════════════════════════════════════
   SECTION COMMON
═══════════════════════════════════════════ */
.sec{padding:35px 5%}
.sec-header{text-align:center;margin-bottom:3.5rem}
.sec-eyebrow{
  display:inline-block;
  background:var(--teal-lt);color:var(--teal-dk);
  padding:5px 18px;border-radius:40px;
  font-size:.68rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  margin-bottom:.9rem
}
.sec-title{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.9rem,3.2vw,2.8rem);font-weight:700;
  color:var(--ink);line-height:1.2
}
.sec-sub{
  font-size:.92rem;color:var(--slate);margin-top:.7rem;
  max-width:500px;margin-inline:auto;line-height:1.8
}
.teal-bar{
  width:48px;height:3px;border-radius:2px;
  background:linear-gradient(to right,var(--teal),var(--teal-mid));
  margin:.9rem auto 0
}

/* fade-up animation */
.fu{opacity:0;transform:translateY(32px);transition:opacity .6s ease,transform .6s ease}
.fu.vis{opacity:1;transform:none}

.whatsapp-section{
    margin:20px 0;
    display:flex;
    align-items:center;
    justify-content:center;
}
/* ═══════════════════════════════════════════
   CATEGORIES
═══════════════════════════════════════════ */
.sec-cats{background:#fff}

.cats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem
}

.cat-card{
  position:relative;overflow:hidden;
  border-radius:var(--r-lg);
  aspect-ratio:3/4;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .38s,box-shadow .38s
}
.cat-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)}

.cat-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease
}
.cat-card:hover img{transform:scale(1.07)}

.cat-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,114,115,.85) 0%,rgba(7,114,115,.1) 55%,transparent 100%);
  transition:opacity .35s
}
.cat-card:hover .cat-overlay{opacity:.92}

.cat-body{
  position:absolute;bottom:0;left:0;right:0;
  padding:1.4rem 1.2rem;
  color:#fff;
  transition:transform .35s
}
.cat-card:hover .cat-body{transform:translateY(-4px)}
.cat-name{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:700;margin-bottom:3px}

.cat-tag{
  position:absolute;top:14px;left:14px;
  background:rgba(255,255,255,.92);
  color:var(--teal-dk);
  padding:4px 12px;border-radius:30px;
  font-size:.66rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase
}

/* ═══════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════ */
.cta-section {
  padding: 40px 20px;
}

.cta-container {
  max-width: 1200px;
  margin: auto;
  padding: 65px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ebb177, #e8983d);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

/* subtle curved overlay */
.cta-container::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
}

.cta-content h2 {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
  color: #111;
}

.cta-content p {
  margin-top: 8px;
  font-size: 15px;
  color: #333;
}

/* button */
.cta-btn {
  background: #000;
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s ease;
  white-space: nowrap;
}

.cta-btn:hover {
  background: #222;
  transform: translateY(-2px);
}

/* responsive */
@media (max-width: 768px) {
  .cta-container {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px;
  }

  .cta-content h2 {
    font-size: 20px;
  }

  .cta-btn {
    width: 100%;
    justify-content: center;
  }
}
/* ═══════════════════════════════════════════
   BRANDS
═══════════════════════════════════════════ */
.sec-brands{background:var(--pale);padding:64px 0}
.brands-hd{padding:0 5%;text-align:center;margin-bottom:2.2rem}
.brands-scroll{
  overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)
}
.brands-track{
  display:flex;align-items:center;justify-content: center; padding: 10px 0; gap:1.2rem;
}
.brands-track:hover{animation-play-state:paused}
@keyframes bscroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.b-card{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:5px;border-radius:var(--r-md);
  background:#fff;border:1.5px solid var(--border);
  flex-shrink:0;min-width:140px;cursor:pointer;transition:.3s;height: 135px;
    align-items: center;
    justify-content: center;
}
.b-card:hover{border-color:var(--teal);background:var(--teal-lt);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.b-card img{width: 100px;object-fit:contain;}
.b-card:hover img{filter:grayscale(0);opacity:1}
.b-card span{font-size:.72rem;font-weight:700;color:var(--slate);letter-spacing:.5px;text-transform:uppercase;transition:.3s}
.b-card:hover span{color:var(--teal-dk)}

/* ═══════════════════════════════════════════
   PRODUCTS
═══════════════════════════════════════════ */
.sec-products{background:#fff}



.prod-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.4rem
}

.prod-card{
  background:var(--pale);border:1.5px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;
  cursor:pointer;transition:.35s;position:relative
}
.prod-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-md);border-color:var(--teal-mid)}

.prod-img-wrap{
  position:relative;overflow:hidden;
  aspect-ratio:1;background:#f0f9f9
}
.prod-img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .55s ease
}
.prod-card:hover .prod-img-wrap img{transform:scale(1.08)}


.prod-hover-btn{
  position:absolute;bottom:0;left:0;right:0;
  padding:12px;
  background:rgba(13,159,161,.95);
  display:flex;align-items:center;justify-content:center;gap:8px;
  color:#fff;font-size:.82rem;font-weight:700;
  opacity:0;transform:translateY(100%);transition:.35s
}
.prod-card:hover .prod-hover-btn{opacity:1;transform:translateY(0)}

.prod-info{padding:1.1rem 1.1rem 1.3rem}
.prod-name{font-size:.88rem;font-weight:700;color:var(--ink);margin-bottom:.75rem;line-height:1.45}
.prod-price{
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;font-weight:700;color:var(--teal-dk)
}
.prod-old{font-size:.72rem;color:var(--slate);text-decoration:line-through;margin-left:4px}
.prod-stock{font-size:.65rem;background:#edf9ed;color:#1e7c1e;padding:3px 8px;border-radius:6px;font-weight:700}

/* ═══════════════════════════════════════════
   WHY CHOOSE US
═══════════════════════════════════════════ */
.sec-why{
  background:var(--pale);
  position:relative;overflow:hidden
}
.sec-why::before{
  content:'';position:absolute;top:-100px;right:-150px;
  width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle,rgba(13,159,161,.06) 0%,transparent 70%);
  pointer-events:none
}

.why-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem
}

.why-card{
  background:#fdd0a2;border:1.5px solid var(--border);
  border-radius:var(--r-xl);padding:2.6rem 2.2rem;
  position:relative;overflow:hidden;transition:.38s;
  display:flex;flex-direction:column;gap:1.2rem;text-align: center;
}
.why-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--teal-mid)}
.why-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(to right,var(--teal),var(--teal-mid));
  transform:scaleX(0);transform-origin:left;transition:transform .4s
}
.why-card:hover::after{transform:scaleX(1)}

.why-img-wrap{
  width:100%;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden
}
.why-img-wrap img{width:100%;height:100%;object-fit:contain;transition:transform .5s}
.why-card:hover .why-img-wrap img{transform:scale(1.06)}

.why-num{
  font-family:'Cormorant Garamond',serif;
  font-size:3.8rem;font-weight:700;
  color:rgba(13,159,161,.06);
  position:absolute;top:1rem;right:1.5rem;line-height:1
}
.why-h{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:700;color:var(--ink)}
.why-p{font-size:.86rem;color:#000;line-height:1.85}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer{
  background:var(--ink);color:#fff;
  padding:64px 5% 0
}

.footer-grid{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:3.5rem;padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.08)
}

.f-brand{display:flex;align-items:center;gap:10px;margin-bottom:1.1rem}
.f-brand img{height:44px;filter:brightness(0) invert(1) sepia(1) saturate(2) hue-rotate(155deg)}
.f-brand-name{
  font-family:'Cormorant Garamond',serif;
  font-size:1.2rem;font-weight:700;color:#fff
}
.f-brand-name b{color:var(--teal-mid)}
.f-desc{font-size:.84rem;color:rgba(255,255,255,.45);line-height:1.85;margin-bottom:1.4rem}

.socials{display:flex;gap:.5rem}
.soc{
  width:36px;height:36px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;cursor:pointer;text-decoration:none;
  transition:.25s
}
.soc:hover{background:var(--teal);border-color:var(--teal)}

.f-col h5{
  font-size:.7rem;font-weight:800;
  color:var(--teal-mid);letter-spacing:2px;text-transform:uppercase;margin-bottom:1.3rem
}
.f-col ul{list-style:none;display:flex;flex-direction:column;gap:.65rem}
.f-col ul a{font-size:.84rem;color:rgba(255,255,255,.45);transition:.2s}
.f-col ul a:hover{color:var(--teal-mid)}

.nl-wrap p{font-size:.83rem;color:rgba(255,255,255,.45);line-height:1.75;margin-bottom:1rem}
.nl-row{display:flex;gap:6px}
.nl-input{
  flex:1;min-width:0;padding:10px 14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;color:#fff;font-size:.83rem;outline:none;
  font-family:'Plus Jakarta Sans',sans-serif;transition:.2s
}
.nl-input::placeholder{color:rgba(255,255,255,.28)}
.nl-input:focus{border-color:var(--teal)}
.nl-btn{
  padding:10px 16px;background:var(--teal);color:#fff;border:none;
  border-radius:8px;cursor:pointer;font-weight:800;font-size:.78rem;
  font-family:'Plus Jakarta Sans',sans-serif;transition:.2s;white-space:nowrap
}
.nl-btn:hover{background:var(--teal-dk)}

.f-hours{margin-top:1.4rem}
.f-hours p{font-size:.8rem;color:rgba(255,255,255,.38);line-height:1.9}

.f-bottom{
  padding:1.4rem 0;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media(max-width:1200px){
  .cats-grid{grid-template-columns:repeat(4,1fr)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:1024px){
  .slide{grid-template-columns:1fr;padding:0 5%}
  .slide-right{display:none}
  .slide-left{max-width:600px}
  .hero{height:auto;min-height:520px;padding:0 0}
  .slide{display:flex;align-items:center;min-height:600px}
  .cats-grid{grid-template-columns:repeat(4,1fr);gap:1rem}
  .cta-inner{grid-template-columns:1fr}
  .cta-left{padding:4rem 5%}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:992px) {
 .b-card {
     min-width: 0;
    height: 100px;
 }
 
 .b-card img {
    width: 80px;
 }
 
}

@media (max-width: 991px){

  .h-nav.open{
    display: flex;
  }
  
  .menu-close{
      display:block;
  }

  .h-nav{
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    height: 100vh;
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 20px;
    transition: 0.3s ease;
    z-index: 999;
  }

  .h-nav.open{
    right: 0;
  }

  .h-nav a{
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
  }

  /* Optional overlay */
  .menu-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 998;
  }

  .menu-overlay.active{
    opacity: 1;
    visibility: visible;
  }

}

@media(max-width:768px){
  .h-nav,.btn-call{display:none}
  .h-burger{display:flex}
  .header{padding:0 4%}
  .sec{padding:20px 4%}
  .hero{min-height:600px}
  .slide-left{padding:0 4%}
  .slide-title{font-size:2.2rem}
  .cats-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:1rem}
  .why-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .f-bottom{flex-direction:column;text-align:center}
  .sec-brands{padding:48px 0}
  .cta-stats{gap:1rem}
  .cta-h {font-size: 12px;}
}

@media(max-width:480px){
  .slide-title{font-size:1.85rem}
  .slide-body{font-size:.88rem}
  .slide-actions{flex-direction:column}
  .btn-primary,.btn-ghost{justify-content:center;text-align:center}
  .cats-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .cat-card{aspect-ratio:3/4}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .prod-info{padding:.9rem}
  .prod-name{font-size:.82rem}
  .cta-btns{flex-direction:column}
  .btn-white,.btn-outline-w{text-align:center;justify-content:center}
  .sec-title{font-size:23px;}
  .why-card{padding:1.8rem 1.5rem}
  .s-dots{left:4%}
  .s-arrows{right:4%}
  .cat-body{padding:10px;}
  .cat-name {font-size:13px;}
}



/* ============================================================ */



/* Modal Box */
.modal-content {
    border-radius: 16px;
    border: none;
    padding: 10px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Header */
.modal-header {
    border-bottom: none;
    text-align: center;
    justify-content: center;
    position: relative;
    padding: 20px 20px 10px;
}

.modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #222;
}

/* Close Button */
.btn-close {
    position: absolute;
    right: 20px;
    top: 20px;
    opacity: 0.7;
}
.btn-close:hover {
    opacity: 1;
}

/* Body */
.modal-body {
    padding: 20px;
}

/* Inputs */
.form-control {
    border-radius: 10px;
    padding: 12px 15px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    font-size: 14px;
    transition: 0.3s;
}

.form-control:focus {
    border-color: #ff7a00;
    box-shadow: 0 0 0 3px rgba(255,122,0,0.1);
}

/* Textarea */
textarea.form-control {
    resize: none;
}

/* Button */
.submit {
    background: linear-gradient(135deg, #ff7a00, #ff9a2a);
    border: none;
    padding: 12px;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}

.submit:hover {
    background: linear-gradient(135deg, #e66a00, #ff7a00);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255,122,0,0.3);
}

/* Grid spacing fix */
form .col-12,
form .col-md-12 {
    padding: 0;
}

/* Responsive */
@media (max-width: 576px) {
    .modal-content {
        border-radius: 12px;
    }

    .modal-title {
        font-size: 18px;
    }
}






/* whatapp */
.quickcontact {
  width: 40px;
  position: fixed;
  top: 77%;
  right: 30px;
  z-index: 9999;
}

.quickcontact img{
    width: 100%;
    height: 100%;

}