--color-black
#000
--color-white
#fff
--color-coastal-mint
#50E8CB
--color-tropic-current
#00C5CE
--color-executive-teal
#005063
--color-crystal-surf
#00C2CC
--color-crystal-surf-20-percent
rgba(0, 194, 204, 0.20);
--color-deep-tidal
#014C5F
--color-stone-linen
#ABA194
--color-graphite-bronze
#7E7263
--color-rose-clay
#E5D8CF
--color-rose-clay-20-percent
rgba(238, 230, 222, 0.20)
--color-neutral-drift
#d9d9d9
--color-ivory-bloom
#F2EDE8
--color-ivory-bloom-50-percent
rgba(242, 237, 232, 0.50)
--color-gradient-tropic-flow
linear-gradient(59deg, #50E8CB 8.82%, #00C2CC 81.74%)
GeorgeTown-Light-300 [ font-weight: 300; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
GeorgeTown-Regular-400 [ font-weight: 400; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
GeorgeTown-Regular-500 [ font-weight: 400; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Montserrat-SemiBold-600 [ font-weight: 600; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Montserrat-Bold-700 [ font-weight: 700; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Montserrat-ExtraBold-800 [ font-weight: 800; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Montserrat-Regular-400 [ font-weight: 400; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Montserrat-Regular-500 [ font-weight: 500; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Montserrat-Regular-600 [ font-weight: 600; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Montserrat-Medium-500 [ font-weight: 500; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Figtree-Light-400 [ font-weight: 400; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
Figtree-Medium-500 [ font-weight: 500; font-style: normal; font-size: 16px;]
The quick brown fox jumps over the lazy dog. 1234567890 !@#$%^&*() — “Quotes”, ‘Apostrophes’, and... Ellipses. Grumpy wizards make toxic brew for the evil queen and jack. Pack my box with five dozen liquor jugs.
<h1>
Innovate Boldly.
h1 {
font-size: 60px;
letter-spacing: 0px;
line-height: 60px;
font-family: GeorgeTown-Light-300;
text-transform: capitalize;
color: #005063; /* --color-executive-teal */
}
<h1 class="--color-white">
h1.--color-white {
color: #fff; /* --color-white */
}
<h2>
Transform Your Ideas into Reality
h2 {
font-size: 40px;
letter-spacing: 0px;
line-height: 46px;
font-family: GeorgeTown-Light-300;
text-transform: capitalize;
color: #014C5F; /* --color-deep-tidal */
}
<h2 class="--color-coastal-mint">
h2.--color-coastal-mint {
color: #50E8CB; /* --color-coastal-mint */
}
<h2 class="--color-crystal-surf">
h2.--color-crystal-surf {
color: #00C2CC; /* --color-crystal-surf */
}
<h2 class="opacity-0-4">
Transform Your Ideas into Reality
h2.opacity-0-4 {
font-size: 40px;
letter-spacing: 0px;
line-height: 46px;
font-family: GeorgeTown-Regular-400;
text-transform: capitalize;
color: #ABA194; /* --color-stone-linen */
}
<h2 class="bold-text">
Transform Your Ideas into Reality
h2.bold-text {
font-size: 45px;
letter-spacing: 0px;
line-height: 50px;
font-family: Montserrat-ExtraBold-800;
color: #fff; /* --color-white */
}
<h3>
Build Smarter, Faster, and Better
h3 {
font-size: 24px;
letter-spacing: 0px;
line-height: 35px;
font-family: Montserrat-Regular-600;
color: #014C5F; /* --color-deep-tidal */
}
<h4>
Tools Tailored for Every Developer
h4 {
font-size: 22px;
letter-spacing: 0px;
line-height: 32px;
font-family: GeorgeTown-Light-300;
color: #005063; /* --color-executive-teal */
}
<h4 class="--color-white">
h4.--color-white {
color: #fff; /* --color-white */
}
<h5>
Reliable Solutions Backed by Experience
h5 {
font-size: 20px;
letter-spacing: 0px;
line-height: 24px;
font-family: Montserrat-Bold-700;
color: #00C2CC; /* --color-crystal-surf */
}
<h5 class="--color-deep-tidal">
h5.--color-deep-tidal {
color: #014C5F; /* --color-deep-tidal */
}
<h5 class="--color-white">
h5.--color-white {
color: #fff; /* --color-white */
}
<h6>
Powered by Simplicity & Precision
h6 {
font-size: 16px;
letter-spacing: 0px;
line-height: 24px;
font-family: Montserrat-Regular-400;
color: #014C5F; /* --color-deep-tidal */
}
<h6 class="--color-stone-linen">
h6.--color-stone-linen {
color: #ABA194; /* --color-stone-linen */
}
<h6 class="--color-executive-teal">
h6.--color-executive-teal {
color: #005063; /* --color-executive-teal */
}
<h6 class="regular-text">
Powered by Simplicity & Precision
h6.regular-text {
font-size: 16px;
letter-spacing: 0px;
line-height: 0px;
font-family: GeorgeTown-Regular-500;
color: #014C5F; /* --color-deep-tidal */
}
<h6 class="bold-text">
Powered by Simplicity & Precision
h6.bold-text {
font-size: 16px;
letter-spacing: 0px;
line-height: 24px;
font-family: Montserrat-Bold-700;
color: #014C5F; /* --color-deep-tidal */
}
<h6 class="bold-text --color-stone-linen">
h6.bold-text.--color-stone-linen {
color: #ABA194; /* --color-stone-linen */
}
<h6 class="bold-text --color-white">
h6.bold-text.--color-white {
color: #fff; /* --color-white */
}
<table>
table td {
font-size: 16px;
letter-spacing: 0px;
line-height: 31px;
font-family: Montserrat-SemiBold-600;
color: #fff; /* --color-white */
}
<table>
table td:nth-child(2) {
font-size: 16px;
font-family: Montserrat-Regular-600;
letter-spacing: 0px;
line-height: 31px;
color: #fff; /* --color-white */
}
<p>
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p {
font-size: 16px;
letter-spacing: 0px;
line-height: 24px;
font-family: Figtree-Light-400;
color: #7E7263; /* --color-graphite-bronze */
}
<p class="--color-deep-tidal">
p.--color-deep-tidal {
color: #014C5F; /* --color-deep-tidal */
}
<p class="--color-white">
p.--color-white {
color: #fff; /* --color-white */
}
<p class="--color-executive-teal">
p.--color-executive-teal {
color: #005063; /* --color-executive-teal */
}
<p class="text-medium">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.text-medium {
font-size: 16px;
letter-spacing: 0px;
line-height: 24px;
font-family: Figtree-Medium-500;
color: #014C5F; /* --color-deep-tidal */
}
<p class="text-medium --color-stone-linen">
p.text-medium.--color-stone-linen {
color: #ABA194; /* --color-stone-linen */
}
<p class="text-medium --color-white">
p.text-medium.--color-white {
color: #fff; /* --color-white */
}
<p class="text-medium-montserrat">
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
p.text-medium-montserrat {
font-size: 16px;
letter-spacing: 0px;
line-height: 30px;
font-family: Montserrat-Medium-500;
color: #ABA194; /* --color-stone-linen */
}
<p class="text-medium-montserrat --color-white">
p.text-medium-montserrat.--color-white {
color: #fff; /* --color-white */
}
<a>
ButtonHTML
<a title="Button" href="#">
Button
</a>
a {
font-size: 16px;
letter-spacing: 0px;
line-height: 24px;
font-family: Montserrat-SemiBold-600;
text-align: center;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease, border 0.3s ease, background 0.3s ease, transform 0.3s ease;
position: relative;
border: none;
color: #fff; /* --color-white */
}
<a class="--color-deep-tidal">
a.--color-deep-tidal {
color: #014C5F; /* --color-deep-tidal */
}
<a class="--color-stone-linen">
a.--color-stone-linen {
color: #ABA194; /* --color-stone-linen */
}
<a class="--color-coastal-mint">
a.--color-coastal-mint {
color: #50E8CB; /* --color-coastal-mint */
}
<a class="regular-400">
ButtonHTML
<a class="regular-400" title="Button" href="#">
Button
</a>
a.regular-400 {
font-size: 16px;
letter-spacing: 0px;
line-height: 24px;
font-family: Montserrat-Regular-400;
text-align: center;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease, border 0.3s ease, background 0.3s ease, transform 0.3s ease;
position: relative;
border: none;
color: #fff; /* --color-white */
}
<a class="regular-400 --color-deep-tidal">
a.regular-400.--color-deep-tidal {
color: #014C5F; /* --color-deep-tidal */
}
<a class="regular-400 --color-stone-linen">
a.regular-400.--color-stone-linen {
color: #ABA194; /* --color-stone-linen */
}
<a class="regular-400 --color-coastal-mint">
a.regular-400.--color-coastal-mint {
color: #50E8CB; /* --color-coastal-mint */
}
<a class="regular-400-14px">
ButtonHTML
<a class="regular-400-14px" title="Button" href="#">
Button
</a>
a.regular-400-14px {
font-size: 14px;
letter-spacing: 0px;
line-height: 21.68px;
font-family: Montserrat-Regular-400;
text-align: center;
box-sizing: border-box;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: color 0.3s ease, border 0.3s ease, background 0.3s ease, transform 0.3s ease;
position: relative;
border: none;
color: #014C5F; /* --color-deep-tidal */
}
List Sets
@mixin website-list-default-list {
ul.data-tinymce-ul-ol-block, ol.data-tinymce-ul-ol-block {
font-size: 17px;
line-height: 26px;
letter-spacing: 0px;
font-family: Figtree-Medium-500;
color: #014C5F; /* --color-deep-tidal */
}
ul.data-tinymce-ul-ol-block {
list-style-type: none;
}
ul.data-tinymce-ul-ol-block li[data-tinymce-root-block] {
position: relative;
}
ul.data-tinymce-ul-ol-block li[data-tinymce-root-block]::before {
content: "•";
font-size: 17px;
color: #014C5F; /* --color-deep-tidal */
left: -15px;
top: -4px;
position: absolute;
}
ol.data-tinymce-ul-ol-block {
counter-reset: list-counter;
list-style-type: none;
}
ol.data-tinymce-ul-ol-block li[data-tinymce-root-block] {
counter-increment: list-counter;
position: relative;
}
ol.data-tinymce-ul-ol-block li[data-tinymce-root-block]::before {
content: counter(list-counter);
color: #014C5F; /* --color-deep-tidal */
font-size: 17px;
left: -15px;
top: 2px;
position: absolute;
}
ul.data-tinymce-ul-ol-block ul, ol.data-tinymce-ul-ol-block ol {
font-size: 17px;
line-height: 26px;
letter-spacing: 0px;
font-family: Figtree-Medium-500;
color: #014C5F; /* --color-deep-tidal */
}
}
<div class="animate-on-scroll">
HTML
<div class="animate-on-scroll" data-animate="fade-up" data-delay="0.0s"></div>
.animate-on-scroll {
opacity: 0;
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
transition-delay: 0s;
}
<div data-animate="fade-up">
[data-animate="fade-up"] {
transform: translateY(40px);
}
<div data-animate="fade-down">
[data-animate="fade-down"] {
transform: translateY(-20px);
}
<div data-animate="fade-left">
[data-animate="fade-left"] {
transform: translateX(-20px);
}
<div data-animate="fade-right">
[data-animate="fade-right"] {
transform: translateX(20px);
}
<div data-animate="zoom-in">
[data-animate="zoom-in"] {
transform: scale(0.8);
}
<div data-animate="zoom-out">
[data-animate="zoom-out"] {
transform: scale(1.2);
}
<div data-animate="rotate">
[data-animate="rotate"] {
transform: rotate(-5deg);
}
/* When element enters viewport */
<div class="animate-on-scroll in-view">
.animate-on-scroll.in-view {
opacity: 1;
transform: none;
}
@mixin website-containers {
<p data-tinymce-root-block="true">
p[data-tinymce-root-block="true"]:has(img) {
padding: 0px;
margin: 0px;
position: relative;
}
<p data-img-replace->
p[data-img-replace-]:has(img)::after {
content: "\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0Replace Image";
width: 100%;
height: auto;
color: black;
font-family: Montserrat-ExtraBold-800;
font-size: 22px;
position: absolute;
top: 50%;
left: 0;
background-color: rgba(255, 0, 89, 0.32);
pointer-events: none;
}
<div class="mw-row-1240">
.mw-row-1240 {
max-width: 1240px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
border: $border-width solid #8800ff !important;
/* XS - x-Small */
@media only screen and (max-width: 575.98px) {
padding-left: 10px;
padding-right: 10px;
}
}
<div class="mw-row-1390">
.mw-row-1390 {
max-width: 1390px;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
border: $border-width solid #8800ff;
/* XS - x-Small */
@media only screen and (max-width: 575.98px) {
padding-left: 10px;
padding-right: 10px;
}
}
<div class="pt100-pb50">
.pt100-pb50 {
padding-top: 100px;
padding-bottom: 50px;
}
<div class="pt100-pb100">
.pt100-pb100 {
padding-top: 100px;
padding-bottom: 100px;
}
<div class="pt0-pb50">
.pt0-pb50 {
padding-top: 0px;
padding-bottom: 50px;
}
<div class="pt50-pb0">
.pt50-pb0 {
padding-top: 50px;
padding-bottom: 0px;
}
<div class="pt50-pb50">
.pt50-pb50 {
padding-top: 50px;
padding-bottom: 50px;
}
<div class="pt50-pb100">
.pt50-pb100 {
padding-top: 50px;
padding-bottom: 100px;
}
<div class="pt100-pb0">
.pt100-pb0 {
padding-top: 100px;
padding-bottom: 0px;
}
<div class="pt0-pb100">
.pt0-pb100 {
padding-top: 0px;
padding-bottom: 100px;
}
<div class="p-maxw-730">
.p-maxw-730 {
p {
border: $border-width solid #00FFFF;
max-width: 730px;
}
}
<div class="txt-left-h3-p-ol-ul">
Build Smarter, Faster, and Better
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
- Have a clear project vision
- Have a clear project vision
- Have a clear project vision
- Have a clear project vision
Build Smarter, Faster, and Better
Build Smarter, Faster, and Better
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
HTML
<div class="txt-left-h3-p-ol-ul">
<h3></h3>
<p></p>
<ul class="data-tinymce-ul-ol-block">
<li data-tinymce-root-block="true"></li>
<li data-tinymce-root-block="true"></li>
<li data-tinymce-root-block="true"></li>
<li data-tinymce-root-block="true"></li>
</ul>
<h3></h3>
<h3 data-padding-left=""></h3>
<p data-padding-left=""></p>
</div>
.txt-left-h3-p-ol-ul {
h3, p {
margin: 0px;
padding: 0px;
}
h3 {
margin-top: 40px;
}
p {
margin-top: 10px;
}
ol, ul {
margin-top: 10px;
}
[data-padding-left] {
padding-left: 80px;
/* XS - x-Small to SM - Small */
@media only screen and (max-width: 767.98px) {
padding-left: 40px;
}
}
}
<div class="txt-center">
<div class="txt-left">
.txt-center, .txt-left {
h5, h2, p, a {
margin: 0px;
padding: 0px;
}
h2, ul, p {
margin-top: 30px;
}
p:not(:first-of-type) {
margin-top: 0;
}
}
<div class="txt-center">
Reliable Solutions Backed by Experience
Transform Your Ideas into Reality
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
HTML
<div class="txt-center">
<h5></h5>
<h2></h2>
<p></p>
</div>
.txt-center {
h5, h2, p {
text-align: center;
}
p {
margin-left: auto;
margin-right: auto;
width: 100%;
}
a, [data-tinymce-root-block]>a {
margin: 60px auto 0px auto !important;
}
}
<div class="txt-left">
Reliable Solutions Backed by Experience
Transform Your Ideas into Reality
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
HTML
<div class="txt-left">
<h5></h5>
<h2></h2>
<p></p>
</div>
.txt-left {
border: $border-width solid #ff0059;
h5, h2, p {
text-align: left;
}
>a, [data-tinymce-root-block]>a {
margin-right: auto !important;
margin-top: 60px;
}
}
<div class="mw-col-550-right-lg">
.mw-col-550-right-lg {
border: $border-width solid #00FFFF;
max-width: 550px;
width: 100%;
margin-left: auto;
/* XS - x-Small to MD - Medium */
@media only screen and (max-width: 991.98px) {
max-width: initial;
margin-right: initial;
}
}
<div class="mw-col-550-left-lg">
.mw-col-550-left-lg {
border: $border-width solid #00FFFF;
max-width: 550px;
width: 100%;
margin-right: auto;
/* XS - x-Small to MD - Medium */
@media only screen and (max-width: 991.98px) {
max-width: initial;
margin-right: initial;
}
}
<div class="mw-col-700-right-lg">
.mw-col-700-right-lg {
border: $border-width solid #00FFFF;
max-width: 700px;
width: 100%;
margin-left: auto;
/* XS - x-Small to MD - Medium */
@media only screen and (max-width: 991.98px) {
max-width: initial;
margin-right: initial;
}
}
<div class="mw-col-700-left-lg">
.mw-col-700-left-lg {
border: $border-width solid #00FFFF;
max-width: 700px;
width: 100%;
margin-right: auto;
/* XS - x-Small to MD - Medium */
@media only screen and (max-width: 991.98px) {
max-width: initial;
margin-right: initial;
}
}
<div class="mw-col-400-right-lg">
.mw-col-400-right-lg {
border: $border-width solid #00FFFF;
max-width: 400px;
width: 100%;
margin-left: auto;
/* XS - x-Small to MD - Medium */
@media only screen and (max-width: 991.98px) {
max-width: initial;
margin-right: initial;
}
}
<div class="mw-col-400-left-lg">
.mw-col-400-left-lg {
border: $border-width solid #00FFFF;
max-width: 400px;
width: 100%;
margin-right: auto;
/* XS - x-Small to MD - Medium */
@media only screen and (max-width: 991.98px) {
max-width: initial;
margin-right: initial;
}
}
<div class="img-br-30-3">
.img-br-30-3 {
img {
width: 100%;
height: auto;
border-radius: 30px 3px;
margin-bottom: 30px;
}
}
<div class="img-br-3-30">
.img-br-3-30 {
img {
width: 100%;
height: auto;
border-radius: 3px 30px;
margin-bottom: 30px;
}
}
<div class="img-center-before-after">
.img-center-before-after {
img {
display: block;
border-radius: 3px;
margin: 20px auto;
max-width: 98%;
}
}
<div class="img-accordion">
.img-accordion {
img {
display: block;
width: 50%;
height: auto;
border-radius: 30px 3px;
margin: 100px auto 30px;
/* XS - x-Small to SM - Small */
@media only screen and (max-width: 767.98px) {
width: 100%;
}
}
}
<a class="button-link-deep-tidal-hover-crystal-surf">
ButtonHTML
<a class="button-link-deep-tidal-hover-crystal-surf" title="Button" href="#">
Button
</a>
a.button-link-deep-tidal-hover-crystal-surf {
&:hover {
color: #00C2CC; /* --color-crystal-surf */
}
}
<a class="button-link-graphite-bronze-hover-crystal-surf">
ButtonHTML
<a class="button-link-graphite-bronze-hover-crystal-surf" title="Button" href="#">
Button
</a>
a.button-link-graphite-bronze-hover-crystal-surf {
background: transparent;
color: var(---color-graphite-bronze);
font-size: 16px;
letter-spacing: 0px;
line-height: 24px;
font-family: Figtree-Light-400;
&:hover {
color: #00C2CC; /* --color-crystal-surf */
}
}
<a class="button-solid-crystal-surf-hover-deep-tidal-radius-8">
ButtonHTML
<a class="button-solid-crystal-surf-hover-deep-tidal-radius-8" title="Button" href="#">
Button
</a>
a.button-solid-crystal-surf-hover-deep-tidal-radius-8 {
background: #00C2CC; /* --color-crystal-surf */
border-radius: var(--buttons-corner-small);
color: #fff; /* --color-white */
padding: var(--buttons-padding);
min-width: 150px;
&:hover {
background: #014C5F; /* --color-deep-tidal */
}
&:active {
transform: scale(0.97);
}
}
<a class="button-solid-crystal-surf-hover-deep-tidal-30">
ButtonHTML
<a class="button-solid-crystal-surf-hover-deep-tidal-30" title="Button" href="#">
Button
</a>
a.button-solid-crystal-surf-hover-deep-tidal-30 {
background: #00C2CC; /* --color-crystal-surf */
border-radius: var(--buttons-corner-large);
color: #fff; /* --color-white */
padding: var(--buttons-padding) !important;
min-width: 150px;
&:hover {
background: #014C5F; /* --color-deep-tidal */
}
&:active {
transform: scale(0.97);
}
}
<a class="button-solid-coastal-mint-hover-deep-tidal-30">
ButtonHTML
<a class="button-solid-coastal-mint-hover-deep-tidal-30" title="Button" href="#">
Button
</a>
a.button-solid-coastal-mint-hover-deep-tidal-30 {
background: #50E8CB; /* --color-coastal-mint */
border-radius: var(--buttons-corner-large);
color: #005063; /* --color-executive-teal */
padding: var(--buttons-padding);
min-width: 150px;
&:hover {
background: #014C5F; /* --color-deep-tidal */
color: #fff; /* --color-white */
}
&:active {
transform: scale(0.97);
}
}
<a class="button-solid-deep-tidal-hover-crystal-surf-20-radius-30">
ButtonHTML
<a class="button-solid-deep-tidal-hover-crystal-surf-20-radius-30" title="Button" href="#">
Button
</a>
a.button-solid-deep-tidal-hover-crystal-surf-20-radius-30 {
background: #014C5F; /* --color-deep-tidal */
border-radius: var(--buttons-corner-large);
padding: var(--buttons-padding);
min-width: 150px;
&:hover {
background: rgba(0, 194, 204, 0.20);;
}
&:active {
transform: scale(0.97);
}
}
<a class="button-solid-deep-tidal-hover-crystal-surf-radius-30">
ButtonHTML
<a class="button-solid-deep-tidal-hover-crystal-surf-radius-30" title="Button" href="#">
Button
</a>
a.button-solid-deep-tidal-hover-crystal-surf-radius-30 {
background: #014C5F; /* --color-deep-tidal */
border-radius: var(--buttons-corner-large);
padding: var(--buttons-padding);
min-width: 150px;
&:hover {
background: #00C2CC; /* --color-crystal-surf */
}
&:active {
transform: scale(0.97);
}
}
<a class="button-solid-stone-linen-hover-coastal-mint-radius-30">
ButtonHTML
<a class="button-solid-stone-linen-hover-coastal-mint-radius-30" title="Button" href="#">
Button
</a>
a.button-solid-stone-linen-hover-coastal-mint-radius-30 {
background: #ABA194; /* --color-stone-linen */
border-radius: var(--buttons-corner-large);
padding: 14px;
min-width: 192px;
&:hover {
background: #50E8CB; /* --color-coastal-mint */
}
&:active {
transform: scale(0.97);
}
}
<a class="button-solid-deep-tidal-hover-coastal-mint-radius-8">
ButtonHTML
<a class="button-solid-deep-tidal-hover-coastal-mint-radius-8" title="Button" href="#">
Button
</a>
a.button-solid-deep-tidal-hover-coastal-mint-radius-8 {
background: #014C5F; /* --color-deep-tidal */
border-radius: var(--buttons-corner-small);
padding: var(--buttons-padding);
min-width: 150px;
&:hover {
background: #50E8CB; /* --color-coastal-mint */
}
&:active {
transform: scale(0.97);
}
}
<a class="regular-400 button-ghost-deep-tidal-hover-coastal-mint-radius-8">
ButtonHTML
<a class="regular-400 button-ghost-deep-tidal-hover-coastal-mint-radius-8" title="Button" href="#">
Button
</a>
a.regular-400.button-ghost-deep-tidal-hover-coastal-mint-radius-8 {
background: transparent;
border-radius: var(--buttons-corner-small);
padding: 14px;
min-width: 150px;
border: #014C5F; /* --color-deep-tidal */
&:hover {
background: #50E8CB; /* --color-coastal-mint */
border: #50E8CB; /* --color-coastal-mint */
}
&:active {
transform: scale(0.97);
}
}
<a class="button-ghost-deep-tidal-hover-coastal-mint-radius-30">
<a class="button-ghost-coastal-mint-hover-coastal-mint-radius-30">
<a class="button-ghost-white-hover-coastal-mint-radius-30">
a.button-ghost-deep-tidal-hover-coastal-mint-radius-30, a.button-ghost-coastal-mint-hover-coastal-mint-radius-30, a.button-ghost-white-hover-coastal-mint-radius-30 {
background: transparent;
border-radius: var(--buttons-corner-large);
padding: var(--buttons-padding);
min-width: 150px;
&:hover {
background: #50E8CB; /* --color-coastal-mint */
border: #50E8CB; /* --color-coastal-mint */
}
&:active {
transform: scale(0.97);
}
}
<a class="button-ghost-deep-tidal-hover-coastal-mint-radius-30">
ButtonHTML
<a class="button-ghost-deep-tidal-hover-coastal-mint-radius-30" title="Button" href="#">
Button
</a>
a.button-ghost-deep-tidal-hover-coastal-mint-radius-30 {
border: #014C5F; /* --color-deep-tidal */
}
<a class="button-ghost-coastal-mint-hover-coastal-mint-radius-30">
ButtonHTML
<a class="button-ghost-coastal-mint-hover-coastal-mint-radius-30" title="Button" href="#">
Button
</a>
a.button-ghost-coastal-mint-hover-coastal-mint-radius-30 {
border: #50E8CB; /* --color-coastal-mint */
color: #50E8CB; /* --color-coastal-mint */
&:hover {
color: #fff; /* --color-white */
}
}
<a class="button-ghost-white-hover-coastal-mint-radius-30">
ButtonHTML
<a class="button-ghost-white-hover-coastal-mint-radius-30" title="Button" href="#">
Button
</a>
a.button-ghost-white-hover-coastal-mint-radius-30 {
border: #fff; /* --color-white */
}
<div class="background-shade-one">
.background-shade-one {
background: rgba(238, 230, 222, 0.2);
}
<div class="background-shade-two">
.background-shade-two {
background: #014C5F; /* --color-deep-tidal */
}
<div class="background-gradient-one">
Reliable Solutions Backed by Experience
Transform Your Ideas into Reality
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
.background-gradient-one {
background: linear-gradient(59deg, #50E8CB 8.82%, #00C2CC 81.74%); /* --color-gradient-tropic-flow */
}
<div class="cards-one">
Build Smarter, Faster, and Better
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
ButtonHTML
<div class="cards-one">
<span>
<img src="" alt="">
</span>
<h3></h3>
<p></p>
<span>
<a class="button-solid-crystal-surf-hover-deep-tidal-30" title="Button" href="#">
Button
</a>
</span>
</div>
.cards-one {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: #fff; /* --color-white */
margin-top: 25px;
padding-bottom: 35px;
border-radius: 3px;
transition: border 0.5s ease, transform 0.5s ease-in-out, box-shadow 0.3s ease-in-out;
border: 1px dashed transparent;
&:hover {
border: #00C2CC; /* --color-crystal-surf */
box-shadow: 0px 0px 30px var(--drop-shadow--box-shadow-one);
transform: scale(1.01);
> :nth-child(1) {
img {
transform: scale(1.1);
}
}
}
> :nth-child(1) {
/*Image */
align-self: stretch;
flex-shrink: 0;
position: relative;
display: block;
width: 100%;
overflow: hidden;
img {
background-position: center;
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
}
> :nth-child(2) {
/* <h3> - "Heading" */
text-align: center;
height: initial;
text-align: center;
align-self: stretch;
padding: 5px 35px 0px;
}
> :nth-child(3) {
/* Second <p> - "MainText" */
height: initial;
text-align: center;
align-self: stretch;
padding: 0 35px;
}
> :nth-child(4) {
/* Third <p> - "More..." */
padding: 0 35px;
}
> :nth-child(5) {
/* Fourth <p> with <a> button */
padding: 0 35px;
}
/* MD - Medium */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
> :nth-child(2) {
/* <h3> - "Heading" */
height: 144px;
}
> :nth-child(3) {
/* Second <p> - "Whether you need..." */
height: 195px;
}
}
/* MQ - Large */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
> :nth-child(2) {
/* <h3> - "Heading" */
height: 74px;
}
> :nth-child(3) {
/* Second <p> - "Whether you need..." */
height: 125px;
}
}
/* MQ - Extra large */
@media only screen and (min-width: 1200px) {
> :nth-child(2) {
/* <h3> - "Heading" */
height: 74px;
}
> :nth-child(3) {
/* Second <p> - "Whether you need..." */
height: 100px;
}
}
}
<div class="cards-two">
Build Smarter, Faster, and Better
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
HTML
<div class="cards-two">
<h3></h3>
<p></p>
<span>
<img src="/neal_cms/userfiles/custom_apps/system/scss/images/stars.webp" alt="">
</span>
</div>
.cards-two {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: #fff; /* --color-white */
box-shadow: 4px 4px 64px 0px #EEE6DE;
border-radius: 24px;
margin-top: 25px;
padding: 24px;
/* MQ - Large */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
> :nth-child(2) {
height: initial;
}
}
/* MQ - Extra large */
@media only screen and (min-width: 1200px) {
> :nth-child(2) {
height: 270px;
}
}
}
<div class="cards-three">
Reliable Solutions Backed by Experience
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
HTML
<div class="cards-three">
<h5></h5>
<p></p>
</div>
.cards-three {
border-radius: 30px;
display: flex;
flex-direction: column;
gap: 10px;
padding: 35px;
position: relative;
height: 252px;
background-color: #fff; /* --color-white */
will-change: transform, opacity;
transition: opacity 1s ease-in-out, transform 1s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
h5 {
height: 75px;
}
h5, p {
margin: 0px;
padding: 0px;
transition: color 0.3s ease-in-out;
}
&:hover {
background: #00C2CC; /* --color-crystal-surf */
box-shadow: 0px 0px 30px var(--drop-shadow--box-shadow-one);
h5, p {
color: #fff; /* --color-white */
}
}
/* MQ - Medium */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
height: initial;
h5 {
height: initial;
}
}
}
<div class="cards-four">
Powered by Simplicity & Precision
Build Smarter, Faster, and Better
Our platform empowers you to design, develop, and deploy with unmatched precision. Whether you're building a personal project or a professional solution, our tools adapt to your workflow.
More...HTML
<div class="cards-four">
<span class="image-wrapper">
<img src="/neal_cms/userfiles/custom_apps/system/scss/images/heart.png" alt="">
</span>
<h6 class="bold-text"></h6>
<h3></h3>
<p></p>
<a class="regular-400 button-ghost-deep-tidal-hover-coastal-mint-radius-8 --color-deep-tidal" title="More" href="#">
More...
</a>
</div>
.cards-four {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
margin-top: 25px;
a {
display: inline-block !important;
width: auto !important;
max-width: max-content;
}
h3 {
height: initial;
align-self: stretch;
}
p {
height: initial;
align-self: stretch;
}
.image-wrapper {
display: flex;
flex-direction: column;
width: 100%;
gap: 25px;
margin-bottom: 25px;
img {
background-size: cover;
background-repeat: no-repeat;
border-radius: 3px;
max-width: 100px;
}
}
/* MQ - Medium */
@media only screen and (min-width: 768px) and (max-width: 991.98px) {
.image-wrapper {
flex-direction: row;
}
}
/* MQ - Large */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
p {
height: 195px;
}
}
/* MQ - Extra large */
@media only screen and (min-width: 1200px) {
h3 {
height: 75px;
}
p {
height: 175px;
}
}
}
}
Ready to Get Started?
Make An Appointment Today!
Your new smile begins with a simple step. Book your appointment online or give us a call. We're here to make it easy, comfortable, and tailored just for you.
Follow Us On Socials
