/* --------------------------------------------- Table of contents ------------------------------------------------ 01. font & reset css 02. reset 03. global styles 04. header 05. banner --------------------------------------------- */ /* --------------------------------------------- font & reset css --------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900"); /* --------------------------------------------- reset --------------------------------------------- */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, div a, font, img, center, header, nav{ margin: 0; padding: 0; border: 0; outline: 0; } a { color: #ec7090; text-decoration: none !important; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; margin-bottom: 0px; color: #fff; font-weight: 700; } img { width: 100%; overflow: hidden; } /* --------------------------------------------- Global Styles --------------------------------------------- */ html, body { background: #141414; font-family: 'Poppins', sans-serif; } body .page-content { margin-top: 110px; background-color: #27292a; padding: 60px; border-radius: 23px; } .main-button a { font-size: 14px; color: #fff; background-color: #e75e8d; padding: 12px 30px; display: inline-block; border-radius: 25px; font-weight: 400; text-transform: capitalize; letter-spacing: 0.5px; transition: all .3s; position: relative; overflow: hidden; } .main-button a:hover { background-color: #fff; color: #e75e8d; } .main-border-button a { font-size: 14px; color: #ec6090; background-color: transparent; border: 1px solid #ec6090; padding: 12px 30px; display: inline-block; border-radius: 25px; font-weight: 400; text-transform: capitalize; letter-spacing: 0.5px; transition: all .3s; position: relative; overflow: hidden; } .main-border-button a:hover { border-color: #fff; background-color: #fff; color: #e75e8d; } /* --------------------------------------------- Banner Style --------------------------------------------- */ .main-banner { background-image: url(../images/banner-pic.jpg); background-position: center center; background-size: cover; min-height: 380px; border-radius: 23px; padding: 80px 60px; box-shadow: 0 0 10px rgba(140, 20, 252, 1); } .main-banner h6 { font-size: 20px; color: #fff; font-weight: 400; margin-bottom: 25px; } .main-banner h4 { font-size: 45px; text-transform: uppercase; margin-bottom: 25px; } .main-banner h4 em { font-style: normal; color: #ec6090; } /* --------------------------------------------- Popular Style --------------------------------------------- */ .most-popular { margin-top: 60px; padding: 30px; background-color: #1f2122; border-radius: 23px; box-shadow: 0 0 10px rgba(140, 20, 252, 0.5); } .most-popular .item { background-color: #27292a; padding: 30px 15px; border-radius: 23px; margin-bottom: 30px; } .most-popular .item .item { padding: 0px; border-radius: 0px; background-color: transparent; margin-bottom: 0px; } .most-popular .item img { border-radius: 23px; } .most-popular .item h4 { font-size: 15px; margin-top: 20px; margin-bottom: 0px; display: inline-block; } .most-popular .item span { color: #666; display: block; margin-top: 7px; font-weight: 400; } .most-popular .item ul { float: right; margin-top: 20px; } .most-popular .item ul li { text-align: right; color: #fff; font-size: 14px; } .most-popular .item ul li:first-child i { color: yellow; } .most-popular .item ul li:last-child i { color: #ec6090; } .most-popular .main-button { text-align: center; margin-bottom: -53px; } .social-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .social-links a { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 10px; } .social-links a i { font-size: 50px; margin-bottom: 5px; } .social-links a span { font-size: 14px; }