@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,100..700;1,100..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{ font-size: 14px; overflow-x: hidden;  color: var(--font-colour); background: var(--bg-white); font-family: "Poppins", sans-serif;
line-height: 26px;}
a, a:link, a:visited, a:hover, a:active, button, button:hover, i, i:hover, h6, h6:hover, :hover, img{ text-decoration:none; outline:none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
img{ max-width:100%;} input, textarea, button, input:focus, textarea:focus, button:focus, select:focus{outline: none;}
a, a:hover, a:focus{color:inherit;}
p:last-child{margin-bottom: 0px;}
html { scroll-behavior: smooth;}
header{ padding: 20px 0px; color: var(--white); }
.navbar-expand-lg .navbar-collapse{justify-content: end;}
h1, h2, h3{  font-family: "Josefin Slab", serif;}
.banner, .inner-bgm{background: url(../images/bgm.png); background-size: 100%; padding: 100px 0px 70px; color: var(--white); position: relative;
height: 100vh; background-repeat: no-repeat;}
.inner-bgm{height: 340px;}
.banner-img{max-width: 500px; width: 100%;}
.banner-content h1{font-size: 48px; margin-bottom: 20px;}
.banner-content p{font-size: 16px; margin-bottom: 20px;}
.download-app{display: flex; gap: 15px; align-items: center; margin-bottom: 10px;}
.download-app img{max-width: 160px;}
.banner-content h6{font-weight: 300;;}
.shape1{position: absolute; bottom: -2px; width: 100%;}
.about{padding-top: 80px;}
.about h5{margin-bottom: 20px; line-height: 30px;}
.about h4{font-weight: 900; margin-bottom: 20px; font-size: 22px;}
.btn-primary{ width: 180px; height: 50px; border-radius: 30px; background: var(--gradiant); font-size: 16px; border: none;
color: var(--white);}
.about img{max-width: 400px; width: 100%;}
.features{padding: 80px 0px;}
.features img{max-width: 500px;}
h2{font-size: 32px; font-weight: bold; color: var(--primary); margin-bottom: 40px;}
.features h3{font-size: 20px; font-weight: 700; color: var(--secondary); margin-bottom: 12px;}
.why-choose{display: flex; align-items: center; gap: 20px; margin-bottom: 40px;}
.why-img{width: 80px; height: 80px; display: flex; align-items: center; background: var(--gradiant); justify-content: center;
border-radius: 50%;}
.work{background: var(--gradiant); padding: 80px 0px; color: var(--white);}
.work h2{color: var(--white);}
.work-box{text-align: center;}
.work-box img{margin-bottom: 20px;}
.work-box h5{margin-bottom: 10px;}
.feedback{padding: 80px 0px;}
.feedback-box{position: relative; border: 1px solid var(--secondary); border-radius: 10px; padding: 15px; width: calc(95%/4);}
.feedback-content{display: flex; align-items: center; gap: 15px;}
.feedback-img img{width: 36px; height: 36px; object-fit: cover; border-radius: 50%; border: 1px solid var(--secondary);}
.feedback-name h6{font-weight: 700;}
.feedback-box p{min-height: 78px;}
.feedback-name p{min-height: auto;}
.feedback-flex{display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;}
.line-1{background: var(--gradiant); width: 100%; height: 2px; margin-bottom: 50px;}
.footer-contact img{max-height: 27px;}
footer{padding-bottom: 30px;}
.footer-contact img{margin-bottom: 20px;}
.footer-contact ul{margin-top: 20px; display: flex; gap: 15px;}
.footer-contact ul i{font-size: 18px; color: var(--primary);}
.footer-contact ul i:hover{color: var(--secondary);}
.footer-download{text-align: right;}
.footer-download h5{font-weight: 600; margin-bottom: 15px;}
.footer-download .download-app{justify-content: end;}
.copy-right{text-align: center;}
.inner-bgm h1{font-size: 40px; padding-top: 40px;}
.author-img{width: 100%; max-width: 500px; text-align: center; margin: 0 auto; position: sticky; top: 100px;}
.author-img img{border-radius: 10px;}
.author{padding: 80px 0px;}
.author-details h2{ margin-bottom: 10px;}
.author-details h6{font-size: 16px;}
.author-details-box{margin-top: 20px; border-bottom: 1px solid var(--brd-colour); padding-bottom: 20px;}
.author-details-box h5{font-size: 16px; color: var(--secondary); margin-bottom: 10px;}
.author-details-box ul li{position: relative; font-weight: 700; line-height: 32px; padding-left: 42px; margin-bottom: 20px;}
.author-details-box ul li i{width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--primary);
border-radius: 50%; color: var(--white); font-weight: 700; font-style: normal; position: absolute; left: 0px; top: 0px;}
.author-details-box ul li:last-child{margin-bottom: 0px;}
.library-flex{display: flex; flex-wrap: wrap; gap: 30px; justify-content: center;}
.library-item{ position: relative; border: 1px solid var(--brd-colour); border-radius: 10px; width: calc(92%/4); overflow: hidden;}
.library{padding: 80px 0px;}
.library-content{padding: 15px; text-align: center;}
.library-content h5{font-size: 16px; margin-bottom: 15px;}
.library-content .btn{display: flex; align-items: center; gap: 6px; justify-content: center; background: none; border: 1px solid var(--primary);
border-radius: 30px; color: var(--primary); width: 100%; max-width: 180px; color: var(--primary); height: 50px; margin: 0 auto;}
.library-content .btn img{max-width: 30px;}
.library-content .btn:hover{background: var(--gradiant); color: var(--white); border: none;}