/* ----------------------------------

Template Name: Storm
Author: validtheme
Version: 1.0

-------------------------------------

Table of contents
        
    01. Google font
    02. Reset
    03. Typography
    04. Background color
    05. Custom
    06. Button
    07. Border
    08. Aside style
    09. Video
    10. Background image
    11. Icon
    12. Magnific popup
    13. Header
    14. Page title
    15. Swiper carousel
    16. Slider and parallax typography
    17. Portfolio
    18. Elements
    19. Blog
    20. Footer
    21. Home Page
    22. Services Page
    23. About Page
    24. Projects Page
    25. Pricing Page
    26. PHP Contact Form
    27. Others

*/


/*
** General Styles for HTML tags
*/

    
body {
    font-family: 'helvetica';
}


@font-face {
    font-family: 'Helvetica-Bold';
    src: url('../font/Helvetica-Bold.ttf');
}

@font-face {
    font-family: 'helvetica';
    src: url('../font/helvetica-light-587ebe5a59211.ttf');
}

@font-face {
    font-family: 'helvetica';
    src: url('../font/Helvetica.ttf')
}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1250px;
}

a {
    font-family: 'helvetica';
}
a:hover {
    color: #e63520 !important;
}
p {
    font-family: 'helvetica-light';
}

h1, h2, h5, h6 {
    font-family: 'Helvetica-Bold';
}

h3, h4{font-family: 'helvetica';}
h2 {
    color: #282929;
    font-size: 70px;
    line-height: 85px;
    font-style: normal;
    font-weight: 700;
    text-transform: uppercase;
}

p {
    color: #585858;
    font-size: 19px;
    line-height: 27px;
}

.logo {
    width: 30%;
}

.menu-btn img {
    width:70px;
}

#sticky-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #1f1f1f;
    color: #fff;
    padding: 20px 0px;
    text-align: center;
    transition: 0.5s;
    z-index: 1000;
}

    #sticky-header.sticky {
        position: fixed;
        top: 0;
        left: 0;
        opacity: 1.5;
        background-color: #1f1f1f;
    }

    #sticky-header nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

        #sticky-header nav ul li {
            margin-right: 20px;
        }

    #sticky-header nav a {
        color: #fff;
        text-decoration: none;
    }

.offcanvas.show:not(.hiding), .offcanvas.showing {
    transform: none;
    z-index: 99999; width:650px;
}

.offcanvas-body {
    background-color: #000;
}

    .offcanvas-body ul {
        margin: 0;
        text-align: left;
    }

        .offcanvas-body ul li {
            list-style: none;
            padding-bottom: 10px;
        }

            .offcanvas-body ul li a {
                text-decoration: none;
    color: #fff;
    font-size: 4rem;
    text-transform: uppercase;
            }

.offcanvas-header {
    background-color: #000;
}

    .offcanvas-header .btn-close {
        background-color: #fff;
        border-radius: 100%;
        opacity: 1;
        width: 2em;
        height: 2em;
    }


/*    .banner-sec .carousel-caption {
        right: 15%;
        top: 37%;
        left:13%;
        text-align:initial;
    }
.banner-sec h2 {
    color: #fff !important;
}
.banner-sec p {
    color: #fff !important;
}*/



.a-section {}
.a-section-marquee-box {
    height: 180px;
    display: flex;
    align-items: center;
    overflow: hidden;}
.a-section-marquee-box h2 {
    white-space: nowrap;
    text-transform: uppercase;
    font-size: 5em;
    font-weight: 100;
    flex-shrink: 0;
    padding: 0 10px;
    width: max-content;
    display: flex;
    align-items: center;
    transform: translateX(0);
    animation: a-text-scroll 35s linear infinite;
    -webkit-text-stroke: 2px #555;
    text-stroke: 2px #000;
    color: #fff;}
@keyframes a-text-scroll {
    0% { transform: translate3d(-100%, 0, 0); }
    100% { transform: translate3d(0%, 0, 0); }
}








.about {
    padding: 70px 0px;
}

    .about p {
        padding: 30px 0px;
        margin-bottom: 0px;
    }

    .about .view-all a {
        width: 160px;
        height: 160px;
        line-height: 160px;
    }





/*.number-count {
    background: #282929;
    padding: 100px 0px;
}

.counter-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.counter-box {
    width: 100%;
}

    .counter-box h2 {
        font-size: 80px;
        text-align: center;
        font-weight: bold;
        margin: 0;
        color: #fff;
    }

    .counter-box p {
        text-align: center;
        font-size: 21px;
        font-weight: bold;
        color: #fff;
    }
*/
.scroll-section {
    background: #282929;
    padding: 100px 0px;
    text-align:center;
}
    .scroll-section span {
        font-size: 80px;
        font-weight: bold;
        color: #fff;
    }
    .scroll-section p {
        text-align: center;
        font-size: 21px;
        font-weight: bold;
        color: #fff;
    }
.number {
    color: #fff;
    display: inline-block;
    font-size: 90px;
    text-align: center;
    font-weight: bold;
}







figure.snip0016 {
    color: #fff;
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #000000;
    text-align: center; margin:0;
}

    figure.snip0016 * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    figure.snip0016 img {
        max-width: 100%;
        opacity: 1;
        width: 100%;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }

    figure.snip0016 figcaption {
        position: absolute;
        top: 30%;
        left: 0;
        padding: 30px 3em;
        width: 100%;
        height: 100%;
    }
    figure.snip0016 h5 {
        margin: 0 0 5px;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
        font-weight: 200;
        -webkit-transform: translate3d(0%, 30%, 0);
        transform: translate3d(0%, 30%, 0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s; font-size:18px;
    }
        figure.snip0016 h5::after {
            content: '';
            border: 3px solid white;
            display: block;
            width: 30px;
            margin: 0 auto;
            margin-top: 8px;
        }
    figure.snip0016 p {
        margin: 0 0 5px;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, -webkit-transform 0.35s, -moz-transform 0.35s, -o-transform 0.35s, transform 0.35s;
        font-weight: 200;
        -webkit-transform: translate3d(0%, 30%, 0);
        transform: translate3d(0%, 30%, 0);
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
        font-size: 16px;
        line-height: 18px;
        margin-top: 20px;
    }
    figure.snip0016:hover img {
        opacity: 0.3;
    }
    figure.snip0016:hover figcaption h5 {
        opacity: 0.9;
        -webkit-transform: translate3d(0%, 0%, 0);
        transform: translate3d(0%, 0%, 0);
        -webkit-transition-delay: 0.6s;
        transition-delay: 0.6s;
        color: #fff;
    }
    figure.snip0016:hover figcaption p {
        opacity: 0.9;
        -webkit-transform: translate3d(0%, 0%, 0);
        transform: translate3d(0%, 0%, 0);
        -webkit-transition-delay: 0.6s;
        transition-delay: 0.6s;
        color: #fff;
    }
.service {
    padding: 80px 0px;
}
.service .col-sm-4{padding:0;}
.service h2 {
    margin-bottom: 60px;
}

.single-img {
    position: relative;
    padding: 15px;
}

.view-all a {
    display: block;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    height: 220px;
    width: 220px;
    border: 1px solid #000;
    border-radius: 100%;
    margin: 0 auto;
    line-height: 220px;
    text-align: center;
    transition: 0.5s;
}
.view-all a:hover {
    background-color: #000;
    color: #fff !important;
}

/***.video-sec {
    background: url(../images/image-gall.jpg) no-repeat center center;
    color: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    height: 700px;
    background-attachment: fixed;
    position: relative;
}

.video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.play-img {
    width: 10%;
}

.modal-dialog {
    max-width: 800px;
}

.modal-body {
    padding: 0;
}

iframe {
    border: 0;
    width: 100%;
}**/

.content {
    height: 100vh;
    background-color: lightgray;
    display: flex;
    justify-content: center;
    align-items: center;
}
#video-section {
    background-color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}



.brand {
    padding: 70px 0px 0px;
}

    .brand h2 {
        margin-bottom: 60px;
    }

    .brand img {
        border: 1px solid #000;
        padding: 25px;
        margin-bottom: 25px;
    }

/*@keyframes ticker-kf {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

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

.ticker-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    display: flex;
}

.img-ticker, .img-ticker2 {
    display: flex;
    justify-content: space-between;
    flex: none;
    animation: ticker-kf 10s linear infinite;
}

.img-ticker2 {
    animation: ticker-kf2 10s linear infinite;
}

.tickerlogo {
    width: 8rem;
    flex: none;
    margin: 1rem;
    align-self: flex-start;
    max-width: 100%;
    height: auto;
    filter: grayscale(100%);
}*/

.work {
    padding: 70px 0px
}

.grid {
    position: relative;
    list-style: none;
    text-align: center;
}




.slick-slide{
    border: none !important;
}
.case-study {
    padding: 20px 0px 20px;
}
.case-study img{width: 100%;}
/* Common style */
.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    width: 100%;
    text-align: center;
    cursor: pointer;
    margin: 0;
}

    .grid figure img {
        position: relative;
        display: block;
        min-height: 100%;
        max-width: 100%;
        /**opacity: 0.8;**/
    }

    .grid figure figcaption {
        padding: 2em;
        color: #fff;
        text-transform: uppercase;
        font-size: 1.25em;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

        .grid figure figcaption::before,
        .grid figure figcaption::after {
            pointer-events: none;
        }

        .grid figure figcaption,
        .grid figure figcaption > a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

/*---------------*/
/***** Bubba *****/
/*---------------*/
figure.effect-bubba {
    /****background: #000000;**/
}

    figure.effect-bubba img {
        /***opacity: 0.7;**/
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s;
    }

    figure.effect-bubba:hover img {
        /***opacity: 0.4;**/
    }

    figure.effect-bubba figcaption::before,
    figure.effect-bubba figcaption::after {
        position: absolute;
        top: 30px;
        right: 30px;
        bottom: 30px;
        left: 30px;
        content: '';
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
    }

    figure.effect-bubba figcaption::before {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
        -webkit-transform: scale(0,1);
        transform: scale(0,1);
    }

    figure.effect-bubba figcaption::after {
        border-right: 1px solid #fff;
        border-left: 1px solid #fff;
        -webkit-transform: scale(1,0);
        transform: scale(1,0);
    }

    figure.effect-bubba h4 {
        padding-top: 30%;
        -webkit-transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        -webkit-transform: translate3d(0,-20px,0);
        transform: translate3d(0,30px,0);
    }

    figure.effect-bubba p {
        padding: 20px 2.5em;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        -webkit-transform: translate3d(0,20px,0);
        transform: translate3d(0,20px,0);
        color: #fff;
        font-size: 1rem;
    }

}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-bubba:hover h4,
figure.effect-bubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}





.our-blog {padding: 70px 0px 0px;}
.our-blog p {font-size: 18px;}
.our-blog hr {width: 60%; border-top: 2px solid black; opacity: 1;}
.our-blog a{text-decoration: none; color: #000;}





footer {padding: 40px 0px 0px;}
footer ul {  margin: 0; padding: 0; padding-bottom: 20px;}
footer ul li {list-style: none; display: inline-block;}        
footer ul li a {
    font-size: 15px;
    font-weight: bold;
    padding: .5rem 8px !important;
    color: #000 !important;
    text-decoration: none;}
footer hr {
        width: 60%;
        border-top: 2px solid black;
        opacity: 1;
        margin: 0 auto;}
footer p {
        margin-top: 20px;
        line-height: 25px;
        font-style: normal;
        font-weight: 400;}
.footer_top {padding-top: 150px; position: relative;}
.footer_top:after {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        border: 1px solid #000;
        width: 700px;
        height: 340px;
        border-radius: 50em 50em 0 0;
        border-bottom: none;
        z-index: -1;}




/*************about-page*********/
.about-page {padding: 80px 0px 0px;}
.about-page h2 {font-size: 3.5rem; padding: 30px 0px 0px;}
.why-us .col-sm-3{padding:0;}
.why-us figure.snip0016 figcaption {padding: 20px;}

/*********contact-us************/
.contact {padding: 80px 0px;}
.contact h3 {
        font-size: 2.3rem;
        font-weight: bold;
        margin-bottom: 30px;}
.contact input {
        border: none;
        border-radius: 0;
        border-bottom: 2px solid #000;
        margin-bottom: 20px;
        padding: 4px 0px;
        font-weight: 600;}
.contact textarea {
        border: none;
        border-radius: 0;
        border-bottom: 2px solid #000;
        margin-bottom: 20px;
        padding: 4px 0px;
        font-weight: 600;}
.contact select {
        border: none;
        border-radius: 0;
        border-bottom: 2px solid #000;
        margin-bottom: 20px;
        padding: 4px 0px;
        font-weight: 600;
         color: #757575;
    }
.contact .send-mail {
        background-color: #000;
        color: #fff;
        padding: 14px 50px 14px 20px;
        text-decoration: none;
        transition: 0.5s;
        margin-top: 30px;
        display: inline-block;}
.contact .send-mail:hover {opacity: 0.6;}
.contact .col-sm-4 {margin-bottom: 25px; }
.box {border: 1px solid #e0e0e0; padding: 20px; height: 100%;}
.box h5 {font-weight: bold;}




    /***********service-page***********/
.ser-vice {padding: 90px 0px 0px;}
.ser-vice .row {margin-bottom: 5rem;}

    
     /***********service-page***********/
   .case-study p{font-size: 18px;}
   .case-study h5{border-bottom: 2px solid #000;
    width: 70%;
    padding-bottom: 20px;
    margin-bottom: 20px;}
   .case-study h5 a{text-decoration: none; color: #000;}
   .case-study h6{font-size: 1.25rem; padding-bottom: 10px;} 
   .case-study .read-more{color: #000; text-decoration: none;}
   .case-study ul{margin-bottom:2rem; padding: 0;}
   .case-study ul li{list-style: none;     padding: 0px 0px 8px 0px;}


   /***********blog***********/
   .blog h4{    font-size: 1.4rem;
    width: 70%;
    font-weight: 600;}
    .blog a{color: #000; text-decoration: none;}
   .blog p a{font-size: 14px; text-decoration: none; color: #000; }
   .blog-detail h4{margin-bottom: 15px;}
   .blog-detail{padding: 50px 0px 0px;}
   .digital-mark{padding: 60px 60px 0px 48px;}
   .digital-mark p{margin-bottom: 3rem;}
   .digital-mark hr{
    height: 2px;
    width: 30%;
    margin: 3rem 0 0rem;
    background: #000;
    opacity: 1;}
   .digital-mark ul{margin: 0; padding: 0; margin-top: 4rem;}
   .digital-mark ul li{list-style: none; margin-bottom: 55px; color:#585858;}  
   .conclusion{padding: 0px 60px 60px 48px;}
   .conclusion hr{
    height: 2px;
    width: 30%;
    margin: 2rem 0 1rem;
    background: #000;
    opacity: 1;}
    .conclusion ul{margin: 0; padding: 0; margin-top: 11px;}
    .conclusion ul li{list-style: none;
        display: inline;
        padding: 0px 9px 0px 0px;}
    .conclusion ul li a{color:#555;} 
    .related-post{padding: 0px 60px 60px 48px;} 
    .related-post h5{    margin-top: 17px;}  
    .related-post a{color: #000; text-decoration: none;}
    .single-post .digital-mark ul {
        margin: 0;
        margin-bottom: 50px;
        padding-left: 40px;
    }
    .single-post .digital-mark ul li {
        list-style: circle;
        margin-bottom: 11px;
    }
    .single-post .digital-mark hr {
        margin: -1rem 0 2rem;
    }


/*********** career************/
.bg-career{padding: 60px 0px;}
.bg-career .nav .nav-item button.active {
    background-color: transparent;
    color: var(--bs-danger) !important;
  }
  .bg-career .nav .nav-item button.active::after {
    content: "";
    border: 10px solid #000000;
    height: 23px;
    position: absolute;
    right: -50px;
    top: 0px;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    width: 20px;
  }

  .bg-career .nav-link{font-size: 2rem; font-weight: bold;}
  .bg-career .text-primary {
    color: #2a2b2c !important;}
    .bg-career .tab-content {
        border: 2px solid #000;
        padding: 30px;
        height: 100%;
    }
.open-position{    background: #f2f2f2;
    padding: 60px 0px;}
    .open-position h3{ font-size: 2rem;
        font-weight: bold; margin-bottom: 30px; text-transform: uppercase;}
        .open-position .border {
            border: 1px solid #686868 !important;
        }
.open-position thead{background-color: #fff;}
.open-position th{padding: 14px;}
.open-position td{padding: 14px;}
.modal input {
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #000;
    margin-bottom: 20px;
    padding: 4px 0px;
    font-weight: 600;
}

.modal .send-mail {
    background-color: #000;
    color: #fff;
    padding: 14px 50px 14px 20px;
    text-decoration: none;
    transition: 0.5s;
    margin-top: 30px;
    display: inline-block;
}