@charset "utf-8";



/*================================================

[  Table of contents  ]

================================================

    1 Theme Default

    2 Side Nav

    3 Banner

    4 Portfolio

    5 About

    7 Services

    10 Contact

    

======================================

[ End table content ]

======================================*/





/*=====================

    1 Theme Default

=======================*/



/* Google Fonts */



@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap');



/* colors */

:root {

    --global-primary-color:#ff6c47;

    --global-theme-bg : #f8f9fa;

    --global-heading-color : #141414;

    --global-body-text-color: #292929;

    --global-button-text-color: #383838;

    --global-button-bg-color: #FFFFFF;

    --global-sidebar-color: #F6F6F6;

}



html {

    overflow-x: hidden;

    padding: 0px;

    margin: 0px

}



body {

    margin: 0;

    padding: 0;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    line-height: 26px;

    letter-spacing: 0px;

    word-spacing: 0px;

    word-wrap: break-word;

    background: var(--global-theme-bg);

}



h1,

h2,

h3,

h4,

h5,

h6 {

    margin: 0;

    padding: 0;

    font-family: 'Poppins', sans-serif;

    color: var(--global-heading-color);

}



h1 {

    font-size: 54px;

    line-height: 66px;

}



h2 {

    font-size: 40px;

    line-height: 48px;

}



h3 {

    font-size: 32px;

    line-height: 42px;

}



h4 {

    font-size: 24px;

    line-height: 34px;

}



h5 {

    font-size: 20px;

    line-height: 30px;

}



h6 {

    font-size: 18px;

    line-height: 28px;

    color: var(--global-body-text-color);

}



p {

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

    font-weight: 400;

    margin: 0;

    padding: 0;

    line-height: 27px;

    color: var(--global-body-text-color);

}



ul,

ol {

    margin: 0;

    padding: 0;

}



ul li,

ol li {

    list-style: none;

}



a,

button,

.btn,

ol li a,

ul li a {

    letter-spacing: 0;

    text-decoration: none;

    outline: none !important;

    cursor: pointer;

    color: #1E2C34;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



a:focus,

a:hover,

.btn:focus,

.btn:hover,

ol li a:focus,

ol li a:hover,

ul li a:focus,

ul li a:hover {

    outline: none !important;

    text-decoration: none;

    color: #1E2C34;

}



.btn,

.btn:focus,

input,

input:focus {

    outline: none !important;

    -webkit-box-shadow: 0 0 0 .0em rgba(0, 123, 255, .25) !important;

    box-shadow: 0 0 0 .0em rgba(0, 123, 255, .25) !important;

}



::-moz-selection {

    background: #93D681;

    color: #FFFFFF;

    text-shadow: none;

}



::selection {

    background: var(--global-primary-color);

    color: #FFFFFF;

    text-shadow: none;

}



::-moz-selection {

    background: var(--global-primary-color);

    color: #FFFFFF;

    text-shadow: none;

}



::-webkit-input-placeholder {

    color: rgb(182, 149, 149);

}



::-moz-placeholder {

    color: #6F6F6F;

    opacity: 1;

}



:-ms-input-placeholder {

    color: #6F6F6F;

}



::-ms-input-placeholder {

    color: #6F6F6F;

}



::placeholder {

    color: #6F6F6F;

}


/* background animation */

section#home {
    padding: 0;
}
section.banner {
    padding: 30px 0;
}
.area{
    /* background: #4e54c8;   */
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height:100%;
    position: absolute;
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    /* background: rgba(255, 255, 255, 0.2); */
    background: rgb(255 108 71);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}




.banner-bg,

.banner-bg-fixed {

    width: 100%;

    height: 100vh;

    background-repeat: no-repeat;

    background-size: cover;

}



.banner-bg-fixed {

    background-attachment: fixed !important;

}



.content-center,

.content-left,

.content-right {

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

    -webkit-box-pack: center;

    justify-content: center;

}



.content-top-center {

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

}



.content-left {

    -webkit-box-pack: start;

    justify-content: start;

}



.content-right {

    -webkit-box-pack: end;

    justify-content: end;

}



span.green {

    color: var(--global-primary-color);

}



h6.space-caps {

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 1px;

}



p.des-text {

    font-size: 17px;

    line-height: 30px;

}



section {

    padding: 30px 0px;

}



section .title h2 {

    font-weight: 700;

    color: var(--global-body-text-color);

    margin-top: 30px;

}



a.btn-anime {

    display: inline-block;

    position: relative;

    font-size: 15px;

    font-weight: 500;

    text-transform: capitalize;

    margin-bottom: -8px;

    border: 0 !important;

    cursor: pointer;

    overflow: hidden;

    z-index: 5;

}



a.btn-anime::before,

a.btn-anime::after {

    position: absolute;

    content: '';

    width: 100px;

    height: 100px;

    border-radius: 50%;

    z-index: -5;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



a.btn-anime::before {

    left: -43px;

    top: -59px;

}



a.btn-anime::after {

    right: -43px;

    bottom: -59px;

}





/*=====================

    2 Side Nav

=======================*/



header nav.side-nav {

    position: fixed;

    text-align: center;

    width: 80px;

    height: 100%;

    top: 0;

    left: 0;

    background: var(--global-sidebar-color);

    z-index: 10;

}



header nav.side-nav .container {

    padding: 0;

}



header .side-nav .logo-btn {

    position: relative;

}



header .side-nav .manu-btn {

    position: absolute;

    top: 15px;

    right: 10px;

    width: 25px;

    height: 20px;

    padding: 0px;

    border: none;

    color: #FFFFFF;

    outline: none;

    display: none;

    background: #FFFFFF;

}



header .side-nav .manu-btn span {

    position: absolute;

    width: 100%;

    height: 2px;

    left: 0;

    background: var(--global-primary-color);

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



header .side-nav .manu-btn span.active:nth-child(1) {

    top: 9px;

    transform: rotate(50deg);

}



header .side-nav .manu-btn span.active:nth-child(2) {

    opacity: 0;

}



header .side-nav .manu-btn span.active:nth-child(3) {

    bottom: 9px;

    transform: rotate(-50deg);

}



header .side-nav .manu-btn span:nth-child(1) {

    top: 0;

}



header .side-nav .manu-btn span:nth-child(2) {

    top: 9px;

}



header .side-nav .manu-btn span:nth-child(3) {

    bottom: 0;

}



header .side-nav .logo {

    background: var(--global-primary-color);

    padding: 5px;

    width: 80px;

    height: 80px;

    line-height: 75px;

}



header .side-nav .logo a {

    display: block;

}



header .main-manu ul {

    margin-top: 50px;

}



header .main-manu ul li a {

    position: relative;

    display: block;

    color: var(--global-body-text-color);

    padding: 8px 0px;

    margin-top: 1px;

    text-transform: capitalize;

    background: transparent;

}



header .main-manu ul li:first-child a {

    margin-top: 0px;

}



header .main-manu ul li a.active,

header .main-manu ul li a:hover {

    color: var(--global-primary-color);

}



header .main-manu span {

    position: absolute;

    left: 80px;

    margin-left: 2px;

    padding: 0px 5px 0px 10px;

    color: #FFFFFF;

    background: var(--global-primary-color);

    clip-path: polygon(100% 0%, 100% 53%, 100% 100%, 10% 100%, 0% 50%, 10% 0);

    -webkit-transform: translateX(20px);

    -moz-transform: translateX(20px);

    transform: translateX(20px);

    opacity: 0;

    visibility: hidden;

    -webkit-transition-delay: 0.3s;

    -moz-transition-delay: 0.3s;

    transition-delay: 0.3s;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



header .main-manu ul li a:hover span {

    -webkit-transform: translateX(0px);

    -moz-transform: translateX(0px);

    transform: translateX(0px);

    opacity: 1;

    visibility: visible;

}



header .main-manu i {

    font-size: 18px;

}



header .social-item .social-title {

    position: relative;

    display: inline-block;

    font-size: 14px;

}



header .social-item .social-title::before {

    position: absolute;

    content: '';

    width: 100%;

    height: 1px;

    left: 0;

    bottom: 0;

    background: #FFFFFF;

}



header .social-item {

    position: fixed;

    cursor: pointer;

    bottom: 0;

    left: 0;

    padding: 27px 24px;

    color: #FFFFFF;

    background: var(--global-primary-color);

}



header .social-item ul {

    position: absolute;

    width: 250px;

    padding: 20px;

    top: 0;

    left: 90px;

    background: #F6F6F6;

    border-radius: 0px 50px 50px 0px;

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



header .social-item:hover ul {

    opacity: 1;

    visibility: visible;

}



header .social-item ul li {

    display: inline-block;

    margin-right: 10px;

}



header .social-item ul li:last-child {

    margin-right: 0px;

}



header .social-item ul li a {

    display: inline-block;

    width: 40px;

    height: 40px;

    font-size: 13px;

    color: var(--global-body-text-color);

    line-height: 40px;

    border-radius: 30px;

    background: #FFFFFF;
    text-align: center;

}



header .social-item ul li a:hover {

    color: var(--global-primary-color);

}


/*
.overlay {

    position: fixed !important;

    width: 100%;

    height: 100%;

    top: 50px;

    left: 0;

    opacity: 0;

    visibility: hidden;

    background: var(--global-body-text-color) !important;

}



.overlay.active {

    opacity: 0.8;

    visibility: visible;

}
*/


main {

    margin-left: 80px;

    z-index: 8;

}





/*=====================

    3 Banner

=======================*/



.banner {

    padding: 0;

    position: relative;

}



.banner .order-lg-first,

.banner .order-lg-last {

    z-index: 3;

}



.banner .container>.row {

    height: 100vh;

    display: -webkit-box;

    display: flex;

    -webkit-box-align: center;

    align-items: center;

}



.banner .banner-text h6 {

    margin-bottom: 30px;

}



.banner .banner-text h6 span.dash {

    position: relative;

    display: inline-block;

    text-transform: capitalize;

    padding-bottom: 15px;

}



.banner .banner-text h6 span.dash::before {

    position: absolute;

    content: '';

    left: 0;

    bottom: 0;

    width: 85%;

    height: 2px;

    background: var(--global-primary-color);

}



.banner .banner-text h1 {

    font-family: 'Oswald', sans-serif;

    font-weight: 700;

    text-transform: uppercase;

    font-size: 55px;

    line-height: 75px;

    margin-bottom: 20px;

}



.banner .banner-text p.des-text {

    margin-bottom: 0px;

}



.banner .banner-text a {

    padding: 10px 45px;

    color: #FFFFFF;

    margin-top: 40px;

    font-weight: 500;

    border: 1px solid var(--global-primary-color) !important;

    background: var(--global-primary-color);

    z-index: 5;

}



.banner .banner-text a::before,

.banner .banner-text a::after {

    -webkit-transform: scale(2);

    -moz-transform: scale(2);

    transform: scale(2);

    background: var(--global-primary-color);

}



.banner .banner-text a:hover {

    background: transparent;

    color: var(--global-primary-color);

}



.banner .banner-text a:hover::before,

.banner .banner-text a:hover::after {

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    transform: scale(0);

}



.banner .banner-profile {

    width: 100%;

    height: 350px;

    overflow: hidden;

    border-radius: 50%;

}



.banner .banner-profile img {

    width: 100%;

}





/*=====================

    4 Portfolio

=======================*/



.portfolio .portfolio-demo-btn {

    padding-bottom: 30px;

}



.portfolio-demo-btn ul li {

    display: inline-block;

    margin-right: 15px;

}



.portfolio-demo-btn button {

    position: relative;

    border: 0;

    padding: 15px 40px;

    font-weight: 500;

    text-transform: capitalize;

    color: var(--global-button-text-color);

    border-radius: 5px;

    margin-right: 15px;

    cursor: pointer;

    overflow: hidden;

    background: var(--global-button-bg-color);

    z-index: 5;

}



.portfolio-demo-btn button:last-child {

    margin-right: 0px;

}



.portfolio-demo-btn button::before,

.portfolio-demo-btn button::after {

    position: absolute;

    content: '';

    width: 100px;

    height: 100px;

    border-radius: 50%;

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    transform: scale(0);

    background: var(--global-primary-color);

    z-index: -5;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



.portfolio-demo-btn button::before {

    left: -43px;

    top: -59px;

}



.portfolio-demo-btn button::after {

    right: -43px;

    bottom: -59px;

}



.portfolio-demo-btn button.active,

.portfolio-demo-btn button:hover {

    background: var(--global-primary-color);

    color: #FFFFFF;

}



.portfolio-demo-btn button:hover::before,

.portfolio-demo-btn button .active::before,

.portfolio-demo-btn button:hover::after,

.portfolio-demo-btn button .activer::after {

    -webkit-transform: scale(2);

    -moz-transform: scale(2);

    transform: scale(2);

}



.portfolio .portfolio-demo .portfolio-item {

    margin-bottom: 30px;

}



.portfolio .portfolio-demo .portfolio-item a {

    width: 100%;

    display: inline-block;

    border: 2px solid transparent;

    overflow: hidden;

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



.portfolio .portfolio-demo .portfolio-item a:hover {

    border-color: var(--global-primary-color);

}



.portfolio .portfolio-demo a img {

    width: 100%;

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    transform: scale(1);

    filter: grayscale(0);

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



.portfolio .portfolio-demo a:hover img {

    -webkit-transform: scale(1.1);

    -moz-transform: scale(1.1);

    transform: scale(1.1);

    filter: grayscale(60%);

}



.portfolio .portfolio-demo>div:nth-last-child(1),

.portfolio .portfolio-demo>div:nth-last-child(2),

.portfolio .portfolio-demo>div:nth-last-child(3) {

    margin: 0;

}

@media (min-width: 1200px){
#portfolio .container {
    max-width: 1200px;
}

section#portfolio main {
    margin-left: 0;
}

}

@media (max-width: 1200px){
    #portfolio .row{
        display: inherit;
    }
}






/*=====================

    5 About

=======================*/



.about .about-profile {

    position: relative;

    margin: 4% 0%;

}



.about .about-profile::before,

.about .about-profile::after {

    position: absolute;

    content: '';

    background: #FFFFFF;

    z-index: -5;

}



.about .about-profile::before {

    left: -3%;

    top: -3%;

    width: 30%;

    height: 122px;

}



.about .about-profile::after {

    right: 2%;

    top: 3%;

    width: 98%;

    height: 100%;

    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 91%);

}



.about img {

    position: relative;

    width: 95%;

}



.about .about-logo {

    position: absolute;

    top: 10%;

    right: -10%;

    width: 30%;

}



.about .about-text {

    padding-left: 30px;

}



.about .about-text h6 strong {

    font-weight: 600;

}



.about .about-text h6 {

    margin-bottom: 30px;

}



.about .about-text p.des-text {

    font-size: 17px;

    line-height: 30px;

}



.about .about-info ul {

    display: inline-block;

    margin-top: 30px;

    margin-right: 50px;

}



.about .about-info ul:nth-child(2) {

    margin-right: 0px;

}



.about .about-info ul li {

    margin-bottom: 5px;

}



.about .about-info ul li:last-child {

    margin-bottom: 0px;

}



.about .about-info li i {

    color: var(--global-primary-color);

}



.about .about-info li p {

    display: inline-block;

    margin-left: 10px;

}



.about .about-info span.bash {

    display: inline-block;

    height: 3px;

    width: 80px;

    margin-top: 30px;

    background: var(--global-primary-color);

}



.about .about-social {

    margin-top: 30px;

}



.about .about-social li {

    display: inline-block;

}



.about .about-social li a {

    display: inline-block;

    width: 50px;

    height: 50px;

    font-size: 20px;

    text-align: center;

    line-height: 50px;

    border-radius: 5px;

    margin-right: 15px;

    background: #FFFFFF;

}



.about .about-social li:last-child a {

    margin-right: 0px;

}



.about .about-social li a.venobox {

    width: 95px;

    border-top-right-radius: 30px;

    border-bottom-right-radius: 30px;

    text-transform: uppercase;

    font-size: 16px;

}



.about .about-social li .venobox i {

    margin-left: 10px;

    color: var(--global-primary-color);

    -webkit-transform: scale(1.5);

    -moz-transform: scale(1.5);

    transform: scale(1.5);

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



.about .about-social li .venobox:hover i {

    color: #FFFFFF;

}



.about .about-social li a:hover, .about .about-social li:first-child a {

    color: #FFFFFF;

    background: var(--global-primary-color);

}



.about .about-cv a {

    padding: 10px 45px;

    color: #FFFFFF;

    margin-top: 40px;

    border: 1px solid var(--global-primary-color) !important;

    background: var(--global-primary-color);

    z-index: 5;

}



.about .about-cv a::before,

.about .about-cv a::after {

    -webkit-transform: scale(2);

    -moz-transform: scale(2);

    transform: scale(2);

    background: var(--global-primary-color);

}



.about .about-cv a:hover {

    background: transparent;

    color: var(--global-primary-color);

}



.about .about-cv a:hover::before,

.about .about-cv a:hover::after {

    -webkit-transform: scale(0);

    -moz-transform: scale(0);

    transform: scale(0);

}





/*=====================

    7 Services

=======================*/



.services .title p {

    padding-bottom: 35px;

}



.services .card {

    position: relative;

    cursor: pointer;

    padding: 25px 20px;

    margin-bottom: 30px;

}



.services .card::before {

    position: absolute;

    content: '';

    left: 0;

    bottom: 0;

    height: 2px;

    width: 100%;

    background: var(--global-primary-color);

    -webkit-transform: scaleX(0);

    -moz-transform: scaleX(0);

    transform: scaleX(0);

    -webkit-transition: all 0.4s ease;

    -moz-transition: all 0.4s ease;

    transition: all 0.4s ease;

}



.services .card:hover::before {

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    transform: scale(1);

}



.services .row>div:nth-last-child(1) .card,

.services .row>div:nth-last-child(2) .card,

.services .row>div:nth-last-child(3) .card {

    margin-bottom: 0px;

}



.services .card .card-body {

    padding: 0;

    text-align: center;

}



.services .card-body .services-icon i, .services .card-body .services-icon svg {

    font-size: 30px;

    color: var(--global-primary-color);

    margin-bottom: 20px;
    fill: var(--global-primary-color);

}



.services .card-body h4 {

    font-weight: 600;

    text-transform: capitalize;

}





/*=====================

    10 Contact

=======================*/

.wrapper{
    width: 100%;
}

.contact .title p {

    margin-bottom: 30px;

}



.contact .des-text {

    margin-bottom: 30px!important;

}



.contact .card {

    padding: 30px;

    margin-bottom: 30px;

}



.contact .card .card-body {

    padding: 0;
    text-align: center;

}



.contact .card .contact-icon i {

    font-size: 30px;

    color: var(--global-primary-color);

    margin-bottom: 10px;

}



.contact .card h5 {

    font-weight: 600;

    margin-bottom: 10px;

}



.contact .card h5 {

    font-size: 16px;

}



.contact .card h5 span {

    display: block;

    font-weight: 400;

    margin-top: 5px;

}



.contact .sub-title h4 {

    font-weight: 600;

    text-transform: capitalize;

    margin-bottom: 20px;

}



.contact .card p {

    font-size: 12px;

}



.contact .contact-map iframe {

    width: 100%;

    height: 100%;

    border-radius: 5px;

    border: 3px solid #FFFFFF !important;

}


.contact-map {
    height: 100%;
}


.contact input,

.contact textarea {

    width: 100%;

    border: 0;

    border-radius: 5px;

    padding: 8px 20px;

    margin-bottom: 20px;

    background:#eee;

    border:1px solid #ccc;

}



.contact input:last-child {

    margin-bottom: 0px;

}



.contact input:focus,

.contact textarea:focus {

    color: var(--global-body-text-color);

    outline:none;

}



.contact textarea {

    height: 108px;

}



.contact .btn-anime {

    width: 100%;

    padding: 8px 0px;

    color: #FFFFFF;

    font-size: 15px;

    font-weight: 500;

    border-radius: 5px;

    border: 1px solid var(--global-primary-color);

    background: var(--global-primary-color);
    margin-top: -8px;

}