.circle {
  padding: 13px 20px;
  border-radius: 50%;
  background-color: #34b7a7;
  color: #fff;
  max-height: 50px;
  z-index: 2;
}

.how-it-works.row .col-2 {
  align-self: stretch;
}
.how-it-works.row .col-2::after {
  content: "";
  position: absolute;
  border-left: 3px solid #34b7a7;
  z-index: 1;
}
.how-it-works.row .col-2.bottom::after {
  height: 50%;
  left: 50%;
  top: 50%;
}
.how-it-works.row .col-2.full::after {
  height: 100%;
  left: calc(50% - 3px);
}
.how-it-works.row .col-2.top::after {
  height: 100%;
  left: 50%;
  top: 0;
}


.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 3px solid #34b7a7;
  margin: 0;
  top: 17px;
  position: relative;
}
.timeline .col-2 {
  display: flex;
  overflow: hidden;
}
.timeline .corner {
  border: 3px solid #34b7a7;
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.timeline .top-right {
  left: 50%;
  top: -50%;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}
.timeline .top-left {
  left: -50%;
  top: -50%;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}

.container blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
    color: #34b7a7;
  }


.accordion-item {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .125);
}

.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: bold;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s 
    ease-in-out, background-color .15s 
    ease-in-out, border-color .15s 
    ease-in-out, box-shadow .15s 
    ease-in-out, border-radius .15s 
    ease;
}

.accordion-body {
    padding: 1rem 1.25rem;
}

.accordion-item:first-of-type .accordion-button {
    border-top-left-radius: calc(.25rem - 1px);
    border-top-right-radius: calc(.25rem - 1px);
}

.accordion-button:hover {
    z-index: 2;
    cursor: pointer;
}

.accordion-button:not(.collapsed) {
    color: #000000;
    background-color: #34b7a7;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .125);
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform .2s 
    ease-in-out;
}

.accordion-button:not(.collapsed)::after {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e);
    transform: rotate(-180deg);
}

 .social-share-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-share-sidebar .btn {
    width: 45px;
    height: 45px;
    border-radius: 5px 0 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}

.social-share-sidebar .btn:hover {
    transform: scale(1.1);
}

/* Brand Colors */
.btn-facebook { background-color: #3b5998; }
.btn-twitter { background-color: #1da1f2; }
.btn-linkedin { background-color: #0077b5; }
.btn-whatsapp { background-color: #25d366; }
.btn-feedback { background-color: #ffc107; }
.btn-feedback:hover {
    background-color: #e0a800;
}

/* Hide on mobile screens if it blocks content */
/*@media (max-width: 767.98px) {
    .social-share-sidebar {
        display: none; 
    }
}*/

/* Mobile Optimization: Converts sidebar to a clean bottom layout */
@media (max-width: 767.98px) {
    .social-share-sidebar {
        top: auto;
        bottom: 0;
        right: 0;
        left: 0;
        transform: none;
        flex-direction: row;
        gap: 0;
        width: 100%;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    }

    .social-share-sidebar .btn {
        flex: 1; /* Makes buttons distribute evenly across the width */
        height: 55px; /* Taller touch targets for thumbs */
        border-radius: 0; /* Flat layout edges for mobile screen wrapper */
    }
    
    .social-share-sidebar .btn:hover {
        transform: none; /* Disables desk-hover effects on touch screens */
    }
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: 60px; /* Pushes content up so nothing is blocked */
    }
}