/* EXTENDED TEMPLATE CSS STYLES */
/*GLOBALS*/
/*FONTS*/
/*Import Playfair fonts from Google Fonts*/@import url('https://fonts.googleapis.com/css2?family=Playfair:wght@300&family=Poppins:wght@700&display=swap');
/*BODY*/
/*Apply Playfair to the body so it's being used everywhere*/
body {  font-family: 'Playfair', sans-serif!important;}
/*Apply Playfair to all headings*/
h1, h2, h3, h4, h5, h6 {  font-family: 'Playfair', sans-serif!important;  font-weight: 700!important;  letter-spacing: -1px!important;}
/* Some page titles aren't using an HTML heading tag so we'll apply the Playfair font to them by targeting the class selector */
.desc-heading {  font-family: 'Playfair', sans-serif!important;  font-weight: 700!important;  letter-spacing: -1px!important;}
/*Change background colour to white everywhere*/body {  background-color: #ffffff;}
/*BUTTONS*//*Add rounded border to all buttons and remove shadow*/
.btn {  border-radius: 30px!important;  box-shadow: none!important;}
/*Remove button shadows*/.btn {  box-shadow: none!important;}
/*NAVIGATION*//*Remove sticky effect. Remove bottom border. Make it full width. Add padding to line up with main content padding. Add top border.*/.nav-bar {  position: relative!important;  border-bottom: 0!important;  padding: 0 15px!important;  width: 100%!important;  border-top: 10px solid #f5cf1b!important;  height: 120px!important;}
/*Remove menu text dividers*/.nav-bar__item {  border-right: 0!important;}
.nav-bar__dropdown {  border-right: 0!important;}
.nav-bar__item--left-border {  border-left: 0!important;}
/*Remove all icons from menu except the cog*/I.fad.fa-home-lg-alt.text-primary.xs-mr-5, i.fad.fa-bullseye-pointer.text-info.xs-mr-5, i.fad.fa-tasks.text-success.xs-mr-5, i.fad.fa-store.text-gmb.xs-mr-5, i.fad.fa-link.text-danger.xs-mr-5, i.fad.fa-analytics.text-primary.xs-mr-5, i.fas.fa-graduation-cap, i.fad.fa-browser.text-primary.xs-mr-5, i.fad.fa-users.text-danger.xs-mr-5 {  display:none!important;}
/*Apply Playfair font to menu links*/.nav-bar__item, .nav-bar__dropdown .dropbtn {font-family: ‘Playfair’, sans-serif!important;font-weight: 700!important;font-size: 16px!important;}
/*Make dropdown menus background same colour as the menu hover colour and remove shadow*/
.dropdown-content {  background-color: #f7faff!important;  box-shadow: none;  border: 0!important;}
.dropdown-content a:hover {  background-color: #e6ecf5!important;}
/*Remove icons from dropdown*/
.nav-bar__dropdown ul li i {  display: none!important;}
/*PAGE CONTENT*/
/*Fix excess padding*/.main-content {padding: 15px!important;}
/*Make subheadings seen above and outside cards use Poppins and add underline*/
h3.font-size-24 {  font-family: 'Playfair', sans-serif!important;  font-weight: 700!important;  letter-spacing: -1px!important;  font-size: 35px!important;  border-bottom: 8px solid #f5cf1b;  margin-bottom: 30px;  line-height: 1.3;  width: fit-content;}
/*Apply smooth shadow on outermost cards*/.card-body.xs-mb-0 {  border-radius: 30px!important;  box-shadow:  0 0px 8.4px rgba(0, 0, 0, 0.003),  0 0px 20.2px rgba(0, 0, 0, 0.004),  0 0px 38.1px rgba(0, 0, 0, 0.005),  0 0px 67.9px rgba(0, 0, 0, 0.006),  0 0px 127px rgba(0, 0, 0, 0.007),  0 0px 304px rgba(0, 0, 0, 0.01);}
/*Remove shadow on the inner cards, add thinner light border and a soft background colour*/.card.card-bordered.xs-mb-0.xs-mt-5, .card.card-bordered {  box-shadow: none!important;  border: 1px solid #e6ecf5!important;  background-color: #f7faff!important;}
/*Add custom padding to all cards*/.card-body {  padding: 30px!important;}
/*Make cards have rounded border radius*/.card {  border-radius: 30px!important;}
/*Make titles of each card use Open Sans and in uppercase*/
h5.font-size-20 {  font-family: 'Playfair', sans-serif!important;  font-weight: 300!important;  text-transform: uppercase!important;  font-size: 15px!important;  margin-bottom: 15px!important;}
/* Add bottom margin to cards */
.xs-mb-10 {  margin-bottom: 30px!important;}
/*Make the action info boxes borders rounded like the cards*/
div.action.action-high {  padding: 30px!important;  border-radius: 30px!important;}
/*Make the action borders the same as the inner card borders and not red*/
.action-high {  border: 1px solid #e6ecf5!important;  background-color: #f7faff!important;}
/*Vertically align progress bars by removing bottom margin and make it rounded*/
.progress {  border-radius: 30px!important;  margin-bottom: 0!important;}
/*Make all labels and tags have a rounded border*/
.label, .tag {  border-radius: 30px!important;}
/*PAGE-SPECIFIC OVERRIDES*/
/*DASHBOARD PAGE*/
/*Welcome name*/
h4.font-size-28.xs-mb-5 {  letter-spacing: -1px!important;  font-size: 45px!important;}
/*Make the keywords ideas button rounded and more like the other buttons*/.keyword-ideas-button {  border-radius: 30px!important;  width: 100%!important;  text-align: center!important;  margin-top: 20px!important;  padding: 10px 15px!important;  margin-left: 0px!important;  font-weight: bold!important;}
/*Add rounded border radius and background colour to keyword ideas card*/
div.keywords {  padding: 30px!important;  border-radius: 30px!important;  background-color: #f7faff!important;}
About the author