@font-face {
  font-family: 'OpenSans';
  src: url('../fonts/OpenSans-Semibold.ttf') format('opentype');
  font-style: normal;
}

@font-face {
  font-family: 'OpenSans-Light';
  src: url('../fonts/OpenSans-Light.ttf') format('opentype');
  font-style: normal;
}


*{ 
margin:0;
padding:0;
box-sizing:border-box;
font-family: 'OpenSans';
}

body{
margin:0;
font-family: 'OpenSans';
}

/* Banner */

.sf-hero-banner{
position:relative;
width:100%;
height:92vh;
background-image:url("../../assets/images/bannerimg.png");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

/* Black overlay */

.sf-hero-banner::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
}

/* Content */

.sf-hero-content{
position:relative;
z-index:2;
max-width:1000px;
padding:20px;
}

.sf-hero-content h1{
font-size:48px;
font-weight:700;
line-height:1.3;
margin-bottom:20px;
}

.sf-hero-content p{
font-size:21px;
margin-bottom:30px;
}

/* Button */

.sf-shop-btn{
display:inline-block;
padding:14px 36px;
background:#2ecc71;
color:white;
text-decoration:none;
font-size:18px;
font-weight:600;
border-radius:6px;
border:2px solid white;
transition:0.3s;
cursor: pointer;
}

.sf-shop-btn:hover{
background:#27ae60;
}
/* Top Bar */

.sf-top-bar{
width: 100%;
    background: #2ecc71;
    color: #fff;
    text-align: center;
    padding: 8px 10px;
    font-size: 24px;
    font-weight: 500;
}

 .info-wrapper{
      width:100%;
      display:flex;
      flex-direction:column;
      gap:3vh;
          padding: 1.5rem 12rem;
              background: #efefef;

    }

    /* ================= CARD ================= */

    .info-card{
      width:100%;
      background:#f5f7f9;
      border-radius:1.5rem;
      padding:2.2vh 1.6vw;

      display:flex;
      align-items:flex-start;
      gap:1.6vw;

      box-shadow:0 0 0.3vw rgba(0,0,0,0.08);
    }

    /* ================= IMAGE ================= */

    .info-image{
      width:35%;
      flex-shrink:0;
      overflow:hidden;
      border-radius:0.2rem;
    }

    .info-image img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* ================= CONTENT ================= */

    .info-content{
      width:65%;
    }

    .info-content h2{
      color:#0b9a7a;
      font-size:3vw;
      line-height:1.1;
      margin-bottom:2.5vh;
      font-weight:900;
          color: #13946b;
    }

    .info-content p{
    color: #3d3e3e;
    font-size: 1.5vw;
    line-height: 1.35;
    margin-bottom: 0.5vh;
     font-weight:900;
     font-family: 'OpenSans-Light';
    }

    .blue-link{
      color:#2b8fc6;
    }

/* Privacy Footer */

.sf-privacy-footer{
background:#000;
color:#fff;
text-align:center;
padding:10px 10px;
font-size:19px;
}

.sf-privacy-footer a{
color:#fff;
text-decoration:none;
margin-left:5px;
}

.sf-privacy-footer a:hover{
color:#2ecc71;
}

.sf-hero-icon img{
 width: 140px;
 height: auto;
 margin-bottom: 40px;
 filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

 @media (max-width:991px){

      .info-card{
        gap:2vw;
        padding:2vh 2vw;
      }

      .info-image{
        width:35%;
      }

      .info-content{
        width:65%;
      }

      .info-content h2{
        font-size:3.6vw;
      }

      .info-content p{
        font-size:1.8vw;
      }

    }


/* Mobile */

@media(max-width:768px){

.sf-hero-banner{
padding:20px 0px;
background-image:url("../../assets/images/mbanner.png"); /* mobile banner */
background-position:center;
background-size:cover;
}

.sf-hero-content h1{
font-size: 50px;
}

.sf-hero-content p{
font-size:32px;
}

.sf-shop-btn{
font-size:30px;
}

 .info-wrapper{
        gap:2.5vh;
            padding: 1rem 1rem;
      }

      .info-card{
        flex-direction:column;
        padding:2vh 3vw;
        border-radius:1rem;
      }

      .info-image{
        width:100%;
      }

      .info-content{
        width:100%;
      }

      .info-content h2{
        font-size:2rem;
        margin-top:1.2vh;
      }

      .info-content p{
        font-size:1rem;
        line-height:1.6;
      }

}

@media (max-width:380px){
   .sf-hero-content h1{
font-size: 35px;
}

.sf-hero-content p{
font-size:22px;
} 

.sf-shop-btn{
font-size:25px;
}
}