.our-gravies-grid{grid-template-columns:repeat(4,1fr);gap:1rem;display:grid}.gravy-card-div{cursor:pointer;position:relative;overflow:hidden}.gravies-img-div img{object-fit:cover;width:100%;height:100%;transition:filter .6s}.gravy-card-div:hover .gravies-img-div img{filter:brightness(.6)}.gravy-postion-sec{z-index:2;width:100%;height:100%;position:absolute;bottom:0;left:0;overflow:hidden}.gravy-postion-sec:before{content:"";z-index:1;width:100%;height:100%;transition:bottom .7s cubic-bezier(.19,1,.22,1);position:absolute;bottom:-100%;left:0}.gravy-card-div:hover .gravy-postion-sec:before{bottom:0}.gravy-overlay{z-index:3;flex-direction:column;justify-content:flex-end;transition:transform .7s cubic-bezier(.19,1,.22,1);display:flex;position:absolute;bottom:-2.5rem;left:1.5rem;right:1.5rem}.gravy-overlay h3{color:var(--white-color);opacity:1;transition:transform .7s cubic-bezier(.19,1,.22,1);transform:translateY(0)}.gravy-overlay p{color:var(--white-color);opacity:0;transition:opacity .6s .2s,transform .7s cubic-bezier(.19,1,.22,1) .2s;transform:translateY(30px)}.gravy-card-div:hover .gravy-overlay{transform:translateY(-80px)}.gravy-card-div:hover .gravy-overlay h3{transform:translateY(-10px)}.gravy-card-div:hover .gravy-overlay p{opacity:1;transform:translateY(0)}@media only screen and (max-width:767px){.our-gravies-grid{grid-template-columns:repeat(1,1fr)}.gravy-postion-sec{visibility:visible;opacity:1;z-index:2;height:unset;background:0 0;padding:2rem 0;position:relative}.gravy-postion-sec h3,.gravy-postion-sec p{color:var(--black-color);opacity:1;transform:translateY(0)}.gravy-postion-sec p{font-size:16px}.gravy-postion-sec h3{color:var(--black-color);font-size:18px}.gravy-overlay{position:relative;bottom:0;left:0;right:0}}
.choose-packed-gravy-title h1 span{color:var(--secondary-color);font-family:var(--bold-font-family-Ob)}.choose-gravies-grid{align-items:center;gap:16rem;display:flex}.choose-gravies-grid>div:first-child{flex-basis:30%}.choose-gravies-grid>div:nth-child(2){flex-basis:70%}.packed-list-box-flex{border-bottom:2px solid var(--border-gray);transform:var(--common-transition);padding:1.5rem 0}.packed-list-box-flex .section-paragraph p{color:var(--border-gray);transform:var(--common-transition)}.packed-list-box-flex{transform:var(--common-transition);align-items:center;gap:1rem;display:flex}.packec-icon-img{width:2.5rem}.hover-img{visibility:hidden;opacity:0;position:absolute;top:0;left:0}.animation-text-sec,.packec-icon-img{vertical-align:top;pointer-events:all;display:block;position:relative;overflow:hidden}.simple-text-div,.main-icon-img{transform-origin:0 100%;display:inline-block}.hover-animation-text,.hover-icon-img{opacity:0;position:absolute;top:0;left:0;transform:translateY(100%)rotateY(15deg)rotate(3deg)}.packed-list-box-flex.active .hover-animation-text,.packed-list-box-flex.active .hover-icon-img{opacity:1;transition:all .75s cubic-bezier(.4,.5,.1,1);transform:none}.packed-list-box-flex.active .simple-text-div,.packed-list-box-flex.active .main-icon-img{opacity:0;transition:all .75s cubic-bezier(.4,.5,.1,1);transform:translateY(-100%)rotateY(15deg)rotate(-3deg)}.packed-list-box-flex:hover .hover-img{visibility:visible;opacity:1}.packed-list-box-flex:hover .main-img{visibility:hidden;opacity:0}.packed-list-box-flex:hover .section-paragraph p{color:var(--primery-color)}.packed-list-box-flex:hover{border-color:var(--green-color)}.banner-img img{width:100%;transition:all .4s}.packed-list-box-flex.active{border-color:var(--green-color)}.packed-list-box-flex.active .section-paragraph p{color:var(--primery-color)}.banner-img.animation-img-sec{position:relative;overflow:hidden}.banner-img.animation-img-sec img{object-fit:cover;clip-path:polygon(0 0,0 0,0 0,0 0);width:100%;height:100%;transition:all 10ms cubic-bezier(.4,.5,.1,1) .85s;transform:rotate(2deg)translate(0)}.banner-img.animation-img-sec.active img{transition:all .7s cubic-bezier(.4,.5,.1,1) .15s;animation:1s cubic-bezier(.4,.5,.1,1) forwards revealSquare;transform:none}@keyframes revealSquare{0%{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);transform:scale(1.05)rotate(-2deg)}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transform:scale(1)rotate(0)}}@media only screen and (max-width:767px){.choose-gravies-grid{flex-direction:column;align-items:center;gap:2rem}.packed-list-box-list-wrapper .section-paragraph p{font-size:16px}.choose-gravies-grid>div:first-child,.choose-gravies-grid>div:nth-child(2){flex-basis:100%;width:100%}}