File: /home/imensosw/.trash/sass/_app.scss
.hero {
display: flex;
height:calc(100vh - 100px);
align-items: center;
h1 {
font-size:82px;
margin-bottom: 50px;
font-weight: 800;
}
p {
font-size: 20px;
font-weight: 500;
}
&__left {
width: 50%;
padding-left: 100px;
padding-right: 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
&__right {
width: 50%;
}
}
.services {
h2 {
color: #FFF;
}
p {
color: #FFF;
}
}
.swiper-wrapper {
align-items: flex-end;
}
.stats {
text-align: center;
color: #FFF;
display: flex;
list-style: none;
padding: 0;
margin-top: 0; }
.stats li {
margin-bottom: 0px;
text-align: center !important;
margin-right: 20px;
width: 130px;
padding: 36px 0; }
.stats li img {
height: 36px;
width: auto;
margin: 0 auto 10px;
display: block; }
.stats li strong {
font-size: 2em;
line-height: 1.2em;
margin-top: .5em;
display: block;
font-weight: 700; }
.stats li span {
font-size: 12px;
opacity: 0.5;
}
.stats-2 li:nth-child(odd) {
border-right: 1px solid #fff; }
.stats-2 li:nth-child(1), .stats-2 li:nth-child(2) {
border-bottom: 1px solid #fff; }
.sr-container {
width: 600%;
height: 100%;
display: flex;
flex-wrap: nowrap;
.panel {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-sizing: border-box;
padding: 10px;
will-change: transform;
&__content {
width: calc(100% - 200px);
height: calc(100% - 100px);
background-color: #efefef;
padding: 80px;
}
}
.srbg {
background-image: url('../images/sr-bg.png');
background-size: cover;
background-repeat: no-repeat;
color: #FFF;
}
h2 {
font-size: 32px;
line-height: 1.5;
color: #FFF;
}
.scroll-down {
padding-top: 100px;
position: relative;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
margin-bottom: 20px;
color: #000;
&:before {
content:"";
position: absolute;
height: 100px;
width: 1px;
background-color: #000;
top: 0;
left: 50%;
}
}
}
.zigzag {
h2 {
font-size: 26px;
line-height: 1.5;
}
}
.capabilities {
.nav-link {
background-color: #efefef;
border-radius: 0 !important;
padding: 15px 40px;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background-color: $color__primary;
}
.media-body {
p {
font-size: 0.9em;
}
}
h5 {
color: #000;
}
}
.about {
.section-header {
width: 80%;
h2 {
font-size: 26px;
line-height: 1.7;
}
}
.logos {
ul {
list-style: none;
padding:0;
}
li {
width: 100px;
margin: 0 20px;
display: inline-block;
}
}
}
.techstack {
.tech-icons {
list-style: none;
padding-left: 0;
li {
display: inline-block;
text-align: center;
min-width: 136px;
margin-bottom: 50px;
span {
display: block;
font-size: 14px;
margin-top: 15px;
}
}
}
h3 {
color: #000;
font-size: 22px;
}
.nav-pills .nav-link {
color: rgba(0,0,0,0.3);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background-color: transparent;
color: #000;
font-size: 1em;
font-weight: 500;
position: relative;
&:after {
content:"";
position: absolute;
width: 50px;
height: 2px;
background-color: #000;
right: -18px;
top: 50%;
}
}
}
/*=================SERVICE===================
===========================================*/
.service {
&__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
&-item {
width: 24%;
background-color: #f4f4f4;
padding: 30px;
margin-bottom: 30px;
h5 {
margin-top: 20px;
font-size: 16px;
background: #cf307d;
width: 50px;
height: 50px;
border-radius: 50px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
p {
margin-top: 20px;
}
}
}
}
.service-2 {
&__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
&-item {
width: 100%;
padding: 30px;
margin-bottom: 50px;
display: flex;
align-items: flex-start;
&:first-child {
margin-top:100px;
}
&:last-child {
margin-bottom: 0;
}
ul {
padding-left: 17px;
font-size: 0.9em;
li {
margin-bottom: 10px;
}
}
.item-body {
width: 80%;
}
.link-arrow {
margin-top: 30px;
}
.icon {
margin-right: 50px;
ion-icon {
font-size: 60px;
color: $color__primary;
}
}
img {
margin-right:50px;
}
h5 {
margin-top: 0px;
font-size: 28px;
}
p {
font-size: 18px;
font-weight: 500;
margin-top: 20px;
}
.number {
font-size:2em;
display: block;
margin-right: 30px;
line-height: 1;
color: $color__primary;
}
}
}
}
.sidebar {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
height: 100%;
top: 150px;
bottom: auto;
padding-bottom: 50px;
}
/*=================WORK===================
===========================================*/
.work {
display: flex;
h2 {
font-size:32px;
}
&__left {
width: 50%;
padding-left: 170px;
padding-right: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
&__right {
width: 50%;
}
}
.work-2 {
height: calc(100vh - 70px);
display: flex;
align-items: center;
p {
font-size: 0.9em;
margin-top: 20px;
}
.section-header {
padding-left: 22%;
padding-right: 50px;
}
.work-shed {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 35%;
z-index: -1;
opacity: 0.9;
}
.p1 .work-shed {
background-color: #694986;
}
.p2 .work-shed {
background-color: #24849a;
}
.container-fluid {
padding-right: 0 !important;
height: 100%;
}
.swiper {
height: 100%;
}
.row {
height: 100%;
}
}
.swiper-button-next, .swiper-button-prev {
height: 100px !important;
width: 60px !important;
background-color: #FFF;
color: #000 !important;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.swiper-button-next::after, .swiper-button-prev::after {
font-size: 24px !important;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next {
left: 0px !important;
}
.swiper-button-next, .swiper-rtl .swiper-button-prev {
right: 0px !important;
}
/*=================TECHSTACK===================
===========================================*/
.techstack {
.section-header {
width: 50%;
}
h2 {
font-size: 44px;
}
}
/*=================MODEL===================
===========================================*/
.model {
&__item {
h3 {
font-size: 22px;
margin-bottom: 20px;
margin-top: 20px;
}
p {
font-size: 0.9em;
}
}
}
.models {
.number {
min-width: 50px;
height: 50px;
font-size: 28px;
color: #FFF;
background-color: $color__primary;
border-radius: 100%;
text-align: center;
line-height: 50px;
}
.list {
color: rgba(0, 0, 0, 0.7);
margin-bottom: 40px;
}
}
/*=================BLOG===================
===========================================*/
.blogSwiper {
padding-bottom: 70px !important;
.media {
background-color: #f0f4f7;
.media-body {
font-size: 0.9em;
padding: 20px;
.post-cat {
font-size: 0.75em;
display: flex;
justify-content: space-between;
margin-bottom: 10px;
a {
color: red;
}
}
}
h5 {
font-size: 18px;
line-height: 1.5;
margin-bottom: 0;
}
}
}
/*=================ABOUT 2===================
===========================================*/
.about-2 {
.theme-bg {
color: #FFF;
h2 {
color: #FFF;
font-size: 32px;
}
p {
color: rgba(255,255,255,0.9);
margin-bottom: 0;
}
.btn-primary {
background: #FFF !important;
color: $color__primary;
}
}
.section-header {
padding-right: 100px;
padding-bottom: 100px;
h2 {
font-size: 42px;
}
p {
font-size: 0.9em;
margin-bottom: 0;
}
}
.bg-noise {
position: relative;
.section-header {
z-index: 9;
position: relative;
}
&:after {
height:300px;
width: 300px;
background: url('../images/about-bg.png');
background-size: cover;
background-repeat: no-repeat;
content: "";
position:absolute;
right: 0;
bottom: 0;
}
}
.blur-heading {
margin-top: 0;
text-align: center;
}
.logos {
ul {
list-style: none;
padding:0;
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 0;
align-items: center;
}
li {
width: 17%;
margin-bottom: 40px;
margin-right: 12px;
}
}
.facts {
list-style: none;
padding: 0;
margin-top: 30px;
margin-bottom: 0;
li {
display: inline-block;
width: 49%;
text-align: center;
padding: 20px;
&:nth-child(odd) {
border-right: 1px solid $color__primary;
}
&:first-child {
border-bottom: 1px solid $color__primary;
}
&:nth-child(2) {
border-bottom: 1px solid $color__primary;
}
strong {
font-size: 30px;
font-weight: normal;
color: $color__primary;
display: block;
}
span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0.6;
display: block;
line-height: 1.3;
}
}
}
}
.about-3 {
.fact-wrapper {
margin-left: 15%;
display: flex;
flex-wrap: wrap;
.fact-box {
width: 190px;
background-color: rgba(255,255,255,0.9);
padding: 40px;
text-align: center;
margin: 1px;
h4 {
font-size: 42px;
}
span {
display: block;
font-size: 14px;
letter-spacing: 1px;
text-transform: uppercase;
}
}
}
.theme-bg-2 {
position: relative;
overflow: hidden;
z-index: 9;
.section-header {
padding-right: 15%;
color: #FFF;
position: relative;
z-index: 8;
padding-top: 80px;
padding-bottom: 80px;
padding-left: 80px;
}
h2 {
color: #FFF;
font-size: 42px;
line-height: 1.2;
margin-bottom: 20px;
}
p {
color: rgba(255,255,255,0.8);
}
.btn-primary {
color: $color__primary !important;
background:#FFF !important;
}
&:before {
height: 500px;
width: 500px;
border-radius: 100%;
position: absolute;
content: "";
right: -20%;
top: -20%;
background-color: $color__secondary;
}
}
.fact-3 {
display: flex;
justify-content: center;
align-items: center;
}
.logos {
list-style: none;
margin-top: 20px;
padding: 0;
display: flex;
align-items: center;
flex-wrap: wrap;
li {
width: 90px;
margin-right: 26px;
margin-bottom: 30px;
}
}
.container-fluid {
padding: 0 !important;
}
}
.about-4 {
p {
font-size: 0.9em;
}
.facts {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
color:#FFF;
align-items: center;
margin-bottom: 0;
margin-top: 50px;
li {
width: 50%;
text-align: center;
padding: 30px;
strong {
font-size: 50px;
display: block;
font-weight: normal;
}
span {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
&:first-child {
border-right: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}
&:last-child {
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
}
}
}
.logos {
ul {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
li {
width: 150px;
display: flex;
align-items: center;
justify-content: center;
height: 100px;
padding: 20px;
}
}
}
}
/*=================REVIEW===================
===========================================*/
.reviews {
margin-top: 40px;
.swiper-slide {
padding-bottom: 15px;
}
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
bottom: -3px;
}
}
.review-img {border-radius: 100%; overflow: hidden; height: 120px; width: 120px; background-color: #eff1f4; }
.review-author {font-size: 18px; font-weight: 600; margin-top: 10px; }
.review-role {font-size: 14px; font-weight: normal; }
.review-contry {display: flex; align-items: center; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; margin-bottom: 0; }
.review-contry img {margin-right: 10px; }
.review-quote {color: #0f346c; font-size: 20px; line-height: 1.5; }
.review-icon {width: 40px; position: absolute; left: -6%; }
/*=================CTA===================
===========================================*/
.cta {
h2 {
font-size: 52px;
}
.btns .btn {
margin: 0 10px;
font-size: 18px;
}
}
.more-stuffs {
padding: 10px 0;
a {
font-size: 0.9em;
color: #000;
display: flex;
align-items: center;
ion-icon {
font-size: 18px;
margin-left: 10px;
}
}
}
/*=================FAQ===================
===========================================*/
.faq {
h2 {
font-size: 20px;
}
}
.schema-faq-code .faq-q {font-size: 18px; margin: 0; padding: 12px 56px 12px 0px; line-height: 1.4; cursor: pointer; position: relative; border-bottom: 1px solid #dedee0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.schema-faq-code .faq-q:after {content: "+"; position: absolute; top: 50%; right: 0; width: 16px; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight: bold; color: #000; font-size: 20px; }
.schema-faq-code .faq-q .faq-q-open:after {content: "-"; }
.schema-faq-code .faq-a {margin: 0; padding: 12px; background-color: #fff; font-size: 14px; line-height: 1.4; border-bottom: 1px solid #dedee0; display: none; }
.schema-faq-code .faq-question:last-child .faq-div {border-bottom: none; }
.schema-faq-code .faq-question:last-child .faq-a {border-bottom: 0px; }
.schema-faq-code .faq-q {font-size: 16px; font-weight: normal; margin: 0; padding: 12px 56px 12px 0px; line-height: 1.4; cursor: pointer; position: relative; border-bottom: 1px solid #dedee0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.faq-q:after {content: "+"; position: absolute; top: 50%; right: 0; width: 16px; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight: bold; color: #000; font-size: 20px; }
.faq-q.faq-q-open:after {content: "-"; }
.faq-a {margin: 0; padding: 12px; background-color:#fff; font-size: 14px; line-height: 1.4; border-bottom: 1px solid #dedee0; display: none; }
.faq-a ul{ list-style: disc; margin-left: 30px }
.faq-a li{ margin-bottom: 10px }
.schema-faq-code .faq-question:last-child .faq-a {border-bottom:0px; }
.schema-faq-code .faq-q {border:none !important; font-size: 16px !important; }
.schema-faq-code .faq-a {padding: 20px 0; background-color: transparent; font-size: 16px; line-height: 24px; padding-top: 5px; color: #5d6769}
.faq-div {border-bottom: 1px solid #CCC; }
.faq-q-open, .faq-a-open {opacity: 1; }
.faq-q-open {color: #0f346c; }
.schema-faq-code .faq-q {padding: 10px 56px 10px 0px !important; }
.schema-faq-code .faq-q::after {font-size: 24px !important; font-weight: normal !important; }
.schema-faq-code .faq-q {font-size: 14px; margin: 0; padding: 12px 56px 12px 0px; line-height: 1.4; cursor: pointer; position: relative; border-bottom: 1px solid #dedee0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.faq-q:after {content: "+"; position: absolute; top: 50%; right: 0; width: 16px; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-weight: bold; color: #000; font-size: 20px; }
.faq-q.faq-q-open:after {content: "-"; }
.faq-a {margin: 0; padding: 12px; background-color:#fff; font-size: 14px; line-height: 1.4; border-bottom: 1px solid #dedee0; display: none; }
.schema-faq-code .faq-question:last-child .faq-a {border-bottom:0px; }
.schema-faq-code .fa{ margin-right: 5px }
/*=================FOOTER===================
===========================================*/
.stars i {
color: orange;
}
.g-review {
p {
font-size: 12px;
}
}
.footer-creds {
display: flex;
align-items: center;
justify-content: flex-end;
a {
margin: 0 10px;
}
}
.footer {
.blur-heading {
margin-top: 0;
}
.footer-links {
padding-left: 0;
list-style: none;
font-size: 0.8em;
margin-top: 15px;
li {
margin-bottom: 7px;
}
i {
min-width: 20px;
display: inline-block;
}
}
}
.copyright {
font-size: 0.7em;
opacity: 0.5;
}
.header {
.blur-heading {
margin-top: 0;
}
.header-links {
padding-left: 0;
list-style: none;
font-size: 0.9em;
margin-top: 15px;
li {
margin-bottom: 7px;
}
i {
min-width: 20px;
display: inline-block;
}
}
}
.about-5 {
p {
font-size: 0.9em;
}
.section-header {
padding-right: 100px;
h2 {
font-size: 44px;
}
}
.logos {
padding-left: 100px;
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
li {
width: 120px;
padding: 20px;
}
}
}
.facts {
min-height: 200px;
position: relative;
padding:0;
li {
height: 180px;
width: 180px;
border-radius: 100%;
border:4px solid $color__primary;
background-color: transparent;
list-style: none;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: absolute;
strong {
font-size: 40px;
display: block;
font-weight: 400;
}
span {
display: block;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
}
&:first-child {
top: -50%;
left: 0;
}
&:nth-child(2) {
top: 0%;
left: 25%;
transform: scale(0.9);
}
&:nth-child(3) {
top: 0%;
left: 50%;
}
&:nth-child(4) {
top: -55%;
left: 75%;
transform: scale(0.7);
}
}
}
}
.bor-5 {
border:3px solid $color__primary;
}
.inner-hero {
height:calc(100vh - 100px);
align-items: center;
display: flex;
h1 {
font-size: 50px;
}
.case-points {
margin-bottom: 20px;
.cp-label {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
color: #777;
margin-bottom: 10px;
}
.cp-value {
font-size: 16px;
}
ul.cp-value {
padding-left: 17px;
li {
margin-bottom: 5px;
}
}
}
}
.creds {
display: flex;
.cred-item {
margin-right: 30px;
min-width: 130px;
}
span {
display: block;
}
.big {
font-size: 30px;
font-weight: bold;
color: #cf307d;
}
.small {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
}
}
.work-wrapper {
.work-image {
min-height: 450px;
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.work-content {
display: flex;
margin-top: 40px;
justify-content: space-between;
p {
margin-right: 50px;
width: 350px;
}
h3 {
font-size: 24px;
line-height: 1.5;
}
}
}
.projects {
display: flex;
flex-wrap: wrap;
margin-right: -20px;
margin-left: -20px;
}
.project-item {
flex: 0 0 50%;
max-width: 50%;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 20px;
padding-left: 20px;
margin-top: 30px;
}
.project-item img {
max-width: 100%;
border-radius: 8px;
}
.project-brief {
display: flex;
margin-top: 40px;
justify-content: space-between;
p {
margin-right: 50px;
width: 350px;
}
h3 {
font-size: 24px;
line-height: 1.5;
}
}
.cursor {
position: fixed;
pointer-events: none;
opacity: 0;
}
.cursor-eye {
top: -50px;
left: -50px;
padding: 20px;
z-index: 1;
border-radius: 50%;
background-color: var(--darkblue);
}
.cursor-show {
height: 60px;
width: 60px;
background: rgba(0,0,0,0.8);
display: flex;
border-radius: 100%;
text-align: center;
color: #FFF;
justify-content: center;
align-items: center;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
}
.about-3 {
.section-header h2 {
font-size: 60px;
}
.link-arrow {
color: #FFF;
&:hover {
color: #FFF;
opacity: 0.9;
}
}
}
.feature-tabs {
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
background:#f4f4f4;
color:#000;
}
h3 {
font-size:24px;
}
}
.img-box {
background: #f4f4f4;
min-height: 289px;
padding: 16px;
display: flex;
align-items: center;
border-radius: 8px;
justify-content:center;
}
.pay-features {
h4 {
font-size:18px;
}
}
.card {
border:none;
box-shadow:0 1px 2px rgba(0,0,0,0.1);
padding:20px 30px;
}
.bordercard {
border-top:2px solid #000;
.num {
display:block;
margin-top:10px;
margin-bottom:15px;
font-weight:bold;
}
p {
font-weight:500;
}
}
.list-options {
padding-left:17px;
list-style:disclosure-closed;
li {
margin-bottom:10px;
font-weight:500;
font-size:22px;
}
}
.on-dark {
color:#FFF;
.form-control {
background:transparent;
border:1px solid #FFF;
}
}
.case-cta {
background-color: black;
color: white;
background-image: url('../images/black-bg.jpg');
background-size: 52%;
background-repeat: no-repeat;
background-position: center;
}