body{
    font-family: Roboto;
    margin:0;
    padding: 0;
    width: 100vw;
}
.overflow-content {
    overflow: hidden;
}

button:focus {
    outline: none !important;
}

/*************************************/
/* Header starts here                */
/*************************************/

.navbar-brand img {
    width: 120px;
    min-width:100px;
    display: block;
    float:left;
    margin-left:15px;
}
.nav-item{
    text-align: center;
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.3);
}
.nav-link:hover{
    color:rgb(207, 53, 117) !important;
}
a {
text-decoration: none;
color: rgba(0, 0, 0, 0.911);
font-weight: 700;
}
a:hover{
    cursor: pointer;
}

/*************************************/
/* index.html body                   */
/*************************************/
#intro {
    text-align: center;
}
.line-animation {
    width: 100vw;
    display: flex;
    justify-content: center;
}
.line1, .line2, .line3, .line4 {
    background-color:  rgba(0, 0, 0, 0.911);
    width:25px;
    
    margin-left:12px;
    margin-right:12px;
}
.line1, .line2{
    height:200px;
}
.line3, .line4 {
    height:215px;
}
.logo {
    width: 100vw;
    padding-top:20px;
    padding-bottom:20px;
}
.logo img{
    width: 278px;
    filter: brightness(10%);
}
.intro-message img{
    width: 195px;
    filter: invert(100%);
    margin-left:9px;
}
.intro-message {
    width: 100vw;
    background-color: rgba(0, 0, 0, 0.911);
    color:whitesmoke;
    text-align: center;
    margin-top:-1px;
}
.intro-message {
    background-color: rgba(0, 0, 0, 0.911);
    color:whitesmoke;
    padding-top:20px;
    padding-bottom:100px;
    text-align: center;
}
.intro-message p{
    font-size: 2.5rem;
    font-weight: 500;
    margin: 0;
}
.intro-message button{
    margin-top:5.5rem;
    padding-top:1rem;
    padding-bottom:1rem;
    padding-right:4rem;
    padding-left:4rem;
    font-size: 1.5rem;
    border-radius: 20px;
    background-color: rgb(224, 221, 221);
    border: 0;
    color:rgba(0, 0, 0, 0.911);
    font-weight: 700;
    letter-spacing: 3px;
}
.intro-message button:hover{
    background-color:rgb(207, 53, 117);
    color:white;
    cursor: pointer;
}
#collection-titles{
    text-align:center;
    padding-top:40px;
}
.prime, .seven-two-five {
    display: inline-block;
    width:500px;
    margin-top:60px;
    position: relative;
} 
.prime{
    margin-right:60px;
}
.prime img, .seven-two-five img {
    height: auto;
    width:100%
}
.view-prime, .view-seven-two-five {
    position: absolute;
    bottom: 108px;
    padding-left:102px;
}
.view-prime button, .view-seven-two-five button{
    padding-top:10px;
    padding-bottom:10px;
    padding-left:30px;
    padding-right:30px;
    border-radius: 20px;
    border:5px;
    font-size:20px;
    font-weight: 700;
    letter-spacing: 3px;
    color: white;
}
.view-prime button {
    background-color:  rgba(0, 0, 0, 0.911);
}
.view-seven-two-five button{
    background-color:  rgb(226, 58, 114);
}
.view-prime button:hover{
    background-color: rgb(255, 251, 251);
    color: black;
    cursor: pointer;
}
.view-seven-two-five button:hover{
    background-color: rgb(255, 251, 251);
    color: black;
    cursor: pointer;
}
#benefits-banner{
    margin-top:100px;
    width:102vw;
}
.banner1, .banner2, .banner3{
    display: inline-block;
    width:33.74vw;
    box-sizing:border-box;
}
.banner2, .banner3{
    margin-left:-10px;
}
.banner1 img, .banner2 img, .banner3 img{
    width:100%;
}
#benefits-content{
    display: block;
    text-align: center;
    width: 100vw;
}
.benefit1, .benefit2, .benefit3, .benefit4, .benefit5 {
    display:inline-block;
    height:200px;
    width:400px;
    margin-top:50px;
}
.benefit2{
    background-image: url('./Images/HomePage/Bamboo_Benefit2.png');
    background-size: 110%;
    background-position: -20px -115px;
    margin-left:25px;
}
.benefit1{
    background-image: url('./Images/HomePage/Bamboo_Benefit1.png');
    background-size: 110%;
    background-position: -20px -121px;
    margin-right:25px;
}
.benefit3, .benefit4 {
    margin-right:25px;
}
.benefit4, .benefit5{
    margin-left:25px;
}
.benefit3{
    background-image: url('./Images/HomePage/Bamboo_Benefit3.png');
    background-size: 110%;
    background-position: -20px -115px;
    margin-left:25px;
}
.benefit4{
    background-image: url('./Images/HomePage/Bamboo_Benefit4.png');
    background-size: 110%;
    background-position: -20px -121px;
    margin-right:25px;
}
.benefit5{
    background-image: url('./Images/HomePage/Bamboo_Benefit5.png');
    background-size: 110%;
    background-position: -20px -115px;
    margin-left:25px;
}
.home-shop{
    display:flex;
    justify-content: center;
    margin-left:26px;
    margin-top:100px;
}
.home-shop button{
    border: solid black .4rem;
    background-color: transparent;
    padding-top:2rem;
    padding-bottom:2rem;
    padding-right: 5rem;
    padding-left: 5rem;
    font-size: 1.5rem;
    font-family: Roboto;
    font-weight:700;
    letter-spacing: 10px;
}
.home-shop button:hover{
    background-color: black;
    color:white;
    cursor: pointer;
}
@media only screen and (min-width: 1200px){
    .navbar-nav {
        margin-left: 47vw;
    }
    .nav-item{
        margin-right: 20px;
    }
}
@media only screen and (max-width:1025px){
    .prime, .seven-two-five {
        display:block;
        margin: 0 auto;
        padding-top:60px;
    }
}
@media only screen and (max-width:1199px) and (min-width: 992px) {
    .navbar-nav {
        margin-left: 36vw;
    }
    .nav-item{
        margin-right: 20px;
    }
}
@media only screen and (max-width: 852px) {
    #benefits-banner{
        display: flex;
    }
    .intro-message p{
        margin-left:2vw;
        margin-right:2vw;
    }
    .banner1, .banner2 {
        width:51%;
    }
    .banner3{
        display: none;
    }
}
@media only screen and (min-width: 768px){
.logo img {
    width: 393px;
}
.line1, .line2, .line3, .line4 {
    background-color:  rgba(0, 0, 0, 0.911);
    width:30px; 
    margin-left:15px;
    margin-right:15px;
}
}
@media only screen and (max-width: 515px) {
    .prime, .seven-two-five {
        width:410px;
        height:410px;
    }
    .seven-two-five {
        padding-top:50px;
    }
    .view-prime, .view-seven-two-five {
        position: absolute;
        bottom: 80px;
        margin-left:-50px;
    }
    .banner2{
        display: block;
        width: 104vw;
        margin-right: 0px;
    }
    .banner1{
        display:none;
    }
    .intro-message p{
        font-size: 1.8rem;
    }
    .benefit1, .benefit2, .benefit3, .benefit4, .benefit5{
        height:200px;
        width:300px;
        background-size: 110%;
    }
    .benefit1, .benefit4{
        background-position: -20px -78px;
    }
    .benefit2, .benefit3, .benefit5{
        background-position: -20px -58px;
    }
    .home-shop button{
        padding-right:3rem;
        padding-left: 3rem;
    }
}
@media only screen and (max-width:1070px) and (min-width:943px){
.benefit1, .benefit2, .benefit3, .benefit4, .benefit5{
    height:250px;
    width:350px;
}
.benefit1, .benefit4{
    background-position: -20px -65px;
}
.benefit2, .benefit3, .benefit5{
    background-position: -20px -60px;
}
}
@media only screen and (max-width:942px){
.benefit1, .benefit2, .benefit3, .benefit4, .benefit5{
    margin-right:0px;
    margin-left:0px;
}
.home-shop{
    margin-left:0px;
}
}
@media only screen and (max-width: 360px){
.prime, .seven-two-five {
    width: 365px;
    height: 375px;
}
.view-prime, .view-seven-two-five {
    bottom: 68px;
    margin-left: -63px;
}
}
@media only screen and (max-width: 320px){
.prime, .seven-two-five {
    width: 322px;
    height: 365px;
}
.view-prime, .view-seven-two-five {
    bottom: 90px;
    margin-left: -48px;
    padding-left: 64px;
}
}
/*************************************/
/* about.html body                   */
/*************************************/
#about-banner{
    text-align: center;
    margin-top:160px;
}
#about-images{
    position: relative;
    width: 100vw;
    z-index: 1;
}
#about-banner img {
    display: inline-block;
    width:23%;
    margin-left:16px;
    margin-right:16px;
}
#pink-box {
    width: 100vw;
    height: 115px;
    background-color:rgb(226, 58, 114);
    margin-top:-50px;
    z-index: 0;
    animation-delay: 1s;
}
#description{
    display:block;
    text-align: center;
    width:60vw;
    margin:0 auto;
}
.about-logo{
    width:100%;
    margin-top: 160px;
}
#description .character{
    font-size: 1.5rem;
    font-weight: 500;
    margin-top:3.7rem;
}
#description span {
    color:rgb(228, 36, 100);
}
#description .text{
    text-align: left;
    font-size: 1.2rem;
    margin-top:1.5rem;
}
.about-cloud{
    width:260px;
}
@media only screen and (max-width: 515px) {
    #pink-box{
        height:82px;
    }
}
@media only screen and (max-width: 375px){
    .about-cloud{
        margin-left:-10px;
    }
}
@media only screen and (max-width: 320px){
    #about-banner img {
        display: inline-block;
        width:23%;
        margin-left:8px;
        margin-right:8px;
    }
}
/*************************************/
/* basics.html and seven.html body   */
/*************************************/
#collection-banner,#collection-banner img {
    width:100%;
    margin-top:50px;
}
#collection-banner{
    animation-duration: 2s;
}
#start-journey{
    text-align: center;
    margin-bottom:30vh;
    animation-delay: 1.3s;
}
#start-journey p {
    font-size:2rem;
}
#start-journey p, .first-shop button, .second-shop button, .third-shop button, .modal-content p{
    letter-spacing: .5rem;
    font-weight: 700;
}
#start-journey img{
    width:6rem;
    margin-top:-3vh;
}
#left-side, #right-side{
    position: relative;
    margin-top:25vh;
}
.shirt {
    width:60%;
}
.shirt, .first-shop, .second-shop, .third-shop{
    display: inline-block;
}
.shirt img {
    width:100%;
}
.first-shop button, .second-shop button, .third-shop button{
    border: solid black .4rem;
    background-color: transparent;
    padding-top:2rem;
    padding-bottom:2rem;
    padding-right: 6rem;
    padding-left: 6rem;
    font-size: 1.5rem;
}
.first-shop, .second-shop, .third-shop{
    position: absolute;
}
.first-shop, .third-shop {
    right:5vw;
    top: 22vh;
}
#right-side {
    text-align: right;
}
.second-shop{
    left:5vw;
    top: 22vh;
}
.first-shop button:hover{
    background-color: black;
    color:white;
}
.second-shop button:hover{
    background-color: black;
    color:white;
}
.third-shop button:hover{
    background-color: black;
    color:white;
}
@media only screen and (max-width: 1205px) {
    .first-shop button, .second-shop button, .third-shop button{
       padding-right:4rem;
       padding-left:4rem;
   }
}
@media only screen and (max-width: 1015px) {
    .first-shop button, .second-shop button, .third-shop button{
        padding-right:3rem;
        padding-left: 3rem;
    }
 }
 @media only screen and (max-width: 820px) {
    .first-shop button, .second-shop button{
        display:none;
    }
    .shirt{
        width: 100%;
    }
    .third-shop{
        display: flex;
        position: static;
        margin-top:30vh;
        justify-content: center;
        margin-bottom:15vh;
    }
    footer {
        display: block;
    }
 }
/*************************************/
/* Footer starts here                */
/*************************************/
footer {
    background-color:rgba(0, 0, 0, 0.911);
    margin-top:100px;
    padding-top:80px;
    padding-bottom: 50px;
    box-shadow: 2px 0px 4px 2px rgb(95, 94, 94);
}
.social-media, .newsletter {
    display: block;
    width:60vw;
    box-sizing: border-box;
    text-align: center;
    margin:0 auto;
}
.newsletter{
    padding-top:50px;
}
h2 {
    color:rgb(250, 249, 249);
    font-weight: 500;
}
footer p{
    color: rgb(174, 175, 175);
    font-weight: 300;
    margin-bottom:0;
}
footer ul{
    padding:0;
    margin-top:0;
}
footer li {
    display: inline;
}
.social-media img {
    height:45px;
    margin-top:25px;
}

.facebook{
    margin-right: 50px;
}
input{
    height: 30px;
    font-size:17px;
    padding-left:10px;
    margin-right:10px;
}
.newsletter button {
    padding-top:8px;
    padding-bottom:8px;
    padding-left:30px;
    padding-right:30px;
    border-radius: 8px;
    border:0px;
    background-color:rgb(226, 58, 114);
    font-size:20px;
    font-weight: 700;
    color:rgb(250, 249, 249);
}
input, .newsletter button {
    margin-top: 20px;
} 
.footer-copy{
    padding-top:80px;
    text-align: center;
}
.copyright{
    color: rgb(174, 175, 175);
}
@media only screen and (min-width:768px){
    footer {
        padding-left:30px;
        padding-right:30px;
    }
    .social-media, .newsletter {
        display: inline-block;
        width:45vw;
        box-sizing: border-box;
        text-align: center;
        margin:0 auto;
        vertical-align: top;
    }
    .social-media{
        padding-right:15px;
    }
    .newsletter{
        padding-top:0px;
        padding-left:15px;
    }
    h2 {
        margin-top:0;
    }
}