/*
Theme Name: sonicglow
*/
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
      font-family: 'Poppins', sans-serif;   
      font-weight: 300;
}

h1, h2, h3, h4, h5 {
      font-family: 'Playfair Display', serif;
}

.flashing-text {
    animation: flash .5s infinite alternate;
}

@keyframes flash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: .05;
    }
}

.marquee-column {
    white-space: nowrap;
    overflow: hidden;
}

.marquee-column p {
    animation: marquee 20s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.smaller {
      font-size: 12px;
}
a {
      text-decoration: underline;
      transition: .2s;
}
a:hover {
      text-decoration: none;  
      transition: .2s;
}

.lightBlue {
      background: #d2faf0;
}

.blue {
      color: #3c3cf9;
}

.limited {
      border: dashed 5px #fff;
      background-color: #046dbc;
}

.limited h1 {
      font-family: 'Poppins', sans-serif;  
      font-weight: 600;
}

.limitedBtn {
      color: rgba(9, 9, 121, 1);
      background-color: #fff;
      font-weight: 600;
}
.limitedBtn:hover {
      color: #333;
      background-color: #eee;
      font-weight: 600;
}

.commentHeader:after {
    content: "";
    width: 100px;
    height: 5px;
    display: block;
    background: #ffaeae;
    margin-top: 10px;
}

.commentImg {
    width: 600px;
    height: auto;
    max-width: 100%;
}

.btnLightBlue {
    background-color: #8fcced;
    color: #fff;
    font-weight: 600;
}
footer {
    padding-bottom: 100px!important;
}
footer a {
    font-size: 12px;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    margin-left: 10px;
    margin-right: 10px;
}
footer a:hover {    
    color: #fff;
    text-decoration: none;
    opacity: .7;
}

.btnFixed {
    background: #0a58ca;
}


.fixed-div {   
    background-color: rgba(0,0,0,.5);
    color: white;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 9999!important;
}

.sideBox {
    background-color: #f6f6f6;
    
}
.sideBox p {
    color: #444;
}


.gray {
    background: #eee;
}

.modal {
    background-color: rgba(0,0,0,.75);
    color: #666;
    padding-bottom: 50px;
}

@media screen and (min-width:1400px) {
    .modal-xl {
        --bs-modal-width: 80vw;
    }
}

footer a:hover {
    cursor: pointer;
}