/** Shopify CDN: Minification failed
Line 27:0 Comments in CSS use "/* ... */" instead of "//"
Line 317:0 Comments in CSS use "/* ... */" instead of "//"
Line 879:0 Comments in CSS use "/* ... */" instead of "//"
Line 879:29 Unterminated string token
Line 1022:0 Comments in CSS use "/* ... */" instead of "//"
Line 1168:0 Comments in CSS use "/* ... */" instead of "//"
Line 1247:0 Comments in CSS use "/* ... */" instead of "//"
Line 1295:0 Comments in CSS use "/* ... */" instead of "//"
Line 1383:0 Comments in CSS use "/* ... */" instead of "//"
Line 1502:0 Comments in CSS use "/* ... */" instead of "//"
... and 35 more hidden warnings
**/
/*// =============================================================================
// Ella Custom CSS - Customize The Style For Layout
// =============================================================================
// =============================================================================
//
// IMPORTANT DISCLAIMER
// Shopify is notifying shop owners about the need to convert scss files to css files.
// Please use only CSS to style the layout.
//
// =============================================================================*/
// About us css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap');
.column-aboutus-container {
display: flex;
}
.column-aboutus-container {
display: flex;
}
.first-testaboutus-section {
background-color: #a9a593;
}
.first-aboutus-section {
background-color: #a9a593;
max-width: 100%;
height: 500px;
border-radius: 0px 0% 50% 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.main-aboutus-heading {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 54px;
color: white;
margin: 0px;
}
.subheading-aboutus {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 36px;
color: white;
}
.heading-aboutus {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 36px;
color: white;
}
.small-heading-aboutus {
font-family: 'Nunito', sans-serif;
font-weight: 600;
font-size: 28px;
color: #000000;
}
.second-aboutus-section {
background-color: #ffffff;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.second-aboutus-section .heading-aboutus {
color: #000000;
font-weight: 600;
font-size: 40px;
}
.para-aboutus-section {
width: 35%;
font-size: 17px;
font-weight: 400;
text-align: justify !important;
line-height: 1.4;
}
@media screen and (max-width: 767px){
.para-aboutus-section {
width: 100%;
font-size: 17px;
font-weight: 400;
text-align: justify !important;
line-height: 1.4;
}
}
.aboutus-para {
color: #555a64;
}
.third-aboutus-section {
background-color: #ffffff;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 60%;
margin: 0 auto;
}
@media screen and (max-width: 767px){
.third-aboutus-section {
background-color: #ffffff;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width:95%;
margin: 0 auto;
}
}
.fourth-aboutus-container{
background-color: #ffffff;
padding: 30px 0px;
display: flex;
width: 55%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.fourth-column-aboutus-container{
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
margin-top: 20px;
margin-bottom: 40px;
height: 400px;
}
.column-aboutus {
flex-basis: 50%;
max-width: 50%;
border: 1px solid #e5e5e5;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 6px;
margin: 10px;
}
.fourth-column-aboutuss-container {
display: flex;
margin-bottom: 45px;
}
@media screen and (max-width: 767px){
.fourth-aboutus-container{
background-color: #ffffff;
padding: 30px;
display: flex;
width: 95%;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
}
.column-aboutus-container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
margin-top: 10px;
}
.reverse_col {
flex-direction: column-reverse !important;
}
.fourth-column-aboutuss-container {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
margin-top: 10px;
}
@media screen and (max-width: 767px){
.column-aboutus-container {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
margin-top: 10px;
}
}
}
@media screen and (max-width: 767px){
.column-aboutus {
flex-basis: 50%;
max-width: 100%;
border: 1px solid #e5e5e5;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
border-radius: 6px;
height: 240px;
}
}
.fourth-column-aboutus {
flex-basis: 50%;
max-width: 60%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
padding-right: 20px;
}
@media screen and (max-width: 767px){
.fourth-column-aboutus {
flex-basis: 100%;
max-width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
padding-right: 20px;
}
}
.column-heading-aboutus {
font-family: 'Nunito', sans-serif;
font-weight: 600;
font-size: 18px;
color: #000000;
margin-bottom: 10px;
text-align: left;
}
.column-text-aboutus {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 13px;
color: #555a64;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.fourth-column-text-aboutus {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 17px;
color: #555a64;
text-align: left;
display: inline; /* Add this line to make the text appear on the same line */
display: flex;
flex-direction: column;
justify-content: left;
align-items: left;
height: 100%;
}
.aboutus-image {
max-width:100%;
border-radius: 18px;
height: auto;
padding-bottom: 0px !important;
}
p.fourth-column-text-aboutus {
text-align: center !important;
}
//STO css
.sto-testfirst-section{
background: #88d0bd;
}
.sto-first-section{
background: #88d0bd;
display: flex;
justify-content: center;
align-items: center;
padding:30px;
height:400px;
}
.sto-second-section{
background: #88d0bd;
display: flex;
justify-content: center;
align-items: center;
}
.sto-first-section-content , .sto-second-section-content{
text-align: center;
color: white;
width:60%;
}
@media screen and (max-width: 767px){
.sto-first-section-content , .sto-second-section-content{
text-align: center;
color: white;
width:90%;
}
}
.main-sto-heading {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 54px;
color: white;
margin: 0px;
}
@media screen and (max-width: 767px){
.main-sto-heading {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 30px;
text-shadow: 1px 1px #000000;
color: white;
margin: 0px;
}
}
.sto-text{
font-size: 15px;
color:white;
line-height:1.5rem;
}
.third-sto-section {
background-color: #ffffff;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 75%;
margin: 0 auto;
padding-bottom: 50px;
}
.subscription-note{
font-size:26px;
line-height:50px;
color: black;
border-radius: 7px;
box-shadow: 5px 10px 18px #A9A9A9;
padding: 20px;
}
@media screen and (max-width: 767px){
.third-sto-section {
background-color: #ffffff;
padding: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 90%;
margin: 0 auto;
padding-bottom: 50px;
}
}
.small-heading-sto {
font-family: 'Nunito', sans-serif;
font-weight: 600;
font-size: 42px;
color: #000000;
}
@media screen and (max-width: 767px){
.small-heading-sto {
font-family: 'Nunito', sans-serif;
font-weight: 600;
font-size: 35px;
color: #000000;
margin-left: 10PX;
margin-right: 10px;
line-height: 3.6rem;
}
}
.column-sto-container {
display: flex;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
margin-top: 10px;
}
@media screen and (max-width: 767px){
.column-sto-container {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
margin-top: 10px;
}
}
.column-sto {
flex-basis: 50%;
max-width: 50%;
border: 1px solid #e5e5e5;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px 20px 20px 20px ;
border-radius: 6px;
height: 200px;
}
@media screen and (max-width: 767px){
.column-sto {
max-width:100%;
border: 1px solid #e5e5e5;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
padding: 20px 20px 20px 20px ;
border-radius: 6px;
height: 200px;
margin-bottom: 10px;
width: 100%;
height: 200px;
}
}
.column-heading-sto {
font-family: 'Nunito', sans-serif;
font-weight: 600;
font-size: 18px;
color: #000000;
margin-bottom: 23px;
text-align: left;
}
.column-text-sto {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8rem;
color: #7A7A7A;
text-align: left;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.step-number {
color: #000000; /* Set the desired color for "Step 1 -" */
}
.subscribe-text {
color: #009b72; /* Set the desired color for "Subscribe to FlowDesk" */
}
.sto-fourth-main-section{
background: #ffffff;
padding-bottom: 20px;
}
.sto-fourth-new-section {
display: flex;
background: #f7f9fc;
}
.sto-fourth-new-section-column {
flex: 1;
padding: 20px;
border: solid;
border-width : 0px 1px;
}
.sto-fourth-section-model-heading {
font-size: 20px;
margin-bottom: 10px;
text-align: center;
}
.column img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.sto-fourth-section-inner-section {
display: flex;
}
.sto-fourth-section-inner-column {
flex: inherit;
padding: 10px;
margin: 0 5px;
}
.sto-fourth-section-container {
display: flex;
justify-content: center;
align-items: flex-start;
width: 60%;
margin: 0 auto;
padding-top: 50px;
}
@media screen and (max-width: 767px){
.sto-fourth-section-container {
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 90%;
margin: 0 auto;
}
.sto-fourth-new-section{
flex-direction:column;
}
}
.sto-fourth-section-column {
flex-basis: 50%;
margin-right: 10px;
}
.sto-fourth-section-image {
max-width: 100%;
height: auto;
}
.sto-fourth-section-column-content {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
padding-bottom: 35px;
}
.sto-fourth-section-large-heading {
font-size: 19px;
color: #009b72;
margin: 0;
}
.sto-fourth-section-text {
font-size: 14px;
color: #808080;
margin: 0;
}
.sto-fourth-section-small-heading {
margin: 0;
}
.sto-fourth-section {
display: flex;
justify-content: center;
align-items: center;
padding-top: 30px;
}
@media screen and (max-width: 767px){
.sto-fourth-section {
padding-top: 0px;
display: flex;
justify-content: center;
align-items: center;
margin-top: -30px;
}
.subscription-note{
font-size:16px;
line-height:34px;
color: black;
border-radius: 7px;
box-shadow: 5px 10px 18px #A9A9A9;
padding: 20px;
}
}
.sto-fourth-section-button {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.fourth-section-sto-illustration{
background: #f7f9fc;
padding-bottom: 25px;
}
.conversion-matrix-button{
border-width:1px;
background-color: #009B72;
border-color:#009B72;
width:250px;
height:40px;
border-radius:32px;
color: white;
font-weight:700;
}
conversion-matrix-button:hover{
background-color: #c8eae1;
}
.sto-sixth-section {
background-color: #ffffff;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.sto-sixth-section-heading{
margin:0px;
padding-top:10px;
}
.sto-sixth-section-chat-now{
background-color:#009B72;
font-size:15px;
border-radius: 30px;
width:120px;
height:40px;
border: none;
color: white;
margin-top: 20px;
}
.sto-sixth-section-chat-now:hover{
background-color: #00805e;
}
.sto-sixth-section-image{
width:100px;
height:100px;
margin-bottom: 15px;
margin-top:20px;
}
.sto-sixth-section {
background-color: #ffffff;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.sto-sixth-section-wrapper {
max-width: 70%;
margin: auto;
}
.flowarm-sixth-section-wrapper {
max-width: 70%;
margin: auto;
}
.flowarm-faq-section{
background-color :#F1F1F1;
display: flex;
margin: 20px 0px 0px 0px;
}
.warranty-guidelines-section{
max-width: 60%;
margin: auto;
}
.warranty-guidelines-replacement-card-image{
max-width:90%;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 767px){
.warranty-guidelines-replacement-card-image{
max-width:95%;
margin-left: auto;
margin-right: auto;
}
}
.warranty-guidelines-content{
font-size: 16px;
font-weight: 400;
}
.warranty-guidelines-bullets{
font-size: 16px;
font-weight: 400;
color: #7a7a7a;
}
.sixth-section-Faq {
border: solid 1px;
border-color: #DAD6D6;
margin-bottom: 10px;
}
.accordion-title{
font-family: Nunito,sans-serif;
font-size: 18px;
font-weight: 600;
color: black;
}
@media screen and (max-width: 767px){
.accordion-title{
padding-right: 40px;
font-family: Nunito,sans-serif;
font-size: 15px;
}
}
.faq-second-section {
background-color: #ffffff;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.sixth-section-Accordion {
background-color: #ffffff;
color: #000000;
cursor: pointer;
width: 100%;
font-size: 14px;
padding: 20px;
border: none;
outline: none;
transition: 0.4s;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
}
.Accordion i {
font-size: 16px;
}
.active,
.Accordion:hover {
color: #009B72;
}
.sixth-section-panel p {
color: #000000;
line-height: 1.2rem;
font-size: 14px;
margin-left: 20px;
margin-right: 20px;
}
.sto-sixth-section-text{
color:#7a7a7a;
font-size:14px;
}
.sixth-section-small-heading-sto{
font-family: 'Nunito', sans-serif;
font-weight: 600;
font-size: 42px;
color: #2C3038;
text-align: center;
line-height: 43px;
margin-bottom: 1.2em;
margin-top: 1.2em;
}
@media screen and (max-width: 767px){
.sixth-section-small-heading-sto{
font-family: 'Nunito', sans-serif;
font-weight: 600;
font-size: 35px;
color: #2C3038;
text-align: center;
line-height: 43px;
margin-bottom: 1.2em;
margin-top: 1.2em;
}
}
.sto-note-heading{
margin: 0;
font-size: 2.2rem;
}
@media screen and (max-width: 767px){
.sto-note-heading{
margin: 0;
font-size: 1.6rem;
line-height: 25px;
}
}
//DISCLAIMERS AND TO DO'S CSS
.disclaimers-first-section {
background-color: #ffffff;
max-width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
.disclaimers-main-heading {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 30px;
color: #114E68;
margin: 0px;
text-align: center;
}
@media screen and (max-width: 767px){
.disclaimers-main-heading {
font-family: 'Nunito', sans-serif;
font-weight: none;
font-size: 34px;
line-height:3.6rem;
color: #114E68;
margin: 10px;
text-align:center;
}
}
.disclaimers-subheading {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 20px;
color: #114E68;
text-align: center;
}
.disclaimer-second-section, .disclaimer-third-section {
background-color: #ffffff;
width: 40%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto; /* Add this line */
}
@media screen and (max-width: 767px){
.disclaimer-second-section, .disclaimer-third-section {
background-color: #ffffff;
width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto; /* Add this line */
padding-right: 20px;
}
}
.para-section {
width: 100%;
font-size: 17px;
font-weight: 400;
text-align: justify !important;
line-height: 1.4;
justify-content: center;
}
ul .a {
list-style-position: inside;
}
.para-section li {
margin-bottom: 20px; /* Add space between each list item */
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width:100%;
}
.last-gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.last-gallery img{
width:300px;
height:400px;
}
.gallery img {
width:200px;
height:200px;
object-fit: cover;
margin: 10px;
padding-top: 20px;
transition: transform 0.3s ease;
}
@media screen and (max-width: 767px){
.gallery img {
width:300px;
height:300px;
object-fit: cover;
padding-top: 10px;
transition: transform 0.3s ease;
}
}
.last-section-img{
object-fit: cover;
margin: 10px;
padding-top: 20px;
transition: transform 0.3s ease;
}
@media screen and (max-width: 767px){
.last-section-img{
width:200px;
height:300px;
object-fit: cover;
padding-top: 10px;
transition: transform 0.3s ease;
}
}
.last-section-img:hover{
transform: scale(1.1);
}
.gallery img:hover {
transform: scale(1.1);
}
//FAQ css
.first-faq-section {
max-width: 50%;
margin: auto;
display:flex;
justify-content: center;
align-items: center;
text-align: center;
}
.faq-whatsapp{
width:80px;
height:100px;
margin-bottom: 15px;
margin-top:20px;
}
.warranty-faq-whatsapp{
width:80px;
height:100px;
margin-bottom: 15px;
margin-top:20px;
margin-left: 1rem;
}
.Faq {
border: solid 1px;
border-color: #DAD6D6;
margin-bottom: 10px;
}
.faq-second-section {
background-color: #ffffff;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.Accordion {
background-color: #ffffff;
color: #000000;
cursor: pointer;
width: 100%;
font-size: 14px;
padding: 20px;
border: none;
outline: none;
transition: 0.4s;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 500;
}
.Accordion i {
font-size: 16px;
}
.active,
.Accordion:hover {
color: #009B72;
}
.panel p {
color: #000000;
line-height: 1.8rem;
font-size: 14px;
margin-left: 20px;
margin-right: 20px;
}
.chat-now{
background-color:#009B72;
font-size:15px;
border-radius: 30px;
width:140px;
height:40px;
border: none;
color: white;
}
.faq-heading{
margin:0px;
padding-top:10px;
}
@media (max-width: 768px) {
.sto-sixth-section-wrapper,.warranty-guidelines-section,.flowarm-sixth-section-wrapper{
max-width:90%;
margin: auto;
}
.warranty-guidelines-content{
font-size:14px;
font-weight: 400;
}
.warranty-guidelines-bullets{
font-size:14px;
font-weight: 400;
margin-left: -20px;
}
.main-bullets ul{
left-margin:-20px;
}
.chat-now{
background-color:#009B72;
font-size:15px;
border-radius: 30px;
width:140px;
height:40px;
border: none;
color: white;
}
.faq-whatsapp{
width:60px;
height:80px;
margin-bottom: 15px;
margin-top:20px;
margin-left:
}
.warranty-faq-whatsapp{
width:60px;
height:80px;
margin-bottom: 15px;
margin-top:20px;
margin-left: 103px;
}
}
//Terms Of use CSS
.centered-section {
display: flex;
justify-content: center;
align-items: center;
padding: 100px;
}
@media (max-width: 767px) {
.centered-section {
display: flex;
justify-content: center;
align-items: center;
}
}
.terms-of-use-first-section {
width: 100%;
border: solid 1px;
border-color: #DAD6D6;
padding-left: 15px;
padding-right: 15px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
margin: 45px auto;
}
.privacy-policy-first-section {
width: 80%;
border: solid 1px;
border-color: #DAD6D6;
padding: 15px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
margin: 45px auto;
}
@media (max-width: 767px) {
.terms-of-use-first-section {
/* Add styling to the content div */
width:90%;
border: solid 1px;
border-color: #DAD6D6;
padding-left:15px;
padding-right: 15px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
}
.privacy-policy-first-section {
width:90%;
border: solid 1px;
border-color: #DAD6D6;
padding-left:15px;
padding-right: 15px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
}
}
.terms-of-use-first-section p {
font-size:11px;
color: #6E6E6E;
justify-content: center;
text-align: justify;
/* Add styling to the paragraph text */
}
.terms-of-use-heading{
color: #6E6E6E;
font-size: 18px;
font-weight:400;
}
.terms-of-use-subheading{
color: #6E6E6E;
font-size: 14px;
font-weight:600;
}
//Privacy Poilcy CSS
.privacy-policy-first-section {
/* Add styling to the content div */
width:60%;
border: solid 1px;
border-color: #DAD6D6;
padding-left:15px;
padding-right: 15px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
margin: 45px auto;
}
@media (max-width: 767px) {
.privacy-policy-first-section {
/* Add styling to the content div */
width:90%;
border: solid 1px;
border-color: #DAD6D6;
padding-left:15px;
padding-right: 15px;
box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
}
}
.privacy-policy-first-section p {
font-size:11px;
color: #6E6E6E;
justify-content: center;
text-align: justify;
/* Add styling to the paragraph text */
}
.privacy-policy-heading{
color: #6E6E6E;
font-size: 18px;
font-weight:400;
}
.privacy-policy-subheading{
color: #6E6E6E;
font-size: 14px;
font-weight:600;
}
// Return & Refund CSS
.return-refund-first-section {
background-color: #ffffff;
max-width: 100%;
justify-content: center;
align-items: center;
text-align: center;
}
.return-refund-main-heading {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 26px;
color: #114E68;
margin: 0px;
text-align: center;
}
.note-heading{
font-size:15px;
color: black;
}
@media (max-width:767px){
.return-refund-main-heading {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 20px;
color: #114E68;
margin: 0px;
text-align: center;
line-height: 36px;
margin-top: 15px;
}
}
.return-refund-second-section{
background-color: #ffffff;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: left;
text-align: left;
margin: 40px auto; /* Add this line */
}
.refund-clause-heading{
font-size:18px;
}
.note-heading{
font-size:15px;
color: black;
}
@media (max-width: 767px) {
.return-refund-second-section{
background-color: #ffffff;
width: 80%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 40px /* Add this line */
}
}
.para-section {
width: 100%;
font-size: 14px;
font-weight: 400;
text-align: justify !important;
line-height: 1.4;
justify-content: center;
color: #6E6E6E;
}
ul .a {
list-style-position: inside;
}
.para-section li {
margin-bottom: 20px; /* Add space between each list item */
}
//COntact Us CSS
.first-test-contactus-section{
background-color: #cccccc;
}
.first-contactus-section {
background-color: #cccccc;
max-width: 100%;
height: 200px;
border-radius: 0px 0% 50% 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.second-contactus-section {
background-color: #ffffff;
max-width: 100%;
border-radius: 0px 0% 50% 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top:105px;
padding-bottom:20px;
}
@media (max-width: 767px) {
.second-contactus-section {
background-color: #ffffff;
max-width: 100%;
border-radius: 0px 0% 50% 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin-top:150px;
}
}
.main-contactus-heading {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 54px;
color: white;
}
@media (max-width: 767px) {
.main-contactus-heading {
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 35px;
color: white;
}
}
.contactus-section-container {
background-color: #ffffff;
padding-top: 70px;
width: 30%;
margin: 0 auto;
display: flex;
justify-content: space-between;
text-align: center;
height: 150px;
}
@media (max-width: 767px) {
.contactus-section-container {
background-color: #ffffff;
padding-top: 30px;
width: 50%;
margin: 0 auto;
flex-direction: column;
justify-content: space-between;
text-align: center;
height: 150px;
}
}
.contactus-column {
flex-basis: 50%;
}
.contactus-heading {
font-family: 'Nunito', sans-serif;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
a{
text-decoration: none;
}
.information-text {
font-family: 'Nunito', sans-serif;
font-size: 14px;
color: #009B72;
}
.basic-info{
color: #605A5A;
font-size: 12px;
}
.chat-now{
background-color:#009B72;
font-size:15px;
border-radius: 30px;
width:140px;
height:40px;
border: none;
color: white;
}
//Benefits CSS
.benefit-first-section {
width: 60%;
margin: 0 auto;
text-align: center;
padding: 20px;
}
.benefit-inner-most-div {
padding: 20px;
margin-top: 20px;
text-align: left;
width:70%;
margin: auto;
}
@media (max-width: 767px) {
padding: 20px;
margin-top: 20px;
text-align: left;
width:100%;
margin: auto;
}
.benefit-centered-heading{
font-size: 40px;
font-weight: bold;
color: rgb(44, 48, 56);
text-align: center;
line-height: 4.8rem;
}
.benefit-image{
width:100%;
height:100%;
}
.benefit-text{
padding:0px 20%;
color: grey;
}
@media (max-width: 767px) {
.benefit-text{
padding:0px 0px;
text-align: justify;
}
}
.benefits-second-section {
width: 70%;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20%;
}
.benefits-column {
width: 25%;
float: left;
box-sizing: border-box;
padding: 20px;
text-align: center;
}
.benefits-heading {
font-size: 56px;
margin-bottom: 10px;
color: rgb(0, 155, 114);
font-family: 'Nunito', sans-serif;
}
.benefits-second-section-text{
font-size: 14px;
color: #555a64;
}
.benefits-third-inner-container {
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-between;
padding-bottom: 15px;
}
.benefits-third-container-column {
width: 30%;
text-align: center;
margin: 0pxv;
}
.benefits-third-container-img{
width: 50px;
height: auto;
margin: auto;
}
.heading-benefits-third-container{
font-size: 16px;
margin-bottom: 10px;
color: rgb(44, 48, 56);
}
.benefits-third-container{
padding:20px;
}
.benefits-fourth-section {
background: linear-gradient(100deg, #219871 40%, #146C66 76%);
display: flex;
justify-content: center;
align-items: center;
padding:30px;
}
.benefits-fourth-section-content {
text-align: center;
color: white;
width:80%;
}
.benefits-fourth-section-heading {
font-size: 42px;
font-weight: bold;
margin-bottom: 10px;
color: white;
}
.benefits-fourth-section-text {
font-size: 16px;
color: white;
}
.benefits-fourth-section-image{
width:200px;
height:200px;
display: inline;
margin: 0 auto;
}
//Home Page Css
.Subscribe-to-own {
background-color: #008d67;
border: none;
height: 40px;
width: 200px;
color: white;
align-items: center;
margin-top: 5px;
margin-bottom: 20px;
margin-left: 10px;
border-radius: 5px;
font-size: 14px;
}
.Subscribe-to-own:hover {
background-color: #008d67;
color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transform: scale(1.1);
}
.fd3-content {
background-color: #2a4239;
display: flex;
justify-content: center;
align-items: center;
}
.fd3 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 60%;
}
.fd3-heading {
font-family: "Nunito", Sans-serif;
color: #ffffff;
font-size: 4.7rem;
font-weight: 700px;
margin-block-end: 0;
margin-block-start: 0;
padding-top: 25px;
padding-bottom: 50px;
}
.fd3-description {
font-family: "Nunito", Sans-serif;
color: #ffffff;
font-size: 20px;
font-weight: 500px;
line-height: 38px;
text-align: center;
margin-top: -10px;
}
.main-section {
display: flex;
justify-content: center;
align-items: center;
height: 80px;
margin-top: 0px;
margin-bottom: 20px;
}
.button-div {
padding: 10px 20px;
margin: 0 0px;
background-color: #008d67;
color: white;
border: none;
cursor: pointer;
border-radius: 30px;
font-size: 17px;
height: 50px;
}
.button-div:hover {
background-color: #00664b;
color: #fff;
}
img {
width: 100%;
padding-bottom: 20px;
}
.folks-section {
background-color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
.folks {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.folks-heading {
font-family: "Nunito", Sans-serif;
color: #2C3038;
font-size: 4.7rem;
font-weight: 700px;
margin-block-end:0;
margin-block-start:0;
padding-top: 15px;
padding-bottom: 25px;
}
.reviews{
padding-bottom:25px;
}
.others-content{
background-color: #F1F1F1;
display: flex;
justify-content: center;
align-items: center;
}
.others {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 60%;
}
.others-heading {
font-family: "Nunito", Sans-serif;
color: #2C3038;
font-size: 4.7rem;
font-weight: 700px;
margin-block-end:0;
margin-block-start:0;
padding-top: 50px;
padding-bottom: 25px;
}
.others-description{
font-family: "Nunito", Sans-serif;
color: #5B5858;
font-size: 20px;
font-weight: 500px;
line-height:38px;
text-align: center;
margin-top: -10px;
}
hr {
height: 0px;
background-color: white;
width: 100%;
margin-bottom: 0px;
margin-top: -0px;
}
.flowdot-container {
display: flex;
}
.column {
flex: 1;
padding-top: 20px;
padding-left: 5%;
}
.flowdot-subheading{
font-family: "Nunito", Sans-serif;
color: #2C3038;
font-size: 3.0rem;
font-weight: 700px;
margin-block-end:0;
margin-block-start:0;
padding-top: 5px;
padding-bottom: 25px;
}
.flowdot-description{
font-family: "Nunito", Sans-serif;
color: #5B5858;
font-size: 24px;
font-weight: 500px;
line-height:38px;
margin-top: -10px;
}
.flowdot-image{
width:80%;
height:100%;
}
.flowdot-main-section{
margin-left: -10px;
}
.brochure-button{
padding: 10px 20px;
margin: 0 10px;
background-color: #ffffff;
color: #4FD1A1;
border: none;
cursor: pointer;
border-radius: 30px;
font-size: 20px;
height: 50px;
}
.brochure-button:hover {
background-color: #ffffff;
color: #00664b;
}
.dot-description{
font-family: "Nunito", Sans-serif;
color: #2C3038;
font-size: 24px;
font-weight: 600;
line-height:38px;
}
.before-last-section-home {
width: 50%;
margin: 0 auto; /* Center align horizontally */
text-align: center;
}
.before-last-section-home h1 {
margin: 0;
padding: 20px;
font-size: 4.8rem;
line-height: 1.2em;
letter-spacing:-0.02px;
font-weight:700px;
}
.before-last-section-home h3 {
margin: 0;
padding: 10px;
font-size: 2.75rem;
font-weight:700;
line-height:1.2em;
letter-spacing:-0.02px;
}
.content {
justify-content: center;
align-items: center;
text-align: center;
margin: 0 auto;
max-width: 100%;
padding: 10px;
background-color: #f9f9f9;
}
.home_product_heading {
color: #232323;
font-size: 50px;
margin-bottom: 10px;
margin-top: 140px; /* Adjusted margin-top */
}
.home_product_text {
color: #232323;
font-size: 16px;
line-height: 1.6;
margin-bottom: 20px; /* Increased margin to create more space */
}
.home_product_subheading {
font-size: 22px;
color: #339966;
font-weight: bold;
line-height: 23px;
margin-bottom: 20px; /* Increased margin to create more space */
}
.home_product_button {
padding: 15px 30px; /* Adjusted padding for more width */
color: #ffffff;
background-color: #008d67;
border: 2px solid #008d67; /* Added border for consistency */
text-decoration: none; /* Ensures no default underline */
border-radius: 5px;
margin-top: 20px; /* Adjusted margin-top */
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.home_product_button:hover {
background-color: #ffffff;
color: #008d67;
border-color: #ffffff;
}
.content img {
max-width: 100%;
height: auto;
margin-top: 20px;
}
/* Mobile responsiveness */
@media screen and (max-width: 767px) {
.fd3-heading {
font-size: 4.0rem;
margin-bottom: -15px;
}
.main-section {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
margin-top: 0px;
margin-bottom: 20px;
}
.fd3-description {
font-size: 16px;
line-height: 28px;
}
.folks-heading {
font-size: 2.5rem;
}
.others-heading {
font-size: 4.0rem;
text-align: center;
line-height: 55px;
margin-bottom:-15px;
}
.flowdot-subheading{
font-size: 3.0rem;
text-align: center;
}
.others-description {
font-size: 16px;
line-height: 28px;
}
.flowdot-description{
font-size: 16px;
line-height: 28px;
padding-top: 10px;
text-align: center;
justify-content: center;
}
.flowdot-subheading {
font-size: 2.5rem;
}
.benefits-third-container {
width: 100%;
float: left;
}
.benefits-second-section .benefits-column {
width: 100%;
padding: 0;
}
.benefits-third-inner-container{
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
margin-top: 10px;
}
.benefits-third-container-column {
width: 100%;
text-align: center;
}
.benefits-fourth-section-heading {
line-height: 48px;
}
.before-last-section-home {
width: 90%;
margin: 0 auto; /* Center align horizontally */
text-align: center;
}
.before-last-section-home h1 {
margin: 0;
padding: 10px;
font-size: 2.4rem;
line-height: 1.2em;
letter-spacing:-0.02px;
font-weight:700px;
}
.before-last-section-home h3 {
margin: 0;
padding: 10px;
font-size: 1.75rem;
font-weight:700;
line-height:1.2em;
letter-spacing:-0.02px;
}
}
@media screen and (max-width: 767px) {
.fd3 {
width: 90%;
}
}
@media screen and (max-width: 767px){
.others {
width: 90%;
}
}
@media screen and (max-width: 767px) {
.main-section {
flex-direction: column;
align-items: center;
margin-top: 0px;
margin-bottom: 10px;
}
.button-div {
margin-bottom: 10px;
}
}
@media screen and (max-width: 767px) {
.flowdot-container {
margin-top:-10px;
flex-direction: column;
align-items: center;
}
.column {
padding-left: 0;
}
.flowdot-image {
width: 100%;
max-width: 300px;
height: auto;
}
}
@media screen and (max-width: 767px) {
.flowdot-description {
font-size: 16px;
line-height: 28px;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.dot-description{
font-size: 1.8rem;
line-height: 28px;
font-weight:800;
text-align: center;
padding-bottom: 35px;
}
}
@media screen and (max-width: 767px) {
.flowdot-main-section{
flex-direction: column;
align-items: center;
margin-top: 40px;
margin-bottom: 40px;
}
.button-div {
margin-bottom:15px;
padding: 15px 20px;
background-color: #008d67;
color: white;
border: none;
cursor: pointer;
border-radius: 30px;
font-size: 14px;
height: 50px;
}
.brochure-button {
margin-top: 10px;
margin-bottom: 20px;
}
}
.last-section {
width: 80%;
margin: 0 auto;
display: flex;
padding-bottom:20px;
margin-top:15px;
}
.last-section-column{
flex: 1;
border-radius: 5px;
padding-right: 20px;
padding-left: 20px;
}
.last-section-column-2{
flex: 1;
border-radius: 5px;
padding-right: 20px;
padding-left:20px;
height: 250px;
}
.content {
border: 1px solid #F1F1F1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
padding: 20px;
display: flex;
border-radius:5px;
height:250px;
}
.image-column {
flex: 1;
padding-right: 20px;
justify-content: center;
align-items: center;
width: 40%;
margin: 30px;
}
.text-column {
flex: 4;
width: 70%;
padding-right:30px;
}
.text-column-free{
flex: 4;
width: 70%;
padding-right:30px;
height:162px;
}
text-column-2{
flex: 4;
width: 70%;
padding-right:30px;
height:300px;
}
.image-column img {
max-width: 90%;
height: auto;
}
h2 {
font-size: 28px;
font-weight: 700px;
margin-bottom: 10px;
}
p {
font-size: 16px;
color: #339966;
font-weight: 400px;
line-height: 23px;
}
.sto_paragraph {
font-size: 16px;
color: black;
font-weight: 400px;
line-height: 23px;
}
.products_tab_paragraph{
font-size: 16px;
color: #969696;
font-weight: 400px;
line-height: 23px;
}
.sto_faq_paragraph{
font-size: 16px;
color: #7A7A7A;
font-weight: 400px;
line-height: 23px;
}
.product_text
{
font-size: 16px;
color: #339966;
font-weight: 400px;
line-height: 23px;
}
.fd3-first-inner-text{
font-size: 20px;
color: Black;
font-weight: 400px;
line-height: 23px;
}
.last-section-image {
max-width: 100%;
}
@media (max-width: 767px) {
.last-section {
flex-direction: column;
width:100%;
padding-bottom: 0px;
}
.content{
width:100%;
}
.last-section-column,
.last-section-column-2 {
width: 100%;
margin-bottom:10px;
}
.image-column {
width: 100%;
margin: 0;
padding-bottom: 20px;
}
.image-column img{
margin-top: 20px;
}
.text-column,
.text-column-free,
.text-column-2 {
width: 100%;
padding-right: 0;
}
}
.shopify-buy__btn-wrapper{
margin-top: 10px;
}
/* SDC Page */
.first-section{
padding-bottom:20px;
}
.centered-section {
width: 100%;
max-width: 600px; /* Optional - limit the maximum width of the section */
margin: 0 auto; /* Center the section horizontally */
text-align: center; /* Center the content inside the section */
padding: 40px 20px 40px 20px;
background-color: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.first-inner-section{
width: 65%;
max-width: 650px; /* Optional - limit the maximum width of the section */
margin: 0 auto; /* Center the section horizontally */
text-align: center; /* Center the content inside the section */
padding: 10px;
background-color: #ffffff;
}
.first-section-heading,.third-column-heading {
font-size: 36px;
margin-bottom: 10px;
line-height:4.2rem;
text-align:center;
}
.first-section-text,.third-column-text {
font-size: 16px;
margin-bottom: 20px;
line-height:2.4rem;
color:grey;
text-align: center;
}
button {
padding: 10px 20px;
font-size: 14px;
background-color: #008d67;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
}
.Grey-break {
background-color: #f0f0f0;
height: 20px; /* Adjust the height as per your preference */
width:100%;
}
.third-section {
display: flex;
width: 100%;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
}
.third-column {
flex: 1;
padding: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.youtube-video {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio (height 56.25% of width) */
position: relative;
overflow: hidden;
}
.youtube-video iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.fifth-sdc-section{
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.fifth-sdc-section-1{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.sdc-column{
flex:1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fifth-sdc-section-text{
color:#666;
text-align: center;
font-size: 17px;
}
.sdc-pagebreak{
height:20px;
color:red;
}
.last-sdc-section,.last-monitorarm-section {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: center; /* Center the inner-container horizontally */
background-color: #F1F1F1;
}
.last-sdc-section-final{
width: 25%;
margin: 0 auto;
display: flex;
justify-content: center; /* Center the inner-container horizontally */
background-color: #F1F1F1;
}
.last-sdc-inner-container,.last-monitorarm-inner-container {
width: 80%;
display: flex;
justify-content: space-between;
background-color: #F1F1F1;
align-items: center; /* Center the columns vertically */
flex-wrap: wrap; /* Allow columns to wrap if there's not enough space */
}
.last-sdc-section-column,.last-monitorarm-section-column {
flex: 1;
padding: 20px;
background-color: white;
text-align: center;
border: solid;
border-width: 1px;
border-radius: 6px;
border-color:#f1f1f1;
margin: 20px;
height:230px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.last-sdc-section-column-final {
flex: 0 0 22%;
padding: 20px;
background-color: white;
text-align: center;
border: solid;
border-width: 1px;
border-radius: 6px;
border-color:#f1f1f1;
margin: 20px;
height:230px;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.last-section-sdc-image,.last-section-monitorarm-image {
width: 100px;
height: auto;
margin:auto;
}
.sdc-buynow {
padding: 10px 20px;
font-size: 14px;
background-color: #008d67;
color: #fff;
border: none;
border-radius: 20px;
cursor: pointer;
}
.sdc-seventh-section {
display: flex;
width:100%;
margin: 0 auto;
justify-content: center;
}
.sdc-seventh-section-column,.sdc-seventh-section-column-second{
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
}
.sdc-seventh-section-video-column {
flex: 1;
padding: 20px;
}
.sdc-seventh-section-column img {
max-width: 100%;
display: block;
}
.video-container {
position: relative;
overflow: hidden;
padding-top: 56.25%; /* 16:9 aspect ratio (height / width) */
padding-bottom:50px;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.seventh-section-heading{
font-size:34px;
text-align: center;
}
.seventh-section-text{
font-size: 16px;
text-align:center;
color: grey;
}
.fd3-main-icon-container{
background-color: #F1F1F1;
}
.sub-inner-icon-section {
width: 70%;
margin: 0 auto;
padding: 35px 20px 20px 20px;
background-color: #F1F1F1;
display: flex;
justify-content: space-between;
align-items: center;
}
.sub-inner-icon-column {
flex: 1;
text-align: center;
}
.sub-inner-icon-column:hover img{
animation: pulse 1s infinite; /* Apply the pulse animation on hover */
opacity: 0.7; /* Change opacity on hover */
}
.sub-inner-icon-column img {
width: 30%;
height: auto;
margin-left: 92px;
}
.icon-heading{
margin-top:-10px;
color:#737373;
}
.img:hover {
transform: scale(1.1);
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
@media screen and (max-width: 767px) {
.centered-section {
width: 100%;
max-width: none; /* Remove max-width restriction for mobile */
}
.first-inner-section {
width: 100%; /* Make the inner section full-width on mobile */
}
.first-section-heading,.third-column-heading,.seventh-section-heading {
font-size: 26px;
margin-bottom: 10px;
line-height:4.2rem;
text-align: center;
}
.fifth-sdc-section{
flex-direction:column;
}
.fifth-fdgo-even-section{
flex-direction:column;
}
.fifth-sdc-section-1{
flex-direction:column-reverse;
}
.sub-inner-icon-section {
width: 100%;
margin: 0 auto;
padding: 20px;
background-color: #F1F1F1;
display: flex;
justify-content: space-between;
align-items: center;
}
.sub-inner-icon-section {
flex-direction: column;
}
.sub-inner-icon-column {
width: 70%; /* Show two columns per row */
margin-bottom: 10px;
}
.sub-inner-icon-column img {
width: 30%;
height: auto;
margin-left: 80px;
}
.last-sdc-section-column,.last-monitorarm-section-column{
flex-basis:100%;
margin: 10px;
}
.last-sdc-section-column-final{
flex-basis:94%;
margin: 10px;
height: 210px;
}
.sdc-seventh-section{
flex-direction: column;
}
.last-sdc-inner-container,.last-monitorarm-inner-container {
width: 95%;
display: flex;
justify-content: space-between;
background-color: #F1F1F1;
align-items: center; /* Center the columns vertically */
flex-wrap: wrap; /* Allow columns to wrap if there's not enough space */
}
}
/* Monitor Arm Page */
.first-section-monitorarm {
display: flex;
justify-content: center;
align-items: center;
width: 100% ;
background-color:#F1F1F1;
margin: 0px 0px 20px 0px;
}
.first-section-monitorarm-column {
flex: 1;
padding: 20px;
margin-top: 15px;
}
.first-section-monitorarm-image {
display: block;
max-width: 100%;
height: auto;
}
.first-section-monitorarm-content {
text-align: center;
}
.first-section-monitorarm-heading {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
line-height: 4.8rem;
}
.Warranty-heading {
font-size: 48px;
font-weight: bold;
margin-bottom: 10px;
line-height: 4.8rem;
margin : 25px;
}
.first-section-monitorarm-text {
font-size: 21px;
margin-bottom: 20px;
color:#5B5858;
font-weight: 400;
text-align:center;
line-height:2.8rem;
margin-top: 0px;
}
.first-section-monitorarm-button {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: #5B5858;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.monitor-arm-break{
color:white;
border: none;
}
.monitorarm-centered-section {
width: 100%;
max-width: 750px; /* Optional - limit the maximum width of the section */
margin: 0 auto; /* Center the section horizontally */
text-align: center; /* Center the content inside the section */
padding: 40px 20px 40px 20px;
background-color: #F1F1F1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.monitorarm-first-inner-section{
width: 77%;
max-width: 650px; /* Optional - limit the maximum width of the section */
margin: 0 auto; /* Center the section horizontally */
text-align: center; /* Center the content inside the section */
padding: 10px;
background-color: #f1f1f1;
}
.second-section-monitorarm {
display: flex;
justify-content: center;
align-items: center;
width: 100% ;
background-color:#F1F1F1;
}
/*.third-imagesection-monitorarm {
flex-direction: column;
align-items: center;
padding: 20px;
display:block;
background-color:#F1F1F1;
margin:20px 0px;
}*/
.third-section-monitorarm{
flex-direction: column;
align-items: center;
padding: 20px;
display: none;
background-color:#F1F1F1;
}
.third-section-monitorarm-row {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
margin-bottom: 20px;
}
.third-section-monitorarm-column {
flex: 1;
padding: 10px;
text-align: center;
background-color:#F1F1F1;
}
.third-imagesection-monitorarm {
display: block;
max-width: 100%;
height: auto;
background-color:#F1F1F1;
margin: 0px 0px 20px 0px;
}
.fourth-imagesection-monitorarm {
display: block;
max-width: 100%;
height: auto;
background-color:#F1F1F1;
margin: 0px 0px 20px 0px;
}
.fifth-monitorarm-section{
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background-color:#f1f1f1;
margin: 0px 0px 20px 0px;
}
.sixth-monitorarm-section{
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background-color:#f1f1f1;
margin: 0px 0px 20px 0px;
}
.monitorarm-column{
flex:1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fifth-sdc-section-text,.fifth-monitorarm-section-text{
color:#666;
text-align: center;
font-size: 17px;
}
.sdc-pagebreak{
height:20px;
color:red;
}
hr.fd3new-pagebreak{
height : 20px;
color : #fDf9f3;
}
.fifth-monitorarm-section-heading{
font-size: 36px;
margin-bottom: 10px;
line-height:4.2rem;
text-align: center;
}
@media screen and (max-width: 767px) {
.third-imagesection-monitorarm{
display:NONE;
}
.third-section-monitorarm{
display:block;
margin: 0px 0px 20px 0px;
}
.first-section-monitorarm{
flex-direction:column-reverse;
}
.first-section-monitorarm-heading {
font-size: 26px;
margin-bottom: 10px;
line-height:3.6rem;
text-align: center;
}
.first-section-monitorarm-text {
font-size: 17px;
margin-bottom: 10px;
color:#5B5858;
font-weight: 400;
text-align:center;
line-height:2.4rem;
}
.monitorarm-first-inner-section{
width: 100%;
max-width: 900px; /* Optional - limit the maximum width of the section */
margin: 0 auto; /* Center the section horizontally */
text-align: center; /* Center the content inside the section */
padding: 5px;
background-color: #f1f1f1;
}
.fifth-monitorarm-section{
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background-color:#f1f1f1;
margin: 0px 0px 20px 0px;
flex-direction:column;
}
.sixth-monitorarm-section{
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background-color:#f1f1f1;
margin: 0px 0px 20px 0px;
flex-direction:column-reverse;
}
.fifth-monitorarm-section-heading{
font-size: 26px;
margin-bottom: 10px;
line-height:3.6rem;
text-align: center;
}
}
/*Fd3 Page*/
.fifth-section-fd3 {
display: flex;
justify-content: center;
align-items: center;
width: 100% ;
background-color:white;
}
.fifth-fd3-section{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
.fifth-fd3-oddsection{
width: 100%;
margin: 0px auto;
display: flex;
justify-content: space-between;
}
.fifth-fd3new-oddsection{
width: 100%;
margin: 0px auto;
display: flex;
justify-content: space-between;
height : 750px;
}
.flowdesk3-new-image{
border-radius : 20px;
margin : 0 px;
padding : 0px;
}
.flowdesk3-product-image{
border-radius : 20px;
margin : 0 px;
}
@media screen and (max-width: 768px) {
.flowdesk3-new-image{
border-radius : 20px;
margin : 0 px;
padding : 0px;
}
}
.fd3-column{
flex:1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tab-heading{
font-size:17px;
color:#2b4663;
text-align: center;
font-weight:500;
}
.sto-tab{
border: none;
}
.tab-subheading{
font-size:14px;
color:#6c7874;
text-align: center;
font-weight:500;
text-decoration: underline;
line-height:18px;
}
ul.tab-list{
font-size:13px;
}
p.tab-text{
font-size:13px;
}
.fifth-fd3-centered-section {
width: 100%;
max-width: 750px; /* Optional - limit the maximum width of the section */
margin: 0 auto; /* Center the section horizontally */
text-align: center; /* Center the content inside the section */
padding: 0px 0px 0px 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.fd3-pagebreak{
height:20px;
color:#F1F1F1;
margin : 0px;
}
.fD3-fourth-section-heading{
font-size: 36px;
margin-bottom: 10px;
line-height:4.2rem;
text-align:center;
}
.text-center{
font-size:32px;
margin-bottom:20px;
margin-top:20px;
}
.fd3-first-outer-div{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: white;
padding: 20px;
background-color : #ffffff;
}
.fd3-first-inner-div {
width: 50%;
text-align: center;
}
.fd3-green-first-inner-div {
width: 40%;
text-align: center;
}
.fd3-inner-heading {
font-size: 36px;
margin-bottom: 10px;
}
.fd3-green-inner-heading {
font-size: 36px;
margin-bottom: 10px;
line-height: normal;
}
.newfd3-green-inner-heading {
font-size: 36px;
margin-bottom: 10px;
line-height: normal;
margin-top : -20px;
margin-bottom : 10px;
}
.fd3-secondgreen-inner-heading{
font-size: 28px;
margin-bottom: 10px;
line-height: normal;
}
.fd3-subgreen-heading {
font-size: 16px;
color: #339966;
font-weight:700;
}
.fd3-inner-text {
font-size: 18px;
margin-bottom: 20px;
}
.fd3-green-heading {
font-size: 16px;
color: #339966;
font-weight:500;
}
.fdgo-green-heading {
font-size: 16px;
color: #339966;
font-weight:bold;
}
.fdgo-first-inner-heading{
font-size: 23px;
color: #2A4239;
font-weight:700;
}
.fd3-second-container {
width: 80%;
margin: 0 auto; /* Center align horizontally */
display: flex;
}
.fd3-second-column {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.fd3-column-heading-1 {
font-size: 24px;
margin-bottom: 10px;
transition: transform 0.10s; /* Add transition for smooth effect */
animation: slideInLeft 1s ease-in-out forwards; /* Apply animation */
opacity: 0; /* Start with opacity 0 */
}
.download_document{
border-radius:32px;
background-color:#008d67;
border-color:#008d67;
display:block;
width:25%;
font-size:20px;
color:#fff!important;
padding: 13px 15px;
min-width:130px;
max-width:100%;
}
.fd3-column-heading-2 {
font-size: 24px;
margin-bottom: 10px;
transition: transform 0.10s; /* Add transition for smooth effect */
animation: slideInRight 1s ease-in-out forwards; /* Apply animation */
opacity: 0; /* Start with opacity 0 */
}
.fd3-column-image-1 {
max-width: 70%;
height: auto;
transition: transform 0.10s; /* Add transition for smooth effect */
animation: slideInLeft 1s ease-in-out forwards; /* Apply animation */
opacity: 0; /* Start with opacity 0 */
margin:0px;
}
.fd3-column-image-2 {
max-width: 70%;
height: auto;
transition: transform 0.10s; /* Add transition for smooth effect */
animation: slideInRight 1s ease-in-out forwards; /* Apply animation */
opacity: 0; /* Start with opacity 0 */
margin:0px;
}
.column:hover .column-image {
transform: translateY(-5px); /* Add motion effect on hover */
}
@keyframes slideInLeft {
0% {
transform: translateX(-100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideInRight {
0% {
transform: translateX(100%);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.fd3-nested-main {
display: flex;
justify-content: center;
align-items: center;
width: 65%; /* Set width to 80% */
background-color: white;
padding: 20px;
margin: 0 auto; /* Center align horizontally */
}
.fd3-nested-outer-column {
flex: 1;
display: flex;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.fd3-nested-inner-column {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.fd3-nested-heading {
font-size: 18px;
margin-bottom: 10px;
font-weight:500;
}
.fd3-nested-button {
padding: 10px 20px;
background-color: #54595F;
color: #ffffff;
text-decoration: none;
border:none;
font-size: 16px;
margin-top: 10px;
border-radius: 32px;
}
.image-button-container-fd3 {
display: flex;
justify-content: center; /* Horizontally aligns the div */
align-items: center; /* Vertically aligns the div */
width: 100%; /* Full width of parent element */
margin: 0 auto; /* Center horizontally */
}
.image-button-column-fd3 {
flex: 1;
padding: 10px;
text-align: center;
display: flex;
flex-direction: column; /* Stack items vertically */
align-items: center;
}
.image-button-column-fd3 img {
max-width: 100%;
margin-bottom: 10px; /* Add some spacing between image and button */
}
@media screen and (max-width: 767px) {
.fD3-fourth-section-heading{
font-size: 26px;
margin-bottom: 10px;
line-height:4.2rem;
text-align: center;
}
.fifth-fd3-section{
flex-direction:column-reverse;
}
.image-button-container-fd3{
flex-direction:column;
}
.image-button-container-fdgo{
flex-direction:column;
}
.fifth-fd3-oddsection{
flex-direction:column-reverse;
}
.fifth-fd3new-oddsection{
flex-direction:column-reverse;
}
.fifth-fdgo-oddsection{
flex-direction:column-reverse;
}
.fd3-first-outer-div{
width:100%;
}
.fd3-first-inner-div{
width:100%;
}
.fd3-green-first-inner-div {
width: 100%;
}
.fd3-green-inner-heading {
font-size: 24px;
margin-bottom: 10px;
line-height: normal;
}
.newfd3-green-inner-heading {
font-size: 24px;
margin-bottom: 10px;
line-height: normal;
.fd3-secondgreen-inner-heading{
font-size: 16px;
margin-bottom: 10px;
line-height: normal;
}
.fd3-second-container{
flex-direction:column;
}
.fdgo-second-container{
flex-direction:column;
}
.fdgo-second-main-container{
flex-direction:column;
}
.sto-button{
margin-bottom:10px;
}
.fd3-column-image-1{
width:100%;
}
.fd3-column-image-2{
width:100%;
}
.nested-main {
width: 100%;
padding: 10px; /* Adjust padding for mobile */
}
.nested-inner-column {
padding: 10px; /* Adjust padding for mobile */
}
.nested-button {
font-size: 14px; /* Adjust font size for mobile */
}
}
}
.halo-ask-an-expert-banner{
display:none;
}
.placeholder-svg{
display:none;
}
/*Support Page*/
.Support-container {
display: flex;
justify-content: center;
}
.support-column {
flex: 0 0 48%; /* nearly half, with margin spacing */
display: flex;
flex-direction: column;
align-items: center;
margin: 10px 1%;
}
.support-product-image {
max-width: 80%;
height: 80%;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adding a shadow */
transition: transform 0.2s; /* Adding a transition for the animation */
margin-bottom:40px;
padding:0px;
}
.support-product-image:hover {
transform: scale(1.1); /* Apply the grow effect on hover */
}
.support-product-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #008D67;
color: white;
border: none;
cursor: pointer;
font-size:20px;
transition: transform 0.2s; /* Adding a transition for the button animation */
}
.support-product-button:hover {
transform: scale(0.9); /* Apply the shrink effect on hover */
}
@media screen and (max-width: 767px) {
.Support-container {
flex-direction: column;
margin-top: -4rem;
}
.support-product-image {
margin-top:30px;
}
}
/* Fd3-Support-Page */
.fd3-support-background-div {
width: 100%;
height: 300px; /* Set your desired height */
background-image: url('https://testflowlyf.in/wp-content/uploads/2023/02/009B72.png'); /* Replace with your image path */
background-color: #0D272F; /* Your desired background color */
background-position:bottom right; /* Center the background image */
background-size: auto; /* Set the width and height of the background image */
background-repeat: no-repeat; /* Prevent image repetition */
padding-top: 4em;
padding-bottom:11em;
border-radius: 0px 0px 40rem 40rem;
}
.background-section-fd3-supportpage{
width:100%;
height:600px;
background-color:#0D272f;
background-image: url('/cdn/shop/files/009B72.png?v=1692619758'); /* Replace with your image path */
background-position: bottom right;
background-repeat: no-repeat;
border-radius: 0rem 0rem 40rem 40rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction:column;
padding-top: 40px;
padding-bottom:40px;
}
.fd3-support-page-heading{
color:white;
text-align:center;
font-size:75px;
margin: 0px;
}
.fd3-support-page-subheading{
color:white;
text-align:center;
font-size:45px;
margin: 0 px;
}
.fd3-support-centered-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.fd3-support-button {
margin-top: 20px;
padding: 10px 20px;
background-color: #009B72;
color: white;
border: none;
cursor: pointer;
border-radius:32px;
}
.fd3-support-heading{
color: white;
font-size: 52px;
margin-bottom: 30px;
}
.fd3-support-subheading{
color: white;
font-size: 36px;
margin-bottom: 10px;
margin-top: 0px;
}
.new-float{
fill: white;
}
.new-float-icon{
width:120px;
height:120px;
fill:white;
margin-top:32px;
margin-bottom: 32px;
}
.fd3-support-page-section {
display: flex;
width:100%;
margin: 0 auto;
justify-content: center;
}
.support-chatnow-button{
color:white;
background-color:#008762;
font-size:18px;
margin-bottom: 15px;
}
.section-heading-support-page{
text-align:center;
font-size:65px;
color:black;
}
.supportpage-fd3-column {
width: 50%;
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.supportpage-fd3-video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio for responsive video */
height: 0;
overflow: hidden;
}
.supportpage-fd3-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.supportpage-fd3-heading {
font-size: 24px;
margin-top: 10px;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
.supportpage-fd3-button {
display: block;
margin: auto;
padding: 8px 15px;
background-color: #008762;
color: white;
border: none;
cursor: pointer;
align-items: center;
font-size: 20px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.image-section-support-page{
padding-left:40px;
padding-right:40px;
}
@media screen and (max-width: 767px) {
.section-heading-support-page{
text-align:center;
font-size:40px;
color:black;
}
.fd3-support-page-section {
flex-direction: column;
}
.supportpage-fd3-heading {
font-size: 20px;
margin-top: 10px;
text-align: center;
margin-top: 30px;
margin-bottom: 30px;
}
background-section-fd3-supportpage{
width:100%;
height:400px;
}
.fd3-support-page-heading{
color:white;
text-align:center;
font-size:45px;
margin: 0px;
}
.fd3-support-page-subheading{
color:white;
text-align:center;
font-size:30px;
margin: 15px;
}
.new-float-icon{
width:100px;
height: 100px;
}
.sdc-seventh-section-column-second{
display: none;
}
}
/*Fd-Go Support Page*/
.image-button-container-fdgo {
display: flex;
justify-content: center; /* Horizontally aligns the div */
align-items: center; /* Vertically aligns the div */
width: 100%; /* Full width of parent element */
margin: 0 auto; /* Center horizontally */
background-color:#f1f1f1;
}
.fdgo-pagebreak{
height:20px;
background-color:white;
}
.fdgo-engineered-wood-pagebreak{
height:20px;
background-color:#F1F1F1;
}
.size_guide_image{
margin-top: 4em;
}
.fdgo-engineered-wood-third-section {
width: 50%;
margin: 0px auto;
margin-top: -30px;
background-color: #f0f0f0;
text-align: center; /* Center align content inside .additional-content */
}
.fdgo-main-third-section{
background-color:#f1f1f1;
padding : 20px;
}
.fdgo-first-outer-div{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
background-color: white;
padding: 20px;
background-color:#f1f1f1;
}
.fdgo-second-container {
width: 80%;
margin: 0 auto; /* Center align horizontally */
display: flex;
background-color:#f1f1f1;
}
.fdgo-second-main-container{
background-color:#f1f1f1;
}
.fdgo-nested-main {
display: flex;
justify-content: center;
align-items: center;
width: 100%; /* Set width to 80% */
margin: -36px auto;
padding-bottom:33px;
}
.fifth-fdgo-oddsection{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background-color:#f1f1f1;
}
.fdgo-main-fifth{
background-color:#f1f1f1;
}
.fifth-section-fdgo {
display: flex;
justify-content: center;
align-items: center;
width: 100% ;
background-color:#F1F1F1;
}
.fifth-section-fdgo-engineered-wood {
display: flex;
justify-content: center;
align-items: center;
width: 100% ;
background-color:#FfFfFf;
}
.image-button-column-fdgo {
flex: 1;
padding-bottom: 10px;
text-align: center;
display: flex;
flex-direction: column; /* Stack items vertically */
align-items: center;
}
.image-button-column-fdgo img {
max-width: 90%;
margin-bottom: 0px; /* Add some spacing between image and button */
}
.fifth-fdgo-even-section{
width: 90%;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
@media screen and (min-width: 768px){
.fdgo-second-container{
display: none;
}
}
@media screen and (max-width: 767){
.fdgo-second-container{
display:block;
}
}
@media screen and (max-width: 767px){
.fdgo-engineered-wood-third-section {
width: 100%;
margin: 0px auto;
margin-top: -30px;
background-color: #f0f0f0;
text-align: center; /* Center align content inside .additional-content */
}
}
/* Hide the fdgo-third-container div in mobile view */
@media screen and (max-width: 767px) {
.fdgo-third-container {
display: none;
}
}
/* Display the fdgo-third-container div in desktop view */
@media screen and (min-width: 768px) {
.fdgo-third-container {
display: block;
}
}
/* Dual Wooden FlowArm*/
.dual-wooden-flowarm-image{
background-color: #f1f1f1;
}
hr.dual-wooden-flowarm-break {
height: 20px;
margin: 0;
background-color: white;
border: none; /* Optional: removes default border line of
*/
}
.first-section-dualmonitorarm {
display: flex;
justify-content: center;
align-items: center;
width: 100% ;
background-color:#F1F1F1;
margin: 0px 0px 0px 0px;
}
.fifth-dualmonitorarm-section{
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
background-color:#f1f1f1;
margin: 0px 0px 0px 0px;
}
@media screen and (max-width: 767px) {
.first-section-dualmonitorarm{
flex-direction:column-reverse;
}
.fifth-dualmonitorarm-section{
flex-direction:column;
}
}
/*FlowArm New*/
.first-section-monitorarmnew {
display: flex;
justify-content: center;
align-items: center;
width: 100% ;
background-color:#F1F1F1;
margin: 0px 0px 0px 0px;
}
@media screen and (max-width: 767px) {
.first-section-monitorarmnew{
flex-direction:column-reverse;
}
}
}
/*Home New */
.main-home-section {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
box-sizing: border-box;
flex-wrap: wrap; /* Ensures no overflow if items don’t fit */
background-color: #E8E8E8;
}
.product-section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background-color: #E8E8E8;
padding: 20px;
max-width: 100%;
width: 100%;
}
.product-heading-home{
font-size: 50px;
color: #232323;
margin: 0px;
}
.product-subtext-home{
color: #232323;
font-size: 16px;
margin-top: 10px;
}
.product-home-button {
display: inline-block;
background-color: #008D67;
width: 150px;
height: 50px;
font-size: 15px;
color: white;
text-align: center;
line-height: 50px;
text-decoration: none;
border-radius: 6px;
cursor: pointer;
}
.product-pricing-home{
color: #232323;
font-size: 13px;
}
.product-pricing-home-shipping{
color: #232323;
font-size: 13px;
margin-bottom: 20px;
}
.product-image-withbackground{
background-color: #E8E8E8;
width: 100%;
height: auto;
}
hr.custom-product-break {
height: 20px;
margin: 0;
background-color: white;
border: none; /* Optional: removes default border line of
*/
}
br.product-custom-break{
height: 20px;
margin: 0;
background-color: white;
border: none;
}
@media screen and (max-width: 767px) {
.main-home-section {
flex-direction: column;
padding: 0;
width: 100%;
}
.product-section {
margin-top: 20px;
padding: 15px;
}
.product-heading-home {
font-size: 30px;
line-height: normal;
}
.product-pricing-home{
color: #232323;
font-size: 13px;
margin-bottom: 0px;
margin-top: 20px;
}
hr.custom-product-break {
height: 0px;
margin: 0;
background-color: white;
border: none; /* Optional: removes default border line of
*/
}
br.product-custom-break{
height:0px;
margin: 0;
background-color: white;
border: none;
}
}
/*New css*/
.main-container {
display: flex; /* places children in a row */
width: 100%; /* full width */
box-sizing: border-box; /* include padding in width */
}
.left-box {
flex: 0 0 25%; /* fixed 40% width */
padding: 20px;
}
.right-box {
flex: 1; /* fixed 60% width */
padding: 20px;
}
.product-main-div {
display: flex;
flex-direction: column; /* stack heading and paragraph */
justify-content: center; /* vertical center */
align-items: center; /* horizontal center */
text-align: center; /* center-align text */
width: 60%; /* reduce width */
margin: 0 auto; /* center the div itself */
padding: 20px;
}
.product-first-heading{
font-size: 4.25rem;
line-height: 2.5rem;
font-weight: bold;
color: #111827;
line-height : 20px;
}
.sub-text-product{
margin-top: 30px; /* same as mt-4 */
font-size: 20px; /* same as text-lg */
line-height: 30px; /* for better readability */
color: #4B5563;
}
.filter_box{
width: 100%;
padding: 3.5rem; /* 16px */
border-radius: 0.5rem; /* 8px */
border: 1px solid #e5e7eb; /* Tailwind's gray-200 */
height: fit-content;
}
.filter_heading_product{
font-weight: bold; /* Bold */
font-size: 2.125rem; /* ~18px */
line-height: 1.75rem; /* Tailwind's default for text-lg */
margin-bottom: 2rem;
}
.label_filter_product{
display: block;
margin-bottom: 0.9rem; /* 8px */
font-size: 1.5rem; /* 14px */
line-height: 1.25rem;
}
.fiter_price{
border: 1px solid #e5e7eb; /* Tailwind's default border */
padding-left: 0.75rem; /* 12px */
padding-right: 0.75rem; /* 12px */
padding-top: 0.5rem; /* 8px */
padding-bottom: 0.5rem; /* 8px */
border-radius: 0.375rem; /* 6px */
width: 100%;
margin-bottom: 1rem;
}
button.filter_button {
width: 100%;
background-color: #000000;
color: #ffffff;
padding: 0.5rem 1rem; /* top/bottom 8px, left/right 16px */
border-radius: 0.375rem; /* 6px */
transition: background-color 0.2s ease-in-out;
font-size:18px;
margin-top : 15px;
}
.filter_button:hover {
background-color: #1f2937; /* Tailwind gray-800 */
}
.product_grid{
padding-left: 1rem; /* 16px */
padding-right: 1rem; /* 16px */
}
.product_collection_grid{
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 products per row */
gap: 24px; /* space between products */
}
.product-card{
background-color: #ffffff;
border-radius: 0.5rem; /* 8px */
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
border: 1px solid #e5e7eb; /* gray-200 */
display: flex;
flex-direction: column;
min-height: 320px;
}
.background_image_div{
height: 16rem; /* 256px */
background-color: #f3f4f6; /* light gray */
display: flex; /* enable flexbox */
align-items: center; /* vertical center */
justify-content: center; /* horizontal center */
}
.product_price{
color: #111827; /* text-gray-900: very dark gray, almost black */
font-weight: 700; /* font-bold: bold weight */
font-size: 1.5rem; /* text-2xl: 24px (assuming base font size = 16px) */
line-height: 2rem; /* default line-height for text-2xl */
margin-bottom: 0.25rem;
margin-left: 7px;
}
.product_price_subtext{
color: #6b7280; /* text-gray-500: medium gray */
font-size: 0.875rem; /* text-sm: 14px (assuming base 16px) */
line-height: 1.25rem; /* default line-height for text-sm */
margin-bottom: 1rem;
margin-left: 7px;
}
.product_add_to_cart_button{
width: 95%; /* w-full: full width of parent */
background-color: #000; /* bg-black: black background */
color: #fff; /* text-white: white text */
padding-top: 0.75rem; /* py-3: 12px top & bottom padding */
padding-bottom: 0.75rem;
border-radius: 0.375rem; /* rounded-md: 6px border radius */
font-weight: 600; /* font-semibold */
transition: background-color 0.2s ease-in-out; /* smooth hover */
display: block;
margin-left: 7px;
}
.product_add_to_cart_button:hover{
background-color: #1f2937;
}
.product_background_div{
height: 200px;
}
.product_background_image{
width: 100%; /* w-full: take full width of parent */
height: 70%; /* h-full: take full height of parent */
object-fit: cover;
}
/* New Product page */
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* HERO SECTION */
Hero Section