*
{
    margin:0;
    padding:0;
    outline:0!important;
    list-style-type:none!important;
    box-sizing:border-box;
}
html
{
    scroll-behavior:smooth;
}
body,html
{
    font-family:'Roboto',sans-serif;
    font-size:16px;
    line-height:1.6;
    background:#fff;
    color:#9e9e9e;
    overflow-x:hidden;
}
.glowing
{
    position:absolute;
    top:50%;
    width:100%;
    height:auto;
    z-index:999;
    animation:colorChange 11s linear infinite;
}
@keyframes colorChange
{
    0%
    {
        filter:hue-rotate(0deg);
        transform:rotate(0deg);
    }
    100%
    {
        filter:hue-rotate(360deg);
        transform:rotate(360deg);
    }
}
.glowing span
{
    position:absolute;
    top:calc(80px* var(--i));
    left:calc(80px* var(--i));
    bottom:calc(80px* var(--i));
    right:calc(80px* var(--i));
}
.glowing span::before
{
    position:absolute;
    content:"";
    top:50%;
    left:-8px;
    width:2px;
    height:2px;
    background:#f00;
    border-radius:50%;
}
.glowing span:nth-child(3n+1)::before
{
    background:rgba(134,255,0,1);
    box-shadow:0 0 20px rgba(134,255,0,1),
        0 0 40px rgba(134,255,0,1),
        0 0 60px rgba(134,255,0,1),
        0 0 80px rgba(134,255,0,1),
        0 0 0 8px rgba(134,255,0,1);
}
.glowing span:nth-child(3n+2)::before
{
    background:rgba(255,214,0,1);
    box-shadow:0 0 20px rgba(134,255,0,1),
        0 0 40px rgba(255,214,0,1),
        0 0 60px rgba(255,214,0,1),
        0 0 80px rgba(255,214,0,1),
        0 0 0 8px rgba(255,214,0,1);
}
.glowing span:nth-child(3n+3)::before
{
    background:rgba(0,226,255,1);
    box-shadow:0 0 20px rgba(0,226,255,1),
        0 0 40px rgba(0,226,255,1),
        0 0 60px rgba(0,226,255,1),
        0 0 80px rgba(0,226,255,1),
        0 0 0 8px rgba(0,226,255,1);
}
.glowing span:nth-child(3n+4)::before
{
    background:rgba(0, 102, 255,1);
    box-shadow:0 0 20px rgba(0, 102, 255,1),
        0 0 40px rgba(0, 102, 255,1),
        0 0 60px rgba(0, 102, 255,1),
        0 0 80px rgba(0, 102, 255,1),
        0 0 0 8px rgba(0, 102, 255,1);
}
.glowing span:nth-child(3n+5)::before
{
    background:rgba(255, 102, 255,1);
    box-shadow:0 0 20px rgba(255, 102, 255,1),
        0 0 40px rgba(255, 102, 255,1),
        0 0 60px rgba(255, 102, 255,1),
        0 0 80px rgba(255, 102, 255,1),
        0 0 0 8px rgba(255, 102, 255,1);
}
.glowing span:nth-child(3n+6)::before
{
    background:rgba(255, 51, 153,1);
    box-shadow:0 0 20px rgba(255, 51, 153,1),
        0 0 40px rgba(255, 51, 153,1),
        0 0 60px rgba(255, 51, 153,1),
        0 0 80px rgba(255, 51, 153,1),
        0 0 0 8px rgba(255, 51, 153,1);
}
.glowing span:nth-child(3n+7)::before
{
    background:rgba(204, 0, 255,1);
    box-shadow:0 0 20px rgba(204, 0, 255,1),
        0 0 40px rgba(204, 0, 255,1),
        0 0 60px rgba(204, 0, 255,1),
        0 0 80px rgba(204, 0, 255,1),
        0 0 0 8px rgba(204, 0, 255,1);
}
.glowing span:nth-child(3n+1)
{
    animation:animate 10s alternate infinite;
}
.glowing span:nth-child(3n+2)
{
    animation:animate-2 5s alternate infinite
}
.glowing span:nth-child(3n+3)
{
    animation:animate-3 7s alternate infinite;
}
.glowing span:nth-child(3n+4)
{
    animation:animate-4 6s alternate infinite;
}
.glowing span:nth-child(3n+5)
{
    animation:animate-5 8s alternate infinite;
}
.glowing span:nth-child(3n+6)
{
    animation:animate-6 4s alternate infinite;
}
.glowing span:nth-child(3n+7)
{
    animation:animate-7 3s alternate infinite;
}
@keyframes animate
{
    0%
    {
        transform:rotate(0deg);
    }
    100%
    {
        transform:rotate(360deg);
    }
}
@keyframes animate-2
{
    0%
    {
        transform:rotate(360deg);
    }
    100%
    {
        transform:rotate(0deg);
    }
}
@keyframes animate-3
{
    0%
    {
        transform:rotate(360deg);
    }
    100%
    {
        transform:rotate(0deg);
    }
}
@keyframes animate-4
{
    0%
    {
        transform:rotate(0deg);
    }
    100%
    {
        transform:rotate(50deg);
    }
}
@keyframes animate-5
{
    0%
    {
        transform:rotate(360deg);
    }
    100%
    {
        transform:rotate(0deg);
    }
}
@keyframes animate-6
{
    0%
    {
        transform:rotate(360deg);
    }
    100%
    {
        transform:rotate(0deg);
    }
}
@keyframes animate-7
{
    0%
    {
        transform:rotate(360deg);
    }
    100%
    {
        transform:rotate(0deg);
    }
}
@keyframes animate-8
{
    0%
    {
        transform:rotate(360deg);
    }
    100%
    {
        transform:rotate(0deg);
    }
}
@keyframes animate-9
{
    0%
    {
        transform:rotate(360deg);
    }
    100%
    {
        transform:rotate(0deg);
    }
}
@keyframes animate-10
{
    0%
    {
        transform:rotate(360deg);
    }
    100%
    {
        transform:rotate(0deg);
    }
}
@keyframes animate-11
{
    0%
    {
        transform:rotate(360deg);
    }
    100%
    {
        transform:rotate(0deg);
    }
}
.navbar
{
    background:#fff!important;
    box-shadow:0px 0px 4px 0px rgba(0,0,0,0.5);
}
.navbar-brand
{
    margin-left:50px;
    font-size:25px;
    font-weight:bold;
    color:orangered!important;
}
.navbar-nav
{
    margin-left:300px;
}
.navbar-nav li
{
    margin-left:20px;
}
.navbar-nav li a
{
    font-size:15px;
    font-weight:bold;
    color:orangered!important;
    text-transform:uppercase;
}
.navbar-nav li a:hover
{
    color:#d93e04!important;
}
.navbar .btn
{
    margin-right:50px;
    font-size:14px;
    text-transform:uppercase;
    border:1px orangered!important;
    background:orangered!important;
    z-index:999;
}
.navbar .btn:hover
{
    background:#d93e04!important;
}
#animation
{
    position:absolute;
    right:-5%;
    width:300px;
    height:300px;
    background:linear-gradient(to right, #eb5a6b, #f79686);
    border-radius:50%;
    z-index:1;
}
.information
{
    width:100%;
    height:auto;
    padding:50px;
    margin-top:8%;
    background-image:url('../images/background_image.png');
}
.information .information-details h2
{
    font-size:35px;
    color:orangered;
    font-weight:bold;
}
.information .information-details p
{
    font-size:18px;
    color:#000;
}
.information .information-details a.btn
{
    background:orangered;
    border:1px solid orangered;
    box-shadow:0px 0px 4px 0px orangered!important;
}
.information .information-details a.btn:hover
{
    background:#d93e04!important;
    border:1px solid #d93e04!important;
}
.information .information-image img
{
    width:500px;
    margin-top:-40px;
}
.about
{
    width:100%;
    height:auto;
    padding:50px;
    margin-top:8%;
}
.about .about-information h3
{
    font-size:30px;
    text-transform:uppercase;
    color:orangered;
}
.about .about-information h4
{
    font-size:22px;
    color:#000;
}
.about .about-information p
{
    color:#666;
}
.about .about-information a.btn
{
    background:orangered;
    border:1px solid orangered;
    box-shadow:0px 0px 4px 0px orangered!important;
    text-transform:uppercase;
}
.about #animation1
{
    position:absolute;
    left:-9%;
    bottom:-35%;
    width:200px;
    height:200px;
    background:linear-gradient(to right, #4776e6, #8e54e9);
    border-radius:50%;
    z-index:1;
    animation:colorChange 11s linear infinite;
}
.features
{
    width:100%;
    height:auto;
    padding:50px;
    margin-top:8%;
}
.features .features-heading
{
    font-size:28px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    color:orangered;
}
.features .features-content
{
    font-size:18px;
    font-weight:bold;
    text-align:center;
    color:#000;
}
.feature-box
{
    padding-top:20px;
}
.feature:hover
{
    background:linear-gradient(to right, #eb5a6b, #f79686);
    color:#fff;
    transition:all 0.4s ease;
}
.feature
{
    width:100%;
    height:auto;
    padding:15px;
    margin:5px;
    background:#fff;
    color:#000;
    box-shadow:0px 0px 4px 0px orangered!important;
}
.features #animation2
{
    position:absolute;
    right:-9%;
    bottom:-130%;
    width:200px;
    height:200px;
    background:linear-gradient(to right, #da22ff, #9733ee);
    border-radius:50%;
    z-index:1;
    animation:colorChange 11s linear infinite;
}
.services
{
    width:100%;
    height:auto;
    padding:50px;
    margin-top:8%;
}
.services .services-heading
{
    font-size:28px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    color:orangered;
}
.services .services-content
{
    font-size:18px;
    font-weight:bold;
    padding-bottom:20px;
    text-align:center;
    color:#000;
}
.services .service-box
{
    width:100%;
    height:auto;
    padding:15px;
    margin:5px;
    background:#fff;
    text-align:center;
    color:#000;
    box-shadow:0px 0px 4px 0px orangered!important;
    transition:all 0.4s ease;
}
.services .service-box:hover
{
    background:linear-gradient(to right, #eb5a6b, #f79686);
}
.services .service-box:hover 
{
    transition:all 0.4s ease;
    color:#fff;
}
.services .service-box:hover a
{
    border:1px solid #fff;
    color:#fff;
}
.services .service-box i
{
    font-size:30px;
    padding-top:15px;
    padding-bottom:15px;
}
.services .service-box h4
{
    font-size:25px;
    font-weight:bold;
    padding-top:15px;
    padding-bottom:15px;
    text-transform:uppercase;
}
.services .service-box p
{
    font-size:16px;
    padding-top:15px;
    padding-bottom:15px;
}
.services .service-box a
{
    padding-top:15px;
    padding-bottom:15px;
    border:1px solid orangered;
    border-radius:20px;
    display:inline-block;
    padding:10px;
    text-decoration:none;
    color:#000;
}
.services #animation3
{
    position:absolute;
    left:-9%;
    bottom:-260%;
    width:200px;
    height:200px;
    background:linear-gradient(to right, #5433ff, #20bdff, #a5fecb);
    border-radius:50%;
    z-index:1;
    animation:colorChange 11s linear infinite;
}
.price-section
{
    width:100%;
    height:auto;
    padding:50px;
    margin-top:8%;
}
.price-section .price-heading
{
    font-size:28px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    color:orangered;
}
.price-section .price-content
{
    font-size:18px;
    font-weight:bold;
    padding-bottom:20px;
    text-align:center;
    color:#000;
}
.price-section .price-box
{
    width:100%;
    height:auto;
    padding:15px;
    margin:5px;
    background:#fff;
    text-align:center;
    color:#000;
    box-shadow:0px 0px 4px 0px orangered!important;
    transition:all 0.4s ease;
}
.price-section .price-box p
{
    font-size:22px;
    padding-top:8px;
    padding-bottom:8px;
}
.price-section .price-box h4
{
    font-size:28px;
    padding-top:8px;
    padding-bottom:8px;
}
.price-section .price-box i
{
    font-size:25px;
    padding-top:8px;
    padding-bottom:8px;
}
.price-section .price-box li
{
    font-size:18px;
    padding-top:8px;
    padding-bottom:8px;
}
.price-section .price-box a
{
    padding-top:15px;
    padding-bottom:15px;
    border:1px solid orangered;
    border-radius:20px;
    display:inline-block;
    padding:10px;
    text-decoration:none;
    color:#000;
}
.price-section .price-box:hover
{
    background:linear-gradient(to right, #eb5a6b, #f79686);
    color:#fff;
    transition:all 0.4s ease;
}
.price-section .price-box:hover a
{
    border:1px solid #fff;
    color:#fff;
}
.price-section #animation4
{
    position:absolute;
    right:-9%;
    bottom:-390%;
    width:200px;
    height:200px;
    background:linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
    border-radius:50%;
    z-index:1;
    animation:colorChange 11s linear infinite;
}
.question-section
{
    width:100%;
    height:auto;
    padding:50px;
    margin-top:8%;
}
.question-section .question-heading
{
    font-size:28px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    color:orangered;
}
.question-section .question-content
{
    font-size:18px;
    font-weight:bold;
    padding-bottom:20px;
    text-align:center;
    color:#000;
}
.question-section .question-box
{
    width:100%;
    height:auto;
    margin:5px;
    background:#fff;
    text-align:center;
    color:#000;
    box-shadow:0px 0px 4px 0px orangered!important;
    transition:all 0.4s ease;
}
.question-section .question-box .card
{
    background:linear-gradient(to right, #eb5a6b, #f79686);
    border:none;
}
.question-section .question-box .btn-link
{
    color:#fff;
    text-decoration:none;
}
.question-section #animation5
{
    position:absolute;
    left:-9%;
    bottom:-480%;
    width:200px;
    height:200px;
    background:linear-gradient(to right, #bc4e9c, #f80759);
    border-radius:50%;
    z-index:1;
    animation:colorChange 11s linear infinite;
}
.portfolio
{
    width:100%;
    height:auto;
    padding:50px;
    margin-top:8%;
}
.portfolio .portfolio-heading
{
    font-size:28px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    color:orangered;
}
.portfolio .portfolio-content
{
    font-size:18px;
    font-weight:bold;
    padding-bottom:20px;
    text-align:center;
    color:#000;
}
.portfolio .item
{
    position:relative;
    margin:5px;
}
.portfolio .item:hover
{
    box-shadow:-18px 3px 109px -65px rgba(0,0,0,0.75);
    transition:all 0.4s ease;
}
.portfolio .item span
{
    position:absolute;
    top:40%;
    left:45%;
    font-size:40px;
    color:#fff;
    cursor:pointer;
    opacity:0;
}
.portfolio .item:hover span
{
    opacity:1;
    transition:all 0.4s ease;
}
.portfolio .item::before
{
    position:absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#e6764c;
    opacity:0;
}
.portfolio .item:hover::before
{
    opacity:0.5;
    transition:all 0.4s ease;
}
.portfolio #animation6
{
    position:absolute;
    right:-9%;
    bottom:-570%;
    width:200px;
    height:200px;
    background:linear-gradient(to right, #5433ff, #20bdff, #a5fecb);
    border-radius:50%;
    z-index:1;
    animation:colorChange 11s linear infinite;
}
.testimonials
{
    width:100%;
    height:auto;
    padding:50px;
    margin-top:8%;
}
.testimonials .testimonial-heading
{
    font-size:28px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    color:orangered;
}
.testimonials .testimonial-content
{
    font-size:18px;
    font-weight:bold;
    padding-bottom:20px;
    text-align:center;
    color:#000;
}
.testimonials #animation7
{
    position:absolute;
    left:-9%;
    bottom:-680%;
    width:200px;
    height:200px;
    background:linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
    border-radius:50%;
    z-index:1;
    animation:colorChange 11s linear infinite;
}
.swiper-container
{
    width:100%;
    padding-top:50px;
    padding-bottom:50px;
}
.swiper-slide
{
    background-position:center;
    background-size:cover;
    width:300px;
    color:#fff;
    box-shadow:0 15px 50px rgba(0,0,0,0.2);
    filter:blur(4px);
    border-radius:20px!important;
}
.swiper-slide-active
{
    filter:blur(0px);
}
.testimonials .testimonial-box
{
    position:relative;
    width:100%;
    padding:40px;
    background:linear-gradient(to right, #eb5a6b, #f79686);
    padding-top:90px;
}
.testimonials .testimonial-box i
{
    position:absolute;
    color:#fff;
    top:20px;
    right:30px;
}
.testimonials .testimonial-box .details
{
    display:flex;
    align-items:center;
    margin-top:20px;
}
.testimonials .testimonial-box .details .img-box
{
    position:relative;
    width:60px;
    height:60px;
    border-radius:50%;
    overflow:hidden;
    margin-right:10px;
}
.testimonials .testimonial-box .details .img-box img
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.testimonials .testimonial-box .details h3
{
    font-size:16px;
    font-weight:400;
    letter-spacing:1px;
    color:#fff;
    line-height:1.1em;
}
.testimonials .testimonial-box .details h3 span
{
    font-size:12px;
    color:#666;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right
{
    background-image:none!important;
}
.contact-page
{
    width:100%;
    height:auto;
    padding:50px;
    margin-top:8%;
}
.contact-page .contact-page-heading
{
    font-size:28px;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    color:orangered;
}
.contact-page .contact-page-content
{
    font-size:18px;
    font-weight:bold;
    padding-bottom:20px;
    text-align:center;
    color:#000;
}
.contact-page .card
{
    background:linear-gradient(to right, #1488cc, #2b32b2);
}
.contact-page #animation8
{
    position:absolute;
    right:-9%;
    bottom:-800%;
    width:200px;
    height:200px;
    background: linear-gradient(to right, #00b4db, #0083b0);
    border-radius:50%;
    z-index:1;
    animation:colorChange 11s linear infinite;
}
.footer
{
    display:flex;
    flex-flow:row wrap;
    padding:50px;
    background:#011c39;
    color:#fff;
}
.footer>*
{
    flex:100%;
}
.footer-left
{
    margin-right:1.25em;
    margin-bottom:2em;
}
.footer h2
{
    font-size:17px;
    font-weight:600;
}
.footer ul
{
    list-style-type:none;
    padding-left:0;
}
.footer li
{
    line-height:2em;
}
.footer a
{
    text-decoration:none;
}
.footer-right
{
    display:flex;flex-flow:row wrap;
}
.footer-right>*
{
    flex:1 50%;
    margin-right:1.25em;
}
.box a
{
    color:#999;
}
.footer-left p
{
    padding-right:20%;
    color:#999;
}
.socials a
{
    background:#364a62;
    width:40px;
    height:40px;
    display:inline-block;
    margin-right:10px;
}
.socials a i
{
    color:#e7f2d4;
    margin:10px 12px;
    font-size:20px;
}
.information .cube
{
    position:absolute;
    top:80vh;
    left:50vw;
    width:10px;
    height:10px;
    border:1px solid rgba(0,226,255,1);
    transform-origin:top left;
    transform:scale(0) rotate(0deg) translate(-50%,-50%);
    animation:cube 12s ease-in forwards infinite;
    z-index:999;
}
.information .cube:nth-child(2n)
{
    border-color:rgba(255, 102, 255,1);
}
.information .cube:nth-child(2)
{
    animation-delay:2s;
    left:25vw;
    top:40vh;
}
.information .cube:nth-child(3)
{
    animation-delay:4s;
    left:75vw;
    top:50vh;
}
.information .cube:nth-child(4)
{
    animation-delay:6s;
    left:10vw;
    top:85vh;
}
.information .cube:nth-child(5)
{
    animation-delay:8s;
    left:50vw;
    top:85vh;
}
.information .cube:nth-child(6)
{
    animation-delay:10s;
    left:50vw;
    top:10vh;
}
@keyframes cube
{
    from
    {
        transform:scale(0) rotate(0deg) translate(-50%,-50%);
        filter:hue-rotate(0deg);
        opacity:1;
    }
    to
    {
        transform:scale(20) rotate(960deg) translate(-50%,-50%);
        filter:hue-rotate(960deg);
        opacity:0;
    }
}
@media(min-width:600px)
{
    .footer-right>*
    {
        flex:1;
    }
    .footer-left
    {
        flex:1 0px;
    }
    .footer-right
    {
        flex:2 0px;
    }
}

@media(max-width:767px)
{
    .navbar-brand
    {
        margin-left:0px;
    }
    .navbar-nav
    {
        margin-left:0px;
    }
    #animation
    {
        right:-20px;
        top:-15px;
        width:60px;
        height:60px;
        animation:colorChange 11s linear infinite;
    }
    .glowing
    {
        width:100%;
        left:-80%;
        animation:colorChange 4s linear infinite;
    }
    .information .information-details h2
    {
        font-size:22px;
    }
    .information .information-details p
    {
        font-size:16px;
    }
    .information .information-image img
    {
        width:100%;
        margin-top:50px;
    }
    @keyframes cube
{
    from
    {
        transform:scale(0) rotate(0deg) translate(-50%,-50%);
        filter:hue-rotate(0deg);
        opacity:1;
    }
    to
    {
        transform:scale(8) rotate(960deg) translate(-50%,-50%);
        filter:hue-rotate(960deg);
        opacity:0;
    }
}
    .about .about-information h3
    {
        font-size:22px;
    }
    .about .about-information h4
    {
        font-size:16px;
    }
    .about .about-information p
    {
        font-size:14px;
    }
    .about .about-image img
    {
        margin-top:50px;
    }
    .about #animation1
    {
        display:none;
    }
    .features .features-heading
    {
        font-size:22px;
    }
    .features .features-content
    {
        font-size:16px;
    }
    .features #animation2
    {
        display:none;
    }
    .services .services-heading
    {
        font-size:22px;
    }
    .services .services-content
    {
        font-size:16px;
    }
    .services #animation3
    {
        display:none;
    }
    .price-section .price-heading
    {
        font-size:22px;
    }
    .price-section .price-content
    {
        font-size:16px;
    }
    .price-section #animation4
    {
        display:none;
    }
    .question-section .question-heading
    {
        font-size:22px;
    }
    .question-section .question-content
    {
        font-size:16px;
    }
    .question-section #animation5
    {
        display:none;
    }
    .portfolio .portfolio-heading
    {
        font-size:22px;
    }
    .portfolio .portfolio-content
    {
        font-size:16px;
    }
    .portfolio #animation6
    {
        display:none;
    }
    .testimonials .testimonial-heading
    {
        font-size:22px;
    }
    .testimonials .testimonial-content
    {
        font-size:16px;
    }
    .testimonials #animation7
    {display:none;
    }
    .contact-page .contact-page-heading
    {
        font-size:22px;
    }
    .contact-page .contact-page-content
    {
        font-size:16px;
    }
    .contact-page .card .card-body h4
    {
        font-size:22px;
    }
    .contact-page .card .card-body p
    {
        font-size:13px;
    }
    .contact-page #animation8
    {
        display:none;
    }

}

/*whatsapp css*/
.chat-float
{ 
    position:fixed; 
    width:60px; 
    height:60px; 
    bottom:30px; 
    right:25px; 
    background-color:#25d366; 
    color:#FFF; 
    border-radius:50px; 
    text-align:center; 
    font-size:30px; 
    box-shadow: 2px 2px 3px #999; 
    z-index:100; 
}
.chat-float:hover{
      color: #25d366;
      background-color: #fff;
}
.my-float
{ 
    margin-top:16px; 
}