/*
|--------------------------------------------------------------------------
| MAS Dashboard Custom CSS
|--------------------------------------------------------------------------
| Externalized from Dashboard > Custom CSS.
| After this file is loaded and tested, manually clear Dashboard Custom CSS
| to avoid duplicate inline CSS output.
*/

body {
background: #000;
}
.post-body h1,
.post-body h2, 
.post-body h3, 
.post-body h4,
.post-body p,
.post-body li,
.post-body td,
.post-body th,
.post-body span,
.post-body a {
color: white;
text-align:left;
}
.post-body table,
.post-body th,
.post-body td {
border: 1px solid white;
color: white;
border-collapse: collapse;
}
.post-body a:hover {
color: #00bfff; /* Optional: change on hover */
}
.doc-sec-icon {
position: relative;
display: inline-block;
padding: 0;
margin: 0 auto;
color: #ff1783; /* pink accent */
}
.doc-sec-icon::before {
content: "";
position: absolute;
height: 1px;
left: -70px;
margin-top: -5.5px;
top: 60%;
background: red;
width: 50px;
}
.doc-sec-icon::after {
content: "";
position: absolute;
height: 1px;
right: -70px;
margin-top: -5.5px;
top: 60%;
background: white;
width: 50px;
}
.doc-advertisers-service-sec {
background-color: black;
padding-top: 3rem;
padding-bottom: 3rem;
}
.doc-advertisers-service-sec span {
color: rgb(255, 23, 131);
}
.doc-advertisers-service-sec .section-header h2 {
font-weight: 700;
font-size: 2.5rem;
color: #FFFFFF;
margin-bottom: 0.5rem;
}
.doc-advertisers-service-sec .doc-col {
padding: 0 1em 1em 1em;
text-align: center;
}
.doc-advertisers-service-sec .doc-service-card
{
width: 100%;
height: 100%;
border-radius: 5px;
box-shadow: 0 0 35px rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: 0.5s;
position: relative;
padding: 2em 1.5em;
z-index: 2;
overflow: hidden;
background: #1C1C1C;
color: white;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
.doc-advertisers-service-sec .doc-service-card::after {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(rgb(0 0 0), #f00d8d6b);
position: absolute;
left: 0%;
top: -98%;
z-index: -2;
transition: all 0.4s cubic-bezier(0.77, -0.04, 0, 0.99);
border-radius: 5px;
}
.doc-advertisers-service-sec h3 {
font-size: 20px;
text-transform: capitalize;
font-weight: 600;
color: #FFFFFF;
margin: 1em 0;
z-index: 3;
}
.doc-advertisers-service-sec p {
color: #FFFFFF;
font-size: 15px;
line-height: 1.6;
letter-spacing: 0.03em;
z-index: 3;
flex-grow: 1;
}
/* Icon wrapper styling */
.doc-advertisers-service-sec .doc-icon-wrapper {
color:#2C7BFE;
position: relative;
margin: auto 0 1rem;
height: 2.5em;
width: 2.5em;
border-radius: 50%;
display: flex;
justify-content: center;
transition: 0.5s;
z-index: 3;
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 1.5rem;
color: white;
flex-direction: row;
align-items: center;
}
/* Apply icons via CSS */
.doc-icon-wrapper::before {
display: block;
position: static;
}
/* Individual icons by nth-child */
.doc-row > .doc-col:nth-child(1) .doc-icon-wrapper::before {
content: "\\f121"; /* fa-code */
}
.doc-row > .doc-col:nth-child(2) .doc-icon-wrapper::before {
content: "\\f07a"; /* fa-shopping-cart */
}
.doc-row > .doc-col:nth-child(3) .doc-icon-wrapper::before {
content: "\\f19a"; /* fa-wordpress */
font-family: "Font Awesome 6 Brands";
font-weight: 400;
}
.doc-row > .doc-col:nth-child(4) .doc-icon-wrapper::before {
content: "\\f5fd"; /* fa-layer-group */
}
.doc-row > .doc-col:nth-child(5) .doc-icon-wrapper::before {
content: "\\f233"; /* fa-server */
}
.doc-row > .doc-col:nth-child(6) .doc-icon-wrapper::before {
content: "\\f7d9"; /* fa-tools */
}
/* Hover Effects */
.doc-advertisers-service-sec .doc-service-card:hover:after {
top: 0%;
}
.doc-advertisers-service-sec .doc-service-card:hover .doc-icon-wrapper {
color: #0dcaf0;
}
.doc-advertisers-service-sec .doc-service-card:hover p {
color: #f0f0f0;
}
/* Responsive Grid */
.doc-row {
display: flex;
flex-wrap: wrap;
margin-right: -1em;
margin-left: -1em;
justify-content: center;
}
.doc-col {
padding-right: 1em;
padding-left: 1em;
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 1.5rem;
}
@media (min-width: 576px) {
.row-cols-sm-1 > .doc-col {
flex: 0 0 100%;
max-width: 100%;
}
}
@media (min-width: 768px) {
.row-cols-md-3 > .doc-col {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
}
.doc-advertisers-service-sec span {
color: #ff1783; /* Pink accent for 'Services' */
}