@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');

body {font-family: "Urbanist", sans-serif;
float: left;
width: 100%;
color: #000;font-weight: 300;
background-attachment: fixed; background-size: 40%;
padding-right: 0 !important;
   -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
.modal-open {
padding-right: 0!important;
overflow: hidden;
}
::-moz-selection {
color: #000;
background: #d7c07f;
}
::selection {
color: #000;
background: #d7c07f;
}
.btn{ box-shadow: none; outline: none;}
button{ box-shadow: none; outline: none;}
:focus {
outline: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;  
}
p {
color: #000;
line-height: 35px;
font-size: 15px; font-weight: 500;-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a{text-decoration: none;}
a:hover{color: #0e2c18;}
ul li,
ul li a,
ol li,
ol li a {
color: #161616;
font-size: 14px; font-weight: 300;
line-height: 26px;text-decoration: none;
}
a:hover,
a:focus {
text-decoration: none;
outline: none;
}
:focus {
outline: none;
}
img{max-width:100%;height:auto;}
:root{
    --primaryClr:rgba(250, 89, 69, 1);
    --secondaryClr:rgba(114, 181, 43, 1)
}

/* navbar */
.navbar{background:#fff;border-radius: 4rem;padding: 1rem 2.5rem;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.n-container{display: flex;align-items: center;justify-content:space-between;flex: 1;}
.navbar-collapse{flex-grow: 0;}
.navbar-expand-lg .navbar-nav{gap: 5rem;}
.nav-link{font-size: 15px;color: #000;font-weight: 600;position: relative;text-transform: capitalize;}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show,.nav-link:focus, .nav-link:hover{color: var(--primaryClr);}
.nav-link::after{content: '';position: absolute;bottom: 2px;left:0;height: 1.5px;background: var(--secondaryClr);width:0%;transition: all 0.3s ease-in-out;}

.nav-link:hover::after{width: 100%;}
.main-banner{height: 100vh;background: url(../media/Fruitify_Video.mp4);background-size: cover;background-position: top;padding-top: 3rem;position: relative;margin-bottom: 3rem;}
.main-btn{font-size: 15px;background: var(--primaryClr);color: #fff;padding: 9px 29px;border-radius:3rem;border: none;text-transform: capitalize;}
.main-btn a{color: #fff;font-size: 15px;}
h1{font-size: 50px;color: #fff;}
.banner-content{padding-top: 5rem;z-index: 11;position: relative;}
h1 span{font-weight: bold;}
.grad-btn{font-size: 15px;background: rgb(250 89 69);color: #fff;padding: 9px 29px;border-radius:3rem;border: none;text-transform: capitalize;margin-top: 2rem;}
.title-area h3{font-size: 15px;letter-spacing: 2.5px;font-weight: 700;background: rgb(250 89 69);background-clip: text;color: transparent;display: inline-block;margin-bottom: 1rem;}
.title-area h2{font-size: 30px;font-weight: bold;margin-bottom: 1.5rem;}
.r-more{font-weight: 500;font-size: 15px;color: #000;text-transform: capitalize;border-bottom: 1.5px solid var(--secondaryClr);padding-bottom: 3px;}
.card-list{display: flex;gap: 1rem;}
.card-list h6{font-size: 15px;font-weight: bold;text-transform: capitalize;}
.abt-ul{list-style: none;margin-top: 1.5rem;}
.c-img{flex-shrink: 0;}
.feat-pro .title-area{text-align: center;}
.feat-pro{padding: 3rem 0 0;position: relative;}
.feat-icon{position: absolute;top: 0;left: 0;}
.owl-nav button{width: 40px;height: 40px;border-radius: 50% !important;position: absolute;top: 50%;transform: translateY(-50%);}
.owl-nav button span{display: none;}
button.owl-prev{background: url(../media/arrows\ \(2\).svg) !important;background-size: contain !important;left: -9rem;}
button.owl-next{background: url(../media/arrows\ \(1\).svg) !important;background-size: contain !important;right: -9rem;}
.feat-pro .owl-carousel{margin-top: 10rem;}
.pro-img{width: auto;margin: auto;}
.owl-container-area{max-width: 900px;margin: auto;}
.pro-btn{font-size: 15px;background: #fff ;padding: 9px 49px;border-radius:3rem;border: none;text-transform: capitalize;margin: 2rem auto;font-weight: 500;position: relative;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease-in-out;text-transform: uppercase;}
.pro-btn::after{transition: all 0.3s ease-in-out; content: '';width: 102%;height: 108%;background-image: linear-gradient(to right, rgba(250, 89, 69, 1),rgb(250 89 69));border-radius: 3rem;position: absolute;z-index: -1;}
.pro-btn span{transition: all 0.3s ease-in-out; background-image: linear-gradient(to right, rgba(250, 89, 69, 1),rgb(250 89 69));color: transparent;background-clip: text;z-index: 1;}
.pro-btn:hover::after{z-index: 0;}
.pro-btn:hover span{color: #fff;}
.our-story{margin: 9rem 0 4rem ;}
.story-ico{position: absolute;right: 0;top: 0}
.how-cont{background: white;min-width: 800px;background: rgba(255, 255, 255, 0.4);position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);padding: 3.5rem;text-align: center}
.why-us{background: rgba(114, 181, 43, 0.15);padding: 5rem 0;}
.area-img img{width: 100%;height: 100%;object-fit: cover;}
.area-img{width: 100%;height: 100%;}
.social-area{padding: 5rem 0 4rem;}
.area-box{display: grid;grid-template-columns: repeat(5,1fr);}
.f-links-area ul{padding: 0;margin: 0;list-style: none;display: flex;gap: 3rem;}
.f-links-area ul li a{font-weight: 600;font-size: 15px;}
.f-links-area{padding: 2rem 0;border-bottom: 1px solid gray;margin-bottom: 1rem;display: flex;justify-content: space-between;align-items: center;}
.social-links{gap: 1rem !important;}
.f-ul{display: flex;align-items: center;gap: 1rem;list-style: none;padding: 0;margin: 0;}
.f-ul li a{font-size: 13px;font-weight: 400;padding-right: 1rem;}
.f-link-bottom{display: flex;align-items: center;justify-content: space-between;margin-bottom: 1rem;}

/* Toast Styles */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 15px 25px;
    border-radius: 4px;
    display: none;
    z-index: 1000;
    animation: slideIn 0.5s ease-out;
  }
  
.toast-content {
    display: flex;
    align-items: center;
    gap: 10px;
}
  
.toast-icon {
    font-size: 24px;
    font-weight: bold;
}
  
@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
  
.show-toast {
    display: block !important;
}

/* story */
.story-banner{background-image:url(../media/OurStory.png) ;height: 73vh;background-position: bottom;margin: 0;}
.story-banner h1{text-transform: capitalize;color: #fff;text-align: center;font-size: 40px;font-weight: 600;}

/* about */
.abt-banner{background-image:url(../media/AboutUs.png) ;height: 73vh;background-position: bottom;margin: 0;}
.abt-banner h1{text-transform: capitalize;color: #fff;text-align: center;font-size: 40px;font-weight: 600;}

/* products */
.prod-banner{background-image:url(../media/Product_Image.png) ;height: 73vh;background-position: bottom;margin: 0;}
.prod-banner h1{text-transform: capitalize;color: #fff;text-align: center;font-size: 40px;font-weight: 600;}

/* why us */
.why-us-banner{background-image:url(../media/WhyChooseUs.png) ;height: 73vh;background-position: bottom;margin: 0;}
.why-us-banner h1{text-transform: capitalize;color: #fff;text-align: center;font-size: 40px;font-weight: 600;}

/* about */
.sub-banner{background-image:url(../media/subbanner.png) ;height: 73vh;background-position: bottom;margin: 0;}
.sub-banner h1{text-transform: capitalize;color: #fff;text-align: center;font-size: 40px;font-weight: 600;}
.container-custom{margin-left: calc((100% - 1140px)/2);    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
   
   
    padding-left: calc(var(--bs-gutter-x)* .5);}
    .abt-sub-img{text-align:right}
    .abt-detail p{margin: 0;}
    .vis-mis h3{font-weight: 600;text-transform: capitalize;font-size: 25px;}
    .vis-card{display:flex;gap: 1rem;background: rgba(114, 181, 43, 0.2);padding: 1.5rem;border-radius: 1.5rem;margin-top: 1.5rem;}
    .v-cont h5{text-transform: uppercase;font-size: 16px;font-weight: 600;color: var(--primaryClr);}
    .v-cont p{margin: 0;line-height: 30px;font-size: 14px;}


    @media (min-width: 1400px) {
        .container-custom{margin-left: calc((100% - 1320px)/2);}
    }
    .detail-ico{position: absolute;bottom: -100px;left: 0;z-index:-1}
    .story-detail{background: rgb(255, 255, 255) center/cover;padding: 10rem 0 5rem;margin-top: -15rem;position: relative;z-index: -1;}
    .story-area{padding-top: 10rem;}
    .sd-ico{position: absolute;right: 0;bottom: -180px;}
    .y-box{background: rgba(114, 181, 43, 0.2);text-align: center;padding: 4rem 1rem 3rem 1rem;border-radius: 5px;min-height: 280px;}
    .y-box h6{font-size: 15px;font-weight: 700;}
    .y-box p{line-height: 22px;margin: 0;font-weight: 400;font-size: 13px;}
    .y-ico{text-align: center;margin-bottom: -40px;}
    .why-card{margin-top: 2rem;}
    .y-card-are{margin: 4.5rem 0;}
    .slider-area{background:  linear-gradient(to right,rgba(250, 89, 69, 0.2),rgba(250, 89, 69, 0.2));padding: 1rem 2rem;border-radius: 2rem;}
    .slider-area .nav-link{color: #000;margin: auto;}
    .slider-area .nav-link.active{color: var(--primaryClr);}
    .s-content-area h2{font-weight: 700;font-size: 19px;color:var(--primaryClr);margin-bottom: 2rem;}
    .slider-area{margin-bottom: 5rem;}
    .tab-card{display: flex;background: rgba(114, 181, 43, 0.2);border-radius: 20px;padding: 1rem;align-items: center;gap: 1rem;}
    .tab-card div:first-child{flex-shrink: 0;}
    .tab-ico img{width: 100px;height: 10    0px;border-radius: 50%;object-fit: cover;}
    .tab-card h3{font-size: 15px;color: var(--primaryClr);font-weight: 600;text-transform: uppercase;}
    .tab-card h4{font-size: 13px;font-weight: 300;color: rgba(40, 40, 40, 0.6)  ;}
    .tab-card p{font-size: 12px;line-height: 20px;color:rgba(40, 40, 40, 0.6);}
    .tab-card h6{text-align: center;text-transform: uppercase;font-size: 14px;font-weight: 600;margin-top: 5px;}
    .slider-area .item{border-right: 1px solid #000;}
    .owl-button button{background: transparent;border: none;position:absolute;top: 50%;transform: translateY(-50%);}
    .owl-button i{color: transparent;background:  linear-gradient(to right,rgba(114, 181, 43, 1),rgba(250, 89, 69, 1));background-clip: text;}
    .owl-back{left: -40px;}
    .owl-next-{right:-40px;}
    /* .slider-area .item:last-child{border: none;} */
    .sub-h1{font-weight: 700;font-size:45px;color: var(--primaryClr);text-transform: uppercase;}
    .d-sub-img{padding-left: 4rem;}
    .bottom-d-cont h6{font-size: 17px;color: var(--primaryClr);font-weight: 500;}
    .bottom-d-cont ul{margin: 0;padding: 0;list-style:none;display: flex;gap: 2.5rem;align-items: center;margin-top: 1rem;}
    .bottom-d-cont ul li{width: 60px;height: 60px;border-radius: 50%;border: 1px solid #fff;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;padding: 1rem;text-align: center;position: relative;background: #fff;}
    .bottom-d-cont ul li h5{display: inline-block;font-size: 13px;margin: 0;}
    .bottom-d-cont{padding-top: 1.5rem;border-top: 1px solid #cdcd;}
    .sub-h1 + p{padding-bottom: 1rem;}
    .b-felx-area{display:flex;justify-content: space-between;}
    .b-felx-area h3{font-size: 23px;font-weight: 700;color:#000;text-transform: uppercase;}
    .bottom-d-cont ul li::after{content: '';width:105%;height: 105%;background: linear-gradient(to right,rgba(250, 89, 69, 1),rgba(250, 89, 69, 1));border-radius: 50%;position: absolute;z-index: -1;}
.contact-banner{background: #fff;height: auto;}
.cont-title{font-size: 40px;font-weight: 700;color: var(--primaryClr);text-transform: capitalize;}
.follow h3{font-size: 18px;font-weight: 600;text-transform: capitalize;}
.socials-ul{margin: 0;padding: 0;list-style: none;display: flex;gap: 1.3rem;padding-top: 5px;}
.socials-ul li{width: 30px;height: 30px;border-radius: 50%;display:flex;justify-content: center;align-items: center;background: linear-gradient(to right,rgba(114, 181, 43, 1),rgba(250, 89, 69, 1));}
.socials-ul li i{color: #fff;}
.cont-box{display: flex;gap: 1rem;}
.cont-ico{flex-shrink: 0;}
.cont-text h4{font-size: 18px;font-weight: 600;text-transform: capitalize;margin-bottom:0.3rem;}
.cont{display: grid;grid-template-columns: repeat(3,1fr);gap: 3rem;}
.follow {padding: 3rem 0 4rem;}
.leave-m h2{font-size: 19px;font-weight: 700;text-transform: capitalize;margin-bottom: 3rem;}
.inp input,.inp textarea{width: 100%;background: transparent;border: none;font-size: 15px;}
.inp{border-bottom: 1px solid grey;margin-bottom: 3rem;padding-bottom: 10px;}
.leave-m{background: #72B52B33;padding: 2.3rem 2.3rem 4rem;border-radius: 1rem;position: relative;}
.contact-us{padding-top: 3rem;}
.smbtn{position: absolute;bottom: 2rem;right: 0;}
.smbtn button{font-size: 15px;
    background: var(--primaryClr);
    color: #fff;
    padding: 9px 29px;
    border: none;
    text-transform: capitalize;border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
    .contac-ico{position: absolute;left: 0;bottom: 0;z-index:-1}
    .map{margin: 2.5rem 0;}
    .card-list p{line-height: 25px;}
    #myVideo{width: 100%;height: 100%;position: absolute;object-fit: cover;top: 0;left: 0;}





    /* media query */
    @media only screen and (min-width: 350px) and (max-width: 800px){
        .abt-section div[class*='col']{width: 100%;}
        .title-area h3{font-size: 13px;}
        .title-area h2{font-size: 16px;}
        p{font-size: 12px;line-height: 27px;}
        .r-more{font-size: 12px;}
        .card-list h6{font-size: 13px;}
        .feat-icon{display: none;}
        .feat-pro .owl-carousel{margin-top: 3rem;}
        button.owl-next{right: -10px;}
        button.owl-prev{left: -10px;}
        .pro-btn{font-size: 13px;}
        .our-story{margin: 3rem 0;}
        .our-story div[class*='col'] {width: 100%;}
        .story-ico{display: none;}
        .story-ic{margin-bottom: 2rem;width: 220px;margin-left: auto;margin-right: auto;}
        .h-abt{width: 220px;margin-left: auto;margin-right: auto;}
        .pro-img{width: 220px;margin-left: auto;margin-right: auto;}
        .v-ico{flex-basis: 45px;}
        .y-ico{width: 90px;margin-left: auto;margin-right: auto;}
        .how-cont{min-width: 100%;padding: 45px;}
        .how-it-box img{width: 100%;height: 100%;object-fit: cover;}
        .how-it-box{height: 350px;}
        .why-us div[class*='col']{width: 100%;}
        .social-area{padding-top: 0;}
        .area-box {
            margin-top: -2rem;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
        }
        .why-us{padding-bottom: 4rem;background: rgba(114, 181, 43, 0.15);}
        .abt-ul{margin-top: 2rem;}
        .f-links-area ul{display: block;}
        .f-links-area ul li{margin-bottom: 10px;}
        .f-links-area{padding: 1rem 0;}
        .f-link-bottom{display: block;}
        .f-ul li a{font-size: 12px;}
        .f-links-area ul li a{font-size: 13px;}
        .g-5, .gx-5 {
            --bs-gutter-x: 0;
            --bs-gutter-y: 0rem;
        }
        h1{font-size: 30px;}
        .grad-btn{font-size: 12px;}
        .main-banner{height: 75vh;overflow: hidden;} /* overflow: hidden; */
        .navbar-toggler:focus{box-shadow: none;}
        /* .n-container{display: block;text-align: center;} */
        .logo{margin-bottom: 1rem;}
        .navbar-expand-lg .navbar-nav{gap: 0;}
        .nav-link{font-size: 13px;}
        .navbar{border-radius: 11px;}
        .main-btn{padding: 8px 21px;display: none;}
        .main-btn a{font-size: 12px;}
        .grad-btn{padding: 8px 21px;}
        .pro-btn{padding: 8px 35px;}
        .story-banner{height: 60vh;}
        .story-banner h1{font-size: 30px;}
        .sub-banner{height: 60vh;}
        .sub-banner h1{font-size: 30px;}
        .nav-link::after{display: none;}
        .container-custom{margin-left: 0;padding-right: calc(var(--bs-gutter-x)* .5);}
        .abt-sub-img{display: none;}
        .vis-mis{margin-top: 2rem;margin-bottom: 5rem;}
        .vis-mis h3{font-size: 15px;}
        .vis-mis div[class*='col']{width: 100%;}
        .v-cont h5{font-size: 13px;}
        .v-cont p{font-size: 12px;line-height: 25px;}
        .story-area{padding-top: 0;}
        .story-detail{margin: 0;padding: 0;margin-bottom: 4rem;}
        .y-card-are{margin-top: 0rem;margin-bottom: 0;}
        .y-card-are div[class*='col']{width: 100%;}
        .y-box h6{font-size: 13px;}
        .y-box p{font-size: 12px;}
        .y-box{min-height: auto;}
        .owl-next-{right: 20px;}
        .owl-back{left: 20px;}
        .slider-area .item{border: none;}
        .s-content-area h2{font-size: 15px;}
        .s-content-area div[class*='col']{width: 100%;}
        .tab-card h3{font-size: 13px;}
        .tab-card h6{font-size: 13px;}
        .s-content-area{margin-bottom: 5rem;}
        .sub-h1{font-size: 18px;}
        .bottom-d-cont ul{flex-wrap: wrap;gap: 10px;}
        .bottom-d-cont ul li h5{font-size: 12px;}
        .b-felx-area{margin-bottom: 3rem;}
        .b-felx-area h3{font-size: 15px;}
        .detail-ico + .container-custom{padding-right: 0;}
        .d-sub-img{display: block;width: auto;margin-left: none;margin-bottom: 5rem;}
        .detail-ico + .container-custom .col-7{padding-right:0.5rem;}
        .contact-banner{height: auto;padding-bottom: 3rem;}
        .contact-us{padding-top: 0;}
        .contact-us div[class*='col']{width: 100%; }
        .cont-title{font-size: 18px;}
        .follow h3{font-size: 13px;}
        .follow{padding: 0  0rem 3rem;}
        .cont{display: block;}
        .cont-text h4{font-size: 13px}
        .cont-ico{flex-basis: 20px;}
        .leave-m h2{font-size: 16px;}
        .inp input, .inp textarea{font-size: 12px;}
        .smbtn button{font-size: 12px;}
        .log{width: 150px;}
        .navbar-collapse{position: absolute;top: 120px;left: 0;width: 100%;background: #fff;padding: 1.5rem;z-index: 100}
    }