:root {
--primary-font: "Bricolage Grotesque", sans-serif;
--secondary-font: "DM Sans", sans-serif;
--yellow-color: #FFE26D;
--black-color:#101010;
--green-color:#006A4E;
--light-color:#FAF8EC;
}
.post, .page {
margin: 0 0 0 !important;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--secondary-font) !important;
}
a {
outline:none !important;
}
h1, h2, h3, h4 {
font-family: var(--primary-font) !important;
}
.green-bg {
background: var(--green-color);
}
.light-bg {
background: var(--light-color);
}
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
display: block !important; 
}
.owl-carousel {
display: block !important;
}
.common-sec {
padding:5em 0;
}
.title-wrp h2 {
font-size: 40px;
font-weight: 700;
}
.screen-reader-text {
position: absolute;
left: -9999px;
} .primary-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
color: #000 !important;
text-decoration: none;
background: var(--yellow-color);
font-family: var(--primary-font) !important;
font-weight: 500;
padding: 12px 30px;
overflow: hidden;
transition: all 0.4s ease;
z-index: 1;
}
.primary-btn {
overflow: hidden;
background: var(--yellow-color);
transition: all 0.4s ease;
}
.primary-btn::before {
content: "";
position: absolute;
top: 0;
left: -50%; width: 25%; height: 100%;
background: linear-gradient(
120deg,
rgba(56,109,101,0.1) 0%,
rgb(56 109 101) 50%,
rgba(255,255,255,0) 100%
);
transform: skewX(-20deg);
transition: all 0.6s ease;
}
.primary-btn:hover::before {
left: 130%;
} .insta-sec h2 {
font-size: 25px;
font-weight: 400;
}
.insta-sec img {
margin: 20px 0 0;
cursor: pointer;
border-radius:5px;
}
.insta-sec img {
transition: all 0.6s ease;
transform: scale(1);
}
.insta-sec img:hover {
transform: scale(1.1);
filter: brightness(80%);
}
@media only screen and (max-width:767px) {
.faq-content {
display: block !important;
}
.common-sec {
padding: 3em 0 !important;
}
.title-wrp h2 {
font-size: 25px;
}
.hero-sec img {
height: 300px !important;
}
.hero-sec h1 {
color: #fff;
font-size: 30px;
}
} .hero-sec {
position: relative;
overflow: hidden;
}
.hero-sec img {
width: 100%;
display: block;
height: 550px;
object-fit: cover;
}
.hero-sec::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #386d65, #386d65);
opacity: 0.6;
pointer-events: none;
} .hero-sec h1 {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 48px;
font-weight: 700;
text-align: center;
z-index: 2;
}  .banner-section {
position: relative;
overflow: hidden;
}
.banner-item {
position: relative;
height: 90vh;
display: flex;
align-items: center;
justify-content: center;
}
.banner-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.banner-content {
position: relative;
z-index: 2;
width: min(100%, 500px);
}
.banner-section h1 {
font-size: 70px;
font-weight: 800;
letter-spacing: 1px;
line-height: 60px;
margin: 0 0 20px;
}
.banner-section p {
font-size: 17px;
color: var(--black-color);
}
.banner-section .owl-nav {
position: absolute;
right: 0px;
bottom: 0px;
}
.banner-section .owl-nav button.owl-prev,
.banner-section .owl-nav button.owl-next {
background: #fff !important;
color: #000;
width: 40px;
height: 40px;
font-size: 30px !important;
transition: all 0.5s ease;
border-radius: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.banner-section .owl-nav button:hover {
background: #000 !important;
color: #fff;
}
.banner-section .owl-dots {
display: none;
}  .rotate-img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
animation: worldrotation 100s linear infinite;
overflow: hidden;
z-index: 1;
}
.rotate-img img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
} html, body {
overflow-x: hidden;
} @keyframes worldrotation {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.about-sec {
position:relative;
}
.about-content {
margin-left: 4em;
}
.experience-list {
list-style: none;
margin: 40px 0 0;
padding: 0;
}
.number-bg {
font-size: 75px;
font-weight: 800;
margin: 0;
line-height: 1;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
font-family: var(--secondary-font) !important;
}
.exp-left p {
font-size: 16px;
font-family: var(--primary-font);
color: #000;
font-weight: 600;
}
.seperater {
transform: translateY(15%);
width: 2px;
height: 100px;
background-color: var(--green-color);
}  .counter-sec h2 {
font-size: 70px;
font-weight: 700;
color: var(--green-color);
transition: all 0.3s 
ease;
margin: 0;
}
.counter-sec p {
font-size: 18px;
}
.counter-box h2.animate {
transition: transform 0.4s ease;
}  .faq-sec {
padding: 80px 0;
}
.faq-accordion {
padding-right: 2em;
}
.faq-item {
overflow: hidden;
background: #EBEBEB;
margin-top: 5px;
}
.faq-header {
width: 100%;
background: #EBEBEB;
color: var(--green-color);
font-weight: 600;
padding: 14px 20px;
border: none;
outline: none;
text-align: left;
display: flex
;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-size: 16px;
transition: background 0.3s 
ease;
border-radius: 0;
font-family: var(--primary-font);
}
.faq-header:hover {
background: var(--green-color);
color: #fff;
}
.faq-header .icon {
font-size: 18px;
font-weight: 700;
transition: transform 0.3s ease;
}
.faq-item.active .faq-header .icon {
transform: rotate(45deg);
}
.faq-item.active button.faq-header {
background: var(--green-color);
color:#fff;
}
.faq-content {
max-height: 0;
overflow: hidden;
font-size: 14px;
opacity: 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
padding: 0 20px;
}
.faq-item.active .faq-content {
max-height: 500px;
opacity: 1;
padding: 20px;
}
.faq-text {
flex: 1;
}
.faq-content img {
width: 40px;
height: auto;
}   .company-image-box-wrp {
height: 130px;
display: flex;
align-items: center;
justify-content: center;
}
.company-sec img {
width: 100%;
max-width: 120px;
height: auto !important; 
}
.company-sec {
background: linear-gradient(to bottom, var(--light-color) 50%, var(--green-color) 50%);
}
.company-box-wrp {
background: #fff;
border-radius: 35px;
padding: 30px 30px;
}
.company-box p {
margin-bottom: 10px;
}
.company-box {
display: flex
;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
gap:10px;
}
.company-sec img {
width: 100%;
max-width: 110px;
height: 140px;
}  .advantage-img-group {
position:relative;
}
.advant-rotate-img {
max-width: 110px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
animation: worldrotation 100s 
linear infinite;
-webkit-animation: worldrotation 100s 
linear infinite;
float: right;
margin-top: -35%;
margin-right: -17%;
}
.advantage-sec {
position: relative;
}
.advantage-sec h2 {
width: min(100%, 500px);
}
.advantage-box {
display: flex
;
align-items: center;
justify-content: flex-start;
gap:5px;
margin: 5px 0;
}
.advantage-box h3 {
font-size: 15px;
}
.advantage-box img {
max-width: 35px;
}  .marque-sec {
background: var(--yellow-color);
overflow: hidden;
white-space: nowrap;
text-transform: uppercase;
display: flex
;
align-items: center;
color: #fff;
padding: 5px 0;
}
.marquee {
position: relative;
width: 100%;
overflow: hidden;
}
.marquee-inner {
display: flex;
width: max-content;
animation: marquee 100s linear infinite;
}
.marquee-inner span {
display: inline-block;
font-weight: 500;
font-family: var(--primary-font);
font-size: 35px;
} @keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}  .craft-bg {
background: url(https://primepsyllium.com/wp-content/themes/primepsyllium/assets/images/craft-bg.webp);
padding: 30px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: #fff;
color: #000;
}
.craft-sec {
position: relative;
width: 100%;
overflow: hidden;
}
.craft-sec img {
width: 100%;
height: auto;
display: block;
}
.crafing-lis ul {
list-style: none;
margin: 0;
padding: 0;
}
.crafing-lis ul li {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 25px;
justify-content: flex-start;
}
.crafing-lis ul {
padding: 0;
margin: 0;
float:right;
}
.crafing-lis ul li img {
width: 45px;
height: 45px;
object-fit: contain;
}
.crafing-lis ul li h3 {
font-size: 18px;
font-weight: 600;
color: #fff;
margin: 0;
line-height: 1.4;
}
.crafing-lis ul li h3:hover {
color: var(--yellow-color);
}  .country-list {
text-align: center;
display: flex
;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
font-size: 18px;
width: min(100%, 800px);
margin: 0 auto;
}
.country-list span {
display: flex;
align-items: center;
gap: 5px;
}
.country-list span::after {
content: "•";
margin-left: 0;
color: #000;
font-size: 20px;
}
.country-list span:last-child::after {
content: "";
}
.country-list img {
width: 18px;
height: auto;
vertical-align: middle;
} @media (max-width: 991px) {
.banner-item {
height: 70vh;
}
.banner-section h1 {
font-size: 57px;
}
.rotate-img {
position: relative;
top:0;
width: 80px;
height: 80px;
}
.about-content {
margin-left: 0em;
}
.faq-img {
width: 100%;
margin-top: 20px;
}
.faq-accordion {
padding-right: 0em;
}
.advantage-sec {
text-align: center;
}
.advantage-box {
justify-content: center;
}
.advantage-sec h2 {
width: 100%;
}
.advantage-img-group {
margin-top: 40px;
}
.advant-rotate-img {
position: absolute;
right: 50%;
margin-top: 0;
margin-right: 0;
bottom: 0;
text-align: center;
margin: 0 auto;
left: 50%;
top: 10px;
}
}
@media only screen and (max-width:767px) {
.banner-section h1 {
font-size: 30px;
width: min(100%, 200px);
line-height: 30px;
}
.seperater {
display: none;
}
.about-content {
text-align: center;
}
.marquee-inner span {
font-size: 25px;
}
.crafing-lis ul li
{
justify-content: flex-start;
}
.country-list {
font-size: 13px;
} 
.counter-box {
text-align: center;
margin: 0 auto;
}
.counter-sec h2 {
font-size: 50px;
}
.counter-sec p {
font-size: 16px;
}
} .pagination-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
flex-wrap: wrap;
}
.pagination-sec a {
display: inline-flex;
align-items: center;
gap: 10px;
color: #fff;
font-weight: 600;
font-size: 16px;
padding: 12px 0px;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
}
.pagination-sec .arrow-img {
width: 30px;
height: 30px;
transition: transform 0.3s ease;
}
.partner-sec {
background: linear-gradient(to bottom, #fff 50%, var(--green-color) 50%);
}
.partner-content-wrp {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 6em;
}
.partner-form p {
margin: 0;
}
.partner-box-wrp {
background-color: var(--light-color);
padding: 60px;
}
.partner-content h2 {
margin: 0;
font-size: 36px;
font-weight: bold;
}
.partner-form input:focus-visible {
outline: none;
}
.partner-content p {
margin: 0;
font-size: 16px;
font-weight: 500;
padding: 5px 0px;
}
.partner-form input {
border: none !important;
border-bottom: 2px solid #becfcf !important;
border-radius: 0px !important;
font-family: var(--primary-font);
font-size: 15px;
width: 100%;
background: transparent;
padding: 10px 0px !important;
}
.partner-form input::placeholder {
color: #000;
}
.partner-form button {
background: none;
font-family: var(--primary-font);
border: none;
position: absolute;
padding: 0;
margin: 0;
right: 0px;
top: 0px;
display: flex;
align-items: center;
}
.partner-content-btn {
border: none;
background: #fff;
padding: 15px 20px;
font-family: var(--primary-font);
color: #000 !important;
text-decoration: none;
font-weight: 500;
border-radius: 0;
}
.partner-content-btn i {
margin-left: 5px;
font-size: 18px;
}
.partner-form button i {
margin-left: 10px;
font-size: 18px;
}
.partner-content-btn:hover {
color:var(--green-color) !important;
}
@media only screen and (max-width: 992px) {
.partner-box-wrp {
padding: 45px;
}
.partner-content-wrp {
display: block;
padding-bottom: 3em;
}
.partner-content-btn {
margin-top: 20px;
}
}
@media only screen and (max-width: 767px) {
.partner-box-wrp {
padding: 30px;
}
.partner-content h2 {
font-size: 25px;
}
.partner-content-btn {
margin-top: 0px;
font-size: 14px;
padding: 15px 15px;
}
.partner-content-btn i {
font-size: 16px;
}
.partner-form button i {
font-size: 16px;
}
.partner-content p {
padding: 15px 0px;
}
.partner-form button {
position: unset;
margin-top: 20px;
}
} .product-box.item img {
border-radius: 10px;
}
.product-sec .title-wrp p {
width: min(100%, 600px);
margin: 0 auto;
margin-bottom: 35px;
}
.read-btn-wrp a {
text-decoration: none;
color: var(--black-color);
font-size: 18px;
font-weight: 500;
font-family: var(--primary-font);
}
.product-sec .owl-next-icon {
background: transparent !important;
}
.product-sec .owl-prev-icon {
background: transparent !important;
}
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
display: block !important;
}
.product-sec .owl-theme .owl-nav [class*=owl-]:hover {
background: transparent !important;
color: #FFF;
text-decoration: none;
}
.product-sec {
background: var(--light-color);
}
.product-box {
background: #fff;
border-radius: 10px;
position: relative;
overflow: hidden;
cursor: pointer;
}
.product-content {
padding: 20px 0px 0 20px;
}
.product-content h3 {
font-size: 20px;
font-weight: 600;
height:40px;
}
.product-content p {
margin-bottom: 15px;
}
.product-btn {
padding: 10px 20px 20px;
}
.product-btn a:hover {
color: var(--green-color);
text-decoration: underline;
}
.owl-prev-icon, .owl-next-icon {
font-size: 20px;
color: #000;
line-height: 1;
}
.product-btn img {
width: 100%;
max-width: 22px;
filter: invert(55%) sepia(30%) saturate(561%) hue-rotate(116deg) brightness(90%) contrast(92%);
}
.spoon-img {
position: absolute;
width: 100%;
right: -8px;
max-width: 180px;
bottom: 0;
z-index: 999;
}
.psyllium-border {
filter: invert(55%) sepia(30%) saturate(561%) hue-rotate(116deg) brightness(90%) contrast(92%);
}
.product-btn a {
color: var(--black-color) !important;
text-decoration: none;
font-family: var(--primary-font);
font-size: 20px;
transition: 0.5s;
display: flex
;
align-items: center;
justify-content: flex-start;
}
@media only screen and (max-width:767px) {
.spoon-img {
max-width: 150px;
}
.product-content h3 {
height:auto;
}
.product-content h3 {
font-size: 18px;
}
}.menu-wrp a {
padding: 15px 8px;
}
.page-id-8 .header-sec .sticky
{
background: var(--green-color) !important;
}
.site-branding img {
width: 200px;
}
.header-sec {
background: var(--green-color);
}
.header-sec.sticky {
background: var(--green-color);
}
.menu-wrp a {
color: #fff !important;
}
img.hamberg-menu {
filter: brightness(0) invert(1);
} .page-id-8 .header-sec {
background: #378ccf;
}
.header-sec ul {
padding: 0;
margin: 0;
}
.header-sec li {
list-style: none;
display: inline-block;
}
.menu-wrp-box {
display: flex;
align-items: center;
justify-content: end;
height: 100%;
} .menu-wrp a {
position: relative;
color: #fff !important;
text-decoration: none;
font-size: 16px;
padding: 15px 8px;
font-weight: 500;
display: inline-block;
transition: all 0.3s ease;
} .menu-wrp a::after {
content: "";
position: absolute;
left: 0;
bottom: 8px;
width: 0%;
height: 2px;
background: var(--yellow-color);
transition: width 0.3s ease;
} .menu-wrp a:hover::after {
width: 100%;
} .menu-wrp a:hover {
color: var(--yellow-color);
} .menu-list li {
padding: 0 8px;
cursor: pointer;
} .side-panel {
position: fixed;
top: 0;
right: -100%;
width: 320px;
height: 100vh;
background: linear-gradient(135deg, var(--green-color) 0%, #004d40 100%);
color: #fff;
transition: all 0.5s ease-in-out;
z-index: 9999;
box-shadow: -5px 0 25px rgba(0, 0, 0, 0.4);
border-top-left-radius: 18px;
border-bottom-left-radius: 18px;
overflow-y: auto;
backdrop-filter: blur(6px);
}
.side-panel.active {
right: 0;
} .side-panel-content {
padding: 60px 30px;
position: relative;
opacity: 0;
transform: translateX(40px);
transition: all 0.4s ease;
}
.side-panel.active .side-panel-content {
opacity: 1;
transform: translateX(0);
} .side-panel .close-btn {
position: absolute;
top: 20px;
right: 25px;
font-size: 30px;
cursor: pointer;
color: #fff;
background: rgba(255, 255, 255, 0.1);
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.side-panel .close-btn:hover {
background: rgba(255, 255, 255, 0.25);
transform: rotate(90deg);
} #mobile-menu {
list-style: none;
padding: 70px 0 0;
margin: 0;
}
#mobile-menu li {
margin-bottom: 18px;
}
#mobile-menu a {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: 500;
letter-spacing: 0.5px;
display: inline-block;
position: relative;
transition: all 0.3s ease;
} #mobile-menu a::after {
content: "";
position: absolute;
left: 0;
bottom: -3px;
width: 0%;
height: 2px;
background: var(--yellow-color);
transition: width 0.3s ease;
}
#mobile-menu a:hover::after {
width: 100%;
}
#mobile-menu a:hover {
color: var(--yellow-color);
transform: translateX(5px);
} .body-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.body-overlay.active {
opacity: 1;
visibility: visible;
} .header-sec {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9997;
background: var(--green-color);
transition: all 0.4s ease;
box-shadow: none;
padding: 10px 0;
}
body {
padding-top: 85px; 
}
html {
scroll-behavior: smooth;
}
.header-sec.sticky {
background: var(--green-color);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
padding: 5px 0;
}
@media only screen and (max-width:1200px) {
.menu-wrp a {
padding: 15px 2px !important;
font-size: 14px;
}
.header-btn a {
padding: 10px 12px;
}
}
@media only screen and (max-width:1024px) {
nav.menu-wrp {
display: none;
}
.primary-btn {
padding: 8px 20px;
}
.menu-list li {
padding: 0 2px;
}
body {
padding-top: 0px; 
}
}.footer-sec {
background: var(--green-color);
padding: 50px 0 5px;
color: #fff;
}
.footer-sec h2 {
color: #fff;
font-size: 20px;
font-family: var(--primary-font);
font-weight: 700;
margin-bottom: 20px;
padding: 30px 0 0;
}
.footer-sec ul li {
list-style: none;
}
.footer-sec ul {
padding: 0;
margin: 0;
}
.social-wrp li {
font-size: 18px;
border: 1px solid #fff;
border-radius: 50%;
width: 40px;
height: 40px;
display: inline-flex
;
align-items: center;
justify-content: center;
margin: 10px 5px;
}
.social-wrp li a {
padding: 10px 12px;
color: #fff;
transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.social-wrp li:hover {
border-color: var(--yellow-color);
background-color: var(--yellow-color);
}
.social-wrp li:hover a {
color: var(--green-color);
}
.footer-content {
display: flex
;
align-items: flex-start;
justify-content: flex-start;
flex-direction: column;
height: 100%;
}
.footer-content a {
color: #fff;
text-decoration: none;
margin-bottom: 15px;
transition: all 0.5s ease;
}
.footer-content a:hover {
color: var(--yellow-color);
}
.footer-content p {
width: min(100%, 300px);
margin-bottom: 15px;
}
.footer-colum-three a:hover {
color: var(--yellow-color) !important;
}
.footer-colum-three a {
color: #fff !important;
text-decoration: none;
transition: all 0.5s ease;
}
.footer-colum-three li {
padding: 6px 0px;
}
.copyrigh a {
color: #fff;
text-decoration:none;
transition: all 0.5s ease;
}
.copyrigh a:hover {
color: var(--yellow-color);
}
@media only screen and (max-width:991px) {
.footer-colum-three a:hover {
color: var(--yellow-color);
}
}
@media only screen and (max-width:767px) {
.social-wrp li {
margin: 10px 1px;
}
.footer-colum-three {
text-align: center;
}
.footer-content {
align-items: center;
}
.footer-column-one {
text-align: center;
}
}