.cotlas-social-share.cotlas-social-share-aside-mobile {
    display: grid;
    background: #fff;
    padding: 4px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,.1);
    border: 1px solid #e0e0e0;
    gap: 5px;
    width: max-content;
    margin-left: 0;
    margin-top: 10px
}

.cotlas-social-share-aside-mobile a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s
}

.cotlas-social-share-aside-mobile svg {
    width: 25px;
    height: 25px;
    transition: .3s
}

.cotlas-social-share-aside-mobile span {
    display: none
}

.cotlas-social-share-aside-mobile a.facebook svg {
    fill: #1877F2
}

.cotlas-social-share-aside-mobile a.threads svg,.cotlas-social-share-aside-mobile a.twitter svg {
    fill: #000000
}

.cotlas-social-share-aside-mobile a.linkedin svg {
    fill: #0A66C2
}

.cotlas-social-share-aside-mobile a.whatsapp svg {
    fill: #25D366
}

.cotlas-social-share-aside-mobile a.telegram svg {
    fill: #0088cc
}

.cotlas-social-share-aside-mobile a.pinterest svg {
    fill: #E60023
}

.cotlas-social-share-aside-mobile a.reddit svg {
    fill: #FF4500
}

.cotlas-social-share-aside-mobile a:hover {
    transform: translateY(-2px);
    background: #f8f9fa
}

.cotlas-social-share-aside-mobile a:hover svg {
    fill: #000000!important;
    transform: scale(1.1)
}

@media (max-width: 768px) {
    .cotlas-social-share-aside-mobile {
        position:static;
        transform: none;
        flex-direction: row;
        justify-content: center;
        margin: 20px 0;
        border-radius: 15px
    }
}

@media (max-width: 480px) {
    .cotlas-social-share-aside-mobile a,.cotlas-social-share-aside-mobile svg,.cotlas-social-share-top a,.cotlas-social-share-top svg {
        width:25px;
        height: 25px
    }
}

.cotlas-post-card li:hover,.cotlas-post-list .style-one:hover,.cotlas-post-list .style-three:hover,.cotlas-post-list .style-two:hover {
    box-shadow: none!important;
    transform: none!important;
    transition: none!important
}

.cotlas-post-list .style-one {
    border-radius: 8px!important
}
/* --------------------------------------------------
   BASE HIDDEN STATE (for scroll animations)
-------------------------------------------------- */
.trh-animate-left,
.trh-animate-right,
.trh-zoom-in,
.trh-slide-left,
.trh-slide-right,
.trh-slide-up,
.trh-slide-down,
.trh-slide-out,
.trh-parallax-fade,
.trh-float,
.trh-pulse,
.trh-hero-enter {
    opacity: 0;
    transform: translateX(0) translateY(0) scale(1);
}

/* --------------------------------------------------
   FADE FROM LEFT
-------------------------------------------------- */
@keyframes trhFadeLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.trh-animate-left.trh-in-view {
    animation: trhFadeLeft 0.9s ease-out forwards;
}

/* --------------------------------------------------
   FADE FROM RIGHT
-------------------------------------------------- */
@keyframes trhFadeRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.trh-animate-right.trh-in-view {
    animation: trhFadeRight 0.9s ease-out forwards;
}

/* --------------------------------------------------
   ZOOM IN
-------------------------------------------------- */
@keyframes trhZoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.trh-zoom-in.trh-in-view {
    animation: trhZoomIn 0.9s ease-out forwards;
}

/* --------------------------------------------------
   SLIDE IN (LEFT)
-------------------------------------------------- */
@keyframes trhSlideFromLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}
.trh-slide-left.trh-in-view {
    animation: trhSlideFromLeft 0.9s ease-out forwards;
}

/* --------------------------------------------------
   SLIDE IN (RIGHT)
-------------------------------------------------- */
@keyframes trhSlideFromRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}
.trh-slide-right.trh-in-view {
    animation: trhSlideFromRight 0.9s ease-out forwards;
}

/* --------------------------------------------------
   SLIDE UP (Fade Up)
-------------------------------------------------- */
@keyframes trhSlideUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.trh-slide-up.trh-in-view {
    animation: trhSlideUp 0.9s ease-out forwards;
}

/* --------------------------------------------------
   SLIDE DOWN (Fade Down)
-------------------------------------------------- */
@keyframes trhSlideDown {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}
.trh-slide-down.trh-in-view {
    animation: trhSlideDown 0.9s ease-out forwards;
}

/* --------------------------------------------------
   SLIDE OUT (after appearing)
-------------------------------------------------- */
@keyframes trhSlideOut {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(40px); }
}
.trh-slide-out.trh-in-view {
    animation: trhSlideOut 1.2s ease-out forwards;
    animation-delay: 1s;
}

/* --------------------------------------------------
   PARALLAX FADE (slow upward movement)
-------------------------------------------------- */
@keyframes trhParallax {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
}
.trh-parallax-fade.trh-in-view {
    animation: trhParallax 1.2s ease-out forwards;
}

/* --------------------------------------------------
   FLOATING EFFECT (infinite)
-------------------------------------------------- */
@keyframes trhFloat {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
.trh-float {
    opacity: 1 !important;
    animation: trhFloat 3s ease-in-out infinite;
}

/* --------------------------------------------------
   INFINITE SOFT PULSE
-------------------------------------------------- */
@keyframes trhPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.trh-pulse {
    opacity: 1 !important;
    animation: trhPulse 2.4s ease-in-out infinite;
}

/* --------------------------------------------------
   HOVER-BASED 3D TILT
-------------------------------------------------- */
.trh-tilt {
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
}
.trh-tilt:hover {
    transform: rotateX(8deg) rotateY(8deg) scale(1.02);
}

/* --------------------------------------------------
   HERO ENTRANCE (fade + slide-up)
-------------------------------------------------- */
@keyframes trhHeroEnter {
    from { opacity: 0; transform: translateY(60px); }
    to   { opacity: 1; transform: translateY(0); }
}
.trh-hero-enter.trh-in-view {
    animation: trhHeroEnter 1.4s ease-out forwards;
}

/* --------------------------------------------------
   DELAY CLASSES (stagger effect)
-------------------------------------------------- */
.trh-delay-1 { animation-delay: 0.2s !important; }
.trh-delay-2 { animation-delay: 0.4s !important; }
.trh-delay-3 { animation-delay: 0.6s !important; }
.trh-delay-4 { animation-delay: 0.8s !important; }
.trh-delay-5 { animation-delay: 1s !important; }