@font-face {
    font-family: ArchivoNarrow-Bold;
    src: url(../fonts/ArchivoNarrow-Bold.ttf);
    font-weight: bold;
}
@font-face {
    font-family: ArchivoNarrow-SemiBold;
    src: url(../fonts/ArchivoNarrow-SemiBold.ttf);
    font-weight: 600;
}

@font-face {
    font-family: ArchivoNarrow-Regular;
    src: url(../fonts/ArchivoNarrow-Regular.ttf);
    font-weight: 400;
}

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}
*{
    box-sizing: border-box;
}
header.header {
    /* background: #ffbcff; */
    z-index: 1;
    text-align: center;
    padding-top: 70px;
}
.farmlogo {
    text-align: center;
}
.farmlogo img {
    width: auto;
    height: 80px;
}
.container-md {
    width:100%;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    max-width: 1080px;
}

.container-md .row {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    /* height: 100vh; */
}
.col {
    padding: 0 47px;
}
section.farmboise-sec h2 {
    margin: 0 0 42px 0px;
    text-transform: uppercase;
    font-size: 65px;
    color: #3b0038;
    text-align: center;
    font-family:'ArchivoNarrow-Bold', Arial, Helvetica, sans-serif;
}
section.farmboise-sec p{
    margin: 0 0 20px 0;
    font-size: 24px;
    color: #3b0038;
    line-height: 27px;
    font-family:'ArchivoNarrow-regular', Arial, Helvetica, sans-serif;
}

section.farmboise-sec{
    position: relative;
    padding:200px 230px;
}
.contain-wrapper {
    overflow: hidden;
}

section.hero-banner {
    background-color: #ffbcff;
    padding:0;
}
section.our-story h2{
    color: #674dff;
}
section.our-product {
    background-color: #ff4300;
}
section.our-product h2{
    color:#fe90f3;
}
section.our-mission {
    background-color:#fe90f3;
    
}
section.our-mission h2{
    color:#fe4300;
}
section.our-vission {
    background-color: #674dff;
    padding-bottom: 280px;
}
.absImg1 {
    margin-top: -360px;
    text-align: left;
    padding-left: 100px;

}
.absImg2 {
    margin-top: -340px;
    text-align: right;
    padding-right: 60px;
}
footer.farm-footer {
    background: #3b0038;
    padding-bottom: 70px;
    margin-top: -2px;
    z-index: 1;
    position: relative;
}
.contact-details {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 15px;
}
.contact-details  li,.contact-details li a {
    color: #ffc7ff;
    font-size: 20px;
    text-decoration: none;
    font-family: ArchivoNarrow-Regular;
}
.contact-details li a:hover{
    font-family: ArchivoNarrow-Bold;
}
.contact-details li{
    padding-left:40px;
    background-size: 25px auto;
    background-position: left center;
    background-repeat:no-repeat;
    line-height: 36px;
    transition: all ease-in-out 0.25s;
}
.contact-details li.icon-add{
    background-image: url('../images/icon/location.png');
}
.contact-details li.icon-email{
    background-image: url('../images/icon/email.png');
}
.contact-details li.icon-phn{
    background-image: url('../images/icon/Phone.png');
}
.contact-details li.icon-insta{
    background-image: url('../images/icon/Instagram.png');
}
.contact-details li.icon-add:hover{
    background-image: url('../images/icon/LocationHover.png');
}
.contact-details li.icon-email:hover{
    background-image: url('../images/icon/EmailHover.png');
}
.contact-details li.icon-phn:hover{
    background-image: url('../images/icon/PhoneHover.png');
}
.contact-details li.icon-insta:hover{
    background-image: url('../images/icon/Instagramover.png');
}
section.laborlove {
    padding: 5% 0 8% 0;
}
/* marquee loop */
.marquee img {
    max-width: 1950px;
    width: 100%;
}
.marquee {
    /* -moz-animation: marquee 20s linear infinite;
    -webkit-animation: marquee 20s linear infinite;
    animation: marquee 20s linear infinite; */
  }
  @-moz-keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @-webkit-keyframes marquee {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes marquee {
    0% {
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%)
    }
    100% {
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }


.pattern{
    width: 200px;
    position: absolute;
    left:30px;
    bottom: 0;
    display: none;
}
.pattern.right{
    left: auto;
    right: 30px
}

/* Pattern Images */

.left--pattern-img {
    position: absolute;
    left: -15px;
    top: 0;
    bottom: 0;
    width: 17.5vw;
}
.right--pattern-img {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 17.5vw;
}

img {
    max-width: 100%;
    height: 100%;
}
  

.desktop{
    display: block;
} 
.mobile{
    display: none;
}
section.our-story.farmboise-sec {
    padding-top: 0px;
}

/* Responsive css */

@media only screen and (min-width:1600px){
  
    section.farmboise-sec{
        min-height: 1080px;
    }   
    .container-md .row{
        height: 100vh;
    } 
    
    .contact-details li{min-width: 230px;}
    .absImg1 {
        margin-top: -400px;
        padding-left: 170px;
    }

    .left--pattern-img{left: -23px}
    .right--pattern-img{right: -7px}
    
}

@media only screen and (max-width: 1600px) and (min-width:960px){
    .container-md {
        scale: 0.9;
    }
    .contact-details li{min-width: 230px;}
}
@media only screen and (max-width: 1081px) and (min-width:960px){
    section.farmboise-sec {
        padding: 100px 140px;
    }
    .absImg1,.absImg2{
        display: none;
    }
    section.our-vission.farmboise-sec {
        padding-bottom: 70px;
        padding-top: 50px;

    }
    header.header {
        padding-top: 20px;
        position: relative;
        margin-bottom: -1px;
        z-index: 1;
        padding-bottom: 4px;
    }
   

}

@media screen and (max-width: 1024) {
    .left--pattern-img{left: -13px}
}

@media only screen and (max-width: 960px) {
    header.header {
        padding-top: 20px;
        position: relative;
        margin-bottom: -1px;
        z-index: 1;
        padding-bottom: 4px;
    }
    .farmlogo {
        margin-top: 0;
    }
    .farmlogo img {
        height: 40px;
    }
    section.laborlove {
        padding: 10% 0 18% 0;
    }

    section.laborlove img { height: 30px; }
    
    .container-md{
        scale: 1;
    }
    img{
        max-width: 100%;
    }
   
    .absImg1,.absImg2{
        display: none;
    }
    
    section.farmboise-sec h2 {
        margin: 45px 0 25px 0px;
        font-size: 35px;
    }
    section.farmboise-sec p{
        margin: 0 0 15px 0;
        font-size: 15px;
        line-height: 18px;
    }
    body section.farmboise-sec{
        padding: 0px 60px 45px;
    }
    
    .col {
        padding: 0;
    }
    
    
       
   
    section.our-vission .col-full {
        padding: 0 10px;
    }
    
    .contact-details{
        justify-content: center;
    }
    .contact-details li {
        width: 52%;
        margin-bottom: 15px;
        padding-left: 30px;
        background-size: 22px auto;
    }
    .contact-details li, .contact-details li a{
        font-size: 12px;
    }
    
}

@media only screen and (max-width: 960px) and (min-width:600px){
    body section.farmboise-sec,section.our-vission.farmboise-sec {
        padding: 0px 150px 45px;
    }
       
    .contact-details li{
        width: 45%;
      
    }
}

@media only screen and (max-width: 600px) {
    
    section.farmboise-sec p {
        width: 200px;
        margin-left: auto;
        margin-right: auto;
    }

    .desktop{
        display: none;
    } 
    .mobile{
        display: block;
    }

    .left--pattern-img{left: -3px}
    .right--pattern-img{right: -3px;}

    .marquee img {
        max-width: 776px;        
    }
    
}

@media only screen and (max-width: 370px) {
    section.farmboise-sec h2 {
        margin: 30px 0 25px 0px;
        font-size: 32px;
    }
    body section.farmboise-sec {
        padding: 0px 55px 35px;
    }

    .right--pattern-img{right: 1px;}
}


