body{
margin: 0;
font-family: var(--font1) !important;
color: var(--primary);
background: var(--primary-light);
font-size: 16px;
line-height: 140%;
overflow-x: hidden;
}
:root{
--primary:#003120;
--secondary:#50B056;
--text:#353535;
--light:#F7F5D8;
--primary-light: #FFFEED;
--dark:#000000;
--white:#ffff;
--font1: "DynaPuff", system-ui !important;
--font2: "Montserrat", sans-serif !important;
}
a {
color: var(--primary);
font-family: var(--font2);
text-decoration: none !important;
transition: all 0.4s;
}
a:hover {
color: var(--secondary);
text-decoration: none;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
p {
font-family: var(--font2) !important;
font-size: 16px;
font-weight: 400;
line-height: 150%;
}
h1,h2,h3,h4,h5,h6{
font-family: var(--font1);
}
p:last-child {
margin-bottom: 0;
}
::selection {
color: var(--white);
background: var(--primary);
}
img {
max-width: 100%;
width: auto;
height: auto;
z-index: 1;
}
html .container {
width: 1370px;
max-width: 100%;
padding: 0 25px;
}
section {
padding-top: 100px;
padding-bottom: 100px;
position: relative;
}
.title h3{
font-size: 90px;
font-weight: 600;
}
.loader-wrap {
position: fixed;
height: 100vh;
width: 100vw;
left: 0;
top: 0;
z-index: 99999999999999;
transition: all 1.5s;
animation-delay: 3s;
}
.loaded .loader-wrap {
visibility: hidden;
}
html .btn{
background: var(--primary-light);
border-radius: 70px;
padding: 0 40px;
line-height: 56px;
border: 1px solid var(--primary);
box-shadow: 0px 6px 0px 0px #003120;
color: var(--primary);
font-size: 18px;
font-weight: 600;
display: inline-flex;
gap: 15px;
align-items: center;
transition: all 0.4s;
text-transform: uppercase;
font-family: var(--font2);
overflow: hidden;
}
html .btn:hover {
box-shadow: 0px 3px 0px 0px #003120;
transform: translateY(3px);
}
html .btn:active{
box-shadow: 0px 0 0px 0px #003120;
transform: translateY(6px);
}
html .btn:focus {
box-shadow: 0px 0px 0px 0px #003120;
}
.bg-light{
background-color: var(--light) !important;
}
/* Header css */
.header-main-bar {
display: flex;
justify-content: space-between;
}
.sticky .header-main-bar {
align-items: center;
}
header {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 99;
transition: all 0.4s;
padding: 17px 0 0;
}
.navbar-toggle {
display: none;
}
.sticky header {
box-shadow: 0 6px 15px 0 rgb(0 0 0 / 4%);
background-color: #FFF;
padding: 14px 0;
}
.sticky header nav > ul > li:hover > a {
color: var(--primary);
}
.header-logo a {
display: block;
width: 125px;
margin: 0 auto;
}
.sticky .header-logo a {
width: 110px;
}
.header-logo img {
display: block;
}
header nav > ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
header nav > ul > li + li {
margin-left: 30px;
position: relative;
}
header nav > ul li > a{
color: var(--primary-light) !important;
font-weight: 600;
font-size: 16px;
display: inline-flex;
align-items: center;
line-height: normal;
padding: 4px 0 9px;
position: relative;
transition: all 0.5s;
text-transform: uppercase;
}
.sticky header nav > ul li > a {
color: var(--primary) !important;
}
.sticky header nav > ul li > a:before {
background-image: url('data:image/svg+xml,');
}
header nav > ul > li:hover > a {
color: var(--secondary);
}
header nav > ul > li > a:before {
content: "";
display: block;
width: 100%;
height: 4px;
border-radius: 50px;
background-image: url('data:image/svg+xml,');
background-position: left center;
background-repeat: repeat-x;
background-size: 9px 4px;
position: absolute;
left: 0;
bottom: 0;
opacity: 0;
transition: all 0.4s;
}
header nav > ul > li:hover > a:before,
header nav > ul > li.active > a:before {
opacity: 1;
}
.header-navbar > ul > li.dropdown .sub-menu-toggle:after{
content: "";
display: inline-block;
height: 8px;
background-color: transparent;
width: 8px;
border-bottom: 2px solid var(--dark);
border-right: 2px solid var(--dark);
transform: rotate(45deg);
margin-bottom: 3px;
}
.header-navbar > ul > li.dropdown ul.sub-menu {
display: block;
background-color: var(--white);
box-shadow: 2px 2px 10px 0px rgb(100 100 100 / 10%);
padding: 8px !important;
border-radius: 6px;
position: absolute;
top: 105%;
left: 0;
min-width: 260px;
visibility: hidden;
opacity: 0;
transition: all 0.4s;
list-style: none;
}
.header-navbar > ul > li.dropdown .sub-menu .sub-menu {
left: 100%;
top: 0;
}
.header-navbar > ul > li.dropdown > .sub-menu-toggle {
display: flex;
height: 25px;
width: 25px;
align-items: center;
justify-content: center;
margin-left: 4px;
cursor: pointer;
display: none;
transition: all 0.2s;
}
header nav > ul > li > a > svg {
width: 10px;
height: auto;
margin-left: 8px;
transition: transform 0.4s;
}
.header-navbar > ul > li:hover.dropdown > a svg {
transform: rotate(180deg);
}
.header-navbar > ul li.dropdown ul.sub-menu li > a {
font-size: 13px;
display: block;
padding: 6px 10px;
border-radius: 6px;
color: var(--dark) !important;
line-height: 20px;
font-weight: 500;
text-transform: capitalize;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2px;
}
.header-navbar > ul li.dropdown ul.sub-menu li > a svg {
transform: rotate(-90deg);
}
.header-navbar > ul > li.dropdown > ul.sub-menu li.dropdown:hover > a svg {
transform: rotate(-90deg);
}
.header-navbar > ul > li.dropdown > ul.sub-menu li {
margin-bottom: 3px;
}
.header-navbar ul li.dropdown > ul.sub-menu > li:last-child {
margin-bottom: 0;
}
.header-navbar > ul > li.dropdown:hover > ul.sub-menu,
.header-navbar > ul > li.dropdown > ul.sub-menu li.dropdown:hover > ul.sub-menu {
visibility: visible;
opacity: 1;
}
.header-navbar > ul > li.dropdown > ul.sub-menu.sub-menu-sm {
min-width: 150px;
}
.header-navbar > ul li.dropdown > ul.sub-menu li:hover > a {
background-color: var(--primary);
color: var(--white) !important;
}
.header-navbar > ul > li.dropdown > ul.sub-menu li ul.sub-menu.sub-menu-w-50 {
display: flex;
flex-wrap: wrap;
min-width: 400px;
}
.header-navbar > ul > li.dropdown > ul.sub-menu li ul.sub-menu.sub-menu-w-50 li {
width: 50%;
}
.header-menu ul li.dropdown:hover a ul.sub-menu li.dropdown:hover a {
background-color: var(--primary);
}
header .contact_wrp li .icon {
height: 50px;
width: 50px;
background-color: var(--primary-light);
color: var(--primary);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
transition: all 0.4s;
}
.sticky header .contact_wrp li {
color: var(--primary);
}
.sticky header .contact_wrp li .icon {
background: var(--primary);
color: var(--white);
}
header .contact_wrp li a {
font-size: 26px;
font-weight: 500;
display: block;
color: inherit;
line-height: 130%;
font-family: var(--font1);
}
header .contact_wrp li {
font-family: var(--font2);
color: var(--primary-light);
position: relative;
font-size: 13px;
padding-left: 68px;
line-height: 130%;
padding-top: 3px;
font-weight: 500;
text-transform: uppercase;
transition: all 0.4s;
}
header .contact_wrp li a:hover {
opacity: 0.7;
}
span.sub-menu-toggle {
display: none;
}
.header-logo {
margin: auto;
background-image: url('../images/logo-bg-shape.svg');
background-repeat: no-repeat;
background-position: top center;
position: relative;
background-size: contain;
width: 306px;
padding-bottom: 17px;
}
header .contact_wrp, nav.header-navbar {
flex: 1;
padding-top: 23px;
transition: all 0.4s;
}
header .contact_wrp {
display: flex;
justify-content: flex-end;
}
.sticky .header-logo {
background: transparent;
padding: 0;
}
.sticky nav.header-navbar, .sticky .contact_wrp {
padding: 0;
}
/* Banner css */
.bslider .item {
margin: 18px 16px;
padding: 143px 0 170px;
position: relative;
z-index: 1;
}
.bslider .item .sliderbg {
background-color: var(--primary);
border-radius: 30px;
position: absolute;
z-index: -1;
inset: 0;
bottom: 88px;
}
.bslider .item .bg-img {
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 88px;
}
.bslider .item .bg-img .imgoverlay {
position: absolute;
inset: 0;
}
/* .bslider .bswpr h2 {
font-weight: 700;
font-size: 260px;
line-height: 130%;
text-align: center;
text-transform: uppercase;
color: #FFFCCA;
margin-bottom: 42px;
margin-inline: -10px;
transition: all 1.4s;
opacity: 0;
translate: 0 80px;
transition-delay: 0.8s;
} */
.bslider .bswpr h2 {
font-weight: 700;
font-size: 214px;
line-height: 130%;
text-align: center;
text-transform: uppercase;
color: #FFFCCA;
margin-bottom: 42px;
margin-inline: -10px;
transition: all 1.4s;
opacity: 0;
translate: 0 80px;
transition-delay: 0.8s;
height: 338px;
width: 100vw;
margin-left: calc(-50vw + 50% - 0px);
}
.bslider .active .bswpr h2 {
opacity: 1;
translate: 0;
}
.bslider .text {
min-height: 160px;
width: 360px;
max-width: 100%;
}
.bslider .text p {
color: var(--primary-light);
font-size: 20px;
line-height: 160%;
transition: all 1s;
translate: -40px 0;
opacity: 0;
transition-delay: 2s;
}
.bslider .bswpr .btn-wpr {
transition: all 1s;
translate: 40px 0;
opacity: 0;
transition-delay: 3s;
}
.bslider .active .text p {
translate: 0;
opacity: 1;
}
.bslider .active .bswpr .btn-wpr {
translate: 0;
opacity: 1;
}
.bslider .bswpr .btn {
background: transparent;
color: var(--primary-light);
border-color: var(--primary-light);
box-shadow: 3px 4px 0 0 var(--primary-light);
}
.bslider .bswpr .btn:hover {
box-shadow: 0 0 0 0 var(--primary-light);
}
.bslider .prd-image {
display: flex;
align-items: flex-start;
justify-content: center;
margin-left: -56px;
margin-bottom: -160px;
}
.bslider .prd-image .prd-image1 {
width: 217px;
transform: rotate(-10deg);
margin-top: -412px;
transition: all 1s;
opacity: 0;
position: relative;
z-index: 2;
translate: 0 30px;
transition-delay: 1.2s;
}
.bslider .active .prd-image .prd-image1 {
transform: rotate(-15deg);
opacity: 1;
translate: 0;
}
.bslider .prd-image .prd-image2 {
width: 217px;
transform: rotate(25deg);
margin-top: -280px;
margin-left: -46px;
transition: all 1s;
opacity: 0;
translate: 0 30px;
transition-delay: 1.6s;
}
.bslider .active .prd-image .prd-image2 {
transform: rotate(30deg);
opacity: 1;
translate: 0;
}
.bslider .floating-images .fi1 {
width: 165px;
transform: rotate(-7.23deg);
position: absolute;
top: 17%;
left: 15%;
transition: all 1s;
opacity: 0;
translate: -30px 0;
transition-delay: 0.6s;
}
.bslider .active .floating-images .fi1 {
translate: 0;
}
.bslider .floating-images .fi2 {
width: 250px;
transform: rotate(-3.68deg);
position: absolute;
z-index: 2;
bottom: 108px;
left: 31%;
transition: all 1s;
opacity: 0;
translate: 0 30px;
transition-delay: 2.4s;
}
.bslider .floating-images .fi3 {
width: 194px;
transform: rotate(-31.81deg);
position: absolute;
bottom: 0;
right: 24%;
transition: all 1s;
opacity: 0;
translate: 0 30px;
transition-delay: 2.8s;
}
.bslider .active .floating-images img {
opacity: 1;
translate: 0;
}
.bslider .orange-s .prd-image {
gap: 15px;
padding-left: 18px;
margin-bottom: -177px;
}
.bslider .orange-s .prd-image .prd-image1 {
width: 163px;
margin-top: -419px;
}
.bslider .orange-s .prd-image .prd-image2 {
width: 163px;
margin-top: -335px;
margin-left: 0;
}
.bslider .orange-s .floating-images .fi1 {
width: 150px;
transform: rotate(-7deg);
left: 18.5%;
top: 19%;
}
.bslider .orange-s .floating-images .fi2 {
width: 220px;
transform: rotate(-6.24deg);
left: 31.2%;
bottom: 18.8%;
}
.bslider .orange-s .floating-images .fi3 {
width: 248px;
transform: rotate(-8.69deg);
right: 25%;
bottom: 1.55%;
}
.bslider .rajwadi-s .prd-image {
gap: 6px;
padding-left: 18px;
margin-bottom: -177px;
}
.bslider .rajwadi-s .prd-image .prd-image1 {
width: 175px;
margin-top: -419px;
}
.bslider .active .rajwadi-s .prd-image .prd-image1 {
transform: rotate(-16.13deg);
}
.bslider .rajwadi-s .prd-image .prd-image2 {
width: 165px;
margin-top: -315px;
margin-left: 0;
}
.bslider .rajwadi-s .floating-images .fi1 {
width: 153px;
transform: rotate(5.51deg);
left: 17.4%;
top: 20.3%;
}
.bslider .rajwadi-s .floating-images .fi2 {
width: 210px;
transform: rotate(-17.6deg);
left: 32.5%;
bottom: 20.4%;
}
.bslider .rajwadi-s .floating-images .fi3 {
width: 245px;
transform: rotate(-3.08deg);
right: 24.5%;
bottom: 1.4%;
}
html .bslider .owl-dots {
position: absolute;
left: 0;
right: 0;
bottom: 154px;
width: 1320px;
margin: 0 auto;
max-width: 100%;
display: flex;
align-items: center;
gap: 8px;
}
html .bslider .owl-dots .owl-dot {
width: 30px;
height: 4px;
background: #FFFCCA;
border-radius: 4px;
transition: all 0.4s;
}
html .bslider .owl-dots .owl-dot.active,
html .bslider .owl-dots .owl-dot:hover {
background: #50B056;
}
/* about-us-sec */
.about-us-sec {
padding-top: 30px;
}
.about-us-wrap > .row {
--bs-gutter-x: 120px;
}
.about-us-wrap [class*="col-"]:first-child {
min-height: 100px;
border-right: 2px solid var(--primary);
display: flex;
align-items: center;
justify-content: flex-end;
}
.about-us-wrap .title h3 {
font-size: 48px;
font-weight: 500;
}
.about-us-wrap .ab-content {
font-size: 20px;
font-weight: 400;
color: var(--text);
line-height: 160%;
}
.about-us-wrap .content-wrap {
width: 925px;
max-width: 100%;
margin: 40px auto 0;
text-align: center;
}
.about-us-wrap .content-wrap .image {
margin: 0 12px;
margin-bottom: 40px;
height: 366px;
position: relative;
}
.about-us-wrap .content-wrap .image img {
object-fit: cover;
padding: 1px;
}
.about-us-wrap .content-wrap .image .maskimg {
position: absolute;
z-index: 9;
inset: 0;
padding: 0;
}
.about-us-wrap .content-wrap p {
font-size: 18px;
line-height: 160%;
color: var(--text);
}
.about-us-wrap .content-wrap .btn-wpr {
margin-top: 40px;
}
/* our-product-sec */
.our-product-sec{
background-color: var(--secondary);
padding: 80px 0px;
z-index: 1;
}
.our-product-sec:before{
position: absolute;
content: "";
background-color: var(--secondary);
background-image: url(../images/sec-bg.gif);
background-blend-mode: multiply;
height: 100%;
width: 100%;
opacity: 0.3;
top: 0;
left: 0;
z-index: -1;
}
.our-product-sec .title{
margin-bottom: 80px;
}
.our-product-sec .title h3{
font-size: 60px;
font-weight: 500;
color: var(--white);
}
.our-product-wrap > .row {
--bs-gutter-x: 75px;
}
.our-product-box{
text-align: center;
}
.our-product-box .image{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 32px;
}
.our-product-box .image .product-bg-img{
position: relative;
z-index: -1;
margin-top: -75px;
}
.our-product-box h3{
font-family: var(--font1);
color: var(--primary-light);
font-size: 32px;
font-weight: 500;
line-height: 120%;
margin-bottom: 22px;
transition: all 0.5s;
}
.our-product-box h3 a{
color: inherit;
font-family: inherit;
}
.our-product-box h3 a:hover{
color: var(--primary);
}
/* Why-choose-us-sec */
.why-choose-us-sec{
background-color: #F7F5D8;
padding-bottom: 60px;
}
.why-choose-us-wrap .image {
display: block;
margin-left: -25px;
margin-right: 40px;
position: sticky;
top: 82px;
}
.why-choose-us-wrap .image img {
display: block;
width: 100%;
}
.why-choose-us-wrap .txt-w {
margin-left: -24px;
}
.why-choose-us-wrap .title h3 {
line-height: 110%;
}
.why-choose-us-wrap .content{
margin-top: 40px;
}
.why-choose-us-wrap .wcu-box{
padding: 19px 60px;
margin-bottom: 14px;
display: flex;
align-items: center;
gap: 24px;
border: 1px solid var(--primary);
border-radius: 260px;
max-width: 560px;
width: 100%;
}
.why-choose-us-wrap .wcu-box:last-child{
margin-bottom: 0px;
}
.why-choose-us-wrap .wcu-box .icon{
height: 80px;
width: 80px;
min-width: 80px;
}
.why-choose-us-wrap .wcu-box h4{
font-size: 27px;
font-weight: 500;
width: 100%;
margin-bottom: 0px;
}
/* Footer */
footer{
background-color: var(--primary-light);
}
/* .footer-img{
position: relative;
margin-bottom: -30px;
z-index: 2;
} */
.footer-top {
padding: 90px 0 70px;
background-color: var(--primary-light);
position: relative;
z-index: 1;
}
.footer-top:before{
position: absolute;
content: "";
height: 100%;
width: 100%;
background-image: url(../images/sec-bg.gif);
opacity: 0.2;
top: 0;
left: 0;
z-index: -1;
}
.footer-top h4 {
font-weight: 500;
font-size: 26px;
line-height: normal;
margin-bottom: 22px;
}
ul.links {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px 0px;
margin-bottom: 134px;
width: 440px;
max-width: 100%;
font-size: 16px;
font-weight: 500;
}
ul.links li {
line-height: normal;
}
ul.links a {
color: var(--text);
font-size: 16px;
line-height: normal;
font-weight: 500;
display: block;
}
ul.links a:hover {
color: var(--primary);
}
.footer-top h5 {
font-weight: 500;
font-size: 20px;
line-height: 130%;
letter-spacing: 0.16px;
margin-bottom: 0;
}
ul.social-media {
display: flex;
align-items: center;
gap: 8px;
}
ul.social-media a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background-color: #0031200F;
color: var(--primary);
border-radius: 20px;
}
ul.social-media a:hover {
background: var(--primary);
color: var(--light);
}
.footer-logo-wrap{
position: relative;
}
.footer-logo-wrap:before,
.footer-logo-wrap:after{
position: absolute;
content: "";
height: 180px;
width: 2px;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) -0.05%, rgba(0, 49, 32, 0.2) 49.95%, rgba(255, 255, 255, 0.018) 99.95%);;
top: 0;
bottom: 0;
margin: auto;
}
.footer-logo-wrap:before{
left: 0;
}
.footer-logo-wrap:after{
right: 0;
}
.footer-logo a {
display: block;
width: 200px;
margin: 0 auto 30px;
}
.footer-logo a:hover {
transform: scale(0.9);
}
.footer-logo a img {
display: block;
width: 100%;
}
.footer-top p {
max-width: 382px;
width: 100%;
margin: 0px auto;
font-size: 15px;
font-weight: 500;
color: var(--text);
line-height: 160%;
}
.fcontact-wpr {
max-width: 371px;
margin-left: auto;
}
ul.contact-info li {
margin-bottom: 16px;
font-size: 16px;
font-weight: 500;
line-height: 160%;
display: flex;
align-items: center;
gap: 12px;
}
ul.contact-info li .icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
min-width: 40px;
height: 40px;
background-color: #0031200F;
border-radius: 50px;
}
ul.contact-info li a {
display: inline-block;
color: var(--text);
font-size: 16px;
line-height: 160%;
}
ul.contact-info li a:hover {
color: var(--secondary);
}
ul.contact-info li:last-child {
margin-bottom: 0;
}
.footer-bottom {
padding: 17px 0;
background: var(--light);
}
.footer-bottom p {
font-size: 15px;
font-weight: 500;
line-height: normal;
}
.laxraj-love svg, .laxraj-love .fa {
color: var(--primary);
margin: 0 3px;
font-size: 10px;
animation: pound .35s infinite alternate;
-webkit-animation: pound .35s infinite alternate;
width: 12px;
height: auto;
}
@keyframes pound {
100% {
transform: scale(1.1);
}
}
.innerbanner {
margin: 18px 16px;
background-color: var(--primary);
background-image: url('../images/innerbanner-dot-bg.png');
background-position: bottom center;
background-repeat: no-repeat;
background-size: 100% auto;
padding: 180px 0 120px;
border-radius: 30px;
position: relative;
z-index: 1;
}
.innerbanner h1 {
font-weight: 700;
font-size: 70px;
line-height: 130%;
text-align: center;
color: #FFFCCA;
margin-bottom: 14px;
}
html .breadcrumb {
justify-content: center;
margin-bottom: 0;
}
html .breadcrumb-item {
display: block;
font-size: 20px;
line-height: 130%;
font-weight: 500;
font-family: var(--font2);
display: flex;
align-items: center;
gap: 20px;
}
html .breadcrumb-item.active {
color: #50B056;
}
html .breadcrumb-item a {
color: var(--primary-light);
}
html .breadcrumb-item a:hover {
opacity: 0.7;
}
html .breadcrumb-item+.breadcrumb-item {
padding-left: 0;
margin-left: 20px;
}
html .breadcrumb-item+.breadcrumb-item::before {
content: "";
display: block;
width: 10px;
min-width: 10px;
height: 10px;
background-image: url('data:image/svg+xml,');
background-position: center;
background-repeat: no-repeat;
background-size: 7px;
}
.innerbanner .pineapple-slices {
width: 165px;
transform: rotate(-7.23deg);
position: absolute;
top: 28%;
left: 15%;
}
.innerbanner .pineapple {
width: 264px;
position: absolute;
bottom: -56px;
right: 10.4%;
}
.innerbanner .guava {
width: 257px;
position: absolute;
bottom: -55px;
left: 24.3%;
}
.cb-section {
padding-block: 80px;
}
.cb-section .row {
--bs-gutter-x: 36px;
}
.cbox {
display: flex;
align-items: center;
gap: 22px;
border: 1px solid var(--primary);
box-shadow: 0 6px 0 0 var(--primary);
border-radius: 24px;
padding: 28px;
height: 100%;
}
.cbox .icon {
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 70px;
min-width: 70px;
background: rgba(0, 49, 32, 0.06);
border-radius: 100px;
}
.cbox .txt h5 {
color: var(--primary);
font-size: 24px;
line-height: 130%;
font-weight: 500;
margin-bottom: 10px;
}
.cbox .txt a {
display: block;
color: var(--text);
font-size: 24px;
line-height: 150%;
font-weight: 500;
margin-bottom: 8px;
}
.cbox .txt a:last-child {
margin-bottom: 0;
}
.cbox .txt a:hover {
color: var(--primary);
}
.cbox .txt .address {
font-size: 15px;
margin-right: -2px;
}
.cform-sec {
background: var(--light);
padding-block: 40px;
}
.cform-sec .title {
margin-bottom: 40px;
}
.cform-sec .title h2 {
font-size: 60px;
line-height: 130%;
}
.cform-sec form {
width: 760px;
max-width: 100%;
margin: 0 auto;
}
.form-field label {
display: block;
font-size: 16px;
line-height: normal;
margin-bottom: 8px;
}
.form-field label em {
font-style: normal;
color: #D62B39;
}
html .form-control {
height: 58px;
border-radius: 50px;
border: 1px solid var(--primary);
padding: 16px 26px;
font-size: 16px;
line-height: normal;
color: var(--primary);
font-family: var(--font2);
background-color: var(--primary-light);
}
html textarea.form-control {
border-radius: 26px;
height: 120px;
resize: none;
}
html .form-control:focus {
box-shadow: none;
border-color: var(--primary);
}
html .form-control::placeholder {
color: var(--primary);
opacity: 0.5;
}
html .form-submit {
margin-top: 16px;
}
.pd-section {
padding-block: 50px 32px;
background: var(--primary);
color: #FFF;
z-index: 1;
}
.pd-section:before {
content: '';
display: block;
width: 746px;
max-width: 100%;
height: 742px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
background-image: url('../images/products-bg.png');
background-position: right bottom;
background-repeat: no-repeat;
background-size: 100% auto;
}
.pd-section .container {
width: 1390px;
}
.pd-section .product-details {
padding-left: 58px;
padding-top: 10px;
}
.pd-section h1 {
color: var(--primary-light);
font-weight: 700;
font-size: 62px;
line-height: 130%;
margin-bottom: 14px;
}
.pd-section .breadcrumb {
justify-content: flex-start;
}
.pd-section .breadcrumb .breadcrumb-item {
font-size: 16px;
color: var(--primary-light);
}
.pd-section .homeicon a {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
width: 50px;
height: 50px;
background: rgba(0, 49, 32, 0.1);
position: absolute;
z-index: 99;
top: 0;
left: 0;
margin: 40px;
}
.pd-section .homeicon a svg {
display: block;
width: 100%;
height: 100%;
padding: 15px;
transition: all 0.4s;
}
.pd-section .homeicon a:hover svg {
padding: 13px;
}
.product-details .btn-wpr {
display: flex;
gap: 16px;
margin-top: 47px;
margin-bottom: 44px;
}
.product-details .btn-wpr .btn {
background: transparent;
color: var(--primary-light);
border-color: var(--primary-light);
box-shadow: 0 4px 0 0 var(--primary-light);
line-height: 48px;
font-size: 15px;
gap: 10px;
padding: 0 36px;
}
.product-details .btn-wpr .btn:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 0 var(--primary-light);
}
.product-details .btn-wpr .btn:active {
transform: translateY(4px);
box-shadow: 0 0 0 0 var(--primary-light);
}
.product-details .btn-wpr .wabtn {
background: var(--primary-light);
color: var(--primary);
box-shadow: 0 4px 0 0 var(--secondary);
}
.product-details .btn-wpr .wabtn:hover {
transform: translateY(2px);
box-shadow: 0 2px 0 0 var(--secondary);
}
.product-details .btn-wpr .wabtn:active {
transform: translateY(4px);
box-shadow: 0 0 0 0 var(--secondary);
}
.product-details .pinfo {
font-size: 15px;
line-height: 140%;
color: var(--primary-light);
}
.product-details .pinfo h3 {
font-size: 28px;
font-weight: 700;
line-height: 130%;
color: var(--primary-light);
margin-bottom: 8px;
margin-top: 40px;
}
.product-details .pinfo ul {
margin-top: 18px;
}
.product-details .pinfo ul li {
font-family: var(--font2);
position: relative;
padding-left: 32px;
margin-bottom: 15px;
}
.product-details .pinfo ul li:before {
content: '';
display: block;
width: 18px;
height: 18px;
background-image: url('data:image/svg+xml,');
background-position: center;
background-repeat: no-repeat;
background-size: 18px;
position: absolute;
left: 0;
top: 2px;
}
.product-details .pinfo ul li b {
display: block;
font-size: 18px;
margin-bottom: 5px;
}
.product-details .pinfo ul li:last-child {
margin-bottom: 0;
}
.product-details .pinfo p {
font-size: inherit;
}
.pd-section .product-img {
width: 530px;
max-width: 100%;
position: relative;
z-index: 1;
}
.pd-section .flimg .fl1 {
display: block;
width: 302px;
position: absolute;
left: 0;
top: 72.1%;
}
.pd-section .flimg .fl2 {
display: block;
width: 257px;
position: absolute;
left: 33.7%;
top: 71%;
}
body:has(.pd-section) footer > img {
display: none !important;
}
.legacy-sec {
padding-top: 110px;
}
.legacy-wrap img {
position: absolute;
left: 59%;
top: 122px;
display: block;
width: 170px;
}
.legacy-wrap .title h3{
font-size: 110px;
line-height: 110%;
margin-bottom: 0;
}
.legacy-wrap .content {
margin-left: -24px;
}
.legacy-wrap p{
font-size: 18px;
line-height: 160%;
margin-bottom: 20px;
}
.legacy-wrap p:last-child {
margin-bottom: 0px;
}
.legacy-wrap .experience-box{
background-image: url('../images/exp-bg.svg');
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
padding: 30px;
max-width: 524px;
width: 100%;
margin: 80px auto 0px;
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
}
.experience-box h4{
font-size: 118px;
font-weight: 500;
line-height: 130%;
margin-bottom: 0;
}
.experience-box p {
font-size: 28px;
font-weight: 500;
line-height: 130%;
}
.services-sec {
padding-top: 80px;
padding-bottom: 110px;
}
.services-sec .container {
width: 1133px;
}
.services-wrap .title{
max-width: 672px;
width: 100%;
margin: 0px auto;
text-align: center;
}
.services-wrap .title h3{
font-size: 48px;
line-height: 130%;
font-weight: 500;
margin-bottom: 20px;
}
.services-wrap .title p {
font-size: 18px;
font-weight: 600;
line-height: 160%;
}
.services-wrap ul{
margin: 24px 0px;
display: flex;
gap: 14px;
}
.services-wrap li{
border-radius: 14px;
padding: 26px 24px;
border: 1px solid #003120;
font-size: 20px;
font-weight: 500;
font-family: var(--font2);
line-height: 130%;
}
.services-wrap p{
text-align: center;
font-size: 18px;
font-weight: 400;
}
#prd-inquiry .modal-body {
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary);
position: relative;
}
#prd-inquiry .mclose {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 28px;
height: 28px;
margin: 30px;
cursor: pointer;
}
#prd-inquiry .mclose svg {
display: block;
width: 100%;
height: 100%;
}
#prd-inquiry .mclose:hover {
transform: rotate(90deg);
transition: all 0.4s;
}
#prd-inquiry .mfbox {
background: var(--light);
border-radius: 20px;
padding: 30px 40px;
width: 600px;
max-width: 100%;
position: relative;
z-index: 1;
}
#prd-inquiry .mfbox h2 {
font-size: 40px;
text-align: center;
line-height: 130%;
font-weight: 500;
margin-bottom: 30px;
}
#prd-inquiry .form-submit {
margin-top: 6px;
}
#prd-inquiry .form-control {
padding: 20px 24px;
}
#prd-inquiry .fl1 {
display: block;
width: 257px;
position: absolute;
left: -193px;
bottom: -46px;
}
#prd-inquiry .fl2 {
display: block;
width: 168px;
position: absolute;
left: 26px;
top: 94px;
transform: rotate(-6.24deg);
}
#prd-inquiry .fl3 {
display: block;
width: 269px;
position: absolute;
right: 0;
bottom: 0;
}