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 @@
// 1: Global CSS Start
html {
scroll-behavior: smooth;
scroll-behavior: smooth;
@media (min-width: 300px) and (max-width: 1399.98px) {
font-size: smaller;
}
@media (min-width: 300px) and (max-width: 1399.98px) {
font-size: smaller;
}
}
body {
font-family: $body-font;
position: relative;
overflow-x: hidden;
&.no-scroll {
overflow: hidden !important;
}
font-family: $body-font;
position: relative;
overflow-x: hidden;
&.no-scroll {
overflow: hidden !important;
}
}
a {
text-decoration: none;
text-underline-offset: 2px;
text-decoration: none;
text-underline-offset: 2px;
}
ul,
ol {
padding-left: 0;
padding-left: 0;
}
img {
max-width: 100%;
max-width: 100%;
}
.container {
@media (min-width: 1300px) and (max-width: 1439.98px) {
max-width: 1200px;
}
@media (min-width: 1300px) and (max-width: 1439.98px) {
max-width: 1200px;
}
@media (min-width: 1920px) {
max-width: 1640px;
}
@media (min-width: 1920px) {
max-width: 1640px;
}
}
// 1: Global CSS End
......@@ -78,27 +78,27 @@ h3,
h4,
h5,
h6 {
font-family: $body-font;
font-weight: 700;
color: #121526;
font-family: $body-font;
font-weight: 700;
color: #121526;
@media (max-width: 767.98px) {
font-size: 1.875rem !important;
}
@media (max-width: 767.98px) {
font-size: 1.875rem !important;
}
}
//2: paragraph font-size
p {
font-family: $body-font;
font-size: 1.125rem;
color: #58595a;
letter-spacing: -0.5px;
font-family: $body-font;
font-size: 1.125rem;
color: #58595a;
letter-spacing: -0.5px;
}
ul {
li {
font-size: 1.125rem;
}
li {
font-size: 1.125rem;
}
}
// 3: Fonts Family Start
......@@ -107,581 +107,581 @@ ul {
// 4: Font Colors Start
.text-danger {
color: red;
color: red;
}
.text-grey {
color: $grey !important;
color: $grey !important;
}
//primary-second color
.primary-second {
background-color: $primary-second;
background-color: $primary-second;
}
.background-dark {
background: $background-dark !important;
p,
a,
span,
.svg-wrapper,
.views {
color: $white !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white !important;
}
background: $background-dark !important;
p,
a,
span,
.svg-wrapper,
.views {
color: $white !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $white !important;
}
}
.text-primary-dark {
color: $primary;
color: $primary;
}
// 4: Font Colors End
// 5: Font Size Start
.font-8 {
font-size: 0.5rem !important;
font-size: 0.5rem !important;
}
.font-10 {
font-size: 0.625rem !important;
font-size: 0.625rem !important;
}
.font-12 {
font-size: 0.75rem !important;
font-size: 0.75rem !important;
}
.font-14 {
font-size: 0.875rem !important;
font-size: 0.875rem !important;
}
.font-15 {
font-size: 0.9375rem !important;
font-size: 0.9375rem !important;
}
.font-16 {
font-size: 1rem !important;
font-size: 1rem !important;
}
.font-18 {
font-size: 1.125rem !important;
font-size: 1.125rem !important;
}
.font-20 {
font-size: 1.25rem !important;
font-size: 1.25rem !important;
}
.font-24 {
font-size: 1.5rem !important;
font-size: 1.5rem !important;
}
.font-32 {
font-size: 2rem !important;
font-size: 2rem !important;
}
.font-36 {
font-size: 2.25rem !important;
font-size: 2.25rem !important;
}
.font-40 {
font-size: 2.5rem !important;
font-size: 2.5rem !important;
}
.font-44 {
font-size: 2.75rem !important;
font-size: 2.75rem !important;
}
.font-48 {
font-size: 3rem !important;
font-size: 3rem !important;
}
.ls-1 {
letter-spacing: 1px;
letter-spacing: 1px;
}
// 5: Font Size End
// 6: Font Weights Start
.fw-400 {
font-weight: 400;
font-weight: 400;
}
.fw-500 {
font-weight: 500;
font-weight: 500;
}
.fw-600 {
font-weight: 600;
font-weight: 600;
}
.fw-700 {
font-weight: 700;
font-weight: 700;
}
.fw-900 {
font-weight: 900;
font-weight: 900;
}
// 6: Font Weights Ens
// 7: Margins Start
.mt-40 {
margin-top: 2.5rem;
margin-top: 2.5rem;
@media (max-width: 767.98px) {
margin-top: 2rem;
}
@media (max-width: 767.98px) {
margin-top: 2rem;
}
}
.mb-20 {
margin-bottom: 1.25rem;
margin-bottom: 1.25rem;
@media (max-width: 767.98px) {
margin-bottom: 1.125rem;
}
@media (max-width: 767.98px) {
margin-bottom: 1.125rem;
}
}
.mb-30 {
margin-bottom: 1.875rem;
margin-bottom: 1.875rem;
@media (max-width: 767.98px) {
margin-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
margin-bottom: 1.25rem;
}
}
.mb-40 {
margin-bottom: 2.5rem;
margin-bottom: 2.5rem;
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
}
.my-40 {
@extend .mt-40;
@extend .mb-40;
@extend .mt-40;
@extend .mb-40;
}
.mt-60 {
margin-top: 3.75rem;
margin-top: 3.75rem;
@media (max-width: 767.98px) {
margin-top: 2rem;
}
@media (max-width: 767.98px) {
margin-top: 2rem;
}
}
.mb-60 {
margin-bottom: 3.75rem;
margin-bottom: 3.75rem;
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
}
.my-60 {
@extend .mt-60;
@extend .mb-60;
@extend .mt-60;
@extend .mb-60;
}
.mt-80 {
margin-top: 5rem;
margin-top: 5rem;
@media (max-width: 767.98px) {
margin-top: 2rem;
}
@media (max-width: 767.98px) {
margin-top: 2rem;
}
}
.mb-80 {
margin-bottom: 5rem;
margin-bottom: 5rem;
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
}
.my-80 {
@extend .mt-80;
@extend .mb-80;
@extend .mt-80;
@extend .mb-80;
}
.mt-100 {
margin-top: 6.25rem;
margin-top: 6.25rem;
@media (max-width: 767.98px) {
margin-top: 2rem;
}
@media (max-width: 767.98px) {
margin-top: 2rem;
}
}
.mb-100 {
margin-bottom: 6.25rem;
margin-bottom: 6.25rem;
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
}
.my-100 {
@extend .mt-100;
@extend .mb-100;
@extend .mt-100;
@extend .mb-100;
}
.mt-120 {
margin-top: 7.5rem;
margin-top: 7.5rem;
@media (max-width: 767.98px) {
margin-top: 2rem;
}
@media (max-width: 767.98px) {
margin-top: 2rem;
}
}
.mb-120 {
margin-bottom: 7.5rem;
margin-bottom: 7.5rem;
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
@media (max-width: 767.98px) {
margin-bottom: 2rem;
}
}
.my-120 {
@extend .mt-120;
@extend .mb-120;
@extend .mt-120;
@extend .mb-120;
}
.mr-12 {
margin-right: 0.75rem;
margin-right: 0.75rem;
}
.ml-12 {
margin-left: 0.75rem;
margin-left: 0.75rem;
}
// 7: Margins Ends
// 8: Paddings Starts
.pt-40 {
padding-top: 2.5rem;
padding-top: 2.5rem;
@media (max-width: 767.98px) {
padding-top: 2rem;
}
@media (max-width: 767.98px) {
padding-top: 2rem;
}
}
.pt-10 {
padding-top: 0.625rem;
padding-top: 0.625rem;
@media (max-width: 767.98px) {
padding-top: 0.625rem;
}
@media (max-width: 767.98px) {
padding-top: 0.625rem;
}
}
.pb-10 {
padding-bottom: 0.625rem;
padding-bottom: 0.625rem;
@media (max-width: 767.98px) {
padding-bottom: 0.625rem;
}
@media (max-width: 767.98px) {
padding-bottom: 0.625rem;
}
}
.pb-20 {
padding-bottom: 1.25rem;
padding-bottom: 1.25rem;
@media (max-width: 767.98px) {
padding-bottom: 0.9375rem;
}
@media (max-width: 767.98px) {
padding-bottom: 0.9375rem;
}
}
.pr-20 {
padding-right: 1.25rem;
padding-right: 1.25rem;
@media (max-width: 767.98px) {
padding-right: 0.9375rem;
}
@media (max-width: 767.98px) {
padding-right: 0.9375rem;
}
}
.pr-10 {
padding-right: 0.625rem;
padding-right: 0.625rem;
@media (max-width: 767.98px) {
padding-right: 0.625rem;
}
@media (max-width: 767.98px) {
padding-right: 0.625rem;
}
}
.pb-30 {
padding-bottom: 1.875rem;
padding-bottom: 1.875rem;
@media (max-width: 767.98px) {
padding-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
padding-bottom: 1.25rem;
}
}
.pb-40 {
padding-bottom: 2.5rem;
padding-bottom: 2.5rem;
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
}
.pb-28 {
padding-bottom: 1.75rem;
padding-bottom: 1.75rem;
@media (max-width: 767.98px) {
padding-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
padding-bottom: 1.25rem;
}
}
.py-10 {
@extend .pt-10;
@extend .pb-10;
@extend .pt-10;
@extend .pb-10;
}
.py-40 {
@extend .pt-40;
@extend .pb-40;
@extend .pt-40;
@extend .pb-40;
}
.py-60 {
padding-top: 3.75rem;
padding-bottom: 3.75rem;
padding-top: 3.75rem;
padding-bottom: 3.75rem;
@media (max-width: 767.98px) {
padding-top: 2rem;
padding-bottom: 2rem;
}
@media (max-width: 767.98px) {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
.pt-60 {
padding-top: 3.75rem;
padding-top: 3.75rem;
@media (max-width: 767.98px) {
padding-top: 2rem;
}
@media (max-width: 767.98px) {
padding-top: 2rem;
}
}
.pb-60 {
padding-bottom: 3.75rem;
padding-bottom: 3.75rem;
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
}
.py-60 {
@extend .pt-60;
@extend .pb-60;
@extend .pt-60;
@extend .pb-60;
}
.pt-80 {
padding-top: 5rem;
padding-top: 5rem;
@media (max-width: 767.98px) {
padding-top: 2rem;
}
@media (max-width: 767.98px) {
padding-top: 2rem;
}
}
.pb-80 {
padding-bottom: 5rem;
padding-bottom: 5rem;
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
}
.py-80 {
@extend .pt-80;
@extend .pb-80;
@extend .pt-80;
@extend .pb-80;
}
.pt-100 {
padding-top: 6.25rem;
padding-top: 6.25rem;
@media (max-width: 767.98px) {
padding-top: 2rem;
}
@media (max-width: 767.98px) {
padding-top: 2rem;
}
}
.pb-100 {
padding-bottom: 6.25rem;
padding-bottom: 6.25rem;
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
}
.py-100 {
@extend .pt-100;
@extend .pb-100;
@extend .pt-100;
@extend .pb-100;
}
.pt-120 {
padding-top: 7.5rem;
padding-top: 7.5rem;
@media (max-width: 767.98px) {
padding-top: 2rem;
}
@media (max-width: 767.98px) {
padding-top: 2rem;
}
}
.pb-120 {
padding-bottom: 7.5rem;
padding-bottom: 7.5rem;
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
@media (max-width: 767.98px) {
padding-bottom: 2rem;
}
}
.py-120 {
@extend .pt-120;
@extend .pb-120;
@extend .pt-120;
@extend .pb-120;
}
.p-40 {
padding: 2.5rem;
padding: 2.5rem;
}
.p-80 {
padding: 5rem;
padding: 5rem;
}
// 8: btn padding
.btn-start-project,
.btn-start-project {
padding: 0.75rem 1.625rem;
border-radius: 0;
padding: 0.75rem 1.625rem;
border-radius: 0;
@media screen and (min-width: 770px) and (max-width: 1024.98px) {
padding: 0.75rem 1.75rem;
font-size: 12px !important;
}
@media screen and (min-width: 770px) and (max-width: 1024.98px) {
padding: 0.75rem 1.75rem;
font-size: 12px !important;
}
&:hover {
background-color: $primary-second;
color: #fff;
&:hover {
background-color: $primary-second;
color: #fff;
svg {
path {
fill: $white;
}
}
}
svg {
path {
fill: $white;
}
}
}
}
.view-linkedin {
padding: 0.625rem;
color: #f9f8f4;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.4px;
border: 1px solid #f9f8f4;
padding: 0.625rem;
color: #f9f8f4;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.4px;
border: 1px solid #f9f8f4;
}
.btn-start-project-white {
padding: 0.75rem 1.625rem;
border-radius: 0;
background-color: $primary;
min-width: 12.5rem;
justify-content: center;
color: $white;
font-size: 1rem;
font-family: $body-font;
border: 1px solid rgba(0, 0, 0, 0.1);
@media screen and (min-width: 770px) and (max-width: 1024.98px) {
padding: 0.75rem 1.75rem;
font-size: 12px !important;
}
&:hover {
background-color: $primary-second !important;
color: #fff !important;
svg {
path {
fill: #fff !important;
}
}
}
padding: 0.75rem 1.625rem;
border-radius: 0;
background-color: $primary;
min-width: 12.5rem;
justify-content: center;
color: $white;
font-size: 1rem;
font-family: $body-font;
border: 1px solid rgba(0, 0, 0, 0.1);
@media screen and (min-width: 770px) and (max-width: 1024.98px) {
padding: 0.75rem 1.75rem;
font-size: 12px !important;
}
&:hover {
background-color: $primary-second !important;
color: #fff !important;
svg {
path {
fill: #fff !important;
}
}
}
}
.btn-start-project-white-background {
padding: 0.75rem 1.625rem;
border-radius: 0;
background-color: transparent;
min-width: 12.5rem;
justify-content: center;
color: $primary;
font-size: 1rem;
font-family: $body-font;
border: 1px solid rgba(44, 92, 218, 0.1);
@media screen and (min-width: 770px) and (max-width: 1024.98px) {
padding: 0.75rem 1.75rem;
font-size: 12px !important;
}
svg {
margin-left: 0.625rem;
}
&:hover {
background-color: $primary-second !important;
color: #fff !important;
svg {
path {
fill: #fff !important;
}
}
}
padding: 0.75rem 1.625rem;
border-radius: 0;
background-color: transparent;
min-width: 12.5rem;
justify-content: center;
color: $primary;
font-size: 1rem;
font-family: $body-font;
border: 1px solid rgba(44, 92, 218, 0.1);
@media screen and (min-width: 770px) and (max-width: 1024.98px) {
padding: 0.75rem 1.75rem;
font-size: 12px !important;
}
svg {
margin-left: 0.625rem;
}
&:hover {
background-color: $primary-second !important;
color: #fff !important;
svg {
path {
fill: #fff !important;
}
}
}
}
// 9: Return to Top Start
#return-to-top {
position: fixed;
z-index: 99;
bottom: 20px;
right: 2%;
background: $primary;
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position: fixed;
z-index: 99;
bottom: 20px;
right: 2%;
background: $primary;
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
line-height: 50px;
text-align: center;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#return-to-top svg {
margin: 0;
stroke: #fff;
position: relative;
left: 0;
top: 0;
font-size: 1.875rem;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
&:hover {
margin-top: -6px;
}
margin: 0;
stroke: #fff;
position: relative;
left: 0;
top: 0;
font-size: 1.875rem;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
&:hover {
margin-top: -6px;
}
}
// 9: Return to Top Start
......@@ -689,71 +689,71 @@ ul {
// 10: Page Not Found Start
// 10: Page Not Found Start
.page-not-found {
padding: 80px 0;
img {
max-height: 200px;
}
.text-content {
& > span {
font-size: 1.25rem;
color: #000000;
letter-spacing: 0.28em;
display: block;
margin-bottom: 12px;
}
h2 {
font-size: 3.125rem !important;
font-weight: 900;
margin-bottom: 20px;
span {
color: $primary;
}
}
p {
font-size: 1.125rem;
font-weight: 400;
margin-bottom: 40px;
}
a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1.25rem;
font-weight: 600;
color: #333333;
svg,
i {
margin-right: 6px;
font-weight: 200;
}
span {
margin-left: 4px;
font-weight: bold;
color: $primary;
}
&:hover {
color: $secondary;
}
}
}
padding: 80px 0;
img {
max-height: 200px;
}
.text-content {
& > span {
font-size: 1.25rem;
color: #000000;
letter-spacing: 0.28em;
display: block;
margin-bottom: 12px;
}
h2 {
font-size: 3.125rem !important;
font-weight: 900;
margin-bottom: 20px;
span {
color: $primary;
}
}
p {
font-size: 1.125rem;
font-weight: 400;
margin-bottom: 40px;
}
a {
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 1.25rem;
font-weight: 600;
color: #333333;
svg,
i {
margin-right: 6px;
font-weight: 200;
}
span {
margin-left: 4px;
font-weight: bold;
color: $primary;
}
&:hover {
color: $secondary;
}
}
}
}
// 10: Page Not Found End
.page-not-found {
height: 82vh;
display: flex;
justify-content: center;
align-items: center;
height: 82vh;
display: flex;
justify-content: center;
align-items: center;
}
// 10: Page Not Found End
......@@ -761,813 +761,813 @@ ul {
// 11: Border Radius
.border-radius-4 {
border-radius: 0.25rem;
border-radius: 0.25rem;
}
.border-radius-6 {
border-radius: 0.25rem;
border-radius: 0.25rem;
}
.border-radius-8 {
border-radius: 0.5rem;
border-radius: 0.5rem;
}
.border-radius-12 {
border-radius: 0.25rem;
border-radius: 0.25rem;
}
.border-radius-16 {
border-radius: 1rem;
border-radius: 1rem;
}
// 12: Positions
.position-centered {
display: flex;
justify-content: center;
align-items: center;
display: flex;
justify-content: center;
align-items: center;
}
// 13: Flex
@for $i from 1 through 5 {
.#{flex}#{$i} {
flex: $i;
}
.#{flex}#{$i} {
flex: $i;
}
}
// 14: Book Modal
.modal {
.modal-dialog {
.modal-content {
border-radius: 0;
.modal-header {
button {
background-color: transparent;
font-size: 0.875rem;
display: flex;
align-items: center;
&:hover {
color: red;
svg {
path {
stroke: red;
}
}
}
svg {
margin-right: 0.875rem;
}
}
}
.modal-body {
padding: 3.4375rem 6.25rem;
@media (max-width: 768px) {
padding: 1.5rem 0;
}
.form-wrapper {
.inner-wrapper {
margin-bottom: 1.5rem !important;
}
textarea {
margin-bottom: 1.75rem !important;
}
button {
padding: 0.75rem 3.0625rem;
}
}
}
}
}
.modal-dialog {
.modal-content {
border-radius: 0;
.modal-header {
button {
background-color: transparent;
font-size: 0.875rem;
display: flex;
align-items: center;
&:hover {
color: red;
svg {
path {
stroke: red;
}
}
}
svg {
margin-right: 0.875rem;
}
}
}
.modal-body {
padding: 3.4375rem 6.25rem;
@media (max-width: 768px) {
padding: 1.5rem 0;
}
.form-wrapper {
.inner-wrapper {
margin-bottom: 1.5rem !important;
}
textarea {
margin-bottom: 1.75rem !important;
}
button {
padding: 0.75rem 3.0625rem;
}
}
}
}
}
}
// 15: success message
.submit-button-book {
.hide {
display: none;
position: absolute;
top: 100%;
font-size: 0.75rem;
right: 5%;
font-weight: 700;
}
.alert-success {
background: #269612;
color: #fff;
border-radius: 4px;
padding: 10px;
}
.hide {
display: none;
position: absolute;
top: 100%;
font-size: 0.75rem;
right: 5%;
font-weight: 700;
}
.alert-success {
background: #269612;
color: #fff;
border-radius: 4px;
padding: 10px;
}
}
//Blogs side bar
.related-blogs {
border: 1px solid gainsboro;
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
h6 {
margin-bottom: 1.25rem;
}
.related-blogs-wrapper {
margin-bottom: 0.75rem;
&:hover {
.text-content {
h6 {
color: #c52528;
}
}
}
img {
height: 4.375rem;
width: 4.375rem;
object-fit: cover;
margin-right: 0.875rem;
}
.text-content {
display: flex;
justify-content: center;
flex-direction: column;
h6 {
margin-bottom: 0.625rem;
}
span {
color: rgba(73, 73, 73, 0.6);
}
}
}
border: 1px solid gainsboro;
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
h6 {
margin-bottom: 1.25rem;
}
.related-blogs-wrapper {
margin-bottom: 0.75rem;
&:hover {
.text-content {
h6 {
color: #c52528;
}
}
}
img {
height: 4.375rem;
width: 4.375rem;
object-fit: cover;
margin-right: 0.875rem;
}
.text-content {
display: flex;
justify-content: center;
flex-direction: column;
h6 {
margin-bottom: 0.625rem;
}
span {
color: rgba(73, 73, 73, 0.6);
}
}
}
}
.categories {
border: 1px solid gainsboro;
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
h6 {
margin-bottom: 1.25rem;
}
ul {
li {
margin-bottom: 0.75rem;
border-bottom: 1px dashed #e2e2e2;
padding: 0.75rem 0;
&:hover {
a {
color: #c52528;
}
}
a {
color: #111;
}
}
}
border: 1px solid gainsboro;
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
h6 {
margin-bottom: 1.25rem;
}
ul {
li {
margin-bottom: 0.75rem;
border-bottom: 1px dashed #e2e2e2;
padding: 0.75rem 0;
&:hover {
a {
color: #c52528;
}
}
a {
color: #111;
}
}
}
}
.archive {
border: 1px solid gainsboro;
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
h6 {
margin-bottom: 1.25rem;
}
ul {
li {
margin-bottom: 0.75rem;
border-bottom: 1px dashed #e2e2e2;
padding: 0.75rem 0;
&:hover {
a {
color: #c52528;
}
}
a {
color: #111;
}
}
}
border: 1px solid gainsboro;
padding: 1.25rem;
border-radius: 0.75rem;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
h6 {
margin-bottom: 1.25rem;
}
ul {
li {
margin-bottom: 0.75rem;
border-bottom: 1px dashed #e2e2e2;
padding: 0.75rem 0;
&:hover {
a {
color: #c52528;
}
}
a {
color: #111;
}
}
}
}
.detail-content {
p {
text-align: justify;
}
.social-links-blog {
ul {
justify-content: center;
display: flex;
list-style-type: none;
@media (min-width: 768.98px) and (max-width: 1024.98px) {
justify-content: center;
}
li {
padding: 0 1.25rem;
@media (max-width: 768.98px) {
&:nth-child(1) {
margin: 0;
}
}
a {
color: $primary;
font-size: 1.25rem;
transition: 0.5s;
&:hover {
color: #c52528;
}
}
}
}
}
.leave-comment-section {
.comment-form {
.alert-success {
background: #269612;
color: #fff;
border-radius: 4px;
padding: 10px;
}
}
}
p {
text-align: justify;
}
.social-links-blog {
ul {
justify-content: center;
display: flex;
list-style-type: none;
@media (min-width: 768.98px) and (max-width: 1024.98px) {
justify-content: center;
}
li {
padding: 0 1.25rem;
@media (max-width: 768.98px) {
&:nth-child(1) {
margin: 0;
}
}
a {
color: $primary;
font-size: 1.25rem;
transition: 0.5s;
&:hover {
color: #c52528;
}
}
}
}
}
.leave-comment-section {
.comment-form {
.alert-success {
background: #269612;
color: #fff;
border-radius: 4px;
padding: 10px;
}
}
}
}
.blog-side-bar {
display: block;
&.show {
transform: unset;
&.blog-side-bar {
display: block;
}
}
.blog-filter-bar-close {
display: none;
}
@media (max-width: 1023.98px) {
position: fixed;
display: none;
top: 0;
width: 100%;
left: 0;
padding: 2.875rem;
overflow-y: scroll;
background-color: #fff;
height: 100vh;
z-index: 1111;
-webkit-transition: all 0.3s ease;
transition: all 0.5s ease;
transform: translateY(100%);
.blog-filter-bar-close {
display: block;
}
}
display: block;
&.show {
transform: unset;
&.blog-side-bar {
display: block;
}
}
.blog-filter-bar-close {
display: none;
}
@media (max-width: 1023.98px) {
position: fixed;
display: none;
top: 0;
width: 100%;
left: 0;
padding: 2.875rem;
overflow-y: scroll;
background-color: #fff;
height: 100vh;
z-index: 1111;
-webkit-transition: all 0.3s ease;
transition: all 0.5s ease;
transform: translateY(100%);
.blog-filter-bar-close {
display: block;
}
}
}
//blog-card-wrapper
.blog-card-wrapper {
margin-bottom: 1.875rem;
&:hover {
img {
transform: scale(1.1);
}
h3 {
color: $primary;
}
}
a {
border: 1px solid #f2f2f2;
.img-div {
height: 200px;
overflow: hidden;
img {
transition: all 0.3s ease;
max-height: 200px;
width: 100%;
}
}
.text-content {
padding: 1.25rem;
h3 {
margin-bottom: 0.75rem;
}
.details {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
color: $primary;
}
p {
font-size: 1.125rem;
color: #77838f;
font-weight: 600;
}
.date-views {
color: #77838f;
span {
padding-right: 1.25rem;
}
}
}
}
.text-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bottom-section {
margin-top: 1.125rem;
}
}
margin-bottom: 1.875rem;
&:hover {
img {
transform: scale(1.1);
}
h3 {
color: $primary;
}
}
a {
border: 1px solid transparent;
.img-div {
height: 200px;
overflow: hidden;
img {
transition: all 0.3s ease;
max-height: 200px;
width: 100%;
}
}
.text-content {
padding: 1.25rem;
h3 {
margin-bottom: 0.75rem;
}
.details {
display: flex;
align-items: center;
margin-bottom: 0.75rem;
color: $primary;
}
p {
font-size: 1.125rem;
color: #77838f;
font-weight: 600;
}
.date-views {
color: #77838f;
span {
padding-right: 1.25rem;
}
}
}
}
.text-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.bottom-section {
margin-top: 1.125rem;
}
}
}
.blog-wrapper {
nav {
margin-top: 3.75rem;
nav {
margin-top: 3.75rem;
ul {
li {
padding: 0 0.75rem;
ul {
li {
padding: 0 0.75rem;
&:hover {
a {
background-color: $primary;
color: $light;
&:hover {
a {
background-color: $primary;
color: $light;
svg {
stroke: #fff;
}
}
}
}
}
}
svg {
stroke: #fff;
}
}
}
}
}
}
}
//19: owl-nav
.readmoreblogs {
&.owl-carousel {
.owl-nav {
@media (max-width: 767.98px) {
display: none;
}
button {
border-radius: 50%;
background-color: $primary;
color: #fff;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 27px;
}
&.owl-prev {
left: -2rem;
}
&.owl-next {
right: -2rem;
}
}
}
.owl-dots {
margin-top: 1.75rem !important;
span {
background-color: $primary;
}
}
}
&.owl-carousel {
.owl-nav {
@media (max-width: 767.98px) {
display: none;
}
button {
border-radius: 50%;
background-color: $primary;
color: #fff;
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
span {
font-size: 27px;
}
&.owl-prev {
left: -2rem;
}
&.owl-next {
right: -2rem;
}
}
}
.owl-dots {
margin-top: 1.75rem !important;
span {
background-color: $primary;
}
}
}
}
// 20: book-button-fixed
.book-button-fixed {
position: fixed;
bottom: 0;
display: none;
position: fixed;
bottom: 0;
display: none;
@media (max-width: 1024px) {
display: block;
}
@media (max-width: 1024px) {
display: block;
}
button {
width: 100%;
}
button {
width: 100%;
}
}
@media (max-width: 1023.98px) {
.section-footer {
padding-bottom: 40px;
}
.section-footer {
padding-bottom: 40px;
}
}
//21: top-banner
.top-banner {
background: linear-gradient(#84d0f0, #afd9ec);
width: 100%;
min-height: 60vh;
position: relative;
overflow: hidden;
.title-paragraph {
@media (max-width: 1200px) {
margin: 0;
}
@media (max-width: 425px) {
margin: 0;
}
}
.background-cloud {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: absolute;
svg {
height: auto;
width: 100%;
position: absolute;
}
}
background: linear-gradient(#84d0f0, #afd9ec);
width: 100%;
min-height: 60vh;
position: relative;
overflow: hidden;
.title-paragraph {
@media (max-width: 1200px) {
margin: 0;
}
@media (max-width: 425px) {
margin: 0;
}
}
.background-cloud {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: absolute;
svg {
height: auto;
width: 100%;
position: absolute;
}
}
}
// 22: top-banner-center
.center-top-title {
@include positionMiddle;
@include positionMiddle;
}
// 23: top-title-paragraph
.title-paragraph {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
@media (max-width: 1200px) {
margin-bottom: 200px;
}
@media (max-width: 1200px) {
margin-bottom: 200px;
}
@media (max-width: 425px) {
margin-bottom: 300px;
}
@media (max-width: 425px) {
margin-bottom: 300px;
}
}
//blog-card
.blog-card {
@media (max-width: 767.98px) {
padding: 0.625rem;
}
margin-bottom: 2.5rem;
padding: 0;
transition: 0.5s ease-in-out;
&:hover {
.blog-image-wrapper {
img {
transform: scale(1.08);
}
}
.text-wrapper {
h6 {
color: $primary;
}
}
}
.blog-image-wrapper {
overflow: hidden;
height: 16.5rem;
margin-bottom: 1.125rem;
img {
height: 100%;
width: 100%;
object-fit: cover;
@include transition();
}
}
.text-wrapper {
transition: 0.5s ease-in-out;
margin-bottom: 1.125rem;
p {
font-size: 1rem;
color: #8e8e8e;
font-weight: 400;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
h6 {
font-weight: 600;
font-size: 18px;
margin-bottom: 0.875rem;
}
.card-detail {
color: #8e8e8e;
}
}
@media (max-width: 767.98px) {
padding: 0.625rem;
}
margin-bottom: 2.5rem;
padding: 0;
transition: 0.5s ease-in-out;
&:hover {
.blog-image-wrapper {
img {
transform: scale(1.08);
}
}
.text-wrapper {
h6 {
color: $primary;
}
}
}
.blog-image-wrapper {
overflow: hidden;
height: 16.5rem;
margin-bottom: 1.125rem;
img {
height: 100%;
width: 100%;
object-fit: cover;
@include transition();
}
}
.text-wrapper {
transition: 0.5s ease-in-out;
margin-bottom: 1.125rem;
p {
font-size: 1rem;
color: #8e8e8e;
font-weight: 400;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
h6 {
font-weight: 600;
font-size: 18px;
margin-bottom: 0.875rem;
}
.card-detail {
color: #8e8e8e;
}
}
}
//job-list
.job-lists-wrapper {
&:last-of-type {
.inner-wrapper {
border: 0 !important;
}
}
.inner-wrapper {
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
width: 100%;
display: flex !important;
.job-list {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.5rem;
}
.vacancy-duration {
span {
color: #58595a;
padding-right: 0.625rem;
}
}
}
@media (max-width: 767.98px) {
display: block !important;
.job-list {
margin-bottom: 1.25rem;
}
}
}
&:last-of-type {
.inner-wrapper {
border: 0 !important;
}
}
.inner-wrapper {
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
width: 100%;
display: flex !important;
.job-list {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.5rem;
}
.vacancy-duration {
span {
color: #58595a;
padding-right: 0.625rem;
}
}
}
@media (max-width: 767.98px) {
display: block !important;
.job-list {
margin-bottom: 1.25rem;
}
}
}
}
// pricing-table
.pricing-section {
table {
tbody {
tr {
th {
padding: 1rem;
}
}
}
}
table {
tbody {
tr {
th {
padding: 1rem;
}
}
}
}
}
// 25: breadcrumb-background-dark
.breadcrumb-background-dark {
padding-bottom: 0;
padding-top: 4.5rem !important;
&.background-dark {
background: #005aff !important;
}
&.breadcrumb-background-dark {
padding-bottom: 2.5rem !important;
}
ol,
ul {
margin: 0;
}
li {
a {
color: $white !important;
}
}
.breadcrumb-item + .breadcrumb-item {
&::before {
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");
height: 16px;
width: 8px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 8px;
}
}
padding-bottom: 0;
padding-top: 4.5rem !important;
&.background-dark {
background: #005aff !important;
}
&.breadcrumb-background-dark {
padding-bottom: 2.5rem !important;
}
ol,
ul {
margin: 0;
}
li {
a {
color: $white !important;
}
}
.breadcrumb-item + .breadcrumb-item {
&::before {
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");
height: 16px;
width: 8px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 8px;
}
}
}
.vacancy-detail-breadcrumb {
padding-top: 4.5rem !important;
background: #121526 !important;
ol,
ul {
margin: 0;
}
li {
a {
color: $white !important;
}
}
.breadcrumb-item + .breadcrumb-item {
&::before {
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");
height: 16px;
width: 8px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 8px;
}
}
padding-top: 4.5rem !important;
background: #121526 !important;
ol,
ul {
margin: 0;
}
li {
a {
color: $white !important;
}
}
.breadcrumb-item + .breadcrumb-item {
&::before {
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");
height: 16px;
width: 8px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 8px;
}
}
}
//terms-and-conditions-wrapper
.terms-and-conditions-wrapper {
.col-lg-9 {
padding-left: 0.8125rem;
}
.terms-sidebar-wrapper {
position: sticky;
top: 20%;
margin-right: 2.5rem;
padding-bottom: 1.875rem;
ul {
margin: 0;
list-style-type: none;
li {
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #acacac;
&.active {
color: #000;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
border-bottom: 1px solid #000;
a {
color: #000;
}
}
a {
color: #acacac;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
}
}
}
}
.right-top-content-wrapper {
margin-bottom: 3rem;
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 2.75rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.updated-date {
color: #58595a;
font-family: $body-font;
font-size: 1rem;
font-weight: 400;
margin-bottom: 2rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1rem;
font-weight: 400;
margin: 0;
}
}
.point-frame-wrapper {
margin-bottom: 3rem;
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1rem;
font-weight: 400;
margin: 0;
margin-bottom: 3rem;
}
}
.col-lg-9 {
padding-left: 0.8125rem;
}
.terms-sidebar-wrapper {
position: sticky;
top: 20%;
margin-right: 2.5rem;
padding-bottom: 1.875rem;
ul {
margin: 0;
list-style-type: none;
li {
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #acacac;
&.active {
color: #000;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
border-bottom: 1px solid #000;
a {
color: #000;
}
}
a {
color: #acacac;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
}
}
}
}
.right-top-content-wrapper {
margin-bottom: 3rem;
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 2.75rem;
font-weight: 600;
margin-bottom: 0.75rem;
}
.updated-date {
color: #58595a;
font-family: $body-font;
font-size: 1rem;
font-weight: 400;
margin-bottom: 2rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1rem;
font-weight: 400;
margin: 0;
}
}
.point-frame-wrapper {
margin-bottom: 3rem;
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1rem;
font-weight: 400;
margin: 0;
margin-bottom: 3rem;
}
}
}
//YOU-MAY-LIKE
.YOU-MAY-LIKE {
.main-wrapper .top-title-wrapper p,
span {
color: #000 !important;
}
.main-wrapper .top-title-wrapper p,
span {
color: #000 !important;
}
}
.color-grey {
color: #6c757d;
color: #6c757d;
}
dev/sass/base/_custom_base.scss
......@@ -19,1122 +19,1131 @@
// 1: Custom CSS
//1.1: Arrow Btn
.arrow-btn {
display: flex;
padding: 10px 20px;
font-size: 1.125rem;
font-weight: 600;
padding-right: 50px;
position: relative;
text-decoration: unset;
white-space: nowrap;
&::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
background: url("../../assets/img/arrowRight.svg");
background-repeat: no-repeat;
background-size: contain;
height: 18px;
width: 18px;
@include transition();
}
&:hover {
&::before {
right: 10px;
}
}
display: flex;
padding: 10px 20px;
font-size: 1.125rem;
font-weight: 600;
padding-right: 50px;
position: relative;
text-decoration: unset;
white-space: nowrap;
&::before {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 20px;
background: url("../../assets/img/arrowRight.svg");
background-repeat: no-repeat;
background-size: contain;
height: 18px;
width: 18px;
@include transition();
}
&:hover {
&::before {
right: 10px;
}
}
}
//1.3: Section heading
.section-heading {
text-align: center;
margin-bottom: 2.5rem;
h2 {
line-height: 42px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 900;
color: $primary;
margin-bottom: 1.25rem;
}
span {
font-style: normal;
font-weight: normal;
font-size: 1.125rem;
line-height: 32px;
color: #6c6c6c;
}
text-align: center;
margin-bottom: 2.5rem;
h2 {
line-height: 42px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 900;
color: $primary;
margin-bottom: 1.25rem;
}
span {
font-style: normal;
font-weight: normal;
font-size: 1.125rem;
line-height: 32px;
color: #6c6c6c;
}
}
//1.4: Hover Up
.hover-up {
display: block;
@include transition();
&:hover {
transform: translateY(-4px);
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
display: block;
@include transition();
&:hover {
transform: translateY(-4px);
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
}
// 1.5: Accordion
.accordion {
.accordion-item {
border: none;
border-bottom: 1px solid #ebf2f8;
.accordion-button {
font-weight: 600;
font-size: 1.125rem;
line-height: 28px;
color: #000d20;
&::after {
content: "";
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-repeat: no-repeat;
height: 1.5rem;
width: 1.5rem;
background-size: contain;
display: block;
background-repeat: no-repeat;
}
}
.accordion-button:not(.collapsed) {
color: none;
background-color: transparent;
box-shadow: none;
}
}
.accordion-item {
border: none;
border-bottom: 1px solid #ebf2f8;
.accordion-button {
font-weight: 600;
font-size: 1.125rem;
line-height: 28px;
color: #000d20;
&::after {
content: "";
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-repeat: no-repeat;
height: 1.5rem;
width: 1.5rem;
background-size: contain;
display: block;
background-repeat: no-repeat;
}
}
.accordion-button:not(.collapsed) {
color: none;
background-color: transparent;
box-shadow: none;
}
}
}
.accordion-wrapper
.accordion
.accordion-item.classColor
.accordion-header
button {
&::after {
content: "";
background-image: url("https://makuracreations.online/makura/wp-content/themes/makura/assets/img/close-icon.png") !important;
}
.accordion
.accordion-item.classColor
.accordion-header
button {
&::after {
content: "";
background-image: url("https://makuracreations.online/makura/wp-content/themes/makura/assets/img/close-icon.png") !important;
}
}
// 1.6 Owl Carousel
.owl-carousel {
.owl-nav {
margin-top: 0;
button {
z-index: 11;
&.owl-prev {
position: absolute;
@include transition();
top: -120px;
right: 0;
background-color: #fff;
padding: 0.5rem !important;
svg {
stroke: #616161;
path {
stroke: #616161;
}
}
right: 70px;
&:hover {
background-color: $primary;
svg {
path {
stroke: #fff;
}
}
}
}
&.owl-next {
position: absolute;
@include transition();
top: -120px;
right: 0;
background-color: #fff;
padding: 0.5rem !important;
svg {
stroke: #616161;
path {
stroke: #616161;
}
}
&:hover {
background-color: $primary;
svg {
path {
stroke: #fff;
}
}
}
}
}
}
&.centered {
.owl-nav {
button {
background-color: white;
top: 50%;
transform: translateY(-50%);
}
.owl-next {
right: 1rem;
}
.owl-prev {
right: unset;
left: 1rem;
}
}
}
.owl-nav {
margin-top: 0;
button {
z-index: 11;
&.owl-prev {
position: absolute;
@include transition();
top: -120px;
right: 0;
background-color: #fff;
padding: 0.5rem !important;
svg {
stroke: #616161;
path {
stroke: #616161;
}
}
right: 70px;
&:hover {
background-color: $primary;
svg {
path {
stroke: #fff;
}
}
}
}
&.owl-next {
position: absolute;
@include transition();
top: -120px;
right: 0;
background-color: #fff;
padding: 0.5rem !important;
svg {
stroke: #616161;
path {
stroke: #616161;
}
}
&:hover {
background-color: $primary;
svg {
path {
stroke: #fff;
}
}
}
}
}
}
&.centered {
.owl-nav {
button {
background-color: white;
top: 50%;
transform: translateY(-50%);
}
.owl-next {
right: 1rem;
}
.owl-prev {
right: unset;
left: 1rem;
}
}
}
}
// 1.7 Sidebar
.sidebar {
height: 100%;
width: 320px;
position: fixed;
top: 0;
left: 0;
z-index: 111;
transform: translateX(-1000%);
.content-wrapper {
background-color: $primary;
position: relative;
z-index: 1111;
height: 100%;
}
@include transition();
.close-btn {
position: absolute;
top: 1rem;
right: -40px;
font-size: 1.25rem;
height: 40px;
width: 40px;
background-color: $primary;
display: flex;
align-items: center;
font-size: 1rem;
justify-content: center;
border-radius: 50%;
cursor: pointer;
i {
color: #fff;
@include transition();
}
&:hover {
opacity: 0.8;
i {
transform: scale(1.3);
}
}
}
height: 100%;
width: 320px;
position: fixed;
top: 0;
left: 0;
z-index: 111;
transform: translateX(-1000%);
.content-wrapper {
background-color: $primary;
position: relative;
z-index: 1111;
height: 100%;
}
@include transition();
.close-btn {
position: absolute;
top: 1rem;
right: -40px;
font-size: 1.25rem;
height: 40px;
width: 40px;
background-color: $primary;
display: flex;
align-items: center;
font-size: 1rem;
justify-content: center;
border-radius: 50%;
cursor: pointer;
i {
color: #fff;
@include transition();
}
&:hover {
opacity: 0.8;
i {
transform: scale(1.3);
}
}
}
&.cart {
left: unset;
right: 0;
transform: translateX(120%);
.close-btn {
right: unset;
left: -40px;
}
}
&.active {
transform: unset;
}
&.cart {
left: unset;
right: 0;
transform: translateX(120%);
.close-btn {
right: unset;
left: -40px;
}
}
&.active {
transform: unset;
}
}
//1.8 : Breadcrumb
.breadcrumb {
.breadcrumb-item {
font-size: 1rem;
font-weight: 600;
a {
color: #6c757d;
}
&.active {
a {
color: #000;
}
}
}
.breadcrumb-item + .breadcrumb-item {
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: end;
color: $white;
p {
color: #000;
margin-bottom: 0;
}
&::before {
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");
height: 16px;
width: 8px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 8px;
}
}
.breadcrumb-item {
font-size: 1rem;
font-weight: 600;
a {
color: #6c757d;
}
&.active {
a {
color: #000;
}
}
}
.breadcrumb-item + .breadcrumb-item {
font-size: 1rem;
font-weight: 600;
display: flex;
align-items: end;
color: $white;
p {
color: #000;
margin-bottom: 0;
}
&::before {
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");
height: 16px;
width: 8px;
background-repeat: no-repeat;
background-size: contain;
margin-right: 8px;
}
}
}
// 1.9: Form Group
.form-group {
margin-bottom: 1rem;
label {
color: #151515;
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
.form-control {
height: 3rem;
background-color: #f9f9f9;
border: 1px solid #d1d1d1;
&:focus,
&:focus-visible {
box-shadow: none;
border: 2px solid $primary;
}
}
textarea {
min-height: 100px;
}
.select2-container {
width: 100% !important;
height: 3rem !important;
.select2-selection--single {
height: 100%;
.select2-selection__rendered {
line-height: 3rem;
}
.select2-selection__arrow {
height: 3rem;
}
}
}
margin-bottom: 1rem;
label {
color: #151515;
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 0.75rem;
}
.form-control {
height: 3rem;
background-color: #f9f9f9;
border: 1px solid #d1d1d1;
&:focus,
&:focus-visible {
box-shadow: none;
border: 2px solid $primary;
}
}
textarea {
min-height: 100px;
}
.select2-container {
width: 100% !important;
height: 3rem !important;
.select2-selection--single {
height: 100%;
.select2-selection__rendered {
line-height: 3rem;
}
.select2-selection__arrow {
height: 3rem;
}
}
}
}
// 1.10: select2 dropdown
.select2-dropdown {
z-index: 11111;
padding: 0.5rem;
input {
margin-bottom: 1rem;
&:focus-visible {
box-shadow: none !important;
outline: none !important;
}
}
.select2-results__option--highlighted.select2-results__option--selectable {
background: $primary !important;
}
.select2-results__option--highlighted {
background-color: $primary !important;
}
z-index: 11111;
padding: 0.5rem;
input {
margin-bottom: 1rem;
&:focus-visible {
box-shadow: none !important;
outline: none !important;
}
}
.select2-results__option--highlighted.select2-results__option--selectable {
background: $primary !important;
}
.select2-results__option--highlighted {
background-color: $primary !important;
}
}
//1.11: Pagination
.pagination {
background-color: transparent;
li {
border: 1px solid #121526;
opacity: 0.7;
background: $white;
margin-right: 1rem;
&:last-child {
margin-right: 0;
}
a {
color: #121526;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.4px;
}
&.active {
a {
background-color: $primary;
color: #fff;
&::before {
display: none;
}
}
}
}
background-color: transparent;
justify-content: center;
.nav-links {
span,
a {
border: 1px solid #121526;
opacity: 0.7;
background: $white;
margin-right: 1rem;
color: #121526;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.4px;
padding: 8px 16px;
&.prev,
&.next {
padding: 8px 20px;
}
&:last-child {
margin-right: 0;
}
&.current {
background-color: $primary;
color: #fff;
&::before {
display: none;
}
}
}
}
}
// 1.12: Related Content
.related-content {
.heading {
@extend .mb-40;
span {
font-size: 0.875rem;
letter-spacing: 1px;
text-transform: uppercase;
color: #000000;
}
h1 {
margin-top: 0rem;
font-weight: 900;
line-height: 58px;
letter-spacing: 1px;
text-transform: uppercase;
color: $primary;
}
}
.heading {
@extend .mb-40;
span {
font-size: 0.875rem;
letter-spacing: 1px;
text-transform: uppercase;
color: #000000;
}
h1 {
margin-top: 0rem;
font-weight: 900;
line-height: 58px;
letter-spacing: 1px;
text-transform: uppercase;
color: $primary;
}
}
}
//1.13: Expandable-text-wrapper
.expandable-text-wrapper,
.expandable-text-accordion-wrapper {
.button-wrapper {
margin-top: 1.875rem;
@media (max-width: 767.98px) {
margin-top: 1.875rem;
}
}
.heading {
h3 {
color: $primary;
margin-bottom: 1rem;
}
}
.expandable-text,
.expandable-text-accordion {
border: 1px solid rgba(0, 0, 0, 0.1);
max-height: 21rem;
padding: 2rem;
overflow: hidden;
transition: all 1s ease;
position: relative;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.5rem !important;
font-weight: 600;
}
ul {
columns: 2;
padding-top: 1.5rem;
padding-bottom: 3rem;
-webkit-column-count: 2;
column-count: 2;
-webkit-column-gap: 10rem;
column-gap: 3rem;
max-width: 840px;
margin: auto;
li {
display: flex;
font-size: 1rem;
margin-bottom: 1.75rem;
@media (max-width: 767.98px) {
margin-bottom: 3.25rem;
}
.icon {
margin-right: 0.5rem;
}
}
}
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 65%;
width: 100%;
background-size: cover;
background-image: url(../../assets/img/expand-text.png);
background-repeat: no-repeat;
@media (max-width: 767.98px) {
display: none;
}
}
p {
color: #6c6c6c;
}
p.expand {
opacity: 0;
}
&.expanded {
max-height: 2000px;
&::before {
display: none;
}
p.expand {
opacity: 1;
}
}
}
.see-more-btn,
.download-curriculum-btn .see-more-btn-accordion {
font-size: 1rem;
color: $white;
font-weight: 500;
background-color: $primary;
padding: 0.75rem 3.9375rem;
cursor: pointer;
}
.button-wrapper {
margin-top: 1.875rem;
@media (max-width: 767.98px) {
margin-top: 1.875rem;
}
}
.heading {
h3 {
color: $primary;
margin-bottom: 1rem;
}
}
.expandable-text,
.expandable-text-accordion {
border: 1px solid rgba(0, 0, 0, 0.1);
max-height: 21rem;
padding: 2rem;
overflow: hidden;
transition: all 1s ease;
position: relative;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.5rem !important;
font-weight: 600;
}
ul {
columns: 2;
padding-top: 1.5rem;
padding-bottom: 3rem;
-webkit-column-count: 2;
column-count: 2;
-webkit-column-gap: 10rem;
column-gap: 3rem;
max-width: 840px;
margin: auto;
li {
display: flex;
font-size: 1rem;
margin-bottom: 1.75rem;
@media (max-width: 767.98px) {
margin-bottom: 3.25rem;
}
.icon {
margin-right: 0.5rem;
}
}
}
&::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 65%;
width: 100%;
background-size: cover;
background-image: url(../../assets/img/expand-text.png);
background-repeat: no-repeat;
@media (max-width: 767.98px) {
display: none;
}
}
p {
color: #6c6c6c;
}
p.expand {
opacity: 0;
}
&.expanded {
max-height: 2000px;
&::before {
display: none;
}
p.expand {
opacity: 1;
}
}
}
.see-more-btn,
.download-curriculum-btn .see-more-btn-accordion {
font-size: 1rem;
color: $white;
font-weight: 500;
background-color: $primary;
padding: 0.75rem 3.9375rem;
cursor: pointer;
}
}
//OUR-MOST-RECENT-WORKS
.OUR-MOST-RECENT-WORKS {
.recent-card-wrapper {
margin-bottom: 4rem !important;
// display: none;
}
.load-more-content {
&.hide {
display: none !important;
}
}
.nav-pills {
padding: 1.5rem 0;
margin-bottom: 2rem !important;
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
li {
margin-right: 2.75rem;
&:last-child {
margin-right: 0;
}
}
button {
padding: 0;
background-color: unset !important;
color: #58595a !important;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.4px;
&.active {
color: #005aff !important;
}
}
}
.recent-card-wrapper {
margin-bottom: 4rem !important;
// display: none;
}
.load-more-content {
&.hide {
display: none !important;
}
}
.nav-pills {
padding: 1.5rem 0;
margin-bottom: 2rem !important;
border-top: 1px solid #bfbfbf;
border-bottom: 1px solid #bfbfbf;
li {
margin-right: 2.75rem;
&:last-child {
margin-right: 0;
}
}
button {
padding: 0;
background-color: unset !important;
color: #58595a !important;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
line-height: 24px;
letter-spacing: -0.4px;
&.active {
color: #005aff !important;
}
}
}
}
.main-wrapper {
@media (max-width: 767.98px) {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.875rem !important;
}
}
padding: 6.25rem 0 3rem 0;
@media (max-width: 767.98px) {
padding: 1.875rem 0;
}
.view-button {
@media (max-width: 767.98px) {
margin-top: 5.125rem;
}
}
.top-title-wrapper {
span {
font-weight: 600;
font-size: 14px;
color: $primary-second;
}
h2 {
margin-top: 1.25rem;
color: #121526;
font-family: $body-font;
font-size: 2.5rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
margin-bottom: 1.5rem;
}
p {
color: #58595a;
}
}
.tabs-wrapper {
ul {
margin-bottom: 3.625rem !important;
li {
margin-right: 1.25rem;
@media (max-width: 1023.98px) {
margin-bottom: 1.25rem;
}
button {
border-radius: 0;
padding: 0.75rem 2rem;
border: 1px solid rgba(0, 0, 0, 0.1);
&:hover {
background-color: $primary;
color: #fff;
}
}
}
}
}
@media (max-width: 767.98px) {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.875rem !important;
}
}
padding: 6.25rem 0 3rem 0;
@media (max-width: 767.98px) {
padding: 1.875rem 0;
}
.view-button {
@media (max-width: 767.98px) {
margin-top: 5.125rem;
}
}
.top-title-wrapper {
span {
font-weight: 600;
font-size: 14px;
color: $primary-second;
}
h2 {
margin-top: 1.25rem;
color: #121526;
font-family: $body-font;
font-size: 2.5rem;
font-weight: 600;
line-height: 60px;
letter-spacing: -1.4px;
margin-bottom: 1.5rem;
}
p {
color: #58595a;
}
}
.tabs-wrapper {
ul {
margin-bottom: 3.625rem !important;
li {
margin-right: 1.25rem;
@media (max-width: 1023.98px) {
margin-bottom: 1.25rem;
}
button {
border-radius: 0;
padding: 0.75rem 2rem;
border: 1px solid rgba(0, 0, 0, 0.1);
&:hover {
background-color: $primary;
color: #fff;
}
}
}
}
}
}
.recent-card-wrapper {
&:hover {
.bottom-text {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $primary;
}
}
}
img {
margin-bottom: 1.75rem;
height: 16rem;
width: 100%;
object-fit: cover;
}
.bottom-text {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -0.6px;
margin-bottom: 0.5rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 30px;
letter-spacing: -0.6px;
text-decoration-line: underline;
margin: 0;
@media (max-width: 767.98px) {
font-size: 0.875rem !important;
}
}
ul {
flex-wrap: wrap;
li {
margin-bottom: 4px;
font-weight: 600;
margin-right: 1.25rem;
color: #58595a;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.5px;
button {
border-radius: 0;
padding: 0.75rem 3.1875rem;
}
}
}
}
&:hover {
.bottom-text {
h1,
h2,
h3,
h4,
h5,
h6 {
color: $primary;
}
}
}
img {
margin-bottom: 1.75rem;
height: 16rem;
width: 100%;
object-fit: cover;
}
.bottom-text {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 1.375rem;
font-weight: 600;
letter-spacing: -0.6px;
margin-bottom: 0.5rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 30px;
letter-spacing: -0.6px;
text-decoration-line: underline;
margin: 0;
@media (max-width: 767.98px) {
font-size: 0.875rem !important;
}
}
ul {
flex-wrap: wrap;
li {
margin-bottom: 4px;
font-weight: 600;
margin-right: 1.25rem;
color: #58595a;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.5px;
button {
border-radius: 0;
padding: 0.75rem 3.1875rem;
}
}
}
}
}
.course-card-wrapper {
border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 2.5rem;
overflow: hidden;
&:hover {
img {
transform: scale(1.09);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $primary;
}
}
img {
width: 100%;
height: 12.5rem;
object-fit: cover;
margin-bottom: 1.5rem;
overflow: hidden;
transition: 0.3s ease-in-out;
}
.inner-content-wrapper {
background: $white;
padding: 0 1.25rem 1.5rem 1.25rem;
}
ul {
margin-bottom: 0.75rem;
li {
color: #8f8f8f !important;
font-family: $body-font;
font-size: 1rem;
font-weight: 400;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
font-family: $body-font;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.4px;
margin-bottom: 1.125rem;
}
.review-star-wrapper {
margin-bottom: 1.25rem;
.star {
margin-right: 0.625rem;
}
}
.rating-text {
color: #58595a;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.4px;
}
.course-price {
color: #000;
font-family: $body-font;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.4px;
}
&.high-rated-card {
.course-price {
color: #1226aa;
font-family: $body-font;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.4px;
}
}
border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 2.5rem;
overflow: hidden;
&:hover {
img {
transform: scale(1.09);
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $primary;
}
}
img {
width: 100%;
height: 12.5rem;
object-fit: cover;
margin-bottom: 1.5rem;
overflow: hidden;
transition: 0.3s ease-in-out;
}
.inner-content-wrapper {
background: $white;
padding: 0 1.25rem 1.5rem 1.25rem;
}
ul {
margin-bottom: 0.75rem;
li {
color: #8f8f8f !important;
font-family: $body-font;
font-size: 1rem;
font-weight: 400;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
font-family: $body-font;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.4px;
margin-bottom: 1.125rem;
}
.review-star-wrapper {
margin-bottom: 1.25rem;
.star {
margin-right: 0.625rem;
}
}
.rating-text {
color: #58595a;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.4px;
}
.course-price {
color: #000;
font-family: $body-font;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.4px;
}
&.high-rated-card {
.course-price {
color: #1226aa;
font-family: $body-font;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.4px;
}
}
}
//OUR-MOST-RECENT-WORKS
//request-success-modal
.request-success-modal {
display: none;
animation: grow 2s ease;
display: none;
animation: grow 2s ease;
}
@keyframes grow {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
// success-request
.success-request {
animation: grow 0.3s ease;
svg {
margin-bottom: 3.1875rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 2rem;
font-weight: 600;
letter-spacing: -1px;
margin-bottom: 1.5rem;
}
p {
color: #58595a;
text-align: center;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 3rem;
span {
color: #2c5cda;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 700;
}
}
button {
color: #f9f8f4;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.4px;
padding: 0.75rem 4.375rem;
}
animation: grow 0.3s ease;
svg {
margin-bottom: 3.1875rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 2rem;
font-weight: 600;
letter-spacing: -1px;
margin-bottom: 1.5rem;
}
p {
color: #58595a;
text-align: center;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 3rem;
span {
color: #2c5cda;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 700;
}
}
button {
color: #f9f8f4;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.4px;
padding: 0.75rem 4.375rem;
}
}
//modal-steps-wrapper
.modal-steps-wrapper {
#cf7mls-back-btn-cf7mls_step-7 {
display: none;
}
textarea {
background: rgba(0, 0, 0, 0.05);
width: 100%;
padding: 1.125rem 1rem;
color: #000;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.3px;
resize: none;
}
input {
background: rgba(0, 0, 0, 0.05);
padding: 1.125rem 1rem;
border-radius: 0;
&:focus {
background: rgba(0, 0, 0, 0.05);
padding: 1.125rem 1rem;
border-radius: 0;
outline: none;
border: 1px solid #ced4da;
box-shadow: unset;
}
}
.wpcf7-form .fieldset-cf7mls .cf7mls-btns {
min-height: unset !important;
margin-top: 1.875rem;
}
#cf7mls-back-btn-cf7mls_step-7 {
display: none;
}
textarea {
background: rgba(0, 0, 0, 0.05);
width: 100%;
padding: 1.125rem 1rem;
color: #000;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.3px;
resize: none;
}
input {
background: rgba(0, 0, 0, 0.05);
padding: 1.125rem 1rem;
border-radius: 0;
&:focus {
background: rgba(0, 0, 0, 0.05);
padding: 1.125rem 1rem;
border-radius: 0;
outline: none;
border: 1px solid #ced4da;
box-shadow: unset;
}
}
.wpcf7-form .fieldset-cf7mls .cf7mls-btns {
min-height: unset !important;
margin-top: 1.875rem;
}
//cf7mls-btns
.cf7mls-btns {
display: flex;
margin-left: auto;
text-align: left;
button {
background: #005aff;
margin: 0 !important;
padding: 0.75rem 3.625rem !important;
color: #f9f8f4 !important;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
height: 100%;
border-radius: 0;
&.cf7mls_back {
margin-right: 1rem !important;
}
}
}
.step-text {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #1226aa !important;
font-family: $body-font;
font-size: 0.875rem !important;
font-weight: 600 !important;
line-height: 20px !important;
letter-spacing: -0.3px;
}
}
button,
.button {
color: #f9f8f4 !important;
padding: 0.75rem 3.625rem;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.4px;
&.previous {
color: #000 !important;
border: 1px solid #000;
border-radius: 0;
margin-right: 1rem;
&:hover {
color: $white !important;
background-color: $dark;
}
}
&.cf7mls_back {
color: #000 !important;
margin: 0;
}
}
.cf7mls_back {
color: #000 !important;
border: 1px solid #000;
border-radius: 0;
margin-right: 1rem;
background-color: transparent !important;
background: transparent !important;
padding: 0.75rem 3.625rem;
}
.wpcf7-form-control-wrap {
position: relative;
&::before {
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-repeat: no-repeat;
background-size: contain;
height: 1.5rem;
width: 1.5rem;
position: absolute;
top: 50%;
right: 1%;
transform: translate(-50%, -50%);
}
&.cf7mls-invalid {
&::before {
content: "";
top: 17%;
}
}
}
select {
width: 100%;
padding: 1.125rem 1rem;
color: #000;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.3px;
background: rgba(0, 0, 0, 0.05);
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
margin-bottom: 1rem;
cursor: pointer;
}
.wpcf7-spinner {
position: absolute !important;
bottom: 30px;
left: 50%;
transform: translate(-50%, -50%);
}
.fieldset-cf7mls-wrapper {
fieldset {
&:nth-child(5) {
.wpcf7-form-control-wrap {
&::before {
display: none;
}
}
}
&:nth-child(7) {
.wpcf7-form-control-wrap {
&::before {
display: none;
}
}
.wpcf7-submit {
color: #f9f8f4 !important;
padding: 0.75rem 3.625rem;
font-family: "Sora", sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.4px;
background-color: $primary;
outline: none;
border: none;
border-radius: 0;
margin-right: 4.3125rem;
margin-top: 0;
margin-bottom: 0;
}
}
&:nth-child(6) {
.wpcf7-form-control-wrap {
&::before {
display: none;
}
}
}
.sent-quote-btn-wrapper {
width: 100%;
justify-content: space-between;
p {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
.wpcf7-spinner {
left: 88%;
bottom: 14%;
@media (max-width: 1199px) {
left: 83% !important;
bottom: 12% !important;
}
@media (max-width: 425px) {
left: 83% !important;
bottom: 11% !important;
}
}
}
}
}
}
fieldset {
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
}
}
.modal-steps-wrapper-box {
fieldset {
.wpcf7-spinner {
position: absolute;
background: red;
z-index: 9999999999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:not(:first-of-type) {
display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 2rem;
font-weight: 600;
letter-spacing: -1px;
margin-bottom: 1.25rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
line-height: 28px;
letter-spacing: -0.5px;
margin-bottom: 1.9375rem;
}
.input-wrapper {
margin-bottom: 3.75rem;
}
label {
color: #121526;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.625rem;
}
input {
background: rgba(0, 0, 0, 0.05);
padding: 1.125rem 1rem;
border-radius: 0;
&::placeholder {
color: rgba(88, 89, 90, 0.4);
font-family: $body-font;
font-size: 0.875rem;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.3px;
}
}
.select-wrapper {
margin-bottom: 3.75rem;
&::before {
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-repeat: no-repeat;
background-size: contain;
height: 1.5rem;
width: 1.5rem;
position: absolute;
top: 50%;
right: 1%;
transform: translate(-50%, -50%);
}
}
}
}
//cf7mls-btns
.cf7mls-btns {
display: flex;
margin-left: auto;
text-align: left;
button {
background: #005aff;
margin: 0 !important;
padding: 0.75rem 3.625rem !important;
color: #f9f8f4 !important;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
height: 100%;
border-radius: 0;
&.cf7mls_back {
margin-right: 1rem !important;
}
}
}
.step-text {
h1,
h2,
h3,
h4,
h5,
h6 {
color: #1226aa !important;
font-family: $body-font;
font-size: 0.875rem !important;
font-weight: 600 !important;
line-height: 20px !important;
letter-spacing: -0.3px;
}
}
button,
.button {
color: #f9f8f4 !important;
padding: 0.75rem 3.625rem;
font-family: $body-font;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.4px;
&.previous {
color: #000 !important;
border: 1px solid #000;
border-radius: 0;
margin-right: 1rem;
&:hover {
color: $white !important;
background-color: $dark;
}
}
&.cf7mls_back {
color: #000 !important;
margin: 0;
}
}
.cf7mls_back {
color: #000 !important;
border: 1px solid #000;
border-radius: 0;
margin-right: 1rem;
background-color: transparent !important;
background: transparent !important;
padding: 0.75rem 3.625rem;
}
.wpcf7-form-control-wrap {
position: relative;
&::before {
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-repeat: no-repeat;
background-size: contain;
height: 1.5rem;
width: 1.5rem;
position: absolute;
top: 50%;
right: 1%;
transform: translate(-50%, -50%);
}
&.cf7mls-invalid {
&::before {
content: "";
top: 17%;
}
}
}
select {
width: 100%;
padding: 1.125rem 1rem;
color: #000;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: -0.3px;
background: rgba(0, 0, 0, 0.05);
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
margin-bottom: 1rem;
cursor: pointer;
}
.wpcf7-spinner {
position: absolute !important;
bottom: 30px;
left: 50%;
transform: translate(-50%, -50%);
}
.fieldset-cf7mls-wrapper {
fieldset {
&:nth-child(5) {
.wpcf7-form-control-wrap {
&::before {
display: none;
}
}
}
&:nth-child(7) {
.wpcf7-form-control-wrap {
&::before {
display: none;
}
}
.wpcf7-submit {
color: #f9f8f4 !important;
padding: 0.75rem 3.625rem;
font-family: "Sora", sans-serif;
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.4px;
background-color: $primary;
outline: none;
border: none;
border-radius: 0;
margin-right: 4.3125rem;
margin-top: 0;
margin-bottom: 0;
}
}
&:nth-child(6) {
.wpcf7-form-control-wrap {
&::before {
display: none;
}
}
}
.sent-quote-btn-wrapper {
width: 100%;
justify-content: space-between;
p {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
.wpcf7-spinner {
left: 88%;
bottom: 14%;
@media (max-width: 1199px) {
left: 83% !important;
bottom: 12% !important;
}
@media (max-width: 425px) {
left: 83% !important;
bottom: 11% !important;
}
}
}
}
}
}
fieldset {
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
font-weight: 400;
}
}
.modal-steps-wrapper-box {
fieldset {
.wpcf7-spinner {
position: absolute;
background: red;
z-index: 9999999999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&:not(:first-of-type) {
display: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #121526;
font-family: $body-font;
font-size: 2rem;
font-weight: 600;
letter-spacing: -1px;
margin-bottom: 1.25rem;
}
p {
color: #58595a;
font-family: $body-font;
font-size: 1.125rem;
line-height: 28px;
letter-spacing: -0.5px;
margin-bottom: 1.9375rem;
}
.input-wrapper {
margin-bottom: 3.75rem;
}
label {
color: #121526;
font-family: $body-font;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.625rem;
}
input {
background: rgba(0, 0, 0, 0.05);
padding: 1.125rem 1rem;
border-radius: 0;
&::placeholder {
color: rgba(88, 89, 90, 0.4);
font-family: $body-font;
font-size: 0.875rem;
font-weight: 400;
line-height: 20px;
letter-spacing: -0.3px;
}
}
.select-wrapper {
margin-bottom: 3.75rem;
&::before {
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-repeat: no-repeat;
background-size: contain;
height: 1.5rem;
width: 1.5rem;
position: absolute;
top: 50%;
right: 1%;
transform: translate(-50%, -50%);
}
}
}
}
}
// error message contact form 7
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
position: fixed;
width: 35%;
bottom: 20%;
right: 0;
padding: 28px;
border-radius: 8px;
background: #ebc8c4;
color: #dc3232;
border: 0px;
transform: translateX(100rem);
transition: 0.3s ease-in-out;
animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
border: 2px solid #dc3232;
border-color: #dc3232 !important;
@media (max-width: 767.98px) {
width: 80%;
}
position: fixed;
width: 35%;
bottom: 20%;
right: 0;
padding: 28px;
border-radius: 8px;
background: #ebc8c4;
color: #dc3232;
border: 0px;
transform: translateX(100rem);
transition: 0.3s ease-in-out;
animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
border: 2px solid #dc3232;
border-color: #dc3232 !important;
@media (max-width: 767.98px) {
width: 80%;
}
}
// success message contact form 7
.wpcf7 form.sent .wpcf7-response-output {
position: fixed;
width: 35%;
bottom: 20%;
right: 0;
padding: 28px;
border-radius: 8px;
background: #cce8f4;
color: #4d728a;
border: 0px;
transform: translateX(100rem);
transition: 0.3s ease-in-out;
animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
border: 2px solid #4d728a;
border-color: #4d728a !important;
@media (max-width: 767.98px) {
width: 80%;
}
position: fixed;
width: 35%;
bottom: 20%;
right: 0;
padding: 28px;
border-radius: 8px;
background: #cce8f4;
color: #4d728a;
border: 0px;
transform: translateX(100rem);
transition: 0.3s ease-in-out;
animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
border: 2px solid #4d728a;
border-color: #4d728a !important;
@media (max-width: 767.98px) {
width: 80%;
}
}
.wpcf7-not-valid-tip {
font-size: 1rem !important;
font-size: 1rem !important;
}
@keyframes toast {
0% {
transform: translateY(150%);
opacity: 0;
}
10%,
90% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
0% {
transform: translateY(150%);
opacity: 0;
}
10%,
90% {
transform: translateY(0);
opacity: 1;
}
100% {
transform: translateY(100%);
opacity: 0;
}
}
dev/sass/base/_header.scss
///top-nav
.top-nav {
width: 100%;
background-color: $white;
top: 0;
right: 0;
left: 0;
z-index: 111;
transition: 0.4s ease-in-out;
@media (max-width: 1030px) {
.navbar-nav {
flex-direction: column !important;
}
}
.side-menu-close {
@media (max-width: 1030px) {
display: block !important;
position: relative;
top: -3%;
right: 0 !important;
width: 100%;
}
}
.nav-wrapper {
padding: 1.25rem 0;
.nav-left {
padding-left: 0;
ul {
li {
a {
margin-right: 1.125rem;
position: relative;
transition: transform 0.3s ease-in-out;
&.active {
&::before {
content: "";
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: $primary;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0 1);
transition: transform 0.3s ease-in-out;
transform-origin: left;
}
}
&:hover {
&::before {
content: "";
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: $primary;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0 1);
transform-origin: left;
}
}
}
}
.book-button {
display: block;
}
}
.logo {
img {
object-fit: contain;
height: 36px;
min-width: 10rem;
}
}
.navbar-nav {
@media (max-width: 1024.98px) {
margin-right: unset !important;
}
li {
&:last-of-type {
a {
&.active {
color: rgba(0, 0, 0, 0.55);
&::before {
display: none;
}
}
}
}
a {
@media (max-width: 1024.98px) {
margin-right: 1.25rem !important;
}
}
}
}
}
.nav-right {
ul {
li {
margin-right: 2.5rem;
@media (max-width: 1030px) {
margin-right: 0;
margin-bottom: 1.875rem;
}
&.active {
a {
color: #000;
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
color: transparent;
background: #000;
height: 1px;
}
}
}
a {
font-weight: 400;
position: relative;
transition: 0.3s ease-in-out;
color: #211e1e;
font-family: $body-font;
font-size: 1rem;
letter-spacing: -0.3px;
&:hover {
color: #000;
&::after {
width: 100%;
}
}
&::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: ".";
color: transparent;
background: #000;
height: 1px;
transition: 0.3s ease-in-out;
}
}
&:last-of-type {
margin-right: 0;
}
}
}
.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);
}
}
width: 100%;
background-color: $white;
top: 0;
right: 0;
left: 0;
z-index: 111;
transition: 0.4s ease-in-out;
@media (max-width: 1030px) {
.navbar-nav {
flex-direction: column !important;
}
}
.side-menu-close {
@media (max-width: 1030px) {
display: block !important;
position: relative;
top: -3%;
right: 0 !important;
width: 100%;
}
}
.nav-wrapper {
padding: 1.25rem 0;
.nav-left {
padding-left: 0;
ul {
li {
a {
margin-right: 1.125rem;
position: relative;
transition: transform 0.3s ease-in-out;
&.active {
&::before {
content: "";
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: $primary;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0 1);
transition: transform 0.3s ease-in-out;
transform-origin: left;
}
}
&:hover {
&::before {
content: "";
position: absolute;
width: 100%;
height: 4px;
border-radius: 4px;
background-color: $primary;
bottom: 0;
left: 0;
transform-origin: right;
transform: scaleX(0 1);
transform-origin: left;
}
}
}
}
.book-button {
display: block;
}
}
.logo {
img {
object-fit: contain;
height: 36px;
min-width: 10rem;
}
}
.navbar-nav {
@media (max-width: 1024.98px) {
margin-right: unset !important;
}
li {
&:last-of-type {
a {
&.active {
color: rgba(0, 0, 0, 0.55);
&::before {
display: none;
}
}
}
}
a {
@media (max-width: 1024.98px) {
margin-right: 1.25rem !important;
}
}
}
}
}
.nav-right {
ul {
li {
margin-right: 2.5rem;
@media (max-width: 1030px) {
margin-right: 0;
&:not(:last-child) {
margin-bottom: 1.875rem;
}
}
&.active {
a {
color: #000;
position: relative;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
color: transparent;
background: #000;
height: 1px;
}
}
}
a {
font-weight: 400;
position: relative;
transition: 0.3s ease-in-out;
color: #211e1e;
font-family: $body-font;
font-size: 1rem;
letter-spacing: -0.3px;
&:hover {
color: #000;
&::after {
width: 100%;
}
}
&::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: ".";
color: transparent;
background: #000;
height: 1px;
transition: 0.3s ease-in-out;
}
}
&:last-of-type {
margin-right: 0;
}
&.menu-item-has-children {
position: relative;
> a {
padding-right: 24px;
position: relative;
&::before {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
width: 10px;
height: 7px;
background: url(../img/angle-right.svg) no-repeat center/contain;
}
}
&:hover {
> ul {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
ul {
position: absolute;
top: 100%;
left: 0;
background-color: $white;
min-width: 312px;
padding: 12px 0;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease-in-out;
li {
list-style-type: none;
width: 100%;
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
.headerScrolled {
position: fixed;
z-index: 1000;
top: 0;
background-color: transparent;
width: 100%;
height: 5.625rem;
transition: 0.4s ease-in-out;
position: fixed;
z-index: 1000;
top: 0;
background-color: transparent;
width: 100%;
height: 5.625rem;
transition: 0.4s ease-in-out;
}
.sticky-top {
padding: 15px 30px;
backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
-webkit-backdrop-filter: blur(20px) saturate(160%) contrast(45%)
brightness(140%);
-webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06);
animation: slideDown 0.8s ease forwards;
// overflow: hidden;
@media (max-width: 1030px) {
animation: unset;
.navbar-nav {
flex-direction: column !important;
}
}
.nav-wrapper {
border: none;
.nav-left {
.logo {
.brand-logo {
svg {
width: 7.5rem;
}
}
}
}
}
padding: 15px 30px;
// backdrop-filter: blur(20px) saturate(160%) contrast(45%) brightness(140%);
// -webkit-backdrop-filter: blur(20px) saturate(160%) contrast(45%)
// brightness(140%);
-webkit-box-shadow: 0 6px 9px 0 rgba(0, 0, 0, 0.06);
animation: slideDown 0.8s ease forwards;
// overflow: hidden;
@media (max-width: 1030px) {
animation: unset;
.navbar-nav {
flex-direction: column !important;
}
}
.nav-wrapper {
border: none;
.nav-left {
.logo {
.brand-logo {
svg {
width: 7.5rem;
}
}
}
}
}
}
@keyframes slideDown {
0% {
max-height: 0;
opacity: 0;
transition: 0.4s ease-in-out;
}
100% {
max-height: 200px;
opacity: 1;
transition: 0.4s ease-in-out;
/* Set to whatever height you want to slide down to */
}
0% {
max-height: 0;
opacity: 0;
transition: 0.4s ease-in-out;
}
100% {
max-height: 200px;
opacity: 1;
transition: 0.4s ease-in-out;
/* Set to whatever height you want to slide down to */
}
}
.menu-toggler {
display: none;
display: none;
}
@media (max-width: 1199px) {
.navbar-nav {
li {
a {
font-size: 1.125rem !important;
margin-right: 0 !important;
}
}
}
.navbar-nav {
li {
a {
font-size: 1.125rem !important;
margin-right: 0 !important;
}
}
}
}
@media (max-width: 1030px) {
.menu-toggler {
display: block;
}
.navbar-nav {
transform: translateX(-100%);
transition: 0.3s ease-in-out;
position: fixed;
top: 0;
left: 0;
// background: linear-gradient(
// 90deg,
// rgba(63, 154, 212, 1) 13%,
// rgba(40, 74, 223, 1) 96%
// );
left: 0;
height: 100vh;
width: 100%;
z-index: 1111;
padding: 4rem 2rem;
text-align: center;
// &.show {
// transform: translateX(0);
// top: 0;
// background: linear-gradient(
// 90deg,
// rgba(63, 154, 212, 1) 13%,
// rgba(40, 74, 223, 1) 96%
// );
// left: 0;
// height: 100vh;
// width: 100%;
// z-index: 1111;
// padding: 4rem 2rem;
// text-align: center;
// .side-menu-close {
// display: block !important;
// position: absolute;
// right: 8%;
// top: 3%;
// }
// li {
// a {
// color: #fff !important;
// padding: 1rem;
// }
// &:hover {
// a {
// color: $secondary;
// }
// }
// }
// }
&.show {
background: $white;
height: 110vh;
padding: 6rem 2rem;
transform: translateX(0);
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: 1111;
padding: 4rem 2rem;
text-align: center;
.side-menu-close {
right: 4%;
}
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);
}
}
}
}
.menu-toggler {
display: block;
}
.navbar-nav {
transform: translateX(-100%);
transition: 0.3s ease-in-out;
position: fixed;
top: 0;
left: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: 1111;
padding: 4rem 2rem;
text-align: center;
&.show {
background: $white;
height: 110vh;
padding: 6rem 2rem;
transform: translateX(0);
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: 1111;
padding: 4rem 2rem;
text-align: center;
.side-menu-close {
right: 4%;
}
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);
}
}
}
}
.top-nav {
.nav-wrapper {
.nav-right {
ul {
li {
&.menu-item-has-children {
ul {
position: unset;
opacity: 1;
visibility: visible;
transform: translateY(0);
display: none;
li {
a {
padding-left: 12px;
border-radius: 12px;
}
ul {
padding-left: 12px;
}
}
}
&:hover {
> ul {
display: block;
}
}
}
}
}
}
}
}
}
@media (max-width: 470px) {
.book-button {
display: block;
}
.navbar-nav {
.book-button {
display: block !important;
width: 100%;
margin-top: 2rem;
}
}
.book-button {
display: block;
}
.navbar-nav {
.book-button {
display: block !important;
width: 100%;
margin-top: 2rem;
}
}
}
:target::before {
content: "";
display: block;
height: 150px;
margin-top: -180px;
content: "";
display: block;
height: 150px;
margin-top: -180px;
}
dev/sass/pages/_index.scss
......@@ -1165,6 +1165,7 @@ input[type="number"] {
transition: 0.5s ease-in-out;
height: 100%;
width: 100%;
object-fit: cover;
overflow: hidden;
}
}
......
dev/sass/pages/_responsive.scss
@media (max-width: 767.98px) {
.py-80,
.py-60,
.py-40,
.py-100 {
padding: 2rem 0 !important;
}
.request-hide-success-modal {
.left-section {
img {
height: 150px;
margin: auto;
display: flex;
margin-bottom: 1.25rem;
}
}
.fieldset-cf7mls {
.step-next {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 0.875rem !important;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
}
.top-nav {
.nav-wrapper .nav-left .logo img {
width: auto;
height: 24px;
}
}
.navbar .toggler-icon {
svg {
height: 32px;
width: 32px;
}
}
.navbar-nav {
transform: translateX(100%);
background: $white;
transition: 0.3s ease-in-out;
}
.navbar-nav.show {
background: $white;
height: 110vh;
padding: 6rem 2rem;
.side-menu-close {
right: 4%;
}
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);
}
}
}
.HOME.TOP-BANNER-SECTION img {
height: auto;
width: 20rem;
object-fit: contain;
display: flex;
margin: auto;
}
.TOP-BANNER-SECTION {
padding: 0 0 1rem 0 !important;
.nav-pills {
padding: 1.5rem 1.5rem 0 1.5rem;
li {
margin-bottom: 1rem;
}
}
&.py-80 {
padding: 2rem 0 !important;
}
.left-text {
padding: 0 2rem !important;
.button-wrapper {
text-align: left;
}
}
.left-text-wrapper {
text-align: left;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
padding: 0;
}
p {
font-size: 1.125rem !important;
line-height: unset;
margin: 0;
}
}
}
.TOP-BANNER-SECTION .left-text {
text-align: center;
padding: 4rem 2rem;
p {
font-size: 1.5rem;
margin: 1.5rem 0 2rem 0;
}
}
.btn-start-project,
.btn-start-project {
padding: 1.5rem 2rem;
font-size: 1rem;
font-weight: 600;
}
.TOP-CAROUSEL-SECTION h5 {
font-size: 1.5rem !important;
}
.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION {
.row {
flex-direction: column-reverse;
.text-wrapper {
text-align: left !important;
padding-bottom: 0 !important;
}
.right-image-wrapper {
margin-bottom: 2rem;
}
}
}
.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION .row .left-text-wrapper .text-wrapper {
padding-top: 2rem;
padding-bottom: 1.5rem;
text-align: center;
p {
font-size: 1.125rem !important;
line-height: unset;
margin-bottom: 2rem;
}
h2 {
font-size: 2rem !important;
margin-bottom: 2rem !important;
line-height: unset !important;
}
}
.SERVICE {
&.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION {
padding-bottom: 0 !important;
.row {
margin-bottom: 2rem !important;
}
.title-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
margin-bottom: 0.5rem;
}
p {
font-size: 1.125rem !important;
}
}
.left-text-wrapper .text-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 1rem !important;
}
}
}
}
.WORKS-ON-WORK-SECTION {
margin-top: 0;
.main-wrapper {
padding: 0 12px;
margin-bottom: 2rem;
.top-title-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
line-height: unset;
}
p {
font-size: 1.125rem !important;
}
}
}
.inner-list-wrapper {
p {
font-size: 1.125rem !important;
}
}
}
.YOU-MAY-LIKE {
.main-wrapper {
padding-bottom: 0;
.top-title-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
line-height: unset;
}
p {
font-size: 1.125rem !important;
}
}
}
}
.PD-TOP-SECTION {
.title-wrapper {
padding-bottom: 0 !important;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem;
}
p {
font-size: 1.125rem !important;
}
}
}
.AFTER-BANNER-SECTION {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.PROJECT-CONCLUSION {
.percentage-box {
&:last-child {
.inner-wrapper {
p {
margin-bottom: 0;
}
}
}
}
}
.ONLY-TEXT-SECTION,
.PROJECT-CONCLUSION {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
font-size: 1.125rem !important;
}
.quote-text {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
line-height: unset;
}
}
}
.TECHNOLOGY-USED-SECTION {
.col-6 {
width: 100%;
}
}
.btn-start-project-white {
padding: 1rem 1.625rem;
font-size: 1.25rem;
font-weight: 600;
}
h2 {
font-size: 2.5rem !important;
}
p {
font-size: 1.5rem !important;
}
.HOME.WHAT-WE-DO-SECTION {
.col-lg-4 {
margin-bottom: 1.5rem;
pointer-events: none;
.card-wrapper {
h4 {
font-size: 2rem !important;
}
}
}
.top-title {
margin-bottom: 2rem;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
margin-bottom: 1rem;
}
p {
font-size: 1.125rem !important;
margin-bottom: 0;
}
}
}
.tags-wrapper ul li {
font-size: 1rem;
font-weight: 600;
padding: 0.5rem 1.25rem;
}
.HOME.NOT-LISTED-SECTION {
.contact {
font-size: 1.125rem;
}
.text-center {
h5 {
font-size: 2rem !important;
text-align: left;
}
p {
margin-top: 1rem;
margin-bottom: 1.5rem;
font-size: 1.125rem !important;
text-align: left;
}
.col-lg-3.col-md-3 {
display: flex;
justify-content: start;
}
}
}
.analysis-section {
.col-lg-7 {
// height: 18rem !important;
// width: fit-content;
// object-fit: contain;
// margin-top: -6rem;
img {
margin-bottom: 0;
width: auto;
height: auto;
margin-top: 0;
}
}
.right-content-wrapper {
a {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
margin-top: 12px;
}
}
}
.analysis-section.background-dark {
margin-top: 2.5rem;
.row {
flex-direction: column-reverse;
// .col-lg-7 {
// height: 25rem;
// }
.right-content-wrapper {
text-align: center;
padding-top: 3.75rem;
padding-bottom: 0;
p {
font-size: 1.125rem !important;
margin: 0;
}
h4 {
margin-bottom: 0;
font-size: 2rem !important;
}
}
}
}
.HOME.OUR-MOST-RECENT-WORKS {
.main-wrapper {
padding: 2rem 0;
.top-title-wrapper {
margin-bottom: 2rem;
h2 {
margin-top: 0.5rem;
margin-bottom: 1rem;
font-size: 2rem !important;
line-height: unset;
}
p {
font-size: 1.125rem !important;
}
}
}
.nav.nav-pills {
display: flex;
flex-wrap: nowrap;
overflow-y: scroll;
padding: 0;
border-top: none;
top: 70px;
background-color: $white;
li {
button {
font-size: 1rem;
white-space: nowrap;
padding: 1rem;
border-radius: 0;
&.active {
background-color: #f7f8fb !important;
}
}
margin-right: 0;
}
}
.recent-card-wrapper {
margin-bottom: 2rem !important;
.bottom-text {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.375rem !important;
margin-bottom: 0 !important;
}
p {
font-size: 0.875rem !important;
}
}
a {
img {
margin-bottom: 0;
}
.bottom-text {
background: #f7f8fb;
padding: 1.5rem 1rem 1rem 1rem;
.d-flex {
margin-bottom: 1rem;
}
ul {
flex-wrap: wrap;
li {
font-size: 1rem;
margin-bottom: 0.5rem;
}
}
}
}
}
.load-more-content {
margin-bottom: 2rem !important;
font-size: 1.125rem;
margin-bottom: 0 !important;
}
}
.ABOUT.TOP-CAROUSEL-SECTION {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.HOME.TOP-CAROUSEL-SECTION {
padding: 3.75rem 0;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
}
// .py-80 {
// padding-bottom: 5rem !important;
// padding-top: 5rem !important;
// }
.OUR-CUSTOMERS-SAY-SECTION {
.customer-feedback .feedback-wrapper {
height: 100% !important;
}
h2 {
font-size: 2rem !important;
margin-bottom: 1rem;
}
p {
font-size: 1.125rem !important;
margin: 0;
}
.customer-feedback .feedback-wrapper p {
max-height: unset;
overflow: unset;
line-height: unset;
}
}
.HOME.BLOG-SECTION {
.title-wrapper {
text-align: left !important;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.btn-start-project {
margin-top: 0;
}
}
.BLOG-SECTION .blog-carousel .item {
max-height: unset;
}
.blog-card-wrapper {
.blog-image-wrapper {
img {
margin-bottom: 0;
}
}
.text-wrapper {
padding: 2rem 1rem !important;
background: #f7f8fb;
p {
font-size: 1rem !important;
}
h6 {
margin-top: 1rem;
}
h6 ~ p {
font-size: 1.125rem !important;
}
}
}
.FAQS-SECTION {
.left-section {
margin-bottom: 1.5rem;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.accordion {
.accordion-header {
button {
font-size: 1.125rem !important;
line-height: unset;
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
&:not(.collapsed) {
background: #f7f8fb;
}
}
}
.accordion-body {
padding-top: 0;
padding-bottom: 1.5rem;
background-color: #f7f8fb;
p {
font-size: 1rem !important;
}
&.show {
background-color: #f7f8fb;
}
}
}
}
.BLOGDETAIL-LIST-ITEM-SECTION {
.blog-detail-content {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p,
li {
font-size: 1.125rem !important;
}
}
}
.BLOGDETAIL-TOP-TITLE-SECTION.background-dark {
padding: 0;
}
.BLOGLISTING-TOP-TITLE-SECTION {
padding: 0;
.title-wrapper {
padding-bottom: 0;
}
.paragraph {
p {
margin: 0;
font-size: 1.125rem !important;
}
}
}
.blog-card .text-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.875rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.CONTACT {
&.TOP-BANNER-SECTION {
.image-wrapper img {
height: 10rem;
width: 10rem;
margin-bottom: 2rem;
}
.left-text-wrapper {
margin-bottom: 2rem;
}
}
}
.CONTACT-FORM-SECTION {
.left-section {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
}
.PORTFOLIO-TOP-TITLE-SECTION {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem;
}
p {
font-size: 1.125rem !important;
}
}
.py-80,
.py-60,
.py-40,
.py-100 {
padding: 2rem 0 !important;
}
.request-hide-success-modal {
.left-section {
img {
height: 150px;
margin: auto;
display: flex;
margin-bottom: 1.25rem;
}
}
.fieldset-cf7mls {
.step-next {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 0.875rem !important;
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
}
.top-nav {
.nav-wrapper .nav-left .logo img {
width: auto;
height: 24px;
}
}
.navbar .toggler-icon {
svg {
height: 32px;
width: 32px;
}
}
.navbar-nav {
transform: translateX(100%);
background: $white;
transition: 0.3s ease-in-out;
}
.navbar-nav.show {
background: $white;
height: 110vh;
padding: 6rem 2rem;
.side-menu-close {
right: 4%;
}
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);
}
}
}
.HOME.TOP-BANNER-SECTION img {
height: auto;
width: 20rem;
object-fit: contain;
display: flex;
margin: auto;
}
.TOP-BANNER-SECTION {
padding: 0 0 1rem 0 !important;
.nav-pills {
padding: 1.5rem 1.5rem 0 1.5rem;
li {
margin-bottom: 1rem;
}
}
&.py-80 {
padding: 2rem 0 !important;
}
.left-text {
padding: 0 2rem !important;
.button-wrapper {
text-align: left;
}
}
.left-text-wrapper {
text-align: left;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
padding: 0;
}
p {
font-size: 1.125rem !important;
line-height: unset;
margin: 0;
}
}
}
.TOP-BANNER-SECTION .left-text {
text-align: center;
padding: 4rem 2rem;
p {
font-size: 1.5rem;
margin: 1.5rem 0 2rem 0;
}
}
.btn-start-project,
.btn-start-project {
padding: 1.5rem 2rem;
font-size: 1rem;
font-weight: 600;
}
.TOP-CAROUSEL-SECTION h5 {
font-size: 1.5rem !important;
}
.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION {
.row {
flex-direction: column-reverse;
.text-wrapper {
text-align: left !important;
padding-bottom: 0 !important;
}
.right-image-wrapper {
margin-bottom: 2rem;
}
}
}
.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION .row .left-text-wrapper .text-wrapper {
padding-top: 2rem;
padding-bottom: 1.5rem;
text-align: center;
p {
font-size: 1.125rem !important;
line-height: unset;
margin-bottom: 2rem;
}
h2 {
font-size: 2rem !important;
margin-bottom: 2rem !important;
line-height: unset !important;
}
}
.SERVICE {
&.HOMEPAGE-TOP-AFTER-CAROUSEL-SECTION {
padding-bottom: 0 !important;
.row {
margin-bottom: 2rem !important;
}
.title-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
margin-bottom: 0.5rem;
}
p {
font-size: 1.125rem !important;
}
}
.left-text-wrapper .text-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 1rem !important;
}
}
}
}
.WORKS-ON-WORK-SECTION {
margin-top: 0;
.main-wrapper {
padding: 0 12px;
margin-bottom: 2rem;
.top-title-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
line-height: unset;
}
p {
font-size: 1.125rem !important;
}
}
}
.inner-list-wrapper {
p {
font-size: 1.125rem !important;
}
}
}
.YOU-MAY-LIKE {
.main-wrapper {
padding-bottom: 0;
.top-title-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
line-height: unset;
}
p {
font-size: 1.125rem !important;
}
}
}
}
.PD-TOP-SECTION {
.title-wrapper {
padding-bottom: 0 !important;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem;
}
p {
font-size: 1.125rem !important;
}
}
}
.AFTER-BANNER-SECTION {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.PROJECT-CONCLUSION {
.percentage-box {
&:last-child {
.inner-wrapper {
p {
margin-bottom: 0;
}
}
}
}
}
.ONLY-TEXT-SECTION,
.PROJECT-CONCLUSION {
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
font-size: 1.125rem !important;
}
.quote-text {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
line-height: unset;
}
}
}
.TECHNOLOGY-USED-SECTION {
.col-6 {
width: 100%;
}
}
.btn-start-project-white {
padding: 1rem 1.625rem;
font-size: 1.25rem;
font-weight: 600;
}
h2 {
font-size: 2.5rem !important;
}
p {
font-size: 1.5rem !important;
}
.HOME.WHAT-WE-DO-SECTION {
.col-lg-4 {
margin-bottom: 1.5rem;
pointer-events: none;
.card-wrapper {
h4 {
font-size: 2rem !important;
}
}
}
.top-title {
margin-bottom: 2rem;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
margin-bottom: 1rem;
}
p {
font-size: 1.125rem !important;
margin-bottom: 0;
}
}
}
.tags-wrapper ul li {
font-size: 1rem;
font-weight: 600;
padding: 0.5rem 1.25rem;
}
.HOME.NOT-LISTED-SECTION {
.contact {
font-size: 1.125rem;
}
.text-center {
h5 {
font-size: 2rem !important;
text-align: left;
}
p {
margin-top: 1rem;
margin-bottom: 1.5rem;
font-size: 1.125rem !important;
text-align: left;
}
.col-lg-3.col-md-3 {
display: flex;
justify-content: start;
}
}
}
.analysis-section {
.col-lg-7 {
// height: 18rem !important;
// width: fit-content;
// object-fit: contain;
// margin-top: -6rem;
img {
margin-bottom: 0;
width: auto;
height: auto;
margin-top: 0;
}
}
.right-content-wrapper {
a {
display: flex;
align-items: center;
justify-content: center;
margin: auto;
margin-top: 12px;
}
}
}
.analysis-section.background-dark {
margin-top: 2.5rem;
.row {
flex-direction: column-reverse;
// .col-lg-7 {
// height: 25rem;
// }
.right-content-wrapper {
text-align: center;
padding-top: 3.75rem;
padding-bottom: 0;
p {
font-size: 1.125rem !important;
margin: 0;
}
h4 {
margin-bottom: 0;
font-size: 2rem !important;
}
}
}
}
.HOME.OUR-MOST-RECENT-WORKS {
.main-wrapper {
padding: 2rem 0;
.top-title-wrapper {
margin-bottom: 2rem;
h2 {
margin-top: 0.5rem;
margin-bottom: 1rem;
font-size: 2rem !important;
line-height: unset;
}
p {
font-size: 1.125rem !important;
}
}
}
.nav.nav-pills {
display: flex;
flex-wrap: nowrap;
overflow-y: scroll;
padding: 0;
border-top: none;
top: 70px;
background-color: $white;
li {
button {
font-size: 1rem;
white-space: nowrap;
padding: 1rem;
border-radius: 0;
&.active {
background-color: #f7f8fb !important;
}
}
margin-right: 0;
}
}
.recent-card-wrapper {
margin-bottom: 2rem !important;
.bottom-text {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.375rem !important;
margin-bottom: 0 !important;
}
p {
font-size: 0.875rem !important;
}
}
a {
img {
margin-bottom: 0;
}
.bottom-text {
background: #f7f8fb;
padding: 1.5rem 1rem 1rem 1rem;
.d-flex {
margin-bottom: 1rem;
}
ul {
flex-wrap: wrap;
li {
font-size: 1rem;
margin-bottom: 0.5rem;
}
}
}
}
}
.load-more-content {
margin-bottom: 2rem !important;
font-size: 1.125rem;
margin-bottom: 0 !important;
}
}
.ABOUT.TOP-CAROUSEL-SECTION {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.HOME.TOP-CAROUSEL-SECTION {
padding: 3.75rem 0;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
}
// .py-80 {
// padding-bottom: 5rem !important;
// padding-top: 5rem !important;
// }
.OUR-CUSTOMERS-SAY-SECTION {
.customer-feedback .feedback-wrapper {
height: 100% !important;
}
h2 {
font-size: 2rem !important;
margin-bottom: 1rem;
}
p {
font-size: 1.125rem !important;
margin: 0;
}
.customer-feedback .feedback-wrapper p {
max-height: unset;
overflow: unset;
line-height: unset;
}
}
.HOME.BLOG-SECTION {
.title-wrapper {
text-align: left !important;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.btn-start-project {
margin-top: 0;
}
}
.BLOG-SECTION .blog-carousel .item {
max-height: unset;
}
.blog-card-wrapper {
.blog-image-wrapper {
img {
margin-bottom: 0;
}
}
.text-wrapper {
padding: 2rem 1rem !important;
background: #f7f8fb;
p {
font-size: 1rem !important;
}
h6 {
margin-top: 1rem;
}
h6 ~ p {
font-size: 1.125rem !important;
}
}
}
.FAQS-SECTION {
.left-section {
margin-bottom: 1.5rem;
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.accordion {
.accordion-header {
button {
font-size: 1.125rem !important;
line-height: unset;
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
&:not(.collapsed) {
background: #f7f8fb;
}
}
}
.accordion-body {
padding-top: 0;
padding-bottom: 1.5rem;
background-color: #f7f8fb;
p {
font-size: 1rem !important;
}
&.show {
background-color: #f7f8fb;
}
}
}
}
.BLOGDETAIL-LIST-ITEM-SECTION {
.blog-detail-content {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p,
li {
font-size: 1.125rem !important;
}
}
}
.BLOGDETAIL-TOP-TITLE-SECTION.background-dark {
padding: 0;
}
.BLOGLISTING-TOP-TITLE-SECTION {
padding: 0;
.title-wrapper {
padding-bottom: 0;
}
.paragraph {
p {
margin: 0;
font-size: 1.125rem !important;
}
}
}
.blog-card .text-wrapper {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1.875rem !important;
}
p {
font-size: 1.125rem !important;
}
}
.CONTACT {
&.TOP-BANNER-SECTION {
.image-wrapper img {
height: 10rem;
width: 10rem;
margin-bottom: 2rem;
}
.left-text-wrapper {
margin-bottom: 2rem;
}
}
}
.CONTACT-FORM-SECTION {
.left-section {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem !important;
}
p {
font-size: 1.125rem !important;
}
}
}
.PORTFOLIO-TOP-TITLE-SECTION {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 2rem;
}
p {
font-size: 1.125rem !important;
}
}
}
@media (max-width: 991.98px) {
.TOP-CAROUSEL-SECTION .experience-card,
.TOP-CAROUSEL-SECTION .clients-served,
.TOP-CAROUSEL-SECTION .working-experts {
margin-bottom: 1rem;
}
.TOP-CAROUSEL-SECTION .experience-card,
.TOP-CAROUSEL-SECTION .clients-served,
.TOP-CAROUSEL-SECTION .working-experts {
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();
$whatsapp = get_field('whats_app_number', 'option');
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
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