/*------- Font Family Starts -------*/

@font-face { font-family: "Double_Bubble_shadow"; src: url("../fonts/Double_Bubble_shadow.otf"); }
@font-face { font-family: "Pacifico"; src: url("../fonts/Pacifico.ttf"); }
@font-face { font-family: "Lato-Light"; src: url("../fonts/Lato-Light.ttf"); }
@font-face { font-family: "Lato-Semibold"; src: url("../fonts/Lato-Semibold.ttf"); }

/*------- Font Family Ends -------*/

/*------- Reset CSS Starts -------*/

html { font-size: 10px; letter-spacing: 1px; }
ul, p, h1, h2 { margin: 0; padding: 0; }
li { list-style: none; }
a,
a:hover,
a:focus { text-decoration: none; transition: 0.5s linear; -webkit-transition: 0.5s linear; -moz-transition: 0.5s linear; -ms-transition: 0.5s linear; -o-transition: 0.5s linear; }

/*------- Reset CSS Ends -------*/

/*------- Common CSS Starts -------*/

.flex { display: flex; }
.align-center { align-items: center; }

/*------- Common CSS Ends -------*/

/*------- Header Section Starts -------*/

.top-header { left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
.navbar-container { margin: 0 auto; max-width: 1170px; padding: 15px; }
.social-header-listing > li { display: inline-block; margin-right: 15px; }
.social-header-listing > li:last-child { margin-right: 0; }
.social-header-listing > li > a { color: #fff; font: 1.8rem/1.42857143 "Lato-Light"; }
.social-header-listing > li > a > i { padding-right: 5px; }

/*------- Header Section Ends -------*/

/*------- Banner Section Starts -------*/

.bg-banner { background: url("../images/banner.jpg") no-repeat fixed top/cover; height: 100vh; position: relative; }
.qrcode-adjust { left: 35%; position: absolute; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }
.banner-information { left: 75%; position: absolute; top: 35%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); }
.section-heading > h1 { color: #ffeb3b; font: 7rem/1.42857143 "Double_Bubble_shadow"; letter-spacing: 4px; text-align: center; }

/*------- Banner Section Ends -------*/

/*------- How to Work Section Starts -------*/

.bg-how-to-work-home { padding: 50px 15px; }
.section-heading > h2 { color: #000; font: 600 4rem/1.42857143 "Pacifico"; letter-spacing: 4px; margin-bottom: 15px; }
.img-products-home { margin: 0 auto 30px; }
.media-milk-home { margin-top: 0; margin-bottom: 30px; }
.media-milk-home > .media-left { padding-right: 25px; }
.media-object-milk-home { width: 60px; }
.media-first-body-milk-home > h2,
.media-sec-body-milk-home > h2,
.media-third-body-milk-home > h2,
.media-fourth-body-milk-home > h2 { border-bottom: 1px dashed #82bd1a; color: #82bd1a; font: 4rem/1.42857143 "Lato-Semibold"; margin-bottom: 15px; padding-bottom: 5px; }
.media-first-body-milk-home > p,
.media-sec-body-milk-home > p,
.media-third-body-milk-home > p,
.media-fourth-body-milk-home > p { color: #82bd1a; font: 3rem/1.2 "Double_Bubble_shadow"; }
.media-sec-body-milk-home > h2 { border-bottom: 1px dashed #ef977f; }
.media-third-body-milk-home > h2 { border-bottom: 1px dashed #fad703; }
.media-fourth-body-milk-home > h2 { border-bottom: 1px dashed #89d7f0; }
.media-sec-body-milk-home > h2,
.media-sec-body-milk-home > p { color: #ef977f; }
.media-third-body-milk-home > h2,
.media-third-body-milk-home > p { color: #fad703; text-align: right; }
.media-fourth-body-milk-home > h2,
.media-fourth-body-milk-home > p { color: #89d7f0; text-align: right; }
.bg-milk { background: url("../images/milk.jpg") no-repeat top/cover; height: 650px; position: relative; }
.milk-products { left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 100%; }
.milk-products > p { color: #ffc107; font: 4rem/1.42857143 "Double_Bubble_shadow"; text-align: center; }

/*------- How to Work Section Ends -------*/

/*------- Copyright Section Starts -------*/

.bg-copyright-home { background-color: #1961ab; padding: 15px; }
.copyright { align-items: center; color: #fff; display: flex; font: 1.8rem/1.42857143 "Lato-Light"; justify-content: center; }
.copyright > a > img { display: flex; padding-left: 5px; }

/*------- Copyright Section Ends -------*/