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

Name: main.css
Version: 1.0

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

Table of contents
        
    01. Navbar
    02. Slider
    03. About Us
    04. Some Facts
    05. Services
    06. Get Started
    07. Portfolio
    08. Our Team
    09. Testimonials
    10. Pricing
    11. Want Work
    12. Blog
    13. Clients
    14. Contact
    15. Footer
    16. Page Loading
    17. Media Query
*/

body {
    font-family: 'Rubik', sans-serif;
}

/*--------------------------------------------------
[1. Start Navbar]
--------------------------------------------------*/
.navbar {
    background: linear-gradient(135deg, rgba(42, 36, 43, 0) 0%, rgba(42, 36, 43, 0) 100%);
    padding: 20px 0;
    border-bottom: 3px double rgba(255, 255, 255, 0.06);
}

.navbar .nav-item {
    margin-left: 25px;
    
}

.navbar .nav-item .nav-link {
    padding: 0;
    padding-left: 25px;
    margin: 0;
    border-left: .5px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
    color: #c7d3dd;
    font-weight: 500;
    transition: all .4s ease-in-out;
}

.navbar .nav-item .no-border {
    border: 0;
}

.navbar .nav-item .nav-link:hover {
    color: #2AAFC0;
}

.navbar .navbar-nav .dropdown .dropdown-menu {
    margin-top: 25px;
    background: #142a32;
}

.navbar .navbar-nav .dropdown span {
    font-size: 10px;
    margin-left: 3px;
}

.navbar .navbar-nav .dropdown .dropdown-menu a {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 10px;
}

.navbar .navbar-nav .dropdown .dropdown-menu a:hover {
    background: #13b1c5;
}


/*--------------------------------------------------
[2. Start Slider]
--------------------------------------------------*/
.slider {
    background: url('../img/bg/slider.png') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    position: relative;
}

.slider .content {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.slider .content h1 {
    font-size: 60px;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}

.slider .content h1 span {
    color: #2AAFC0;
}

.slider .content p {
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: #eeeeee;
    word-spacing: 2px;
    line-height: 1.5;
    padding: 0;
    margin: 5px 0 30px 0;
}

.slider .content .btn {
    padding: 10px 40px;
    border-radius: 35px;
    font-size: 16px;
    font-weight: 500;
    background: #2AAFC0;
    color: #ffffff;
    margin: 0;
    border: 1px solid #2AAFC0;
    transition: all .6s ease-in-out;
}

.slider .content .btn:hover {
    background: transparent;
    border: 1px solid #fff;
}

#particles-js {
    height: 100vh;
}


/*--------------------------------------------------
[15. Start Demos]
--------------------------------------------------*/
.demos {
    padding: 130px 0;
}

.demos .image {
    position: relative;
    box-shadow: 0px 15px 40px -5px rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid #13b1c5;
    transition: all .4s ease-in-out;
    margin-bottom: 30px;
}

.demos .image .btn {
    text-decoration: none;
	font-size: 16px;
    font-weight: 500;
    padding: 10px 40px;
    border-radius: 35px;
    box-shadow: 0px 15px 40px -5px rgba(0, 0, 0, 0.3);
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-45%,-50%);
    transition: all .5s ease-in-out;
    opacity: 0;
    background: #13b1c5;
    color: #ffffff;
}

.demos .image:hover .btn {
    opacity: 1;
}

.demos .image .btn:hover {
    background: #ffffff;
    color: #142a32;
}

.demos .image h2 {
    font-size: 20px;
    text-align: center;
    padding: 30px 0;
}

.demos .image:hover {
    transform: scale(1.01);
}


/*--------------------------------------------------
[15. Start Footer]
--------------------------------------------------*/
.footer {
    padding: 60px 0;
    background: url('../img/bg/footer.png') center center no-repeat;
    background-size: cover;
}

.footer .social-icons {
    margin: 30px 0;
    padding: 0;
}

.footer .social-icons a {
    text-decoration: none;
}

.footer .social-icons i {
    font-size: 15px;
    line-height: 42px;
    color: #fff;
    width: 40px;
    height: 40px;
    background: #2AAFC0;
    border-radius: 50%;
    margin: 0 3px;
    transition: all .5s ease-in-out;
}

.footer .social-icons i:hover {
    background: #02434b;
}

.footer p {
    font-size: 14px;
    font-weight: 300;
    color: #cacaca;
    margin: 0;
    padding: 0;
    margin-top: 20px;
}

/*--------------------------------------------------
[16. Start Page Loading]
--------------------------------------------------*/
.no-js #loader {
     display: none; 
     }

.js #loader {
     display: block; position: absolute; left: 100px; top: 0;
     }

.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/loader/Preloader_2.gif) center no-repeat #fff;
}




/*--------------------------------------------------
[17. Start Media Query]
--------------------------------------------------*/

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    /* Navbar */
    .navbar {
        padding: 20px;
        background: #21353e !important;
    }
    .navbar .nav-item {
        margin-left: 0;
        
    }
    .navbar .nav-item .nav-link {
        padding: 0;
        margin: 25px 0  0;
    }

    /* Slider */
    .slider .content {
        padding: 0 30px;
    }

    .slider .content h1 {
        font-size: 40px;
    }

    /* Some Facts */
    .some-facts {
        padding: 105px 0;
    }
    .some-facts .items {
        margin: 25px 0;
    }

    /* Services */
    .services {
        padding: 130px 0;
    }

    /* Portfolio */
    .portfolio .button-group {
        width: 100%;
    }

    /* Our Team */
    .our-team {
        padding: 130px 0 100px 0;
    }
    .our-team .box {
        margin-bottom: 30px;
    }

    /* Pricing */
    .price {
        padding: 130px 0 100px 0;
    }
    .price .box {
        margin-bottom: 30px;
    }

    /* Blog */
    .blog {
        padding: 130px 0 100px 0;
    }
    .blog .box {
        margin-bottom: 30px;
    }

    /* Clients */
    .clients {
        padding: 130px 0 100px 0;
    }
    .clients img {
        margin-bottom: 30px;
    }

    /* Contact Us */
    .contact .content {
        margin-bottom: 30px;
    }
}


/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .navbar {
        padding: 20px;
        background: #21353e !important;
    }
    .navbar .nav-item {
        margin-left: 0;
        
    }
    .navbar .nav-item .nav-link {
        padding: 0;
        margin: 25px 0  0;
    }

    /* Some Facts */
    .some-facts {
        padding: 105px 0;
    }
    .some-facts .items {
        margin: 25px 0;
    }

    /* Services */
    .services {
        padding: 130px 0;
    }

    /* Portfolio */
    .portfolio .button-group {
        width: 100%;
    }

    /* Our Team */
    .our-team {
        padding: 130px 0 100px 0;
    }
    .our-team .box {
        margin-bottom: 30px;
    }

    /* Pricing */
    .price {
        padding: 130px 0 100px 0;
    }
    .price .box {
        margin-bottom: 30px;
    }

    /* Blog */
    .blog {
        padding: 130px 0 100px 0;
    }
    .blog .box {
        margin-bottom: 30px;
    }

    /* Clients */
    .clients {
        padding: 130px 0 100px 0;
    }
    .clients img {
        margin-bottom: 30px;
    }

    /* Contact Us */
    .contact .content {
        margin-bottom: 30px;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .navbar {
        padding: 20px;
        background: #21353e !important;
    }
    .navbar .nav-item {
        margin-left: 0;
        
    }
    .navbar .nav-item .nav-link {
        padding: 0;
        margin: 25px 0  0;
    }

    /* Some Facts */
    .some-facts {
        padding: 105px 0;
    }
    .some-facts .items {
        margin: 25px 0;
    }

    /* Portfolio */
    .portfolio .button-group {
        width: 100%;
    }

    /* Pricing */
    .price {
        padding: 130px 0 100px 0;
    }
    .price .box {
        margin-bottom: 30px;
    }

}


/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    /* Portfolio */
    .portfolio .button-group {
        width: 100%;
    }
}