@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
*{padding: 0px; margin: 0px; box-sizing: border-box;}
html{font-size: 62.5%; scroll-behavior: smooth;}
body{padding: 0px; margin: 0px; font-family: "Roboto", sans-serif; }
.container{width: 100%; max-width: 922px;  padding: 0 15px;  margin: 0 auto}
.custom-container{width: 100%; max-width: 1000px;  padding: 0 15px;  margin: 0 auto}
.topbar{padding: 2rem 0;}
.topbar-text{text-align: center;}
.topbar-text h3{font-size: 3rem; line-height: 4rem; color: #002060; font-weight: 900;}
.topbar-text h4{font-size: 1.8rem; line-height: 2.8rem; color: #002060; font-weight: 400;}
.fluid-sec{background: url(../images/fluid-bg.jpg) no-repeat; padding: 6rem 0 0;}
.fluid-body{background: #fff; padding: 7rem 7rem;}
.fluidtop-cont{display: flex; flex-wrap: wrap;}
.fluid-left{width: 80%;}
.fluid-right{width: 20%; padding-left: 3rem;}
.fluid-left p{font-size: 1.6rem; line-height: 2.6rem; font-weight: 400; font-style: italic; color: #000; margin-bottom: 2rem;}
.fluid-left p span{padding: 0 1rem;}
.fluid-left h1{font-size: 2.8rem; line-height: 3.8rem; font-weight: 500; color: #302e9b; margin: 5rem 0 3rem;}
.fluid-left h4{font-size: 2rem; line-height: 3rem; font-weight: 400; color: #000; text-transform: uppercase; margin-bottom: .6rem;}
.authors-ul{display: flex;}
.authors-ul li{list-style: none; font-size: 1.6rem;  line-height: 1.6rem; font-weight: 400; color: #000; border-right: 2px solid #000; padding: 0 2rem; }
.authors-ul li:first-child{padding-left: 0;}
.authors-ul li:last-child{border-right: 0;}
.fluid-right p{font-size: 1.6rem; line-height: 2.6rem; font-weight: 400; font-style: italic; color: #000; margin-bottom: 2rem; position: relative; margin-left: -112px}
.fluid-right p:after{content: ''; width: 85%;  height: 1px; background: #000; position: absolute; right: 2px; bottom: 0;}
.fluid-right img{width: 100%; margin-top: 2rem; max-width: 136px;}
.citation-sec{background: #e9e9e9; padding: 4rem 5.5rem; margin-top: 2rem; border-radius: 4px;}
.citation-sec h4{font-size: 2rem; line-height: 3rem; font-weight: 400; color: #000; text-transform: uppercase; margin-bottom: .6rem; font-style: italic;}
.citation-sec p{font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-style: italic; color: #000;}
.keywords-sec{padding: 5rem 0; border-bottom: 1px solid;}
.keywords-sec h4{font-size: 2rem; line-height: 3rem; font-weight: 400; color: #000; text-transform: uppercase; margin-bottom: .6rem;}
.keywords-sec p{font-size: 1.6rem; line-height: 2.6rem; font-weight: 300; color: #000; margin-bottom: 2rem; text-align: justify; }
.pdf-btn{display: flex;justify-content: end; margin-top: 6rem;}
.pdf-btn a{background: #302e9b; color: #fff; padding: 1rem 2.5rem; font-size: 1.6rem; font-weight: 400; text-decoration: none; border-radius: 5px; display: flex; align-items: center;}
.pdf-btn a img{margin-right: 1rem;}
.pdf-btn a:hover{background: #002060; transition: ease-in-out .5s;}
.keywords-bottom{padding-top: 4.5rem;}
.keywords-bottom p{font-size: 1.6rem; line-height: 2.6rem; font-weight: 300; color: #000; margin-bottom: .6rem; text-align: justify;}
.keywords-bottom p a{color: #000;}
footer{background: #002060; padding: 3rem 0;  text-align: center;}
footer p{font-size: 1.6rem; line-height: 2.6rem; font-weight: 300; color: #fff;}
.role-sec{background: url(../images/role-bg.jpg) no-repeat; padding: 6rem 0 0;}
.fluid-left .threeline{font-size: 2.7rem; text-transform: uppercase; margin: 0 0 2rem;}
.effect-sec{background: url(../images/effect-bg.jpg) no-repeat; padding: 6rem 0 0;}
.aproba-sec{background: url(../images/aproba-bg.jpg) no-repeat; padding: 6rem 0 0;}
.fluid-left .twoline{font-size: 2.7rem; text-transform: uppercase;}
.tribometer{background: url(../images/tribometer-bg.jpg) no-repeat; padding: 6rem 0 0;}
.grease-sec{background: url(../images/grease-bg.jpg) no-repeat; padding: 6rem 0 0;}
.bearing-sec{background: url(../images/bearing-bg.jpg) no-repeat; padding: 6rem 0 0;}
.analytical-sec{background: url(../images/analytical-bg.jpg) no-repeat; padding: 6rem 0 0;}
.additive-sec{background: url(../images/additive-bg.jpg) no-repeat; padding: 6rem 0 0;}
/*media Queries*/

@media (max-width: 768px) {
html{font-size: 50%;}	
.fluid-body {padding: 3rem 3rem;}
.authors-ul li{padding: 0 1rem;}
.fluid-right p{margin-left: -80px;}
}

@media (max-width: 650px) {
 .fluid-right p { margin-left: -102px; }

}


@media (max-width: 550px) {
.fluidtop-cont{ flex-direction: column-reverse; }
.fluid-left p{margin-bottom: 1rem;}
.fluid-right {width: 50%; padding-left: 0; margin-bottom: 2rem;}
.fluid-left h1{margin: 0rem 0 1rem; font-size: 2.4rem; line-height: 3.4rem;}
.fluid-left .threeline, .fluid-left .twoline{font-size: 2.4rem; line-height: 3.4rem; margin: 0 0 1rem;}
.fluid-left {width: 100%;}
.citation-sec{padding: 2rem;}
.keywords-sec{padding: 3rem 0;}
.keywords-bottom {padding-top: 2rem;}
.pdf-btn{margin-top: 2.5rem;}
.pdf-btn a img{width: 20px;}
footer{padding: 1rem 0;}
.fluid-right p { margin: 0 4rem 1rem 0}

}

@media (max-width: 480px) {
.authors-ul {display: flex; flex-wrap: wrap; flex-direction: row;}
.authors-ul li {padding: 0; border-right: 0; padding-bottom: 1rem; width: 50%;}
.fluid-right { width: 56%;}
}

@media (max-width: 450px) {
.topbar-text h3 {font-size: 2rem; line-height: 3rem;}
.fluid-left h1 {font-size: 2rem; line-height: 3rem;}
.topbar-text h4 {font-size: 1.6rem; line-height: 2.6rem;}
.keywords-bottom p{text-align: left;}
.fluid-body { background: #fff;  padding: 3rem 1.5rem;  }
 .fluid-right {  width: 100%; }
 .fluid-right p { margin: 0 21rem 1rem 0}
}
@media (max-width: 380px) {
.fluid-right p { margin: 0 16rem 1rem 0; }
}

@media (max-width: 360px) {
.fluid-right p { margin: 0 14rem 1rem 0; }
}

@media (max-width: 320px) {
.fluid-right p { margin: 0 8rem 1rem 0; }
}