/*====================================================
    DR1055 PREMIUM BROCHURE POPUP
====================================================*/

.dr1055popupalerts1{

    position:fixed;

    left:25px;
    bottom:25px;

    width:390px;
    max-width:calc(100vw - 40px);

    z-index:999999;

    opacity:0;
    visibility:hidden;

    transform:translateX(-120%);

    transition:
        transform .75s cubic-bezier(.18,1,.32,1),
        opacity .45s ease,
        visibility .45s;

    font-family:Poppins,sans-serif;

}

.dr1055popupalerts1.show{

    opacity:1;
    visibility:visible;
    transform:translateX(0);

}


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

.dr1055popupalerts1-card{

    position:relative;

    overflow:hidden;

    padding:28px;

    border-radius:26px;

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.94),
    rgba(255,255,255,.82));

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.65);

    box-shadow:
    0 40px 90px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.9);

}


/*====================================================
    ANIMATED BORDER
====================================================*/

.dr1055popupalerts1-card::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    padding:2px;

    background:
    linear-gradient(
    135deg,
    #00c6ff,
    #0072ff,
    #7f5cff,
    #00d4ff,
    #00c6ff);

    background-size:300% 300%;

    animation:
    dr1055popupalerts1gradient 8s linear infinite;

    z-index:-2;

}

@keyframes dr1055popupalerts1gradient{

0%{background-position:0% 50%;}
100%{background-position:100% 50%;}

}


/*====================================================
    GLOSS SHINE
====================================================*/

.dr1055popupalerts1-card::after{

    content:"";

    position:absolute;

    left:-180px;
    top:0;

    width:140px;
    height:100%;

    transform:skewX(-25deg);

    background:
    rgba(255,255,255,.42);

    animation:
    dr1055popupalerts1shine 5s infinite;

}

@keyframes dr1055popupalerts1shine{

0%{left:-180px;}

55%{left:520px;}

100%{left:520px;}

}


/*====================================================
    ICON
====================================================*/

.dr1055popupalerts1-icon{

    width:76px;
    height:76px;

    border-radius:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:36px;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    #0072ff,
    #00c6ff);

    box-shadow:
    0 18px 40px rgba(0,114,255,.45);

    animation:
    dr1055popupalerts1float 3s ease-in-out infinite;

}

@keyframes dr1055popupalerts1float{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

}


/*====================================================
    TITLE
====================================================*/

.dr1055popupalerts1 h2{

    margin:18px 0 10px;

    color:#1f2937;

    font-size:28px;

    font-weight:700;

    line-height:1.3;

}


/*====================================================
    DESCRIPTION
====================================================*/

.dr1055popupalerts1 p{

    margin:0 0 22px;

    font-size:15px;

    line-height:1.7;

    color:#555;

}


/*====================================================
    BUTTON
====================================================*/

.dr1055popupalerts1 a{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    text-decoration:none;

    padding:16px 24px;

    border-radius:50px;

    font-weight:700;

    font-size:15px;

    color:#fff;

    background:
    linear-gradient(
    135deg,
    #0072ff,
    #00c6ff);

    box-shadow:
    0 16px 35px rgba(0,114,255,.42);

    transition:.35s;

}

.dr1055popupalerts1 a:hover{

    transform:
    translateY(-3px)
    scale(1.03);

    box-shadow:
    0 24px 45px rgba(0,114,255,.55);

}


/*====================================================
    CLOSE
====================================================*/

.dr1055popupalerts1-close{

    position:absolute;

    top:16px;
    right:18px;

    width:34px;
    height:34px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    font-size:24px;

    color:#666;

    transition:.3s;

}

.dr1055popupalerts1-close:hover{

    transform:rotate(90deg);

    background:#f5f5f5;

    color:#111;

}


/*====================================================
    MOBILE
====================================================*/

@media(max-width:768px){

.dr1055popupalerts1{

left:12px;
right:12px;
bottom:12px;

width:auto;
max-width:none;

}

.dr1055popupalerts1-card{

padding:22px;

border-radius:22px;

}

.dr1055popupalerts1-icon{

width:62px;
height:62px;

font-size:30px;

}

.dr1055popupalerts1 h2{

font-size:22px;

margin:15px 0 8px;

}

.dr1055popupalerts1 p{

font-size:14px;

line-height:1.6;

margin-bottom:18px;

}

.dr1055popupalerts1 a{

width:100%;

padding:15px;

font-size:15px;

}

.dr1055popupalerts1-close{

top:12px;
right:12px;

font-size:22px;

}

}


/*====================================================
    SMALL DEVICES
====================================================*/

@media(max-width:420px){

.dr1055popupalerts1-card{

padding:18px;

}

.dr1055popupalerts1 h2{

font-size:20px;

}

.dr1055popupalerts1 p{

font-size:13px;

}

.dr1055popupalerts1-icon{

width:56px;
height:56px;

font-size:28px;

}

}