@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body, html {background-color: #E4E1EC; margin: 0; width: 100%; font-family: 'Poppins', none; overflow-x: hidden !important}

a {color: #5f25de;}
a, a:hover, a:focus, a:active, a.active {outline: none; text-decoration: none;}
a:hover, a:focus, a:active, a.active {color: #8e64e8;}
.hidden {display: none;}

/* NAVBAR START */
.navbar {background: transparent; transition: background 500ms ease;}
.navbar .navbar-nav {background: transparent;}
.navbar .navbar-nav .nav-item {background: transparent; padding: 5px 10px;}
.navbar .navbar-nav .nav-item:first-child {padding-left: 0px;}
.navbar .navbar-nav .nav-item:last-child {padding-right: 0px;}
.navbar .navbar-nav .nav-item .nav-link {color: #b4b1b1; font-weight: 500; text-transform: uppercase; font-size: 1rem; transition: 500ms;}
.navbar .navbar-nav .nav-item .nav-link.active,
.navbar .navbar-nav .nav-item:hover .nav-link,
.navbar .navbar-nav .nav-item:focus .nav-link {color: #fff}
.navbar .navbar-nav .nav-item.invite .nav-link {color: #5f25de;}
.navbar .navbar-nav .nav-item.account {background: rgba(0,0,0,0.5); border-radius: 100px; margin-left: 20px;}
.navbar .navbar-nav .nav-item.account a span {color: #fff;}
.navbar .navbar-nav .nav-item.account a span i {color: #5f25de; padding-right: 15px; width: 10%;}
.navbar .navbar-nav .nav-item.account span {text-transform: none;}
.navbar .navbar-nav .nav-item.account i {color: #5f25de; padding-right: 30px; width: 10%;}
.navbar .navbar-nav .nav-item.more {background: transparent;}
.navbar .navbar-nav .nav-item.more span {text-transform: uppercase;}
.navbar .navbar-nav .nav-item.more i {color: #5f25de; padding-right: 30px; width: 10%;}
.navbar .navbar-toggler {border-color: transparent!important;}
.navbar .dropdown-menu {background: #171617; border-radius: 0; border: 0; width: auto; padding: 0; margin-top: 20px;}
.navbar .dropdown-menu .dropdown-item {color: #a6a6a6; transition: 500ms; padding: 15px 40px;}
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {background: #272527;}
.navbar .dropdown-menu .dropdown-item i {color: #5f25de; padding-right: 30px; width: 10%;}
.navbar.scrolled {background: #141414}
/* NAVBAR END */

/* HEADER START */
#header {background: url('../media/bg2.png'); background-size: cover; background-repeat: no-repeat;}
#header.home {height: 100vh; padding-top: 40vh;}
#header.home .title {color: #fff; font-weight: 600; font-size: 3.5rem;}
#header.home .about {color: #fff; font-weight: 400; font-size: 1.5rem;}
#header.page {height: 30vh; padding-top: 14vh;}
#header.page .title {color: #fff; font-weight: 400; font-size: 2.5rem;}
#header.page .title svg {height: 72px; width: 72px; transform: translateY(-5px);}
/* HEADER END */

/* FEATURES START*/
#features {padding: 50px 0;}
#features .panel {border-radius: 5px; padding: 2rem; padding-top: 0px;}
#features .panel .icon i {color: #333; font-size: 5rem; text-align: center; display: block;}
#features .panel .title {font-weight: 600; font-size: 1.3rem; color: #5a5a5a; text-align: center; padding-top: 5px; padding-bottom: 10px;}
#features .panel .text {color: #707070; text-align: center;}
#features .panel:hover .icon i,
#features .panel:focus .icon i {color: #5f25de; -webkit-animation: action 650ms infinite  alternate; animation: action 650ms infinite  alternate;}

@media only screen and (max-width: 992px) {
    #features .panel {margin-bottom: 15px;}
}
/* FEATURES END */

/* REVIEWS START */
#reviews {padding: 50px 0; background: #5827fc;}
#reviews .quote {text-align: center;}
#reviews .quote .text {font-size: 1rem; color: #fff; font-weight: 400; width: 100%;}
#reviews .quote .line {height: 2px; display: block; position: relative; margin: 10px auto; width: 50px; background: #fff;}
#reviews .quote .author {font-size: .95rem; color: #fff; font-weight: 300;}
#reviews .quote .author span {color: #a6a6a6;}
/* REVIEWS END */

/* FEATURED BRANDS START */
#recent {margin: 50px 0;}
#recent img {border-radius: 5px; width: 100%; height: auto;}
#recent .view {text-align: center; margin-top: 20px;}
/* FEATURED BRANDS END */

/* PORTFOLIO START */
#portfolio {margin: 20px 0 50px;}
#portfolio .col-md-6 {margin-top: 30px;}
#portfolio img {border-radius: 5px; width: 100%; height: auto;}
#portfolio .hvrbox, .hvrbox * {box-sizing: border-box;}
#portfolio .hvrbox {position: relative; display: inline-block; overflow: hidden; max-width: 100%; height: auto;}
#portfolio .hvrbox img {max-width: 100%;}
#portfolio .hvrbox .hvrbox-layer_bottom {display: block; border-radius: 5px;}
#portfolio .hvrbox .hvrbox-layer_top {opacity: 0; position: absolute; border-radius: 5px; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 15px; -moz-transition: all 0.4s ease-in-out 0s; -webkit-transition: all 0.4s ease-in-out 0s; -ms-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s;}
#portfolio .hvrbox:hover .hvrbox-layer_top,
#portfolio .hvrbox.active .hvrbox-layer_top {opacity: 1;}
#portfolio .hvrbox .hvrbox-text {text-align: center; font-size: 1.75rem; display: inline-block; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#portfolio .hvrbox .hvrbox-text_mobile {font-size: 15px; border-top: 1px solid rgb(179, 179, 179); /* for old browsers */ border-top: 1px solid rgba(179, 179, 179, 0.7); margin-top: 5px; padding-top: 2px; display: none;}
#portfolio .hvrbox.active .hvrbox-text_mobile {display: block;}
/* PORTFOLIO END */

/* ABOUT START */
#about {margin: 50px 0;}

/* ABOUT END */

/* SERVICES START */
#services {margin: 50px 0;}
#services .service {background: #fff; border-radius: 4px; padding: 20px; padding-bottom: 50px; text-align: center; margin-bottom: 30px;}
#services .service img {width: 40%; height: auto; text-align: center; margin: 0 auto; display: block;}
#services .service .title {font-size: 1.5rem; color: #191919; font-weight: 600; width: 75%; text-align: center; margin: 0 auto; display: block;}

/* SERVICES END */

/* SECTION START */
#section {padding: 10px 0px 30px;}
#section .title {font-size: 2rem; text-align: center; color: #5827fc;}
#section .text {font-size: 1.25rem; text-align: center;}
#section .title.white {color: #fff;}
/* SECTION END */

/* CALL TO ACTION START */
#call {background: #5827fc; padding: 50px 0;}
#call .button-cta {background: #fff; padding: 15px 20px; display: block; width: 255px; border-radius: 7.5px; text-align: center;}
#call .title {font-size: 1.5rem; font-weight: 500; color: #fff;}
#call .text {font-size: 1rem; font-weight: 400; color: #fff;}
/* CALL TO ACTION END */

/* FOOTER START */
#footer {background: #191919; padding: 50px 0;}
#footer .logo {height: 50px; transform: translateX(-10px);}
#footer .logo:hover {transition: 500ms; content: url('https://static.sevy.io/Text-Logo-Trans.png');}
#footer .copyright {font-size: 0.9rem; color: #a6a6a6;}
#footer .about .title {font-size: 1.1rem; font-weight: 500; padding-bottom: 20px; color: #fff;}
#footer .about .text {font-size: 0.9rem; color: rgba(255,255,255,.75);}
#footer .list .title {font-size: 1.1rem; color: #fff; font-weight: 500; padding-bottom: 20px;}
#footer .list ul {padding: 0; list-style: none;}
#footer .list li a {color: rgba(255,255,255,.75);}
#footer .list li a:hover,
#footer .list li a:focus {color: #fff; transition: 500ms;}
/* FOOTER END */

/* BUTTONS START */
.button {background: #171738; border-radius: 5px; font-size: 0.9rem; display: inline-block; padding: 10px 30px; color: #fff; transition: linear 150ms;}
.button.primary {background: #5827fc;}
.button.secondary {background: #41179b;}
.button.success {background: #03B5AA;}
.button.danger {background: #DB2B39;}
.button.warning {background: #F3A712;}
.button.info {background: #449DD1;}

.button:hover, .button:focus {color: #fff; background: #000000;}
.button.primary:hover, .button.primary:focus {background: #3703e2;}
.button.secondary:hover, .button.secondary:focus {background: #250d59;}
.button.success:hover, .button.success:focus {background: #02978D;}
.button.danger:hover, .button.danger:focus {background: #C4212F;}
.button.warning:hover, .button.warning:focus {background: #DA950B;}
.button.info:hover, .button.info:focus {background: #2D85B9;}

.button.small {padding: 5px 15px; font-size: 0.75rem;}
.button.small svg {height: 16px; transform: translateY(-1px) translateX(-4px); width: auto;}
.button.medium {padding: 7.5px 22.5px; font-size: 0.85rem;}
.button.medium svg {height: 18px; transform: translateY(-1px) translateX(-7.5px); width: auto;}
.button svg {height: 18px; transform: translateY(-1px) translateX(-12px); width: auto;}
/* BUTTONS END */

/* BADGES START */
.badge {background: #171738; border-radius: 3px; font-size: 0.7rem; display: inline-block; color: #fff; padding: 5px 10px; vertical-align: middle;}
.badge.primary {background: #5827fc;}
.badge.secondary {background: #41179b;}
.badge.success {background: #03B5AA;}
.badge.danger {background: #DB2B39;}
.badge.warning {background: #F3A712;}
.badge.info {background: #449DD1;}
/* BADGES END */

@media only screen and (max-width: 992px) {
    .navbar .navbar-brand {padding: 20px 0;}
    .navbar .navbar-nav .nav-item {padding: 0;}
    .navbar .dropdown-menu {margin-top: 10px; border-radius: 5px; margin-bottom: 10px;}
    .navbar .navbar-nav .nav-item.account {background: transparent; margin-left: 0;}
    .navbar .navbar-nav .nav-item.account a span i {width: 7.5%;}
    .navbar {background: #141414}

    #header.home .title {font-size: 2.5rem;}
    #header.home .about {font-size: 1.25rem;}

    #header.page {padding-top: 20vh; height: 32.5vh;}
    #header.page .title {font-size: 2rem;}
    #header.page .title svg {height: 64px; width: 64px;}

    #call .col-md-6 {width: 100%;}
    #call .button-cta {width: 100%; margin-top: 5vh;}

    #footer .copyright {padding-bottom: 20px;}
    #footer .about .title {padding-top: 15px; padding-bottom: 5px;}
    #footer .list .title {padding-top: 15px; padding-bottom: 5px;}
}

@media (min-width: 992px) {
    .animate {animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-fill-mode: both; -webkit-animation-fill-mode: both;}
}
@keyframes slideIn {
    0% {transform: translateY(1rem); opacity: 0;}
    100% {transform:translateY(0rem); opacity: 1;}
    0% {transform: translateY(1rem); opacity: 0;}
}
@-webkit-keyframes slideIn {
    0% {-webkit-transform: transform; -webkit-opacity: 0;}
    100% {-webkit-transform: translateY(0); -webkit-opacity: 1;}
    0% {-webkit-transform: translateY(1rem); -webkit-opacity: 0;}
}
.slideIn {-webkit-animation-name: slideIn; animation-name: slideIn;}

body::-webkit-scrollbar {width: 11px;}
body {scrollbar-width: thin; scrollbar-color: #5f25de #191919;}
body::-webkit-scrollbar-track {background: #191919;}
body::-webkit-scrollbar-thumb {background-color: #5f25de; border-radius: 6px; border: 3px solid #191919;}


@-webkit-keyframes action {
    0% {transform: translateY(0)}
    100% {transform: translateY(-15px)}
}
@keyframes action {
    0% {transform: translateY(0)}
    100% {transform: translateY(-15px)}
}