*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:  "Manrope", sans-serif;
}

body{
   background-color: #E7E7E7;
    
   background-image: url('../img/bg.jpeg'), linear-gradient(45deg, #EDEDED 0%, #E0E0E0 60%);
    background-size: 553px, auto;
    background-position: center, 0% 0%;
    background-repeat: repeat, repeat;
}

.vcard-container{
     max-width:477px;
    margin:20px auto;
    background:#fff;
    padding:0; /* Remove full padding */
    border-radius:20px;
    box-shadow:0 0 20px rgba(0,0,0,0.1);
   
}

/* MAIN TOP CARD */
.header-card {
    background: linear-gradient(15deg, #0b9444, #ab913d);
    padding: 27px 15px 20px;
    border-radius: 20px 20px 0 0;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
     z-index: 1;
}

/* BACKGROUND PATTERN */
.header-card::before {
    content: "";
    /*background: url('../img/Golden-particals.webp');*/
      background: url('https://png.pngtree.com/element_pic/17/03/16/1b69ef991705e7d0c27e24f110ba8237.png');
     background-position: right, 0% 0%;
    opacity: 0.12;
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
     z-index: -1;             /* FIX */
    pointer-events: none;    /* FIX */
}

.top-header-card{
    /* display: flex; */
    gap: 20px;
    justify-items: center;
}

/* PROFILE ICON */
.profile-icon {
   width: 214px;
    height: 82px;
    border-radius: 1%;
    /* background: rgba(255,255,255,0.25); */
    background: rgb(255 255 255);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border: 2px solid #f5f0e5;
}

.profile-icon img {
   width: 204px;
    height: 66px;
    border-radius: 1%;
    padding: 3px;
}

/* TITLES */
.title {
    font-size: 32px;
    font-weight: 700;
    margin: 5px 0 4px;
        color: #fbfbfb;
        
}

.subtitle {
    opacity: 0.95;
    font-size: 18px;
    margin-bottom: 10px;
    color: #fbfbfb;
}

.quote {
    opacity: 0.8;
    font-style: italic;
    font-size: 14px;
        color: #fbfbfb;
}

/* DIVIDER */
.divider {
    border: none;
    border-top: 1px solid #e7dbb8;
    margin: 18px 24px;
}

/* FEATURE ROW */
.features-row {
    display: flex;
    justify-content: space-between;
    padding: 0 99px;
}

.feature {
    display: flex;
    align-items: center;
    font-size: 14px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    /* background: rgba(255,255,255,0.25); */
    background: #ffeada;
    justify-content: center;
    /* margin-bottom: 12px; */
    
    pointer-events: auto;    /* FIX */
}
.feature{
    text-decoration: none;
}
.feature i{
    font-size: 22px;
    color: #121111;
  pointer-events: none;
}

.feature img {
    width: 30px;
}

/* WHITE CURVED SECTION */
.curve-section {
    background: #fff;
    padding: 20px;
    margin-top: -20px;
    border-radius: 20px 20px 0 0;
    text-align: center;
}

/* PAGINATION DOTS */
.dots {
    display: inline-flex;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #ddd;
    border-radius: 50%;
}

.dot.active {
    background: #ff7a18;
}


.designation{
    color:#555;
}
.vcard-body{
    padding:20px;
}

/* video  section */
.video-section {
    width: 100%;
    height: 269px; /* you can set 600px or 100vh for full screen */
    position: relative;
    overflow: hidden;
    /* border-radius: 20px; */
    margin: 0px 0;
}

.video-section video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fill the div fully */
    position: absolute;
    top: 0;
    left: 0;
}

.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    text-shadow: 0 3px 6px rgba(0,0,0,0.5);
    z-index: 2;
}
 /* about me section */
.about-container {
    width: 438px;
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    border: 2px solid #169b49;
    font-family:  "Manrope", sans-serif;
    color: #333;
}

.about-header {
    background: #ab913d;
    color: white;
    width: fit-content;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: bold;
    margin-top: -39px;
    margin-bottom: 20px;
}

.about-text {
    font-size: 15px;
    line-height: 1.5;
}

.specialties-title {
    margin-top: 10px;
    font-weight: bold;
    color: #169b49;
}

.specialties {
    margin-top: 5px;
}

.tag {
    display: inline-block;
    border: 1px solid #00a06a;
    padding: 5px 10px;
    border-radius: 15px;
    background: linear-gradient(90.85deg, #ffeada 2.92%, #f5f0e5 61.17%, #f4f2ee 98.14%);
    color:#000000;
    margin: 3px;
    font-size: 13px;
}
.experience-box-main{
    display:flex;
    gap: 17px;
}
.experience-box {
    width: 50px;
    height: 50px;
    margin-top: 15px;
    display: inline-block;
    padding: 3px 11px;
    border-radius: 50%;
    background: #ffeada;
    text-align: center;
    border: 2px solid #169b49;
}

.exp-number {
    font-size: 18px;
    color: #00a06a;
    font-weight: bold;
}

.exp-text {
    font-size: 10px;
    color: #00a06a;
}

.design-quote {
    margin-top: 15px;
    font-style: italic;
    font-size: 14px;
    color: #777;
}
/* services section */
.services-section {
    width: 90%;
    max-width: 1100px;
    margin: 40px auto;
    text-align: center;
     font-family:  "Manrope", sans-serif;
}
.services-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.title-icon {
    background: #ab913d;   /* Orange background like image */
    padding: 8px 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.title-icon i{
    color: #fff;
}

.title-icon img {
    width: 20px;
    height: 20px;
}
.title{
    margin-bottom: 3px;
}

.title h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #169b49;
    text-transform: uppercase;
   
}


.services-section .title {
    display: flex;
    gap: 20px;
    /* font-size: 28px;
    font-weight: bold;
    margin-bottom: 25px; */
     margin-bottom: 25px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
    gap: 25px;
}

.service-card {
    background: linear-gradient(90.85deg, #ffeada 2.92%, #f5f0e5 61.17%, #f4f2ee 98.14%);
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 3px 15px rgba(0,0,0,0.1);
    transition: 0.3s ease;
    text-align: center;
    text-decoration: none;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.18);
}
.service-card:hover img{
    transform: scale(1.13) rotate(-6deg);
    /* box-shadow: 0 5px 20px rgba(0,0,0,0.18); */
}
.service-icon {
    width: 55px;
    height: 55px;
    margin-bottom: 15px;
}

.service-card h3 {
    font-size: 19px;
    margin-bottom: 8px;
    color: #ab913d;
}

.service-card p {
    color: #666;
}

/* Responsive */
@media(max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* 1 per row on mobile */
    }
}




/* new section */
.box{
    margin:20px 0;
}

.box h3{
    margin-bottom:10px;
    color:#111;
}

.contact-list li{
    list-style:none;
    margin:5px 0;
}

.social-icons a{
    display:inline-block;
    margin-right:10px;
    background:#eee;
    padding:8px 12px;
    border-radius:6px;
    text-decoration:none;
}

.services li{
    margin-bottom:8px;
}

.gallery{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.gallery img{
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:10px;
}

.buttons{
    text-align:center;
    margin-top:20px;
}

.btn{
    display:block;
    margin:10px 0;
    padding:12px 15px;
    background:#222;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
}

/* new code added */
.social-section {
    text-align: center;
    font-family: "Poppins", sans-serif;
    color: #ec1c24;
}

.social-title {
    font-size: 26px;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
        padding: 28px 0px;

}

.social-title span {
    padding: 0 20px;
    /* background: #169b49; */
    color: #169b49;
}

.social-title::before,
.social-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 80px;
    height: 1px;
     background: #ab913d;  /* brand color */
    transform: translateY(-50%);
    /* color:#169b49 ; */
}

.social-title::before { left: -90px; }
.social-title::after { right: -90px; }

/* Grid Layout (2 per row) */
.social-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

/* Social Card */
.social-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f3e4;
    padding: 14px;
    border-radius: 16px;
    border: 2px solid #e7dbb8;
    text-decoration: none;
    color: #000;
    transition: 0.3s;
}

.social-card:hover {
    transform: translateY(-4px);
}

/* Icon */
.social-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ab913d;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}

/* Brand-Based Icon Colors */
.fb i { color: #169b49; }     /* green */
.ig i { color: #e4b822; }     /* gold */
.yt i { color: #ec1c24; }     /* red */
.ln i { color: #169b49; }     /* green */

/* Text */
.social-info h4 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.social-info p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #555;
    word-break: break-all;
}
.contact-section {
    font-family: "Poppins", sans-serif;
    margin-top: 38px;
    text-align: center;
    color: #ec1c24;
}
.details {
    text-align: left;
}

/* Block common style */
.contact-block {
    display: block;
    gap: 15px;
    margin-bottom: 20px;
}

.icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
}

/* Brand color backgrounds */
.red { background: #ec1c24; }
.green { background: #169b49; }
.gold { background: #ab913d; }

/* Text styles */
.details h4 {
    font-size: 14px;
    margin: 0;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.5px;
    padding:2px;
}
.details a{
    color: #333;
    text-decoration: none;
}
.details p {
    margin: 4px 0;
    font-size: 14px;
    color: #333;
}

.direction-link {
    font-size: 13px;
    margin-top: 3px;
    color: #ec1c24;
    text-decoration: none;
    font-weight: 600;
}

.direction-link:hover {
    text-decoration: underline;
}

/* Row (phone + email) */
.contact-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
}

.contact-row .contact-block {
    flex: 1;
}
.location-section {
    font-family: "Poppins", sans-serif;
    margin-top: 38px;
    text-align: center;
    color: #ec1c24;
}

/* Map container */
.map-box {
    width: 100%;
    height: 260px;
    overflow: hidden;
    border-radius: 20px;
    border: 2px solid #e7dbb8;
    background: #f8f3e4;
}

.map-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.business-hours-section {
    font-family: "Poppins", sans-serif;
    margin-top: 38px;
    text-align: center;
    color: #ec1c24;
}

/* Grid */
.bh-grid {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

/* Item */
.bh-item {
    text-align: center;
}

.bh-item h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 10px 0 5px;
    color:#000;
}

.bh-item p {
    margin: 0;
    color: #555;
    font-size: 16px;
}

/* Icon circle */
.bh-icon {
    width: 55px;
    height: 55px;
    background-color: #ab913d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.bh-icon i {
    font-size: 24px;
    color: #fff;
}
.testimonials-section {
    font-family: "Poppins", sans-serif;
    margin-top: 38px;
    text-align: center;
    color: #ec1c24;
}

.ts-quote {
    position: absolute;
    right: -93px;
    top: 52px;
    color: #e4b822;
    font-size: 45px;
}

/* Slider */
.ts-slider {
    position: relative;
    overflow: hidden;
    min-height: 280px;
}

.ts-slide {
    display: none;
    transition: opacity 0.5s ease;
}

.ts-slide.active {
    display: block;
}

/* Text */
.ts-text {
    font-size: 17px;
    line-height: 1.7;
    color: #555;
    max-width: 750px;
    margin: auto;
    margin-bottom: 30px;
}

/* User */
.ts-user {
    text-align: center;
}

.ts-avatar {
    width: 55px;
    height: 55px;
    background-color: #7c62d9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    margin: auto;
    margin-bottom: 10px;
}

.ts-user h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 999;
    animation: pulse 1.5s infinite ease-in-out;
    transition: transform 0.2s ease;
}

.whatsapp-float img {
    width: 32px;
    height: 32px;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Button Pulse Animation */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.custom-footer {
    background: #ab913d;       /* same orange color */
    padding: 18px 0;
    text-align: center;
    color: #fff;          /* soft white like sample */
    font-size: 14px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    margin: 32px 0px -20px;
}
.download-section {
    text-align: center;
    font-family: "Poppins", sans-serif;
    color: #ec1c24;
        margin-top: 23px;
}
.botao {
  width: 188px;
  height: 45px;
  border-radius: 20px;
  border: none;
  box-shadow: 1px 1px rgb(218 134 134 / 37%);
  padding: 5px 10px;
  /*background: rgb(47,93,197);*/
  background: linear-gradient(160deg, rgb(228 184 34) 0%, rgb(228 184 34) 5%, rgb(228 184 34) 11%, rgb(236 28 36) 57%, rgb(215 25 33) 71%);
  color: #fff;
  font-family: Roboto, sans-serif;
  font-weight: 505;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  filter: drop-shadow(0 0 10px rgba(218, 134, 134, 0.568));
  transition: .10s linear;
}

.botao .mysvg {
  display: none;
}

.botao:hover {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: .10s linear;
}

.botao:hover .texto {
  display: none;
}

.botao:hover .mysvg {
  display: inline;
}

.botao:hover::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -0px;
  width: 100%;
  height: 100%;
  border: 3.5px solid transparent;
  border-top: 3.5px solid #fff;
  border-right: 3.5px solid #fff;
  border-radius: 50%;
  animation: animateC 2s linear infinite;
}

@keyframes animateC {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* GLOBAL MOBILE RESET */
@media (max-width: 768px) {

    .vcard-container {
        max-width: 100%;
        margin: 10px;
        border-radius: 15px;
    }

    .top-header-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .profile-icon {
        width: 214px;
        height: 82px;
    }
    .profile-icon img {
        width: 204px;
        height: 66px;
    }

    /* FEATURES ICON ROW */
    .features-row {
        padding: 0 30px;
        gap: 10px;
    }

    .feature {
        width: 40px;
        height: 40px;
    }

    /* VIDEO RESPONSIVE */
    .video-section {
        height: 200px;
    }

    /* ABOUT US BOX */
    .about-container {
        width: 100% !important;
        padding: 18px;
        margin: auto;
    }

    .about-header {
        margin-top: -30px;
    }

    .experience-box-main {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* SERVICES GRID → 1 COLUMN */
    .services-grid {
        grid-template-columns: 1fr !important;
    }

    /* SOCIAL GRID → 1 COLUMN */
    .social-container {
        grid-template-columns: 1fr !important;
    }

    /* CONTACT US */
    .contact-block {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .details {
        text-align: center;
    }

    /* PHONE + EMAIL ROW */
    .contact-row {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    /* BUSINESS HOURS */
    .bh-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* TESTIMONIAL SLIDER */
    .ts-text {
        font-size: 15px;
        line-height: 1.5;
    }

    /* LOCATION MAP */
    .map-box iframe {
        width: 100%;
        height: 260px;
    }
}

/* EXTRA SMALL DEVICES (max-width: 480px) */
@media (max-width: 480px) {

    .title h2 {
        font-size: 20px;
    }

    .service-card {
        padding: 18px;
    }

    .service-card h3 {
        font-size: 16px;
    }

    .social-title {
        font-size: 22px;
    }
}
.services-grid a{
    text-decoration: none;
}