/*-----------------------------------------------------------------------------------
  Template Name: Greenin Environment & Non-Profit HTML Template.
  Template URI: #
  Description: Greenin is a unique website template designed in HTML with a simple & beautiful look. There is an excellent solution for creating clean, wonderful and trending material design corporate, corporate any other purposes websites.
  Author: HasTech
  Author URI: https://themeforest.net/user/hastech/portfolio
  Version: 2.0
-----------------------------------------------------------------------------------*/


 
/*======================================

[  Table of contents  ]


  01. Reset
  02. Helper Classes
  03. Typography
` 04. Transtion
  05. Images
  06. Bg-Color
  07. Social Icon Text Color
  08. Social Icon Bg Color
  09. Text Color
  10. Bg Images
  11. Background overlay
  12. Background Black Overlay
  13. Input
  14. Basic margin padding
  15. Margin top
  16. Margin bottom
  17. Padding top
  18. Padding bottom
  19. Page section padding
  20. Page section margin
  21. Custom cloumn
  22. Moz Placeholder

[ End table content ]
======================================*/

/*
    font-family: 'Open Sans', sans-serif;

    font-family: 'Roboto Slab', serif;
*/
body{
    font-family: 'Outfit' , sans-serif;
}
/*------------------
  01. Reset
--------------------*/
*,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
a {
  margin: 0;
  padding: 0;
}

@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1385px;
}
}

@media (min-width: 1200px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1350px !important;
}

}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    padding-right: calc(var(--bs-gutter-x) * .625);
    padding-left: calc(var(--bs-gutter-x) * .625);
}
.row {
  display:flex;
    margin-right: calc(-.625 * var(--bs-gutter-x));
    margin-left: calc(-.625 * var(--bs-gutter-x));
}
.blog-container{
    max-width: 1150px;
    justify-content: center;
    margin: auto;
}

.row>* {
    padding-right: calc(var(--bs-gutter-x) * .625);
    padding-left: calc(var(--bs-gutter-x) * .625);
}

/*----------------------
  02. Helper Classes
------------------------*/
.fix {
    overflow: hidden
}
.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
/*-----------------------
  03. Typography
------------------------*/
html {
    font-size: 100%;
    font-family: "BrownLLWebPan", "HelveticaNeue", "Arial", sans-serif;
}
@media all and (max-width: 768px) {
    html {
        font-size: 87.5%;
    }
}
body {
    font-family: 'Open sans', sans-serif;
    color: #555555;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
p{
    font-family: 'Open Sans', sans-serif;
    color: #777777;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;

}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Roboto Slab', serif;
    color: #555555;
    font-weight: 400;
    font-variant-ligatures: common-ligatures;
    margin-top: 0;
    margin-bottom: 0;
}
h1, .h1 {
    font-size: 40px;
    font-weight: 700;
}
h2, .h2 {
    font-size: 40px;
    font-weight: 700;
}
h3, .h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 7px;
}
h4, .h4 {
    font-size: 14px;
    font-weight: 400;
}
h5, .h5 {
    font-size: 18px;
    font-weight: 400;
}
h6, .h6 {
    font-size: 16px;
    font-weight: 300;
}
@media all and (max-width: 767px) {
    h1, .h1 {
        font-size: 30px;
        font-weight: 400;
    }
    h2, .h2 {
        font-size: 24px;
    }
    h3, .h3 {
        font-size: 20px;
    }
    h4, .h4 {
        font-size: 16px;
    }
    h5, .h5 {
        font-size: 16px;
    }
    h6, .h6 {
        font-size: 16px;
    }
}
ul,
ol {
    list-style: none;
}

ol {
    list-style-type: upper-roman;
    list-style-position: inside;
}
strong {
    font-weight: 600;
}
hr {
    margin: 0;
    border-color: #327A2A;
}
a:hover,
a:focus,
a:active {
    text-decoration: none;
    outline: none;
}
a {
    color: #555555;
    text-decoration: none;
}
a:hover,
a:focus,
a:active {
    color: #327A2A;
}
p a:hover,
p a:focus,
p a:active {
    color: #327A2A;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit
}

body {
  overflow-x: hidden;
}
/*---------------------
` 04. Transtion
-----------------------*/
a,
.btn {
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}
input,

select,
textarea {
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
    -ms-transition: all 0.5s ease-out 0s;
    -o-transition: all 0.5s ease-out 0s;
    transition: all 0.5s ease-out 0s;
}

/*---------------------
  05. Images
----------------------*/
img, .img {
  max-width: 100%;
  transition: all 0.3s ease-out 0s;
}
p + img,
img:last-child {
  margin-bottom: 0;
}
body {
  background: #fff;
}
.mark, mark {
    background: #327A2A none repeat scroll 0 0;
    color: #ffffff;
}
/*-------------------------------
  06. Bg-Color
-------------------------------------*/
.bg__theme {
    background: green;
}
.bg__white {
  background: #fff;
}
.bg__gray {
    background: #f7f7f7;
}
.bg__dark {
    background: #222222;
}
/*-------------------------------
  07. Social Icon Text Color
-------------------------------*/
.color--facebook {
  color: #3b5998;
}
.color--twitter {
  color: #00aced;
}
.color--googleplus {
  color: #dd4b39;
}
.color--instagram {
  color: #125688;
}
.color--pinterest {
  color: #cb2027;
}
.color--dribbble {
  color: #ea4c89;
}
.color--behance {
  color: #053eff;
}
/*-------------------------------
  08. Social Icon Bg Color
-------------------------------*/
.bg--facebook {
  background: #3b5998;
}
.bg--twitter {
  background: #00aced;
}
.bg--googleplus {
  background: #dd4b39;
}
.bg--instagram {
  background: #125688;
}
.bg--pinterest {
  background: #cb2027;
}
.bg--dribbble {
  background: #ea4c89;
}
.bg--behance {
  background: #053eff;
}
/*-----------------------------
  09. Text Color
--------------------------------*/
.text--theme { 
  color: #327A2A;
 }

.text--white { 
  color: #fff ;
}
.text--black { 
  color: #363636; 
}
.text--white { 
  color: #fff;
 }

/*--------------------------
  10. Bg Images
----------------------------*/

 .bg--1 {
  background: rgba(0, 0, 0, 0) url("../../images/bg/1.jpg") no-repeat fixed 0 0 / cover ;
}

 .bg--6 {
  background: rgba(0, 0, 0, 0) url("../../images/bg/6.jpg") no-repeat scroll center center / cover ;
}


/*----------------------------
  11. Background overlay 
---------------------------------*/
[data__overlay] {
    position: relative;
}
[data__overlay]:before {
    position: absolute;
    content: '';
    background: #3f51b5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
[data__overlay] *:not(.background-image-holder):not(.instafeed--background) {
    z-index: 2;
}
[data__overlay].image--light:before {
    background: #fff;
}
[data__overlay].bg--primary:before {
    background: #425cbb;
}
[data__overlay="1"]:before {
    opacity: 0.1;
}
[data__overlay="2"]:before {
    opacity: 0.2;
}
[data__overlay="3"]:before {
    opacity: 0.3;
}
[data__overlay="4"]:before {
    opacity: 0.4;
}
[data__overlay="5"]:before {
    opacity: 0.5;
}
[data__overlay="6"]:before {
    opacity: 0.6;
}
[data__overlay="7"]:before {
    opacity: 0.7;
}
[data__overlay="8"]:before {
    opacity: 0.8;
}
[data__overlay="9"]:before {
    opacity: 0.9;
}
[data__overlay="10"]:before {
    opacity: 1;
}


/*---------------------------------
  12. Background Black Overlay 
---------------------------------*/

[data--black__overlay] {
    position: relative;
    width:100%;
}

[data--black__overlay]:before {
    position: absolute;
    content: '';
    background: #000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
[data--black__overlay="1"]:before {
    opacity: 0.1;
}
[data--black__overlay="2"]:before {
    opacity: 0.2;
}
[data--black__overlay="3"]:before {
    opacity: 0.3;
}
[data--black__overlay="4"]:before {
    opacity: 0.4;
}
[data--black__overlay="5"]:before {
    opacity: 0.5;
}
[data--black__overlay="6"]:before {
    opacity: 0.6;
}
[data--black__overlay="7"]:before {
    opacity: 0.7;
}
[data--black__overlay="8"]:before {
    opacity: 0.8;
}
[data--black__overlay="9"]:before {
    opacity: 0.9;
}
[data--black__overlay="10"]:before {
    opacity: 1;
}
[data--black__overlay="0"]:before {
    opacity: 0;
}

[data--black__overlay="0"] > div{
  z-index: 5;
  color: #fff;
}


[data--theme__overlay] {
    position: relative;
}

[data--theme__overlay]:before {
    position: absolute;
    content: '';
    background: #327A2A;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
[data--theme__overlay="8.5"]:before {
    opacity: 0.85;
}






/*-------------------------
  13. Input
--------------------------*/
input[type=text],
input[type=email],
input[type=password]{
    width: 100%;
}
select {
    width: 100%;
    
}
input:focus {
    background: transparent;
    border: 1px solid #327A2A;
}
textarea {
    resize: none;
    background: #327A2A;
    border: 1px solid #327A2A;
    padding: 10px;
    width: 100%;
    font-size: 14px;
}
textarea:focus {
    background: transparent;
    border: 1px solid #327A2A;
    outline: none;
}
/*----------------------------
  14. Basic margin padding
-----------------------------*/
.m--0 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}
.p--0 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}
/*---------------------------
  15. Margin top
--------------------------*/
.mt--0 { margin-top: 0 }
.mt--10 { margin-top: 10px }
.mt--15 { margin-top: 15px }
.mt--20 { margin-top: 20px }
.mt--30 { margin-top: 30px }
.mt--40 { margin-top: 40px }
.mt--50 { margin-top: 50px }
.mt--60 { margin-top: 60px }
.mt--70 { margin-top: 70px }
.mt--80 { margin-top: 80px }
.mt--90 { margin-top: 90px }
.mt--100 { margin-top: 100px }
.mt--110 { margin-top: 110px }
.mt--120 { margin-top: 120px }
.mt--130 { margin-top: 130px }
.mt--140 { margin-top: 140px }
.mt--150 { margin-top: 150px }

/*-----------------------------
  16. Margin bottom
-------------------------------*/
.mb--0 { margin-bottom: 0 }
.mb--10 { margin-bottom: 10px }
.mb--15 { margin-bottom: 15px }
.mb--20 { margin-bottom: 20px }
.mb--30 { margin-bottom: 30px }
.mb--40 { margin-bottom: 40px }
.mb--50 { margin-bottom: 50px }
.mb--60 { margin-bottom: 60px }
.mb--70 { margin-bottom: 70px }
.mb--80 { margin-bottom: 80px }
.mb--90 { margin-bottom: 90px }
.mb--100 { margin-bottom: 100px }
.mb--110 { margin-bottom: 110px }
.mb--120 { margin-bottom: 120px }
.mb--130 { margin-bottom: 130px }
.mb--140 { margin-bottom: 140px }
.mb--150 { margin-bottom: 150px }

/*--------------------------
  17. Padding top
---------------------------*/
.pt--0 { padding-top: 0 }
.pt--10 { padding-top: 10px }
.pt--15 { padding-top: 15px }
.pt--20 { padding-top: 20px }
.pt--30 { padding-top: 30px }
.pt--40 { padding-top: 40px }
.pt--50 { padding-top: 50px }
.pt--60 { padding-top: 60px }
.pt--70 { padding-top: 70px }
.pt--80 { padding-top: 80px }
.pt--90 { padding-top: 90px }
.pt--100 { padding-top: 100px }
.pt--110 { padding-top: 110px }
.pt--120 { padding-top: 120px }
.pt--130 { padding-top: 130px }-
.pt--140 { padding-top: 140px }
.pt--150 { padding-top: 150px }

/*------------------------
  18. Padding bottom
---------------------------*/
.pb--0 { padding-bottom: 0 }
.pb--10 { padding-bottom: 10px }
.pb--15 { padding-bottom: 15px }
.pb--20 { padding-bottom: 20px }
.pb--30 { padding-bottom: 30px }
.pb--40 { padding-bottom: 40px }
.pb--50 { padding-bottom: 50px }
.pb--60 { padding-bottom: 60px }
.pb--70 { padding-bottom: 70px }
.pb--80 { padding-bottom: 80px }
.pb--90 { padding-bottom: 90px }
.pb--100 { padding-bottom: 100px }
.pb--110 { padding-bottom: 110px }
.pb--120 { padding-bottom: 120px }
.pb--130 { padding-bottom: 130px }
.pb--140 { padding-bottom: 140px }
.pb--150 { padding-bottom: 150px }


/*------------------------------
  19. Page section padding 
-------------------------------*/
.ptb--0 { padding: 0 }
.ptb--10 { padding: 10px 0 }
.ptb--20 { padding: 20px 0 }
.ptb--30 { padding: 30px 0 }
.ptb--40 { padding: 40px 0 }
.ptb--50 { padding: 50px 0 }
.ptb--60 { padding: 60px 0 }
.ptb--70 { padding: 70px 0 }
.ptb--80 { padding: 80px 0 }
.ptb--90 { padding: 90px 0 }
.ptb--100 { padding: 100px 0 }
.ptb--110 { padding: 110px 0 }
.ptb--120 { padding: 120px 0 }
.ptb--130 { padding: 130px 0 }
.ptb--140 { padding: 140px 0 }
.ptb--150 { padding: 150px 0 }

/*---------------------------
  20. Page section margin 
-----------------------------*/
.mtb--0 { margin: 0 }
.mtb--10 { margin: 10px 0 }
.mtb--15 { margin: 15px 0 }
.mtb--20 { margin: 20px 0 }
.mtb--30 { margin: 30px 0 }
.mtb--40 { margin: 40px 0 }
.mtb--50 { margin: 50px 0 }
.mtb--60 { margin: 60px 0 }
.mtb--70 { margin: 70px 0 }
.mtb--80 { margin: 80px 0 }
.mtb--90 { margin: 90px 0 }
.mtb--100 { margin: 100px 0 }
.mtb--110 { margin: 110px 0 }
.mtb--120 { margin: 120px 0 }
.mtb--130 { margin: 130px 0 }
.mtb--140 { margin: 140px 0 }
.mtb--150 { margin: 150px 0; }


/*-----------------------------
  21. Custom cloumn
--------------------------------*/
.col-1, .col-2, .col-3, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10 {
    float: left;
}

.col-4{
    text-align: center;
}
.col-1{
    width: 10%;
}
.col-2{
    width: 20%;
}
.col-3{
    width: 30%;
}
.col-4{
    width: 33.333%;
}
.col-5{
    width: 50%;
}
.col-6{
    width: 60%;
}
.col-7{
    width: 70%;
}
.col-8{
    width: 80%;
}
.col-9{
    width: 90%;
}
.col-10{
    width: 100%;
}
/*------------------------
 Others
-------------------------*/
p.form-messege{
  margin-top:15px;font-size:14px
}
p.success {
  color: green;
}
p.error {
  color: red;
}

/*-----------------------------------------
  22. Moz Placeholder
------------------------------------------*/

*::-moz-selection {
    background: #327A2A;
    color: #fff;
    text-shadow: none;
}
::-moz-selection {
    background: #327A2A;
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #327A2A;
    color: #fff;
    text-shadow: none;
}

input::-moz-placeholder {
    color: #333;
    font-size: 14px;
}

.single__option select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  background: rgba(0, 0, 0, 0) url("../../images/icons/select-option.png") no-repeat scroll 90% 21px / 10px 6px;
}

input [type="text"]:focus, 
input [type="text"]:focus::-moz-placeholder,
input [type="email"]:focus, 
input [type="email"]:focus::-moz-placeholder{
  color: #333333;
}

input::-moz-placeholder {
  color: #444 !important;
  opacity: 1;
}
input::-webkit-input-placeholder { / Chrome/Opera/Safari /
  color: #444 !important;
  opacity: 1;
}
input::-moz-placeholder { / Firefox 19+ /
  color: #444 !important;
  opacity: 1;
}
input:-ms-input-placeholder { / IE 10+ /
  color: #444 !important;
  opacity: 1;
}
input:-moz-placeholder { / Firefox 18- /
  color: #444 !important;
  opacity: 1;
}


/*new css*/

.field--name-paragraph-product-feature {
    background-position: 0 147px;
    background-size: 105% 100%;
}

.field--name-paragraph-product-feature {
/*    background-image: url("data:image/svg+xml,%3Csvg width='1439' height='687.89' viewBox='0 0 1439 687.89' preserveAspectRatio='none' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1376.13.017c-60.813-.611-122.845 15.216-177.87 50.227C847.4 271.807 419.904 365.534 0 321.65v366.24h1439V7.277c-20.635-4.124-41.583-7.046-62.87-7.26z' fill='%23978b87' fill-opacity='.1'/%3E%3C/svg%3E");*/

}

.field--name-paragraph-product-feature .paragraph--type--product-feature {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature {
    max-width: 1280px;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature>.field--name-title {
    width: calc(41.6666666667% - 0.5833333333rem);
}

.field--name-paragraph-product-feature .paragraph--type--product-feature>.field--name-title {
    font-weight: 700;
    font-size: 2.5625rem;
    line-height: 1.3698630137;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature>.field--name-title {
    margin-bottom: 1rem;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature>.field--name-title {
    color: #5f504d;
}

h2 {
    margin: 0 0 1rem;

}

.field--name-paragraph-product-feature .paragraph--type--product-feature>.field--name-subtitle {
    margin-bottom: 2rem;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature>.field--name-product-feature-category {
    flex-wrap: nowrap;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature>.field--name-product-feature-category {
    display: flex;
    max-width: calc(1280px + 1rem);
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.field--name-paragraph-product-feature .paragraph.product-category-blue {
    background-image: linear-gradient(184.02deg,#2957A4 52%,rgba(0,160,223,0.58) 125.69%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.023' height='14.702' viewBox='0 0 6.356 3.89'%3E%3Cpath d='M4.327 2.73a1.15 1.15 0 00-1.149 1.15l.001.01h2.297l.001-.01a1.14 1.14 0 00-1.15-1.15zM1.15.787a1.15 1.15 0 000 2.298 1.15 1.15 0 001.15-1.15c0-.624-.525-1.148-1.15-1.148zM3.18 0a1.15 1.15 0 001.147 1.142A1.15 1.15 0 005.477 0z' fill='%2300698f'/%3E%3C/svg%3E");
    background-color: #2957A4;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category {
    min-height: 24.375rem;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category {
    margin-right: .5rem;
    margin-left: .5rem;
    position: relative;
    width: 100%;
    min-height: 12.5rem;
    margin-bottom: 3rem;
    border-radius: 1rem;
    transition: all 400ms ease-in-out;
    transform: scaleY(1);
    transform-origin: bottom;
}

.field--name-paragraph-product-feature .paragraph.product-category-red {
    background: linear-gradient(184.02deg, #441d9d4a 52%, rgba(157, 29, 150, 0.58) 125.69%);

    background-color: #df0000;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category {
    margin-right: .5rem;
    margin-left: .5rem;
    position: relative;
    width: 100%;
    min-height: 12.5rem;
    margin-bottom: 3rem;
    border-radius: 1rem;
    transition: all 400ms ease-in-out;
    transform: scaleY(1);
    transform-origin: bottom;
}

.field--name-paragraph-product-feature .paragraph.product-category-purple {
    background-color: #A53692;
    background-image: linear-gradient(184.02deg,#A53692 52%,rgba(157,29,150,0.58) 125.69%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48.001' height='25.386' fill='none'%3E%3Cpath d='M4.542.003A4.271 4.271 0 002.044.69 4.445 4.445 0 00.001 4.341a4.6 4.6 0 00.71 2.547c1.332 2.134 8.065 4.467 8.065 4.467s.734-7.134-.6-9.201C7.345.82 5.966.06 4.543.004zM41.31.021s-6.533 2.868-7.733 5.135c-1.133 2.2-.332 4.933 1.801 6.066 2.133 1.134 4.867.267 6-1.933S41.31.02 41.31.02zM22.243 1.29c-2.466.066-7.933 4.732-7.933 4.732s5.8 4.2 8.267 4.133c2.467-.067 4.468-2.133 4.334-4.6-.066-2.466-2.201-4.332-4.668-4.265zM17.31 13.687s-6.533 2.868-7.733 5.135c-1.133 2.2-.332 4.933 1.801 6.066 2.133 1.134 4.867.267 6-1.933s-.068-9.268-.068-9.268zm11.232.05a4.27 4.27 0 00-2.498.684c-2.067 1.334-2.667 4.066-1.334 6.2 1.333 2.066 8.066 4.466 8.066 4.466s.734-7.132-.6-9.199c-.832-1.333-2.211-2.093-3.634-2.15zm17.701 1.284c-2.466.067-7.933 4.734-7.933 4.734s5.8 4.2 8.267 4.133a4.452 4.452 0 001.424-.293v-8.283a4.682 4.682 0 00-1.758-.29zm-46.242.291v8.283c1.76-.648 3.017-2.341 2.91-4.306-.05-1.852-1.264-3.365-2.91-3.977z' fill='%23752157'/%3E%3C/svg%3E");
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category {
    margin-right: .5rem;
    margin-left: .5rem;
    position: relative;
    width: 100%;
    min-height: 12.5rem;
    margin-bottom: 3rem;
    border-radius: 1rem;
    transition: all 400ms ease-in-out;
    transform: scaleY(1);
    transform-origin: bottom;
}

.field--name-paragraph-product-feature .paragraph.product-category-green {
    background-color: #345D3B;
    background-image: linear-gradient(184.02deg,#345D3B 52%,rgba(147,204,35,0.58) 125.69%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16.518' height='16.518' fill='none'%3E%3Cpath d='M0 0l16.518 16.518V9.135L7.383 0zm0 9.135v7.32l.063.063h7.32z' fill='%23fff' /%3E%3C/svg%3E");
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category {
    margin-right: .5rem;
    margin-left: .5rem;
    position: relative;
    width: 100%;
    min-height: 12.5rem;
    margin-bottom: 3rem;
    border-radius: 1rem;
    transition: all 400ms ease-in-out;
    transform: scaleY(1);
    transform-origin: bottom;
}

.field--name-paragraph-product-feature .paragraph.product-category-orange {
    background-color: #FDB92E;
    background-image: linear-gradient(184.02deg,#FDB92E 52%,rgba(245,179,23,0.58) 125.69%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='87.994' height='11.775' fill='none'%3E%3Cpath d='M0 0v5.254c7.533 0 15.004-2.28 22.22-4.432.917-.278 1.852-.547 2.778-.822zm62.996 0c.927.276 1.86.544 2.777.822 7.217 2.153 14.688 4.432 22.221 4.432V0zM43.998 2.975c-7.47 0-15.004 2.279-22.348 4.431C14.497 9.56 7.09 11.776 0 11.776h24.998c6.239-1.856 12.661-3.546 19-3.546s12.76 1.69 18.998 3.545h24.998c-7.09 0-14.497-2.216-21.65-4.369C59 5.254 51.468 2.975 43.998 2.975z' fill='%23fff'/%3E%3C/svg%3E");
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category {
    margin-right: .5rem;
    margin-left: .5rem;
    position: relative;
    width: 100%;
    min-height: 20rem;
    margin-bottom: 3rem;
    border-radius: 1rem;
    transition: all 400ms ease-in-out;
    transform: scaleY(1);
    transform-origin: bottom;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .product-feature--link {
    padding: 20px;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .product-feature--link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 1rem;
    cursor: pointer;
    text-decoration: none;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .product-feature--link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 1rem;
    cursor: pointer;
    text-decoration: none;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .taxonomy-term-treatment {
    position: static;
    display: block;
    margin-bottom: .5rem;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .taxonomy-term-treatment {
    position: absolute;
    bottom: 20px;
    z-index: 5;
    line-height: 0;
    background-color: rgba(0,0,0,0);
}

.taxonomy-term-treatment {
    position: relative;
    max-width: 100%;
    text-transform: inherit;
    color: #fff;
}

.taxonomy-term-treatment--name {
    position: relative;
    z-index: 1;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    text-transform: uppercase;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .taxonomy-term-treatment--name::before {
    width: 1.875rem;
    height: 1.875rem;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .field--name-title {
    max-width: 100%;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .field--name-title {
    font-weight: 700;
    font-size: 1.47rem;
    line-height: 1.2142857143;
    position: relative;
    z-index: 5;
    word-break: break-word;
    hyphens: auto;
    color: #fff;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .field--name-media-image {
    right: auto;
    bottom: -4rem;
    left: 50%;
    width: min(100% - 60px,250px);
    transform: translateX(-50%);
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .field--name-media-image {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 400ms ease-in-out;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .field--name-media-image {
    top: auto;
    bottom: -2.1875rem;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .product-feature--link {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px 15px;
    cursor: pointer;
    text-decoration: none;
}

.field--name-paragraph-product-feature .paragraph--type--product-feature-category .field--name-media-image img {
    display: block;
    border-radius: 1rem;
}

picture img {
    min-height: 1px;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
}

/* Zoom effect on hover for image */
.field--name-media-image img:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Zoom effect on hover for parent div */
.field--name-media-image:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Zoom effect on hover for text */
.field--name-media-image:hover .field--name-title,
.field--name-media-image:hover .field--name-subtitle {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Zoom effect on hover for h2 tag */
.field--name-media-image:hover .icon-fungicide {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

/* Zoom effect on hover for each product feature div */
.field--name-paragraph-product-feature:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}