Skip to content

M
makura-2025
Commit ef3f0661 by jhukal9@gmail.com
Options

minor chage

parent fb446ac3
Showing with 3374 additions and 3301 deletions
assets/css/style (1).css deleted 100644 → 0
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/css/style.css
This source diff could not be displayed because it is too large. You can view the blob instead.
assets/img/angle-right.svg 0 → 100644
<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L6 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 11L6 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
dev/sass/base/_base.scss
...@@ -29,44 +29,44 @@ ...@@ -29,44 +29,44 @@
// 1: Global CSS Start // 1: Global CSS Start
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
@media (min-width: 300px) and (max-width: 1399.98px) { @media (min-width: 300px) and (max-width: 1399.98px) {
font-size: smaller; font-size: smaller;
} }
} }
body { body {
font-family: $body-font; font-family: $body-font;
position: relative; position: relative;
overflow-x: hidden; overflow-x: hidden;
&.no-scroll { &.no-scroll {
overflow: hidden !important; overflow: hidden !important;
} }
} }
a { a {
text-decoration: none; text-decoration: none;
text-underline-offset: 2px; text-underline-offset: 2px;
} }
ul, ul,
ol { ol {
padding-left: 0; padding-left: 0;
} }
img { img {
max-width: 100%; max-width: 100%;
} }
.container { .container {
@media (min-width: 1300px) and (max-width: 1439.98px) { @media (min-width: 1300px) and (max-width: 1439.98px) {
max-width: 1200px; max-width: 1200px;
} }
@media (min-width: 1920px) { @media (min-width: 1920px) {
max-width: 1640px; max-width: 1640px;
} }
} }
// 1: Global CSS End // 1: Global CSS End
...@@ -78,27 +78,27 @@ h3, ...@@ -78,27 +78,27 @@ h3,
h4, h4,
h5, h5,
h6 { h6 {
font-family: $body-font; font-family: $body-font;
font-weight: 700; font-weight: 700;
color: #121526; color: #121526;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
font-size: 1.875rem !important; font-size: 1.875rem !important;
} }
} }
//2: paragraph font-size //2: paragraph font-size
p { p {
font-family: $body-font; font-family: $body-font;
font-size: 1.125rem; font-size: 1.125rem;
color: #58595a; color: #58595a;
letter-spacing: -0.5px; letter-spacing: -0.5px;
} }
ul { ul {
li { li {
font-size: 1.125rem; font-size: 1.125rem;
} }
} }
// 3: Fonts Family Start // 3: Fonts Family Start
...@@ -107,581 +107,581 @@ ul { ...@@ -107,581 +107,581 @@ ul {
// 4: Font Colors Start // 4: Font Colors Start
.text-danger { .text-danger {
color: red; color: red;
} }
.text-grey { .text-grey {
color: $grey !important; color: $grey !important;
} }
//primary-second color //primary-second color
.primary-second { .primary-second {
background-color: $primary-second; background-color: $primary-second;
} }
.background-dark { .background-dark {
background: $background-dark !important; background: $background-dark !important;
p, p,
a, a,
span, span,
.svg-wrapper, .svg-wrapper,
.views { .views {
color: $white !important; color: $white !important;
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: $white !important; color: $white !important;
} }
} }
.text-primary-dark { .text-primary-dark {
color: $primary; color: $primary;
} }
// 4: Font Colors End // 4: Font Colors End
// 5: Font Size Start // 5: Font Size Start
.font-8 { .font-8 {
font-size: 0.5rem !important; font-size: 0.5rem !important;
} }
.font-10 { .font-10 {
font-size: 0.625rem !important; font-size: 0.625rem !important;
} }
.font-12 { .font-12 {
font-size: 0.75rem !important; font-size: 0.75rem !important;
} }
.font-14 { .font-14 {
font-size: 0.875rem !important; font-size: 0.875rem !important;
} }
.font-15 { .font-15 {
font-size: 0.9375rem !important; font-size: 0.9375rem !important;
} }
.font-16 { .font-16 {
font-size: 1rem !important; font-size: 1rem !important;
} }
.font-18 { .font-18 {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
.font-20 { .font-20 {
font-size: 1.25rem !important; font-size: 1.25rem !important;
} }
.font-24 { .font-24 {
font-size: 1.5rem !important; font-size: 1.5rem !important;
} }
.font-32 { .font-32 {
font-size: 2rem !important; font-size: 2rem !important;
} }
.font-36 { .font-36 {
font-size: 2.25rem !important; font-size: 2.25rem !important;
} }
.font-40 { .font-40 {
font-size: 2.5rem !important; font-size: 2.5rem !important;
} }
.font-44 { .font-44 {
font-size: 2.75rem !important; font-size: 2.75rem !important;
} }
.font-48 { .font-48 {
font-size: 3rem !important; font-size: 3rem !important;
} }
.ls-1 { .ls-1 {
letter-spacing: 1px; letter-spacing: 1px;
} }
// 5: Font Size End // 5: Font Size End
// 6: Font Weights Start // 6: Font Weights Start
.fw-400 { .fw-400 {
font-weight: 400; font-weight: 400;
} }
.fw-500 { .fw-500 {
font-weight: 500; font-weight: 500;
} }
.fw-600 { .fw-600 {
font-weight: 600; font-weight: 600;
} }
.fw-700 { .fw-700 {
font-weight: 700; font-weight: 700;
} }
.fw-900 { .fw-900 {
font-weight: 900; font-weight: 900;
} }
// 6: Font Weights Ens // 6: Font Weights Ens
// 7: Margins Start // 7: Margins Start
.mt-40 { .mt-40 {
margin-top: 2.5rem; margin-top: 2.5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-top: 2rem; margin-top: 2rem;
} }
} }
.mb-20 { .mb-20 {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-bottom: 1.125rem; margin-bottom: 1.125rem;
} }
} }
.mb-30 { .mb-30 {
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
} }
.mb-40 { .mb-40 {
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.my-40 { .my-40 {
@extend .mt-40; @extend .mt-40;
@extend .mb-40; @extend .mb-40;
} }
.mt-60 { .mt-60 {
margin-top: 3.75rem; margin-top: 3.75rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-top: 2rem; margin-top: 2rem;
} }
} }
.mb-60 { .mb-60 {
margin-bottom: 3.75rem; margin-bottom: 3.75rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.my-60 { .my-60 {
@extend .mt-60; @extend .mt-60;
@extend .mb-60; @extend .mb-60;
} }
.mt-80 { .mt-80 {
margin-top: 5rem; margin-top: 5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-top: 2rem; margin-top: 2rem;
} }
} }
.mb-80 { .mb-80 {
margin-bottom: 5rem; margin-bottom: 5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.my-80 { .my-80 {
@extend .mt-80; @extend .mt-80;
@extend .mb-80; @extend .mb-80;
} }
.mt-100 { .mt-100 {
margin-top: 6.25rem; margin-top: 6.25rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-top: 2rem; margin-top: 2rem;
} }
} }
.mb-100 { .mb-100 {
margin-bottom: 6.25rem; margin-bottom: 6.25rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.my-100 { .my-100 {
@extend .mt-100; @extend .mt-100;
@extend .mb-100; @extend .mb-100;
} }
.mt-120 { .mt-120 {
margin-top: 7.5rem; margin-top: 7.5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-top: 2rem; margin-top: 2rem;
} }
} }
.mb-120 { .mb-120 {
margin-bottom: 7.5rem; margin-bottom: 7.5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.my-120 { .my-120 {
@extend .mt-120; @extend .mt-120;
@extend .mb-120; @extend .mb-120;
} }
.mr-12 { .mr-12 {
margin-right: 0.75rem; margin-right: 0.75rem;
} }
.ml-12 { .ml-12 {
margin-left: 0.75rem; margin-left: 0.75rem;
} }
// 7: Margins Ends // 7: Margins Ends
// 8: Paddings Starts // 8: Paddings Starts
.pt-40 { .pt-40 {
padding-top: 2.5rem; padding-top: 2.5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-top: 2rem; padding-top: 2rem;
} }
} }
.pt-10 { .pt-10 {
padding-top: 0.625rem; padding-top: 0.625rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-top: 0.625rem; padding-top: 0.625rem;
} }
} }
.pb-10 { .pb-10 {
padding-bottom: 0.625rem; padding-bottom: 0.625rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-bottom: 0.625rem; padding-bottom: 0.625rem;
} }
} }
.pb-20 { .pb-20 {
padding-bottom: 1.25rem; padding-bottom: 1.25rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-bottom: 0.9375rem; padding-bottom: 0.9375rem;
} }
} }
.pr-20 { .pr-20 {
padding-right: 1.25rem; padding-right: 1.25rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-right: 0.9375rem; padding-right: 0.9375rem;
} }
} }
.pr-10 { .pr-10 {
padding-right: 0.625rem; padding-right: 0.625rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-right: 0.625rem; padding-right: 0.625rem;
} }
} }
.pb-30 { .pb-30 {
padding-bottom: 1.875rem; padding-bottom: 1.875rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-bottom: 1.25rem; padding-bottom: 1.25rem;
} }
} }
.pb-40 { .pb-40 {
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
} }
.pb-28 { .pb-28 {
padding-bottom: 1.75rem; padding-bottom: 1.75rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-bottom: 1.25rem; padding-bottom: 1.25rem;
} }
} }
.py-10 { .py-10 {
@extend .pt-10; @extend .pt-10;
@extend .pb-10; @extend .pb-10;
} }
.py-40 { .py-40 {
@extend .pt-40; @extend .pt-40;
@extend .pb-40; @extend .pb-40;
} }
.py-60 { .py-60 {
padding-top: 3.75rem; padding-top: 3.75rem;
padding-bottom: 3.75rem; padding-bottom: 3.75rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 2rem; padding-bottom: 2rem;
} }
} }
.pt-60 { .pt-60 {
padding-top: 3.75rem; padding-top: 3.75rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-top: 2rem; padding-top: 2rem;
} }
} }
.pb-60 { .pb-60 {
padding-bottom: 3.75rem; padding-bottom: 3.75rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
} }
.py-60 { .py-60 {
@extend .pt-60; @extend .pt-60;
@extend .pb-60; @extend .pb-60;
} }
.pt-80 { .pt-80 {
padding-top: 5rem; padding-top: 5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-top: 2rem; padding-top: 2rem;
} }
} }
.pb-80 { .pb-80 {
padding-bottom: 5rem; padding-bottom: 5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
} }
.py-80 { .py-80 {
@extend .pt-80; @extend .pt-80;
@extend .pb-80; @extend .pb-80;
} }
.pt-100 { .pt-100 {
padding-top: 6.25rem; padding-top: 6.25rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-top: 2rem; padding-top: 2rem;
} }
} }
.pb-100 { .pb-100 {
padding-bottom: 6.25rem; padding-bottom: 6.25rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
} }
.py-100 { .py-100 {
@extend .pt-100; @extend .pt-100;
@extend .pb-100; @extend .pb-100;
} }
.pt-120 { .pt-120 {
padding-top: 7.5rem; padding-top: 7.5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-top: 2rem; padding-top: 2rem;
} }
} }
.pb-120 { .pb-120 {
padding-bottom: 7.5rem; padding-bottom: 7.5rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding-bottom: 2rem; padding-bottom: 2rem;
} }
} }
.py-120 { .py-120 {
@extend .pt-120; @extend .pt-120;
@extend .pb-120; @extend .pb-120;
} }
.p-40 { .p-40 {
padding: 2.5rem; padding: 2.5rem;
} }
.p-80 { .p-80 {
padding: 5rem; padding: 5rem;
} }
// 8: btn padding // 8: btn padding
.btn-start-project, .btn-start-project,
.btn-start-project { .btn-start-project {
padding: 0.75rem 1.625rem; padding: 0.75rem 1.625rem;
border-radius: 0; border-radius: 0;
@media screen and (min-width: 770px) and (max-width: 1024.98px) { @media screen and (min-width: 770px) and (max-width: 1024.98px) {
padding: 0.75rem 1.75rem; padding: 0.75rem 1.75rem;
font-size: 12px !important; font-size: 12px !important;
} }
&:hover { &:hover {
background-color: $primary-second; background-color: $primary-second;
color: #fff; color: #fff;
svg { svg {
path { path {
fill: $white; fill: $white;
} }
} }
} }
} }
.view-linkedin { .view-linkedin {
padding: 0.625rem; padding: 0.625rem;
color: #f9f8f4; color: #f9f8f4;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: 24px;
letter-spacing: -0.4px; letter-spacing: -0.4px;
border: 1px solid #f9f8f4; border: 1px solid #f9f8f4;
} }
.btn-start-project-white { .btn-start-project-white {
padding: 0.75rem 1.625rem; padding: 0.75rem 1.625rem;
border-radius: 0; border-radius: 0;
background-color: $primary; background-color: $primary;
min-width: 12.5rem; min-width: 12.5rem;
justify-content: center; justify-content: center;
color: $white; color: $white;
font-size: 1rem; font-size: 1rem;
font-family: $body-font; font-family: $body-font;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
@media screen and (min-width: 770px) and (max-width: 1024.98px) { @media screen and (min-width: 770px) and (max-width: 1024.98px) {
padding: 0.75rem 1.75rem; padding: 0.75rem 1.75rem;
font-size: 12px !important; font-size: 12px !important;
} }
&:hover { &:hover {
background-color: $primary-second !important; background-color: $primary-second !important;
color: #fff !important; color: #fff !important;
svg { svg {
path { path {
fill: #fff !important; fill: #fff !important;
} }
} }
} }
} }
.btn-start-project-white-background { .btn-start-project-white-background {
padding: 0.75rem 1.625rem; padding: 0.75rem 1.625rem;
border-radius: 0; border-radius: 0;
background-color: transparent; background-color: transparent;
min-width: 12.5rem; min-width: 12.5rem;
justify-content: center; justify-content: center;
color: $primary; color: $primary;
font-size: 1rem; font-size: 1rem;
font-family: $body-font; font-family: $body-font;
border: 1px solid rgba(44, 92, 218, 0.1); border: 1px solid rgba(44, 92, 218, 0.1);
@media screen and (min-width: 770px) and (max-width: 1024.98px) { @media screen and (min-width: 770px) and (max-width: 1024.98px) {
padding: 0.75rem 1.75rem; padding: 0.75rem 1.75rem;
font-size: 12px !important; font-size: 12px !important;
} }
svg { svg {
margin-left: 0.625rem; margin-left: 0.625rem;
} }
&:hover { &:hover {
background-color: $primary-second !important; background-color: $primary-second !important;
color: #fff !important; color: #fff !important;
svg { svg {
path { path {
fill: #fff !important; fill: #fff !important;
} }
} }
} }
} }
// 9: Return to Top Start // 9: Return to Top Start
#return-to-top { #return-to-top {
position: fixed; position: fixed;
z-index: 99; z-index: 99;
bottom: 20px; bottom: 20px;
right: 2%; right: 2%;
background: $primary; background: $primary;
width: 50px; width: 50px;
height: 50px; height: 50px;
display: block; display: block;
text-decoration: none; text-decoration: none;
-webkit-border-radius: 35px; -webkit-border-radius: 35px;
-moz-border-radius: 35px; -moz-border-radius: 35px;
border-radius: 35px; border-radius: 35px;
line-height: 50px; line-height: 50px;
text-align: center; text-align: center;
-webkit-transition: all 0.3s linear; -webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; -ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease; -o-transition: all 0.3s ease;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
#return-to-top svg { #return-to-top svg {
margin: 0; margin: 0;
stroke: #fff; stroke: #fff;
position: relative; position: relative;
left: 0; left: 0;
top: 0; top: 0;
font-size: 1.875rem; font-size: 1.875rem;
-webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; -ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease; -o-transition: all 0.3s ease;
transition: all 0.3s ease; transition: all 0.3s ease;
&:hover { &:hover {
margin-top: -6px; margin-top: -6px;
} }
} }
// 9: Return to Top Start // 9: Return to Top Start
...@@ -689,71 +689,71 @@ ul { ...@@ -689,71 +689,71 @@ ul {
// 10: Page Not Found Start // 10: Page Not Found Start
// 10: Page Not Found Start // 10: Page Not Found Start
.page-not-found { .page-not-found {
padding: 80px 0; padding: 80px 0;
img { img {
max-height: 200px; max-height: 200px;
} }
.text-content { .text-content {
& > span { & > span {
font-size: 1.25rem; font-size: 1.25rem;
color: #000000; color: #000000;
letter-spacing: 0.28em; letter-spacing: 0.28em;
display: block; display: block;
margin-bottom: 12px; margin-bottom: 12px;
} }
h2 { h2 {
font-size: 3.125rem !important; font-size: 3.125rem !important;
font-weight: 900; font-weight: 900;
margin-bottom: 20px; margin-bottom: 20px;
span { span {
color: $primary; color: $primary;
} }
} }
p { p {
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 400; font-weight: 400;
margin-bottom: 40px; margin-bottom: 40px;
} }
a { a {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
text-decoration: none; text-decoration: none;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
color: #333333; color: #333333;
svg, svg,
i { i {
margin-right: 6px; margin-right: 6px;
font-weight: 200; font-weight: 200;
} }
span { span {
margin-left: 4px; margin-left: 4px;
font-weight: bold; font-weight: bold;
color: $primary; color: $primary;
} }
&:hover { &:hover {
color: $secondary; color: $secondary;
} }
} }
} }
} }
// 10: Page Not Found End // 10: Page Not Found End
.page-not-found { .page-not-found {
height: 82vh; height: 82vh;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
// 10: Page Not Found End // 10: Page Not Found End
...@@ -761,813 +761,813 @@ ul { ...@@ -761,813 +761,813 @@ ul {
// 11: Border Radius // 11: Border Radius
.border-radius-4 { .border-radius-4 {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.border-radius-6 { .border-radius-6 {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.border-radius-8 { .border-radius-8 {
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.border-radius-12 { .border-radius-12 {
border-radius: 0.25rem; border-radius: 0.25rem;
} }
.border-radius-16 { .border-radius-16 {
border-radius: 1rem; border-radius: 1rem;
} }
// 12: Positions // 12: Positions
.position-centered { .position-centered {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
// 13: Flex // 13: Flex
@for $i from 1 through 5 { @for $i from 1 through 5 {
.#{flex}#{$i} { .#{flex}#{$i} {
flex: $i; flex: $i;
} }
} }
// 14: Book Modal // 14: Book Modal
.modal { .modal {
.modal-dialog { .modal-dialog {
.modal-content { .modal-content {
border-radius: 0; border-radius: 0;
.modal-header { .modal-header {
button { button {
background-color: transparent; background-color: transparent;
font-size: 0.875rem; font-size: 0.875rem;
display: flex; display: flex;
align-items: center; align-items: center;
&:hover { &:hover {
color: red; color: red;
svg { svg {
path { path {
stroke: red; stroke: red;
} }
} }
} }
svg { svg {
margin-right: 0.875rem; margin-right: 0.875rem;
} }
} }
} }
.modal-body { .modal-body {
padding: 3.4375rem 6.25rem; padding: 3.4375rem 6.25rem;
@media (max-width: 768px) { @media (max-width: 768px) {
padding: 1.5rem 0; padding: 1.5rem 0;
} }
.form-wrapper { .form-wrapper {
.inner-wrapper { .inner-wrapper {
margin-bottom: 1.5rem !important; margin-bottom: 1.5rem !important;
} }
textarea { textarea {
margin-bottom: 1.75rem !important; margin-bottom: 1.75rem !important;
} }
button { button {
padding: 0.75rem 3.0625rem; padding: 0.75rem 3.0625rem;
} }
} }
} }
} }
} }
} }
// 15: success message // 15: success message
.submit-button-book { .submit-button-book {
.hide { .hide {
display: none; display: none;
position: absolute; position: absolute;
top: 100%; top: 100%;
font-size: 0.75rem; font-size: 0.75rem;
right: 5%; right: 5%;
font-weight: 700; font-weight: 700;
} }
.alert-success { .alert-success {
background: #269612; background: #269612;
color: #fff; color: #fff;
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
} }
} }
//Blogs side bar //Blogs side bar
.related-blogs { .related-blogs {
border: 1px solid gainsboro; border: 1px solid gainsboro;
padding: 1.25rem; padding: 1.25rem;
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
h6 { h6 {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
.related-blogs-wrapper { .related-blogs-wrapper {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
&:hover { &:hover {
.text-content { .text-content {
h6 { h6 {
color: #c52528; color: #c52528;
} }
} }
} }
img { img {
height: 4.375rem; height: 4.375rem;
width: 4.375rem; width: 4.375rem;
object-fit: cover; object-fit: cover;
margin-right: 0.875rem; margin-right: 0.875rem;
} }
.text-content { .text-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
h6 { h6 {
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }
span { span {
color: rgba(73, 73, 73, 0.6); color: rgba(73, 73, 73, 0.6);
} }
} }
} }
} }
.categories { .categories {
border: 1px solid gainsboro; border: 1px solid gainsboro;
padding: 1.25rem; padding: 1.25rem;
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
h6 { h6 {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
ul { ul {
li { li {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
border-bottom: 1px dashed #e2e2e2; border-bottom: 1px dashed #e2e2e2;
padding: 0.75rem 0; padding: 0.75rem 0;
&:hover { &:hover {
a { a {
color: #c52528; color: #c52528;
} }
} }
a { a {
color: #111; color: #111;
} }
} }
} }
} }
.archive { .archive {
border: 1px solid gainsboro; border: 1px solid gainsboro;
padding: 1.25rem; padding: 1.25rem;
border-radius: 0.75rem; border-radius: 0.75rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
h6 { h6 {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
ul { ul {
li { li {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
border-bottom: 1px dashed #e2e2e2; border-bottom: 1px dashed #e2e2e2;
padding: 0.75rem 0; padding: 0.75rem 0;
&:hover { &:hover {
a { a {
color: #c52528; color: #c52528;
} }
} }
a { a {
color: #111; color: #111;
} }
} }
} }
} }
.detail-content { .detail-content {
p { p {
text-align: justify; text-align: justify;
} }
.social-links-blog { .social-links-blog {
ul { ul {
justify-content: center; justify-content: center;
display: flex; display: flex;
list-style-type: none; list-style-type: none;
@media (min-width: 768.98px) and (max-width: 1024.98px) { @media (min-width: 768.98px) and (max-width: 1024.98px) {
justify-content: center; justify-content: center;
} }
li { li {
padding: 0 1.25rem; padding: 0 1.25rem;
@media (max-width: 768.98px) { @media (max-width: 768.98px) {
&:nth-child(1) { &:nth-child(1) {
margin: 0; margin: 0;
} }
} }
a { a {
color: $primary; color: $primary;
font-size: 1.25rem; font-size: 1.25rem;
transition: 0.5s; transition: 0.5s;
&:hover { &:hover {
color: #c52528; color: #c52528;
} }
} }
} }
} }
} }
.leave-comment-section { .leave-comment-section {
.comment-form { .comment-form {
.alert-success { .alert-success {
background: #269612; background: #269612;
color: #fff; color: #fff;
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
} }
} }
} }
} }
.blog-side-bar { .blog-side-bar {
display: block; display: block;
&.show { &.show {
transform: unset; transform: unset;
&.blog-side-bar { &.blog-side-bar {
display: block; display: block;
} }
} }
.blog-filter-bar-close { .blog-filter-bar-close {
display: none; display: none;
} }
@media (max-width: 1023.98px) { @media (max-width: 1023.98px) {
position: fixed; position: fixed;
display: none; display: none;
top: 0; top: 0;
width: 100%; width: 100%;
left: 0; left: 0;
padding: 2.875rem; padding: 2.875rem;
overflow-y: scroll; overflow-y: scroll;
background-color: #fff; background-color: #fff;
height: 100vh; height: 100vh;
z-index: 1111; z-index: 1111;
-webkit-transition: all 0.3s ease; -webkit-transition: all 0.3s ease;
transition: all 0.5s ease; transition: all 0.5s ease;
transform: translateY(100%); transform: translateY(100%);
.blog-filter-bar-close { .blog-filter-bar-close {
display: block; display: block;
} }
} }
} }
//blog-card-wrapper //blog-card-wrapper
.blog-card-wrapper { .blog-card-wrapper {
margin-bottom: 1.875rem; margin-bottom: 1.875rem;
&:hover { &:hover {
img { img {
transform: scale(1.1); transform: scale(1.1);
} }
h3 { h3 {
color: $primary; color: $primary;
} }
} }
a { a {
border: 1px solid #f2f2f2; border: 1px solid transparent;
.img-div { .img-div {
height: 200px; height: 200px;
overflow: hidden; overflow: hidden;
img { img {
transition: all 0.3s ease; transition: all 0.3s ease;
max-height: 200px; max-height: 200px;
width: 100%; width: 100%;
} }
} }
.text-content { .text-content {
padding: 1.25rem; padding: 1.25rem;
h3 { h3 {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.details { .details {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
color: $primary; color: $primary;
} }
p { p {
font-size: 1.125rem; font-size: 1.125rem;
color: #77838f; color: #77838f;
font-weight: 600; font-weight: 600;
} }
.date-views { .date-views {
color: #77838f; color: #77838f;
span { span {
padding-right: 1.25rem; padding-right: 1.25rem;
} }
} }
} }
} }
.text-wrapper { .text-wrapper {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
p { p {
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
.bottom-section { .bottom-section {
margin-top: 1.125rem; margin-top: 1.125rem;
} }
} }
} }
.blog-wrapper { .blog-wrapper {
nav { nav {
margin-top: 3.75rem; margin-top: 3.75rem;
ul { ul {
li { li {
padding: 0 0.75rem; padding: 0 0.75rem;
&:hover { &:hover {
a { a {
background-color: $primary; background-color: $primary;
color: $light; color: $light;
svg { svg {
stroke: #fff; stroke: #fff;
} }
} }
} }
} }
} }
} }
} }
//19: owl-nav //19: owl-nav
.readmoreblogs { .readmoreblogs {
&.owl-carousel { &.owl-carousel {
.owl-nav { .owl-nav {
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
display: none; display: none;
} }
button { button {
border-radius: 50%; border-radius: 50%;
background-color: $primary; background-color: $primary;
color: #fff; color: #fff;
height: 40px; height: 40px;
width: 40px; width: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span { span {
font-size: 27px; font-size: 27px;
} }
&.owl-prev { &.owl-prev {
left: -2rem; left: -2rem;
} }
&.owl-next { &.owl-next {
right: -2rem; right: -2rem;
} }
} }
} }
.owl-dots { .owl-dots {
margin-top: 1.75rem !important; margin-top: 1.75rem !important;
span { span {
background-color: $primary; background-color: $primary;
} }
} }
} }
} }
// 20: book-button-fixed // 20: book-button-fixed
.book-button-fixed { .book-button-fixed {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
display: none; display: none;
@media (max-width: 1024px) { @media (max-width: 1024px) {
display: block; display: block;
} }
button { button {
width: 100%; width: 100%;
} }
} }
@media (max-width: 1023.98px) { @media (max-width: 1023.98px) {
.section-footer { .section-footer {
padding-bottom: 40px; padding-bottom: 40px;
} }
} }
//21: top-banner //21: top-banner
.top-banner { .top-banner {
background: linear-gradient(#84d0f0, #afd9ec); background: linear-gradient(#84d0f0, #afd9ec);
width: 100%; width: 100%;
min-height: 60vh; min-height: 60vh;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
.title-paragraph { .title-paragraph {
@media (max-width: 1200px) { @media (max-width: 1200px) {
margin: 0; margin: 0;
} }
@media (max-width: 425px) { @media (max-width: 425px) {
margin: 0; margin: 0;
} }
} }
.background-cloud { .background-cloud {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
position: absolute; position: absolute;
svg { svg {
height: auto; height: auto;
width: 100%; width: 100%;
position: absolute; position: absolute;
} }
} }
} }
// 22: top-banner-center // 22: top-banner-center
.center-top-title { .center-top-title {
@include positionMiddle; @include positionMiddle;
} }
// 23: top-title-paragraph // 23: top-title-paragraph
.title-paragraph { .title-paragraph {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
@media (max-width: 1200px) { @media (max-width: 1200px) {
margin-bottom: 200px; margin-bottom: 200px;
} }
@media (max-width: 425px) { @media (max-width: 425px) {
margin-bottom: 300px; margin-bottom: 300px;
} }
} }
//blog-card //blog-card
.blog-card { .blog-card {
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding: 0.625rem; padding: 0.625rem;
} }
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
padding: 0; padding: 0;
transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
&:hover { &:hover {
.blog-image-wrapper { .blog-image-wrapper {
img { img {
transform: scale(1.08); transform: scale(1.08);
} }
} }
.text-wrapper { .text-wrapper {
h6 { h6 {
color: $primary; color: $primary;
} }
} }
} }
.blog-image-wrapper { .blog-image-wrapper {
overflow: hidden; overflow: hidden;
height: 16.5rem; height: 16.5rem;
margin-bottom: 1.125rem; margin-bottom: 1.125rem;
img { img {
height: 100%; height: 100%;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
@include transition(); @include transition();
} }
} }
.text-wrapper { .text-wrapper {
transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
margin-bottom: 1.125rem; margin-bottom: 1.125rem;
p { p {
font-size: 1rem; font-size: 1rem;
color: #8e8e8e; color: #8e8e8e;
font-weight: 400; font-weight: 400;
margin-bottom: 1rem; margin-bottom: 1rem;
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
h6 { h6 {
font-weight: 600; font-weight: 600;
font-size: 18px; font-size: 18px;
margin-bottom: 0.875rem; margin-bottom: 0.875rem;
} }
.card-detail { .card-detail {
color: #8e8e8e; color: #8e8e8e;
} }
} }
} }
//job-list //job-list
.job-lists-wrapper { .job-lists-wrapper {
&:last-of-type { &:last-of-type {
.inner-wrapper { .inner-wrapper {
border: 0 !important; border: 0 !important;
} }
} }
.inner-wrapper { .inner-wrapper {
border-bottom: 2px solid rgba(0, 0, 0, 0.2); border-bottom: 2px solid rgba(0, 0, 0, 0.2);
width: 100%; width: 100%;
display: flex !important; display: flex !important;
.job-list { .job-list {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 1.5rem; font-size: 1.5rem;
} }
.vacancy-duration { .vacancy-duration {
span { span {
color: #58595a; color: #58595a;
padding-right: 0.625rem; padding-right: 0.625rem;
} }
} }
} }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
display: block !important; display: block !important;
.job-list { .job-list {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
} }
} }
} }
// pricing-table // pricing-table
.pricing-section { .pricing-section {
table { table {
tbody { tbody {
tr { tr {
th { th {
padding: 1rem; padding: 1rem;
} }
} }
} }
} }
} }
// 25: breadcrumb-background-dark // 25: breadcrumb-background-dark
.breadcrumb-background-dark { .breadcrumb-background-dark {
padding-bottom: 0; padding-bottom: 0;
padding-top: 4.5rem !important; padding-top: 4.5rem !important;
&.background-dark { &.background-dark {
background: #005aff !important; background: #005aff !important;
} }
&.breadcrumb-background-dark { &.breadcrumb-background-dark {
padding-bottom: 2.5rem !important; padding-bottom: 2.5rem !important;
} }
ol, ol,
ul { ul {
margin: 0; margin: 0;
} }
li { li {
a { a {
color: $white !important; color: $white !important;
} }
} }
.breadcrumb-item + .breadcrumb-item { .breadcrumb-item + .breadcrumb-item {
&::before { &::before {
content: ""; content: "";
background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A");
height: 16px; height: 16px;
width: 8px; width: 8px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
margin-right: 8px; margin-right: 8px;
} }
} }
} }
.vacancy-detail-breadcrumb { .vacancy-detail-breadcrumb {
padding-top: 4.5rem !important; padding-top: 4.5rem !important;
background: #121526 !important; background: #121526 !important;
ol, ol,
ul { ul {
margin: 0; margin: 0;
} }
li { li {
a { a {
color: $white !important; color: $white !important;
} }
} }
.breadcrumb-item + .breadcrumb-item { .breadcrumb-item + .breadcrumb-item {
&::before { &::before {
content: ""; content: "";
background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='11' height='10' viewBox='0 0 11 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.51423 5.6495L10.1608 5.00193L10.1589 4.99999L9.50653 4.34468L7.70727 2.53727L5.44039 0.258179L3.16196 2.54886L1.36078 4.35628L0.721895 4.99999L0.719971 5.00193L1.36655 5.6495L3.16581 7.45886L5.44039 9.74181L7.71304 7.45886L9.51423 5.6495Z' fill='white'/%3E%3C/svg%3E%0A");
height: 16px; height: 16px;
width: 8px; width: 8px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
margin-right: 8px; margin-right: 8px;
} }
} }
} }
//terms-and-conditions-wrapper //terms-and-conditions-wrapper
.terms-and-conditions-wrapper { .terms-and-conditions-wrapper {
.col-lg-9 { .col-lg-9 {
padding-left: 0.8125rem; padding-left: 0.8125rem;
} }
.terms-sidebar-wrapper { .terms-sidebar-wrapper {
position: sticky; position: sticky;
top: 20%; top: 20%;
margin-right: 2.5rem; margin-right: 2.5rem;
padding-bottom: 1.875rem; padding-bottom: 1.875rem;
ul { ul {
margin: 0; margin: 0;
list-style-type: none; list-style-type: none;
li { li {
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
border-bottom: 1px solid #acacac; border-bottom: 1px solid #acacac;
&.active { &.active {
color: #000; color: #000;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
a { a {
color: #000; color: #000;
} }
} }
a { a {
color: #acacac; color: #acacac;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
} }
} }
} }
} }
.right-top-content-wrapper { .right-top-content-wrapper {
margin-bottom: 3rem; margin-bottom: 3rem;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: #121526; color: #121526;
font-family: $body-font; font-family: $body-font;
font-size: 2.75rem; font-size: 2.75rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.updated-date { .updated-date {
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
p { p {
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
} }
} }
.point-frame-wrapper { .point-frame-wrapper {
margin-bottom: 3rem; margin-bottom: 3rem;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: #121526; color: #121526;
font-family: $body-font; font-family: $body-font;
font-size: 1.5rem; font-size: 1.5rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
p { p {
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
margin-bottom: 3rem; margin-bottom: 3rem;
} }
} }
} }
//YOU-MAY-LIKE //YOU-MAY-LIKE
.YOU-MAY-LIKE { .YOU-MAY-LIKE {
.main-wrapper .top-title-wrapper p, .main-wrapper .top-title-wrapper p,
span { span {
color: #000 !important; color: #000 !important;
} }
} }
.color-grey { .color-grey {
color: #6c757d; color: #6c757d;
} }
dev/sass/base/_custom_base.scss
...@@ -19,1122 +19,1131 @@ ...@@ -19,1122 +19,1131 @@
// 1: Custom CSS // 1: Custom CSS
//1.1: Arrow Btn //1.1: Arrow Btn
.arrow-btn { .arrow-btn {
display: flex; display: flex;
padding: 10px 20px; padding: 10px 20px;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
padding-right: 50px; padding-right: 50px;
position: relative; position: relative;
text-decoration: unset; text-decoration: unset;
white-space: nowrap; white-space: nowrap;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
right: 20px; right: 20px;
background: url("../../assets/img/arrowRight.svg"); background: url("../../assets/img/arrowRight.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
height: 18px; height: 18px;
width: 18px; width: 18px;
@include transition(); @include transition();
} }
&:hover { &:hover {
&::before { &::before {
right: 10px; right: 10px;
} }
} }
} }
//1.3: Section heading //1.3: Section heading
.section-heading { .section-heading {
text-align: center; text-align: center;
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
h2 { h2 {
line-height: 42px; line-height: 42px;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
font-weight: 900; font-weight: 900;
color: $primary; color: $primary;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
span { span {
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
font-size: 1.125rem; font-size: 1.125rem;
line-height: 32px; line-height: 32px;
color: #6c6c6c; color: #6c6c6c;
} }
} }
//1.4: Hover Up //1.4: Hover Up
.hover-up { .hover-up {
display: block; display: block;
@include transition(); @include transition();
&:hover { &:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
} }
} }
// 1.5: Accordion // 1.5: Accordion
.accordion { .accordion {
.accordion-item { .accordion-item {
border: none; border: none;
border-bottom: 1px solid #ebf2f8; border-bottom: 1px solid #ebf2f8;
.accordion-button { .accordion-button {
font-weight: 600; font-weight: 600;
font-size: 1.125rem; font-size: 1.125rem;
line-height: 28px; line-height: 28px;
color: #000d20; color: #000d20;
&::after { &::after {
content: ""; content: "";
margin-left: auto !important; margin-left: auto !important;
background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5 10.5H11V18H8V10.5H0.5V7.5H8V0H11V7.5H18.5V10.5Z' fill='black'/%3E%3C/svg%3E%0A") !important; background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5 10.5H11V18H8V10.5H0.5V7.5H8V0H11V7.5H18.5V10.5Z' fill='black'/%3E%3C/svg%3E%0A") !important;
background-repeat: no-repeat; background-repeat: no-repeat;
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
background-size: contain; background-size: contain;
display: block; display: block;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
} }
.accordion-button:not(.collapsed) { .accordion-button:not(.collapsed) {
color: none; color: none;
background-color: transparent; background-color: transparent;
box-shadow: none; box-shadow: none;
} }
} }
} }
.accordion-wrapper .accordion-wrapper
.accordion .accordion
.accordion-item.classColor .accordion-item.classColor
.accordion-header .accordion-header
button { button {
&::after { &::after {
content: ""; content: "";
background-image: url("https://makuracreations.online/makura/wp-content/themes/makura/assets/img/close-icon.png") !important; background-image: url("https://makuracreations.online/makura/wp-content/themes/makura/assets/img/close-icon.png") !important;
} }
} }
// 1.6 Owl Carousel // 1.6 Owl Carousel
.owl-carousel { .owl-carousel {
.owl-nav { .owl-nav {
margin-top: 0; margin-top: 0;
button { button {
z-index: 11; z-index: 11;
&.owl-prev { &.owl-prev {
position: absolute; position: absolute;
@include transition(); @include transition();
top: -120px; top: -120px;
right: 0; right: 0;
background-color: #fff; background-color: #fff;
padding: 0.5rem !important; padding: 0.5rem !important;
svg { svg {
stroke: #616161; stroke: #616161;
path { path {
stroke: #616161; stroke: #616161;
} }
} }
right: 70px; right: 70px;
&:hover { &:hover {
background-color: $primary; background-color: $primary;
svg { svg {
path { path {
stroke: #fff; stroke: #fff;
} }
} }
} }
} }
&.owl-next { &.owl-next {
position: absolute; position: absolute;
@include transition(); @include transition();
top: -120px; top: -120px;
right: 0; right: 0;
background-color: #fff; background-color: #fff;
padding: 0.5rem !important; padding: 0.5rem !important;
svg { svg {
stroke: #616161; stroke: #616161;
path { path {
stroke: #616161; stroke: #616161;
} }
} }
&:hover { &:hover {
background-color: $primary; background-color: $primary;
svg { svg {
path { path {
stroke: #fff; stroke: #fff;
} }
} }
} }
} }
} }
} }
&.centered { &.centered {
.owl-nav { .owl-nav {
button { button {
background-color: white; background-color: white;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
} }
.owl-next { .owl-next {
right: 1rem; right: 1rem;
} }
.owl-prev { .owl-prev {
right: unset; right: unset;
left: 1rem; left: 1rem;
} }
} }
} }
} }
// 1.7 Sidebar // 1.7 Sidebar
.sidebar { .sidebar {
height: 100%; height: 100%;
width: 320px; width: 320px;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: 111; z-index: 111;
transform: translateX(-1000%); transform: translateX(-1000%);
.content-wrapper { .content-wrapper {
background-color: $primary; background-color: $primary;
position: relative; position: relative;
z-index: 1111; z-index: 1111;
height: 100%; height: 100%;
} }
@include transition(); @include transition();
.close-btn { .close-btn {
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: -40px; right: -40px;
font-size: 1.25rem; font-size: 1.25rem;
height: 40px; height: 40px;
width: 40px; width: 40px;
background-color: $primary; background-color: $primary;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1rem; font-size: 1rem;
justify-content: center; justify-content: center;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
i { i {
color: #fff; color: #fff;
@include transition(); @include transition();
} }
&:hover { &:hover {
opacity: 0.8; opacity: 0.8;
i { i {
transform: scale(1.3); transform: scale(1.3);
} }
} }
} }
&.cart { &.cart {
left: unset; left: unset;
right: 0; right: 0;
transform: translateX(120%); transform: translateX(120%);
.close-btn { .close-btn {
right: unset; right: unset;
left: -40px; left: -40px;
} }
} }
&.active { &.active {
transform: unset; transform: unset;
} }
} }
//1.8 : Breadcrumb //1.8 : Breadcrumb
.breadcrumb { .breadcrumb {
.breadcrumb-item { .breadcrumb-item {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
a { a {
color: #6c757d; color: #6c757d;
} }
&.active { &.active {
a { a {
color: #000; color: #000;
} }
} }
} }
.breadcrumb-item + .breadcrumb-item { .breadcrumb-item + .breadcrumb-item {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: end; align-items: end;
color: $white; color: $white;
p { p {
color: #000; color: #000;
margin-bottom: 0; margin-bottom: 0;
} }
&::before { &::before {
content: ""; content: "";
// background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.79425 5.64963L9.44083 5.00205L9.43891 5.00012L8.78656 4.34481L6.9873 2.53739L4.72042 0.258301L2.44199 2.54899L0.640807 4.3564L0.00192476 5.00012L0 5.00205L0.64658 5.64963L2.44584 7.45898L4.72042 9.74193L6.99307 7.45898L8.79425 5.64963Z' fill='%23121526'/%3E%3C/svg%3E%0A"); // background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.79425 5.64963L9.44083 5.00205L9.43891 5.00012L8.78656 4.34481L6.9873 2.53739L4.72042 0.258301L2.44199 2.54899L0.640807 4.3564L0.00192476 5.00012L0 5.00205L0.64658 5.64963L2.44584 7.45898L4.72042 9.74193L6.99307 7.45898L8.79425 5.64963Z' fill='%23121526'/%3E%3C/svg%3E%0A");
height: 16px; height: 16px;
width: 8px; width: 8px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
margin-right: 8px; margin-right: 8px;
} }
} }
} }
// 1.9: Form Group // 1.9: Form Group
.form-group { .form-group {
margin-bottom: 1rem; margin-bottom: 1rem;
label { label {
color: #151515; color: #151515;
font-weight: 500; font-weight: 500;
font-size: 0.875rem; font-size: 0.875rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.form-control { .form-control {
height: 3rem; height: 3rem;
background-color: #f9f9f9; background-color: #f9f9f9;
border: 1px solid #d1d1d1; border: 1px solid #d1d1d1;
&:focus, &:focus,
&:focus-visible { &:focus-visible {
box-shadow: none; box-shadow: none;
border: 2px solid $primary; border: 2px solid $primary;
} }
} }
textarea { textarea {
min-height: 100px; min-height: 100px;
} }
.select2-container { .select2-container {
width: 100% !important; width: 100% !important;
height: 3rem !important; height: 3rem !important;
.select2-selection--single { .select2-selection--single {
height: 100%; height: 100%;
.select2-selection__rendered { .select2-selection__rendered {
line-height: 3rem; line-height: 3rem;
} }
.select2-selection__arrow { .select2-selection__arrow {
height: 3rem; height: 3rem;
} }
} }
} }
} }
// 1.10: select2 dropdown // 1.10: select2 dropdown
.select2-dropdown { .select2-dropdown {
z-index: 11111; z-index: 11111;
padding: 0.5rem; padding: 0.5rem;
input { input {
margin-bottom: 1rem; margin-bottom: 1rem;
&:focus-visible { &:focus-visible {
box-shadow: none !important; box-shadow: none !important;
outline: none !important; outline: none !important;
} }
} }
.select2-results__option--highlighted.select2-results__option--selectable { .select2-results__option--highlighted.select2-results__option--selectable {
background: $primary !important; background: $primary !important;
} }
.select2-results__option--highlighted { .select2-results__option--highlighted {
background-color: $primary !important; background-color: $primary !important;
} }
} }
//1.11: Pagination //1.11: Pagination
.pagination { .pagination {
background-color: transparent; background-color: transparent;
li { justify-content: center;
border: 1px solid #121526;
opacity: 0.7; .nav-links {
background: $white; span,
margin-right: 1rem; a {
&:last-child { border: 1px solid #121526;
margin-right: 0; opacity: 0.7;
} background: $white;
a { margin-right: 1rem;
color: #121526; color: #121526;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: 24px;
letter-spacing: -0.4px; letter-spacing: -0.4px;
} padding: 8px 16px;
&.active {
a { &.prev,
background-color: $primary; &.next {
color: #fff; padding: 8px 20px;
&::before { }
display: none;
} &:last-child {
} margin-right: 0;
} }
}
&.current {
background-color: $primary;
color: #fff;
&::before {
display: none;
}
}
}
}
} }
// 1.12: Related Content // 1.12: Related Content
.related-content { .related-content {
.heading { .heading {
@extend .mb-40; @extend .mb-40;
span { span {
font-size: 0.875rem; font-size: 0.875rem;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
color: #000000; color: #000000;
} }
h1 { h1 {
margin-top: 0rem; margin-top: 0rem;
font-weight: 900; font-weight: 900;
line-height: 58px; line-height: 58px;
letter-spacing: 1px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
color: $primary; color: $primary;
} }
} }
} }
//1.13: Expandable-text-wrapper //1.13: Expandable-text-wrapper
.expandable-text-wrapper, .expandable-text-wrapper,
.expandable-text-accordion-wrapper { .expandable-text-accordion-wrapper {
.button-wrapper { .button-wrapper {
margin-top: 1.875rem; margin-top: 1.875rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-top: 1.875rem; margin-top: 1.875rem;
} }
} }
.heading { .heading {
h3 { h3 {
color: $primary; color: $primary;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
.expandable-text, .expandable-text,
.expandable-text-accordion { .expandable-text-accordion {
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
max-height: 21rem; max-height: 21rem;
padding: 2rem; padding: 2rem;
overflow: hidden; overflow: hidden;
transition: all 1s ease; transition: all 1s ease;
position: relative; position: relative;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 1.5rem !important; font-size: 1.5rem !important;
font-weight: 600; font-weight: 600;
} }
ul { ul {
columns: 2; columns: 2;
padding-top: 1.5rem; padding-top: 1.5rem;
padding-bottom: 3rem; padding-bottom: 3rem;
-webkit-column-count: 2; -webkit-column-count: 2;
column-count: 2; column-count: 2;
-webkit-column-gap: 10rem; -webkit-column-gap: 10rem;
column-gap: 3rem; column-gap: 3rem;
max-width: 840px; max-width: 840px;
margin: auto; margin: auto;
li { li {
display: flex; display: flex;
font-size: 1rem; font-size: 1rem;
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-bottom: 3.25rem; margin-bottom: 3.25rem;
} }
.icon { .icon {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
} }
} }
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 65%; height: 65%;
width: 100%; width: 100%;
background-size: cover; background-size: cover;
background-image: url(../../assets/img/expand-text.png); background-image: url(../../assets/img/expand-text.png);
background-repeat: no-repeat; background-repeat: no-repeat;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
display: none; display: none;
} }
} }
p { p {
color: #6c6c6c; color: #6c6c6c;
} }
p.expand { p.expand {
opacity: 0; opacity: 0;
} }
&.expanded { &.expanded {
max-height: 2000px; max-height: 2000px;
&::before { &::before {
display: none; display: none;
} }
p.expand { p.expand {
opacity: 1; opacity: 1;
} }
} }
} }
.see-more-btn, .see-more-btn,
.download-curriculum-btn .see-more-btn-accordion { .download-curriculum-btn .see-more-btn-accordion {
font-size: 1rem; font-size: 1rem;
color: $white; color: $white;
font-weight: 500; font-weight: 500;
background-color: $primary; background-color: $primary;
padding: 0.75rem 3.9375rem; padding: 0.75rem 3.9375rem;
cursor: pointer; cursor: pointer;
} }
} }
//OUR-MOST-RECENT-WORKS //OUR-MOST-RECENT-WORKS
.OUR-MOST-RECENT-WORKS { .OUR-MOST-RECENT-WORKS {
.recent-card-wrapper { .recent-card-wrapper {
margin-bottom: 4rem !important; margin-bottom: 4rem !important;
// display: none; // display: none;
} }
.load-more-content { .load-more-content {
&.hide { &.hide {
display: none !important; display: none !important;
} }
} }
.nav-pills { .nav-pills {
padding: 1.5rem 0; padding: 1.5rem 0;
margin-bottom: 2rem !important; margin-bottom: 2rem !important;
border-top: 1px solid #bfbfbf; border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf; border-bottom: 1px solid #bfbfbf;
li { li {
margin-right: 2.75rem; margin-right: 2.75rem;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
} }
button { button {
padding: 0; padding: 0;
background-color: unset !important; background-color: unset !important;
color: #58595a !important; color: #58595a !important;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
line-height: 24px; line-height: 24px;
letter-spacing: -0.4px; letter-spacing: -0.4px;
&.active { &.active {
color: #005aff !important; color: #005aff !important;
} }
} }
} }
} }
.main-wrapper { .main-wrapper {
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 1.875rem !important; font-size: 1.875rem !important;
} }
} }
padding: 6.25rem 0 3rem 0; padding: 6.25rem 0 3rem 0;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
padding: 1.875rem 0; padding: 1.875rem 0;
} }
.view-button { .view-button {
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
margin-top: 5.125rem; margin-top: 5.125rem;
} }
} }
.top-title-wrapper { .top-title-wrapper {
span { span {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: $primary-second; color: $primary-second;
} }
h2 { h2 {
margin-top: 1.25rem; margin-top: 1.25rem;
color: #121526; color: #121526;
font-family: $body-font; font-family: $body-font;
font-size: 2.5rem; font-size: 2.5rem;
font-weight: 600; font-weight: 600;
line-height: 60px; line-height: 60px;
letter-spacing: -1.4px; letter-spacing: -1.4px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
p { p {
color: #58595a; color: #58595a;
} }
} }
.tabs-wrapper { .tabs-wrapper {
ul { ul {
margin-bottom: 3.625rem !important; margin-bottom: 3.625rem !important;
li { li {
margin-right: 1.25rem; margin-right: 1.25rem;
@media (max-width: 1023.98px) { @media (max-width: 1023.98px) {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
button { button {
border-radius: 0; border-radius: 0;
padding: 0.75rem 2rem; padding: 0.75rem 2rem;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
&:hover { &:hover {
background-color: $primary; background-color: $primary;
color: #fff; color: #fff;
} }
} }
} }
} }
} }
} }
.recent-card-wrapper { .recent-card-wrapper {
&:hover { &:hover {
.bottom-text { .bottom-text {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: $primary; color: $primary;
} }
} }
} }
img { img {
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
height: 16rem; height: 16rem;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
} }
.bottom-text { .bottom-text {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: #121526; color: #121526;
font-family: $body-font; font-family: $body-font;
font-size: 1.375rem; font-size: 1.375rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.6px; letter-spacing: -0.6px;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
p { p {
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
font-size: 0.875rem; font-size: 0.875rem;
font-style: normal; font-style: normal;
font-weight: 500; font-weight: 500;
line-height: 30px; line-height: 30px;
letter-spacing: -0.6px; letter-spacing: -0.6px;
text-decoration-line: underline; text-decoration-line: underline;
margin: 0; margin: 0;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
font-size: 0.875rem !important; font-size: 0.875rem !important;
} }
} }
ul { ul {
flex-wrap: wrap; flex-wrap: wrap;
li { li {
margin-bottom: 4px; margin-bottom: 4px;
font-weight: 600; font-weight: 600;
margin-right: 1.25rem; margin-right: 1.25rem;
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 400; font-weight: 400;
letter-spacing: -0.5px; letter-spacing: -0.5px;
button { button {
border-radius: 0; border-radius: 0;
padding: 0.75rem 3.1875rem; padding: 0.75rem 3.1875rem;
} }
} }
} }
} }
} }
.course-card-wrapper { .course-card-wrapper {
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 2.5rem; margin-bottom: 2.5rem;
overflow: hidden; overflow: hidden;
&:hover { &:hover {
img { img {
transform: scale(1.09); transform: scale(1.09);
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: $primary; color: $primary;
} }
} }
img { img {
width: 100%; width: 100%;
height: 12.5rem; height: 12.5rem;
object-fit: cover; object-fit: cover;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
overflow: hidden; overflow: hidden;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
.inner-content-wrapper { .inner-content-wrapper {
background: $white; background: $white;
padding: 0 1.25rem 1.5rem 1.25rem; padding: 0 1.25rem 1.5rem 1.25rem;
} }
ul { ul {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
li { li {
color: #8f8f8f !important; color: #8f8f8f !important;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
} }
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: #000; color: #000;
font-family: $body-font; font-family: $body-font;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.4px; letter-spacing: -0.4px;
margin-bottom: 1.125rem; margin-bottom: 1.125rem;
} }
.review-star-wrapper { .review-star-wrapper {
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
.star { .star {
margin-right: 0.625rem; margin-right: 0.625rem;
} }
} }
.rating-text { .rating-text {
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.4px; letter-spacing: -0.4px;
} }
.course-price { .course-price {
color: #000; color: #000;
font-family: $body-font; font-family: $body-font;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.4px; letter-spacing: -0.4px;
} }
&.high-rated-card { &.high-rated-card {
.course-price { .course-price {
color: #1226aa; color: #1226aa;
font-family: $body-font; font-family: $body-font;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.4px; letter-spacing: -0.4px;
} }
} }
} }
//OUR-MOST-RECENT-WORKS //OUR-MOST-RECENT-WORKS
//request-success-modal //request-success-modal
.request-success-modal { .request-success-modal {
display: none; display: none;
animation: grow 2s ease; animation: grow 2s ease;
} }
@keyframes grow { @keyframes grow {
from { from {
transform: scale(0); transform: scale(0);
} }
to { to {
transform: scale(1); transform: scale(1);
} }
} }
// success-request // success-request
.success-request { .success-request {
animation: grow 0.3s ease; animation: grow 0.3s ease;
svg { svg {
margin-bottom: 3.1875rem; margin-bottom: 3.1875rem;
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: #121526; color: #121526;
font-family: $body-font; font-family: $body-font;
font-size: 2rem; font-size: 2rem;
font-weight: 600; font-weight: 600;
letter-spacing: -1px; letter-spacing: -1px;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
p { p {
color: #58595a; color: #58595a;
text-align: center; text-align: center;
font-family: $body-font; font-family: $body-font;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
margin-bottom: 3rem; margin-bottom: 3rem;
span { span {
color: #2c5cda; color: #2c5cda;
font-family: $body-font; font-family: $body-font;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 700; font-weight: 700;
} }
} }
button { button {
color: #f9f8f4; color: #f9f8f4;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.4px; letter-spacing: -0.4px;
padding: 0.75rem 4.375rem; padding: 0.75rem 4.375rem;
} }
} }
//modal-steps-wrapper //modal-steps-wrapper
.modal-steps-wrapper { .modal-steps-wrapper {
#cf7mls-back-btn-cf7mls_step-7 { #cf7mls-back-btn-cf7mls_step-7 {
display: none; display: none;
} }
textarea { textarea {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
width: 100%; width: 100%;
padding: 1.125rem 1rem; padding: 1.125rem 1rem;
color: #000; color: #000;
font-family: $body-font; font-family: $body-font;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 400; font-weight: 400;
letter-spacing: -0.3px; letter-spacing: -0.3px;
resize: none; resize: none;
} }
input { input {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
padding: 1.125rem 1rem; padding: 1.125rem 1rem;
border-radius: 0; border-radius: 0;
&:focus { &:focus {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
padding: 1.125rem 1rem; padding: 1.125rem 1rem;
border-radius: 0; border-radius: 0;
outline: none; outline: none;
border: 1px solid #ced4da; border: 1px solid #ced4da;
box-shadow: unset; box-shadow: unset;
} }
} }
.wpcf7-form .fieldset-cf7mls .cf7mls-btns { .wpcf7-form .fieldset-cf7mls .cf7mls-btns {
min-height: unset !important; min-height: unset !important;
margin-top: 1.875rem; margin-top: 1.875rem;
} }
//cf7mls-btns //cf7mls-btns
.cf7mls-btns { .cf7mls-btns {
display: flex; display: flex;
margin-left: auto; margin-left: auto;
text-align: left; text-align: left;
button { button {
background: #005aff; background: #005aff;
margin: 0 !important; margin: 0 !important;
padding: 0.75rem 3.625rem !important; padding: 0.75rem 3.625rem !important;
color: #f9f8f4 !important; color: #f9f8f4 !important;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
height: 100%; height: 100%;
border-radius: 0; border-radius: 0;
&.cf7mls_back { &.cf7mls_back {
margin-right: 1rem !important; margin-right: 1rem !important;
} }
} }
} }
.step-text { .step-text {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: #1226aa !important; color: #1226aa !important;
font-family: $body-font; font-family: $body-font;
font-size: 0.875rem !important; font-size: 0.875rem !important;
font-weight: 600 !important; font-weight: 600 !important;
line-height: 20px !important; line-height: 20px !important;
letter-spacing: -0.3px; letter-spacing: -0.3px;
} }
} }
button, button,
.button { .button {
color: #f9f8f4 !important; color: #f9f8f4 !important;
padding: 0.75rem 3.625rem; padding: 0.75rem 3.625rem;
font-family: $body-font; font-family: $body-font;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.4px; letter-spacing: -0.4px;
&.previous { &.previous {
color: #000 !important; color: #000 !important;
border: 1px solid #000; border: 1px solid #000;
border-radius: 0; border-radius: 0;
margin-right: 1rem; margin-right: 1rem;
&:hover { &:hover {
color: $white !important; color: $white !important;
background-color: $dark; background-color: $dark;
} }
} }
&.cf7mls_back { &.cf7mls_back {
color: #000 !important; color: #000 !important;
margin: 0; margin: 0;
} }
} }
.cf7mls_back { .cf7mls_back {
color: #000 !important; color: #000 !important;
border: 1px solid #000; border: 1px solid #000;
border-radius: 0; border-radius: 0;
margin-right: 1rem; margin-right: 1rem;
background-color: transparent !important; background-color: transparent !important;
background: transparent !important; background: transparent !important;
padding: 0.75rem 3.625rem; padding: 0.75rem 3.625rem;
} }
.wpcf7-form-control-wrap { .wpcf7-form-control-wrap {
position: relative; position: relative;
&::before { &::before {
content: ""; content: "";
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1342_2289)'%3E%3Cpath d='M18 9L12 15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 9L12 15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1342_2289'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1342_2289)'%3E%3Cpath d='M18 9L12 15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 9L12 15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1342_2289'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 1%; right: 1%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
&.cf7mls-invalid { &.cf7mls-invalid {
&::before { &::before {
content: ""; content: "";
top: 17%; top: 17%;
} }
} }
} }
select { select {
width: 100%; width: 100%;
padding: 1.125rem 1rem; padding: 1.125rem 1rem;
color: #000; color: #000;
font-family: $body-font; font-family: $body-font;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 400; font-weight: 400;
letter-spacing: -0.3px; letter-spacing: -0.3px;
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
appearance: none; appearance: none;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
margin-bottom: 1rem; margin-bottom: 1rem;
cursor: pointer; cursor: pointer;
} }
.wpcf7-spinner { .wpcf7-spinner {
position: absolute !important; position: absolute !important;
bottom: 30px; bottom: 30px;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.fieldset-cf7mls-wrapper { .fieldset-cf7mls-wrapper {
fieldset { fieldset {
&:nth-child(5) { &:nth-child(5) {
.wpcf7-form-control-wrap { .wpcf7-form-control-wrap {
&::before { &::before {
display: none; display: none;
} }
} }
} }
&:nth-child(7) { &:nth-child(7) {
.wpcf7-form-control-wrap { .wpcf7-form-control-wrap {
&::before { &::before {
display: none; display: none;
} }
} }
.wpcf7-submit { .wpcf7-submit {
color: #f9f8f4 !important; color: #f9f8f4 !important;
padding: 0.75rem 3.625rem; padding: 0.75rem 3.625rem;
font-family: "Sora", sans-serif; font-family: "Sora", sans-serif;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
letter-spacing: -0.4px; letter-spacing: -0.4px;
background-color: $primary; background-color: $primary;
outline: none; outline: none;
border: none; border: none;
border-radius: 0; border-radius: 0;
margin-right: 4.3125rem; margin-right: 4.3125rem;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
} }
&:nth-child(6) { &:nth-child(6) {
.wpcf7-form-control-wrap { .wpcf7-form-control-wrap {
&::before { &::before {
display: none; display: none;
} }
} }
} }
.sent-quote-btn-wrapper { .sent-quote-btn-wrapper {
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
p { p {
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.wpcf7-spinner { .wpcf7-spinner {
left: 88%; left: 88%;
bottom: 14%; bottom: 14%;
@media (max-width: 1199px) { @media (max-width: 1199px) {
left: 83% !important; left: 83% !important;
bottom: 12% !important; bottom: 12% !important;
} }
@media (max-width: 425px) { @media (max-width: 425px) {
left: 83% !important; left: 83% !important;
bottom: 11% !important; bottom: 11% !important;
} }
} }
} }
} }
} }
} }
fieldset { fieldset {
p { p {
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 400; font-weight: 400;
} }
} }
.modal-steps-wrapper-box { .modal-steps-wrapper-box {
fieldset { fieldset {
.wpcf7-spinner { .wpcf7-spinner {
position: absolute; position: absolute;
background: red; background: red;
z-index: 9999999999; z-index: 9999999999;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
&:not(:first-of-type) { &:not(:first-of-type) {
display: none; display: none;
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
color: #121526; color: #121526;
font-family: $body-font; font-family: $body-font;
font-size: 2rem; font-size: 2rem;
font-weight: 600; font-weight: 600;
letter-spacing: -1px; letter-spacing: -1px;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
p { p {
color: #58595a; color: #58595a;
font-family: $body-font; font-family: $body-font;
font-size: 1.125rem; font-size: 1.125rem;
line-height: 28px; line-height: 28px;
letter-spacing: -0.5px; letter-spacing: -0.5px;
margin-bottom: 1.9375rem; margin-bottom: 1.9375rem;
} }
.input-wrapper { .input-wrapper {
margin-bottom: 3.75rem; margin-bottom: 3.75rem;
} }
label { label {
color: #121526; color: #121526;
font-family: $body-font; font-family: $body-font;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
margin-bottom: 0.625rem; margin-bottom: 0.625rem;
} }
input { input {
background: rgba(0, 0, 0, 0.05); background: rgba(0, 0, 0, 0.05);
padding: 1.125rem 1rem; padding: 1.125rem 1rem;
border-radius: 0; border-radius: 0;
&::placeholder { &::placeholder {
color: rgba(88, 89, 90, 0.4); color: rgba(88, 89, 90, 0.4);
font-family: $body-font; font-family: $body-font;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
letter-spacing: -0.3px; letter-spacing: -0.3px;
} }
} }
.select-wrapper { .select-wrapper {
margin-bottom: 3.75rem; margin-bottom: 3.75rem;
&::before { &::before {
content: ""; content: "";
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1342_2289)'%3E%3Cpath d='M18 9L12 15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 9L12 15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1342_2289'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1342_2289)'%3E%3Cpath d='M18 9L12 15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 9L12 15' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1342_2289'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 1%; right: 1%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
} }
} }
} }
} }
// error message contact form 7 // error message contact form 7
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { .wpcf7 form.payment-required .wpcf7-response-output {
position: fixed; position: fixed;
width: 35%; width: 35%;
bottom: 20%; bottom: 20%;
right: 0; right: 0;
padding: 28px; padding: 28px;
border-radius: 8px; border-radius: 8px;
background: #ebc8c4; background: #ebc8c4;
color: #dc3232; color: #dc3232;
border: 0px; border: 0px;
transform: translateX(100rem); transform: translateX(100rem);
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
border: 2px solid #dc3232; border: 2px solid #dc3232;
border-color: #dc3232 !important; border-color: #dc3232 !important;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
width: 80%; width: 80%;
} }
} }
// success message contact form 7 // success message contact form 7
.wpcf7 form.sent .wpcf7-response-output { .wpcf7 form.sent .wpcf7-response-output {
position: fixed; position: fixed;
width: 35%; width: 35%;
bottom: 20%; bottom: 20%;
right: 0; right: 0;
padding: 28px; padding: 28px;
border-radius: 8px; border-radius: 8px;
background: #cce8f4; background: #cce8f4;
color: #4d728a; color: #4d728a;
border: 0px; border: 0px;
transform: translateX(100rem); transform: translateX(100rem);
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
border: 2px solid #4d728a; border: 2px solid #4d728a;
border-color: #4d728a !important; border-color: #4d728a !important;
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
width: 80%; width: 80%;
} }
} }
.wpcf7-not-valid-tip { .wpcf7-not-valid-tip {
font-size: 1rem !important; font-size: 1rem !important;
} }
@keyframes toast { @keyframes toast {
0% { 0% {
transform: translateY(150%); transform: translateY(150%);
opacity: 0; opacity: 0;
} }
10%, 10%,
90% { 90% {
transform: translateY(0); transform: translateY(0);
opacity: 1; opacity: 1;
} }
100% { 100% {
transform: translateY(100%); transform: translateY(100%);
opacity: 0; opacity: 0;
} }
} }
dev/sass/base/_header.scss
///top-nav ///top-nav
.top-nav { .top-nav {
width: 100%; width: 100%;
background-color: $white; background-color: $white;
top: 0; top: 0;
right: 0; right: 0;
left: 0; left: 0;
z-index: 111; z-index: 111;
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
@media (max-width: 1030px) { @media (max-width: 1030px) {
.navbar-nav { .navbar-nav {
flex-direction: column !important; flex-direction: column !important;
} }
} }
.side-menu-close { .side-menu-close {
@media (max-width: 1030px) { @media (max-width: 1030px) {
display: block !important; display: block !important;
position: relative; position: relative;
top: -3%; top: -3%;
right: 0 !important; right: 0 !important;
width: 100%; width: 100%;
} }
} }
.nav-wrapper { .nav-wrapper {
padding: 1.25rem 0; padding: 1.25rem 0;
.nav-left { .nav-left {
padding-left: 0; padding-left: 0;
ul { ul {
li { li {
a { a {
margin-right: 1.125rem; margin-right: 1.125rem;
position: relative; position: relative;
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
&.active { &.active {
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 4px; height: 4px;
border-radius: 4px; border-radius: 4px;
background-color: $primary; background-color: $primary;
bottom: 0; bottom: 0;
left: 0; left: 0;
transform-origin: right; transform-origin: right;
transform: scaleX(0 1); transform: scaleX(0 1);
transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;
transform-origin: left; transform-origin: left;
} }
} }
&:hover { &:hover {
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 4px; height: 4px;
border-radius: 4px; border-radius: 4px;
background-color: $primary; background-color: $primary;
bottom: 0; bottom: 0;
left: 0; left: 0;
transform-origin: right; transform-origin: right;
transform: scaleX(0 1); transform: scaleX(0 1);
transform-origin: left; transform-origin: left;
} }
} }
} }
} }
.book-button { .book-button {
display: block; display: block;
} }
} }
.logo { .logo {
img { img {
object-fit: contain; object-fit: contain;
height: 36px; height: 36px;
min-width: 10rem; min-width: 10rem;
} }
} }
.navbar-nav { .navbar-nav {
@media (max-width: 1024.98px) { @media (max-width: 1024.98px) {
margin-right: unset !important; margin-right: unset !important;
} }
li { li {
&:last-of-type { &:last-of-type {
a { a {
&.active { &.active {
color: rgba(0, 0, 0, 0.55); color: rgba(0, 0, 0, 0.55);
&::before { &::before {
display: none; display: none;
} }
} }
} }
} }
a { a {
@media (max-width: 1024.98px) { @media (max-width: 1024.98px) {
margin-right: 1.25rem !important; margin-right: 1.25rem !important;
} }
} }
} }
} }
} }
.nav-right { .nav-right {
ul { ul {
li { li {
margin-right: 2.5rem; margin-right: 2.5rem;
@media (max-width: 1030px) { @media (max-width: 1030px) {
margin-right: 0; margin-right: 0;
margin-bottom: 1.875rem; &:not(:last-child) {
} margin-bottom: 1.875rem;
}
&.active { }
a {
color: #000; &.active {
position: relative; a {
color: #000;
&::after { position: relative;
content: "";
position: absolute; &::after {
bottom: 0; content: "";
left: 0; position: absolute;
right: 0; bottom: 0;
margin: auto; left: 0;
width: 100%; right: 0;
color: transparent; margin: auto;
background: #000; width: 100%;
height: 1px; color: transparent;
} background: #000;
} height: 1px;
} }
}
a { }
font-weight: 400;
position: relative; a {
transition: 0.3s ease-in-out; font-weight: 400;
color: #211e1e; position: relative;
font-family: $body-font; transition: 0.3s ease-in-out;
font-size: 1rem; color: #211e1e;
letter-spacing: -0.3px; font-family: $body-font;
font-size: 1rem;
&:hover { letter-spacing: -0.3px;
color: #000;
&:hover {
&::after { color: #000;
width: 100%;
} &::after {
} width: 100%;
}
&::after { }
position: absolute;
bottom: 0; &::after {
left: 0; position: absolute;
right: 0; bottom: 0;
margin: auto; left: 0;
width: 0%; right: 0;
content: "."; margin: auto;
color: transparent; width: 0%;
background: #000; content: ".";
height: 1px; color: transparent;
transition: 0.3s ease-in-out; background: #000;
} height: 1px;
} transition: 0.3s ease-in-out;
}
&:last-of-type { }
margin-right: 0;
} &:last-of-type {
} margin-right: 0;
} }
.book-button { &.menu-item-has-children {
margin-left: 3.75rem; position: relative;
@media (min-width: 1030px) and (max-width: 1198.98px) { > a {
margin-left: 0.375rem; padding-right: 24px;
position: relative;
.btn {
font-size: 12px !important; &::before {
} content: "";
} position: absolute;
top: 50%;
@media (max-width: 1030px) { right: 0;
margin-left: 0; transform: translateY(-50%);
} width: 10px;
height: 7px;
@media (max-width: 1030px) and (max-width: 1198.98px) { background: url(../img/angle-right.svg) no-repeat center/contain;
margin-left: 0.375rem; }
}
.btn {
font-size: 9px !important; &:hover {
padding: 7px 14px; > ul {
} opacity: 1;
} visibility: visible;
transform: translateY(0);
&:hover { }
svg { }
transform: translate(7px);
} ul {
} position: absolute;
top: 100%;
svg { left: 0;
transition: 0.2s ease; background-color: $white;
transform: translateX(10px); min-width: 312px;
} padding: 12px 0;
} opacity: 0;
} visibility: hidden;
transform: translateY(20px);
hr { transition: all 0.3s ease-in-out;
position: absolute;
width: 100%; li {
bottom: 0; list-style-type: none;
margin: 0; width: 100%;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
} ul {
} left: 100%;
top: 0;
}
a {
display: block;
padding: 12px 36px 12px 24px;
&::after {
content: unset;
}
&::before {
right: 24px;
}
}
&:hover,
&.active {
> a {
background-color: rgba(44, 92, 218, 20%);
}
}
&:not(:last-child) {
margin-bottom: 16px;
}
}
}
}
}
}
.book-button {
margin-left: 3.75rem;
@media (min-width: 1030px) and (max-width: 1198.98px) {
margin-left: 0.375rem;
.btn {
font-size: 12px !important;
}
}
@media (max-width: 1030px) {
margin-left: 0;
}
@media (max-width: 1030px) and (max-width: 1198.98px) {
margin-left: 0.375rem;
.btn {
font-size: 9px !important;
padding: 7px 14px;
}
}
&:hover {
svg {
transform: translate(7px);
}
}
svg {
transition: 0.2s ease;
transform: translateX(10px);
}
}
}
hr {
position: absolute;
width: 100%;
bottom: 0;
margin: 0;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
}
} }
///top-nav ///top-nav
.headerScrolled { .headerScrolled {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
top: 0; top: 0;
background-color: transparent; background-color: transparent;
width: 100%; width: 100%;
height: 5.625rem; height: 5.625rem;
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
} }
.sticky-top { .sticky-top {
padding: 15px 30px; padding: 15px 30px;
backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%); // backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
-webkit-backdrop-filter: blur(20px) saturate(160%) contrast(45%) // -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(45%)
brightness(140%); // brightness(140%);
-webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06); -webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06);
animation: slideDown 0.8s ease forwards; animation: slideDown 0.8s ease forwards;
// overflow: hidden; // overflow: hidden;
@media (max-width: 1030px) { @media (max-width: 1030px) {
animation: unset; animation: unset;
.navbar-nav { .navbar-nav {
flex-direction: column !important; flex-direction: column !important;
} }
} }
.nav-wrapper { .nav-wrapper {
border: none; border: none;
.nav-left { .nav-left {
.logo { .logo {
.brand-logo { .brand-logo {
svg { svg {
width: 7.5rem; width: 7.5rem;
} }
} }
} }
} }
} }
} }
@keyframes slideDown { @keyframes slideDown {
0% { 0% {
max-height: 0; max-height: 0;
opacity: 0; opacity: 0;
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
} }
100% { 100% {
max-height: 200px; max-height: 200px;
opacity: 1; opacity: 1;
transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;
/* Set to whatever height you want to slide down to */ /* Set to whatever height you want to slide down to */
} }
} }
.menu-toggler { .menu-toggler {
display: none; display: none;
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
.navbar-nav { .navbar-nav {
li { li {
a { a {
font-size: 1.125rem !important; font-size: 1.125rem !important;
margin-right: 0 !important; margin-right: 0 !important;
} }
} }
} }
} }
@media (max-width: 1030px) { @media (max-width: 1030px) {
.menu-toggler { .menu-toggler {
display: block; display: block;
} }
.navbar-nav { .navbar-nav {
transform: translateX(-100%); transform: translateX(-100%);
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
// background: linear-gradient( left: 0;
// 90deg, height: 100vh;
// rgba(63, 154, 212, 1) 13%, width: 100%;
// rgba(40, 74, 223, 1) 96% z-index: 1111;
// ); padding: 4rem 2rem;
left: 0; text-align: center;
height: 100vh;
width: 100%; &.show {
z-index: 1111; background: $white;
padding: 4rem 2rem; height: 110vh;
text-align: center; padding: 6rem 2rem;
transform: translateX(0);
// &.show { top: 0;
// transform: translateX(0); left: 0;
// top: 0; height: 100vh;
// background: linear-gradient( width: 100%;
// 90deg, z-index: 1111;
// rgba(63, 154, 212, 1) 13%, padding: 4rem 2rem;
// rgba(40, 74, 223, 1) 96% text-align: center;
// );
// left: 0; .side-menu-close {
// height: 100vh; right: 4%;
// width: 100%; }
// z-index: 1111;
// padding: 4rem 2rem; li {
// text-align: center; width: 100%;
a {
// .side-menu-close { // padding-left: 0 !important;
// display: block !important; color: $black !important;
// position: absolute; display: block;
// right: 8%; text-align: left;
// top: 3%; border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
// } }
}
// li { }
// a { }
// color: #fff !important; .top-nav {
// padding: 1rem; .nav-wrapper {
// } .nav-right {
ul {
// &:hover { li {
// a { &.menu-item-has-children {
// color: $secondary; ul {
// } position: unset;
// } opacity: 1;
// } visibility: visible;
// } transform: translateY(0);
&.show { display: none;
background: $white;
height: 110vh; li {
padding: 6rem 2rem; a {
transform: translateX(0); padding-left: 12px;
top: 0; border-radius: 12px;
left: 0; }
height: 100vh; ul {
width: 100%; padding-left: 12px;
z-index: 1111; }
padding: 4rem 2rem; }
text-align: center; }
.side-menu-close { &:hover {
right: 4%; > ul {
} display: block;
}
li { }
width: 100%; }
a { }
padding-left: 0 !important; }
color: $black !important; }
display: block; }
text-align: left; }
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
}
}
}
}
} }
@media (max-width: 470px) { @media (max-width: 470px) {
.book-button { .book-button {
display: block; display: block;
} }
.navbar-nav { .navbar-nav {
.book-button { .book-button {
display: block !important; display: block !important;
width: 100%; width: 100%;
margin-top: 2rem; margin-top: 2rem;
} }
} }
} }
:target::before { :target::before {
content: ""; content: "";
display: block; display: block;
height: 150px; height: 150px;
margin-top: -180px; margin-top: -180px;
} }
dev/sass/pages/_index.scss
...@@ -1165,6 +1165,7 @@ input[type="number"] { ...@@ -1165,6 +1165,7 @@ input[type="number"] {
transition: 0.5s ease-in-out; transition: 0.5s ease-in-out;
height: 100%; height: 100%;
width: 100%; width: 100%;
object-fit: cover;
overflow: hidden; overflow: hidden;
} }
} }
......
dev/sass/pages/_responsive.scss
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.py-80, .py-80,
.py-60, .py-60,
.py-40, .py-40,
.py-100 { .py-100 {
padding: 2rem 0 !important; padding: 2rem 0 !important;
} }
.request-hide-success-modal { .request-hide-success-modal {
.left-section { .left-section {
img { img {
height: 150px; height: 150px;
margin: auto; margin: auto;
display: flex; display: flex;
margin-bottom: 1.25rem; margin-bottom: 1.25rem;
} }
} }
.fieldset-cf7mls { .fieldset-cf7mls {
.step-next { .step-next {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 0.875rem !important; font-size: 0.875rem !important;
} }
} }
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
.top-nav { .top-nav {
.nav-wrapper .nav-left .logo img { .nav-wrapper .nav-left .logo img {
width: auto; width: auto;
height: 24px; height: 24px;
} }
} }
.navbar .toggler-icon { .navbar .toggler-icon {
svg { svg {
height: 32px; height: 32px;
width: 32px; width: 32px;
} }
} }
.navbar-nav { .navbar-nav {
transform: translateX(100%); transform: translateX(100%);
background: $white; background: $white;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
.navbar-nav.show { .navbar-nav.show {
background: $white; background: $white;
height: 110vh; height: 110vh;
padding: 6rem 2rem; padding: 6rem 2rem;
.side-menu-close { .side-menu-close {
right: 4%; right: 4%;
} }
li { li {
width: 100%; width: 100%;
a { a {
padding-left: 0 !important; // padding-left: 0 !important;
color: $black !important; color: $black !important;
display: block; display: block;
text-align: left; text-align: left;
border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1); border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
} }
} }
} }
.HOME.TOP-BANNER-SECTION img { .HOME.TOP-BANNER-SECTION img {
height: auto; height: auto;
width: 20rem; width: 20rem;
object-fit: contain; object-fit: contain;
display: flex; display: flex;
margin: auto; margin: auto;
} }
.TOP-BANNER-SECTION { .TOP-BANNER-SECTION {
padding: 0 0 1rem 0 !important; padding: 0 0 1rem 0 !important;
.nav-pills { .nav-pills {
padding: 1.5rem 1.5rem 0 1.5rem; padding: 1.5rem 1.5rem 0 1.5rem;
li { li {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
&.py-80 { &.py-80 {
padding: 2rem 0 !important; padding: 2rem 0 !important;
} }
.left-text { .left-text {
padding: 0 2rem !important; padding: 0 2rem !important;
.button-wrapper { .button-wrapper {
text-align: left; text-align: left;
} }
} }
.left-text-wrapper { .left-text-wrapper {
text-align: left; text-align: left;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
padding: 0; padding: 0;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
line-height: unset; line-height: unset;
margin: 0; margin: 0;
} }
} }
} }
.TOP-BANNER-SECTION .left-text { .TOP-BANNER-SECTION .left-text {
text-align: center; text-align: center;
padding: 4rem 2rem; padding: 4rem 2rem;
p { p {
font-size: 1.5rem; font-size: 1.5rem;
margin: 1.5rem 0 2rem 0; margin: 1.5rem 0 2rem 0;
} }
} }
.btn-start-project, .btn-start-project,
.btn-start-project { .btn-start-project {
padding: 1.5rem 2rem; padding: 1.5rem 2rem;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
} }
.TOP-CAROUSEL-SECTION h5 { .TOP-CAROUSEL-SECTION h5 {
font-size: 1.5rem !important; font-size: 1.5rem !important;
} }
.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION { .HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION {
.row { .row {
flex-direction: column-reverse; flex-direction: column-reverse;
.text-wrapper { .text-wrapper {
text-align: left !important; text-align: left !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
.right-image-wrapper { .right-image-wrapper {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
} }
.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION .row .left-text-wrapper .text-wrapper { .HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION .row .left-text-wrapper .text-wrapper {
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
text-align: center; text-align: center;
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
line-height: unset; line-height: unset;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
h2 { h2 {
font-size: 2rem !important; font-size: 2rem !important;
margin-bottom: 2rem !important; margin-bottom: 2rem !important;
line-height: unset !important; line-height: unset !important;
} }
} }
.SERVICE { .SERVICE {
&.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION { &.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION {
padding-bottom: 0 !important; padding-bottom: 0 !important;
.row { .row {
margin-bottom: 2rem !important; margin-bottom: 2rem !important;
} }
.title-wrapper { .title-wrapper {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
.left-text-wrapper .text-wrapper { .left-text-wrapper .text-wrapper {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-bottom: 1rem !important; margin-bottom: 1rem !important;
} }
} }
} }
} }
.WORKS-ON-WORK-SECTION { .WORKS-ON-WORK-SECTION {
margin-top: 0; margin-top: 0;
.main-wrapper { .main-wrapper {
padding: 0 12px; padding: 0 12px;
margin-bottom: 2rem; margin-bottom: 2rem;
.top-title-wrapper { .top-title-wrapper {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-top: 0;
line-height: unset; line-height: unset;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
.inner-list-wrapper { .inner-list-wrapper {
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
.YOU-MAY-LIKE { .YOU-MAY-LIKE {
.main-wrapper { .main-wrapper {
padding-bottom: 0; padding-bottom: 0;
.top-title-wrapper { .top-title-wrapper {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin-top: 0; margin-top: 0;
line-height: unset; line-height: unset;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
} }
.PD-TOP-SECTION { .PD-TOP-SECTION {
.title-wrapper { .title-wrapper {
padding-bottom: 0 !important; padding-bottom: 0 !important;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem; font-size: 2rem;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
.AFTER-BANNER-SECTION { .AFTER-BANNER-SECTION {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
.PROJECT-CONCLUSION { .PROJECT-CONCLUSION {
.percentage-box { .percentage-box {
&:last-child { &:last-child {
.inner-wrapper { .inner-wrapper {
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
} }
} }
.ONLY-TEXT-SECTION, .ONLY-TEXT-SECTION,
.PROJECT-CONCLUSION { .PROJECT-CONCLUSION {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
margin: 0; margin: 0;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
.quote-text { .quote-text {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
line-height: unset; line-height: unset;
} }
} }
} }
.TECHNOLOGY-USED-SECTION { .TECHNOLOGY-USED-SECTION {
.col-6 { .col-6 {
width: 100%; width: 100%;
} }
} }
.btn-start-project-white { .btn-start-project-white {
padding: 1rem 1.625rem; padding: 1rem 1.625rem;
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
} }
h2 { h2 {
font-size: 2.5rem !important; font-size: 2.5rem !important;
} }
p { p {
font-size: 1.5rem !important; font-size: 1.5rem !important;
} }
.HOME.WHAT-WE-DO-SECTION { .HOME.WHAT-WE-DO-SECTION {
.col-lg-4 { .col-lg-4 {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
pointer-events: none; pointer-events: none;
.card-wrapper { .card-wrapper {
h4 { h4 {
font-size: 2rem !important; font-size: 2rem !important;
} }
} }
} }
.top-title { .top-title {
margin-bottom: 2rem; margin-bottom: 2rem;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
margin-bottom: 0; margin-bottom: 0;
} }
} }
} }
.tags-wrapper ul li { .tags-wrapper ul li {
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
padding: 0.5rem 1.25rem; padding: 0.5rem 1.25rem;
} }
.HOME.NOT-LISTED-SECTION { .HOME.NOT-LISTED-SECTION {
.contact { .contact {
font-size: 1.125rem; font-size: 1.125rem;
} }
.text-center { .text-center {
h5 { h5 {
font-size: 2rem !important; font-size: 2rem !important;
text-align: left; text-align: left;
} }
p { p {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
font-size: 1.125rem !important; font-size: 1.125rem !important;
text-align: left; text-align: left;
} }
.col-lg-3.col-md-3 { .col-lg-3.col-md-3 {
display: flex; display: flex;
justify-content: start; justify-content: start;
} }
} }
} }
.analysis-section { .analysis-section {
.col-lg-7 { .col-lg-7 {
// height: 18rem !important; // height: 18rem !important;
// width: fit-content; // width: fit-content;
// object-fit: contain; // object-fit: contain;
// margin-top: -6rem; // margin-top: -6rem;
img { img {
margin-bottom: 0; margin-bottom: 0;
width: auto; width: auto;
height: auto; height: auto;
margin-top: 0; margin-top: 0;
} }
} }
.right-content-wrapper { .right-content-wrapper {
a { a {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: auto; margin: auto;
margin-top: 12px; margin-top: 12px;
} }
} }
} }
.analysis-section.background-dark { .analysis-section.background-dark {
margin-top: 2.5rem; margin-top: 2.5rem;
.row { .row {
flex-direction: column-reverse; flex-direction: column-reverse;
// .col-lg-7 { // .col-lg-7 {
// height: 25rem; // height: 25rem;
// } // }
.right-content-wrapper { .right-content-wrapper {
text-align: center; text-align: center;
padding-top: 3.75rem; padding-top: 3.75rem;
padding-bottom: 0; padding-bottom: 0;
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
margin: 0; margin: 0;
} }
h4 { h4 {
margin-bottom: 0; margin-bottom: 0;
font-size: 2rem !important; font-size: 2rem !important;
} }
} }
} }
} }
.HOME.OUR-MOST-RECENT-WORKS { .HOME.OUR-MOST-RECENT-WORKS {
.main-wrapper { .main-wrapper {
padding: 2rem 0; padding: 2rem 0;
.top-title-wrapper { .top-title-wrapper {
margin-bottom: 2rem; margin-bottom: 2rem;
h2 { h2 {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
font-size: 2rem !important; font-size: 2rem !important;
line-height: unset; line-height: unset;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
.nav.nav-pills { .nav.nav-pills {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow-y: scroll; overflow-y: scroll;
padding: 0; padding: 0;
border-top: none; border-top: none;
top: 70px; top: 70px;
background-color: $white; background-color: $white;
li { li {
button { button {
font-size: 1rem; font-size: 1rem;
white-space: nowrap; white-space: nowrap;
padding: 1rem; padding: 1rem;
border-radius: 0; border-radius: 0;
&.active { &.active {
background-color: #f7f8fb !important; background-color: #f7f8fb !important;
} }
} }
margin-right: 0; margin-right: 0;
} }
} }
.recent-card-wrapper { .recent-card-wrapper {
margin-bottom: 2rem !important; margin-bottom: 2rem !important;
.bottom-text { .bottom-text {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 1.375rem !important; font-size: 1.375rem !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
p { p {
font-size: 0.875rem !important; font-size: 0.875rem !important;
} }
} }
a { a {
img { img {
margin-bottom: 0; margin-bottom: 0;
} }
.bottom-text { .bottom-text {
background: #f7f8fb; background: #f7f8fb;
padding: 1.5rem 1rem 1rem 1rem; padding: 1.5rem 1rem 1rem 1rem;
.d-flex { .d-flex {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
ul { ul {
flex-wrap: wrap; flex-wrap: wrap;
li { li {
font-size: 1rem; font-size: 1rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }
} }
} }
} }
.load-more-content { .load-more-content {
margin-bottom: 2rem !important; margin-bottom: 2rem !important;
font-size: 1.125rem; font-size: 1.125rem;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
} }
.ABOUT.TOP-CAROUSEL-SECTION { .ABOUT.TOP-CAROUSEL-SECTION {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
.HOME.TOP-CAROUSEL-SECTION { .HOME.TOP-CAROUSEL-SECTION {
padding: 3.75rem 0; padding: 3.75rem 0;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
} }
// .py-80 { // .py-80 {
// padding-bottom: 5rem !important; // padding-bottom: 5rem !important;
// padding-top: 5rem !important; // padding-top: 5rem !important;
// } // }
.OUR-CUSTOMERS-SAY-SECTION { .OUR-CUSTOMERS-SAY-SECTION {
.customer-feedback .feedback-wrapper { .customer-feedback .feedback-wrapper {
height: 100% !important; height: 100% !important;
} }
h2 { h2 {
font-size: 2rem !important; font-size: 2rem !important;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
margin: 0; margin: 0;
} }
.customer-feedback .feedback-wrapper p { .customer-feedback .feedback-wrapper p {
max-height: unset; max-height: unset;
overflow: unset; overflow: unset;
line-height: unset; line-height: unset;
} }
} }
.HOME.BLOG-SECTION { .HOME.BLOG-SECTION {
.title-wrapper { .title-wrapper {
text-align: left !important; text-align: left !important;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
.btn-start-project { .btn-start-project {
margin-top: 0; margin-top: 0;
} }
} }
.BLOG-SECTION .blog-carousel .item { .BLOG-SECTION .blog-carousel .item {
max-height: unset; max-height: unset;
} }
.blog-card-wrapper { .blog-card-wrapper {
.blog-image-wrapper { .blog-image-wrapper {
img { img {
margin-bottom: 0; margin-bottom: 0;
} }
} }
.text-wrapper { .text-wrapper {
padding: 2rem 1rem !important; padding: 2rem 1rem !important;
background: #f7f8fb; background: #f7f8fb;
p { p {
font-size: 1rem !important; font-size: 1rem !important;
} }
h6 { h6 {
margin-top: 1rem; margin-top: 1rem;
} }
h6 ~ p { h6 ~ p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
.FAQS-SECTION { .FAQS-SECTION {
.left-section { .left-section {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
.accordion { .accordion {
.accordion-header { .accordion-header {
button { button {
font-size: 1.125rem !important; font-size: 1.125rem !important;
line-height: unset; line-height: unset;
padding-top: 1.5rem !important; padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important; padding-bottom: 1.5rem !important;
&:not(.collapsed) { &:not(.collapsed) {
background: #f7f8fb; background: #f7f8fb;
} }
} }
} }
.accordion-body { .accordion-body {
padding-top: 0; padding-top: 0;
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
background-color: #f7f8fb; background-color: #f7f8fb;
p { p {
font-size: 1rem !important; font-size: 1rem !important;
} }
&.show { &.show {
background-color: #f7f8fb; background-color: #f7f8fb;
} }
} }
} }
} }
.BLOGDETAIL-LIST-ITEM-SECTION { .BLOGDETAIL-LIST-ITEM-SECTION {
.blog-detail-content { .blog-detail-content {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
p, p,
li { li {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
.BLOGDETAIL-TOP-TITLE-SECTION.background-dark { .BLOGDETAIL-TOP-TITLE-SECTION.background-dark {
padding: 0; padding: 0;
} }
.BLOGLISTING-TOP-TITLE-SECTION { .BLOGLISTING-TOP-TITLE-SECTION {
padding: 0; padding: 0;
.title-wrapper { .title-wrapper {
padding-bottom: 0; padding-bottom: 0;
} }
.paragraph { .paragraph {
p { p {
margin: 0; margin: 0;
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
.blog-card .text-wrapper { .blog-card .text-wrapper {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 1.875rem !important; font-size: 1.875rem !important;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
.CONTACT { .CONTACT {
&.TOP-BANNER-SECTION { &.TOP-BANNER-SECTION {
.image-wrapper img { .image-wrapper img {
height: 10rem; height: 10rem;
width: 10rem; width: 10rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.left-text-wrapper { .left-text-wrapper {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
} }
.CONTACT-FORM-SECTION { .CONTACT-FORM-SECTION {
.left-section { .left-section {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem !important; font-size: 2rem !important;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
.PORTFOLIO-TOP-TITLE-SECTION { .PORTFOLIO-TOP-TITLE-SECTION {
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-size: 2rem; font-size: 2rem;
} }
p { p {
font-size: 1.125rem !important; font-size: 1.125rem !important;
} }
} }
} }
@media (max-width: 991.98px) { @media (max-width: 991.98px) {
.TOP-CAROUSEL-SECTION .experience-card, .TOP-CAROUSEL-SECTION .experience-card,
.TOP-CAROUSEL-SECTION .clients-served, .TOP-CAROUSEL-SECTION .clients-served,
.TOP-CAROUSEL-SECTION .working-experts { .TOP-CAROUSEL-SECTION .working-experts {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
footer.php
This source diff could not be displayed because it is too large. You can view the blob instead.
index.php
...@@ -24,17 +24,7 @@ get_header(); ...@@ -24,17 +24,7 @@ get_header();
$whatsapp = get_field('whats_app_number', 'option'); $whatsapp = get_field('whats_app_number', 'option');
if($whatsapp): if($whatsapp):
?> ?>
<div class="whats-app-icon-wrapper">
<a href="https://wa.me/<?php echo $whatsapp ?>" target="_blank">
<svg width="60" height="60" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24Z" fill="#34C759"/>
<path d="M24.0025 14H23.9975C18.4837 14 14 18.485 14 24C14 26.1875 14.705 28.215 15.9038 29.8612L14.6575 33.5763L18.5012 32.3475C20.0825 33.395 21.9688 34 24.0025 34C29.5163 34 34 29.5137 34 24C34 18.4863 29.5163 14 24.0025 14ZM29.8212 28.1213C29.58 28.8025 28.6225 29.3675 27.8587 29.5325C27.3362 29.6437 26.6538 29.7325 24.3563 28.78C21.4175 27.5625 19.525 24.5762 19.3775 24.3825C19.2363 24.1887 18.19 22.8013 18.19 21.3663C18.19 19.9313 18.9187 19.2325 19.2125 18.9325C19.4537 18.6863 19.8525 18.5737 20.235 18.5737C20.3588 18.5737 20.47 18.58 20.57 18.585C20.8637 18.5975 21.0112 18.615 21.205 19.0788C21.4462 19.66 22.0338 21.095 22.1038 21.2425C22.175 21.39 22.2462 21.59 22.1462 21.7838C22.0525 21.9838 21.97 22.0725 21.8225 22.2425C21.675 22.4125 21.535 22.5425 21.3875 22.725C21.2525 22.8838 21.1 23.0537 21.27 23.3475C21.44 23.635 22.0275 24.5938 22.8925 25.3638C24.0087 26.3575 24.9137 26.675 25.2375 26.81C25.4787 26.91 25.7662 26.8862 25.9425 26.6987C26.1662 26.4575 26.4425 26.0575 26.7237 25.6637C26.9237 25.3812 27.1762 25.3462 27.4412 25.4462C27.7112 25.54 29.14 26.2462 29.4338 26.3925C29.7275 26.54 29.9213 26.61 29.9925 26.7337C30.0625 26.8575 30.0625 27.4388 29.8212 28.1213Z" fill="white"/>
</svg>
</a>
<div class="position-absolute tooltip-wrapper">
<p>Chat with us</p>
</div>
</div>
<?php <?php
endif; endif;
?> ?>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment