/*
Theme Name: Web Profile v1.1
Theme URI: https://pressmegpt.com
Author: PressMeGPT
Author URI: https://pressmegpt.com
Description: Create a modern, responsive, single-page personal portfolio website for **Faisal Arrahman Pratama**, inspired by the visual style and section layout of the attached reference image. The website should feel modern, clean, friendly, professional, and suitable for a young software developer. ## GENERAL DESIGN Use a soft pastel visual style inspired by the reference: * Warm cream/off-white background * Soft pink accent * Light lavender/purple sections * Dark navy text * Rounded cards * Soft shadows * Modern developer illustrations * Clean spacing * Friendly but professional typography * Small playful decorative elements such as code symbols, stars, dots, or abstract tech illustrations * Smooth scrolling * Subtle hover animations * Subtle entrance animations when scrolling * Fully responsive on desktop, tablet, and mobile Do NOT copy the reference website exactly. Use it only as visual inspiration. Create the website as a **WordPress-compatible responsive portfolio theme/page**. --- # HEADER / NAVIGATION Create a sticky top navigation. Left side: **FA.** **Faisal Arrahman Pratama** Mobile Developer & Full Stack Developer Navigation menu: * Home * About * Experience * Skills * Achievements * Portfolio * Contact Add a highlighted button: **Let's Talk →** The button should scroll to the Contact section. --- # | This theme was generated by PressMeGPT.com - AI WordPress Theme Generator. Free software released under GNU GPLv2 with attribution.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: web-profile
Tags: custom, pressmegpt, ai-generated, custom-logo, custom-menu, custom-colors, light, custom-fonts

This theme was created with PressMeGPT.com - AI WordPress Theme Generator.
Free to use, modify, and distribute under GNU GPLv2 with attribution.
*/

/* Reset and base styles */
*, *::before, *::after {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
}

img {
max-width: 100%;
height: auto;
}

a {
text-decoration: none;
}

/* ===== Header Styles ===== */
.site-header {
padding: 1rem 2rem;
}

.header-inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}

/* Header Layout: Logo Left, Menu Right (default) */
.header-layout-logo-left-menu-right .header-inner {
flex-direction: row;
justify-content: space-between;
}

/* Header Layout: Logo Right, Menu Left */
.header-layout-logo-right-menu-left .header-inner {
flex-direction: row-reverse;
justify-content: space-between;
}

/* Header Layout: Logo Center, Menu Below */
.header-layout-logo-center-menu-below .header-inner {
flex-direction: column;
text-align: center;
}

.header-layout-logo-center-menu-below .site-branding {
margin-bottom: 1rem;
}

/* Header Layout: Logo Center, Menu Split */
.header-layout-logo-center-menu-split .header-inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}

.header-layout-logo-center-menu-split .menu-left {
justify-self: end;
}

.header-layout-logo-center-menu-split .menu-right {
justify-self: start;
}

/* Site Branding */
.site-branding {
display: flex;
align-items: center;
gap: 1rem;
}

.site-branding a {
display: inline-block;
}

.custom-logo {
display: block;
height: auto;
}

.site-title {
margin: 0;
font-size: 1.5rem;
font-weight: 700;
}

.site-title a {
color: inherit;
}

.site-description {
margin: 0.25rem 0 0;
font-size: 0.875rem;
opacity: 0.8;
}

/* Primary Navigation */
.main-navigation {
display: flex;
align-items: center;
}

.main-navigation ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.5rem;
}

.main-navigation li {
position: relative;
}

.main-navigation a {
display: block;
padding: 0.5rem 0;
font-weight: 500;
transition: color 0.2s ease;
}

.main-navigation a:hover {
opacity: 0.7;
}

/* Dropdown menus */
.main-navigation ul ul {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
flex-direction: column;
gap: 0;
background: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
border-radius: 4px;
padding: 0.5rem 0;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}

.main-navigation li:hover > ul {
opacity: 1;
visibility: visible;
}

.main-navigation ul ul a {
padding: 0.5rem 1rem;
color: #333;
}

/* Mobile Menu Toggle */
.menu-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
}

.menu-toggle svg {
width: 24px;
height: 24px;
}

@media (max-width: 768px) {
.menu-toggle {
    display: block;
}

.main-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: inherit;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.main-navigation.toggled {
    display: block;
}

.main-navigation ul {
    flex-direction: column;
    gap: 0.5rem;
}

.main-navigation ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    padding-left: 1rem;
}
}

/* ===== Footer Styles ===== */
.site-footer {
padding: 2rem;
}

.footer-inner {
max-width: 1400px;
margin: 0 auto;
}

/* Footer Layout: Centered */
.footer-layout-centered .footer-inner {
text-align: center;
}

.footer-layout-centered .footer-navigation ul {
justify-content: center;
}

/* Footer Layout: Left Aligned */
.footer-layout-left-aligned .footer-inner {
text-align: left;
}

/* Footer Layout: Split */
.footer-layout-split .footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}

/* Footer Navigation */
.footer-navigation {
margin-bottom: 1rem;
}

.footer-navigation ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 1.5rem;
flex-wrap: wrap;
}

.footer-navigation a {
font-size: 0.875rem;
transition: opacity 0.2s;
}

.footer-navigation a:hover {
opacity: 0.7;
}

/* Footer Menu Position */
.footer-menu-below .footer-navigation {
order: 2;
margin-bottom: 0;
margin-top: 1rem;
}

.footer-menu-below .site-info {
order: 1;
}

/* Footer Widgets */
.footer-widgets {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}

.footer-widgets .widget {
margin-bottom: 0;
}

.footer-widgets .widget-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
}

/* Site Info */
.site-info {
font-size: 0.875rem;
opacity: 0.8;
}

.site-info p {
margin: 0;
}

@media (max-width: 768px) {
.footer-layout-split .footer-inner {
    flex-direction: column;
    text-align: center;
}

.footer-navigation ul {
    justify-content: center;
}
}

/* ===== Widget Styles ===== */
.widget {
margin-bottom: 2rem;
}

.widget-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem;
}

.widget ul {
list-style: none;
padding: 0;
margin: 0;
}

.widget li {
padding: 0.25rem 0;
}

/* ===== Content Styles ===== */
.content-area {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}

.content-area.has-sidebar {
display: grid;
grid-template-columns: 1fr 300px;
gap: 3rem;
align-items: start;
}

@media (max-width: 768px) {
.content-area.has-sidebar {
    grid-template-columns: 1fr;
    gap: 2rem;
}
}

/* PressMeGPT: full-bleed entry header for blog posts (rendered outside .content-area) */
.single .entry-header,
.page .entry-header.full-bleed {
width: 100%;
margin: 0;
}

.primary-content {
min-width: 0;
}

.page-content-wrapper {
max-width: 1200px;
margin: 0 auto;
}

/* PressMeGPT inner pages render full-bleed (sections handle their own width) */
.pressmegpt-page-content,
.pressmegpt-page-content.entry-content {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
line-height: inherit;
}

.page-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid #FF397C;
}

.page-title {
font-size: 2rem;
margin: 0 0 0.5rem;
color: #210A27;
}

.archive-description {
font-size: 1rem;
opacity: 0.7;
}

.entry-header {
margin-bottom: 1.5rem;
}

.entry-title {
font-size: 2rem;
margin: 0 0 0.5rem;
}

.entry-title a {
color: #210A27;
text-decoration: none;
transition: color 0.2s;
}

.entry-title a:hover {
color: #FF397C;
}

.entry-meta {
font-size: 0.875rem;
opacity: 0.7;
margin-bottom: 0.5rem;
}

.entry-content {
margin-bottom: 2rem;
line-height: 1.8;
}

.entry-footer {
font-size: 0.875rem;
padding: 1rem 0;
border-top: 1px solid rgba(0,0,0,0.1);
margin-bottom: 1.5rem;
}

.entry-footer .cat-links,
.entry-footer .tags-links {
display: block;
margin-bottom: 0.25rem;
}

.entry-footer a {
color: #FF397C;
}

.post-thumbnail {
margin-bottom: 1.5rem;
}

.post-thumbnail img {
border-radius: 8px;
width: 100%;
}

/* Post navigation */
.post-navigation,
.posts-navigation {
padding: 1.5rem 0;
border-top: 1px solid rgba(0,0,0,0.1);
margin-top: 1rem;
}

.post-navigation a,
.posts-navigation a,
.nav-links a {
color: #FF397C;
text-decoration: none;
font-weight: 500;
}

.post-navigation a:hover,
.posts-navigation a:hover,
.nav-links a:hover {
text-decoration: underline;
}

.nav-subtitle {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.6;
margin-bottom: 0.25rem;
}

/* ===== Search ===== */
.search-form {
display: flex;
max-width: 500px;
}

.search-form .search-field {
flex: 1;
padding: 10px 16px;
border: 2px solid rgba(0,0,0,0.15);
border-right: none;
border-radius: 6px 0 0 6px;
font-size: 1rem;
outline: none;
}

.search-form .search-field:focus {
border-color: #FF397C;
}

.search-form .search-submit {
padding: 10px 20px;
background: #FF397C;
color: #fff;
border: 2px solid #FF397C;
border-radius: 0 6px 6px 0;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
}

.search-result {
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* ===== Comments ===== */
.comments-area {
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid rgba(0,0,0,0.08);
}

.comments-title {
font-size: 1.5rem;
margin-bottom: 1.5rem;
}

.comment-list {
list-style: none;
padding: 0;
margin: 0;
}

.comment-list li {
padding: 1rem 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
}

.comment-list .comment-author img {
border-radius: 50%;
margin-right: 0.75rem;
vertical-align: middle;
}

.comment-form label {
display: block;
margin-bottom: 0.25rem;
font-weight: 500;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
padding: 10px 14px;
border: 2px solid rgba(0,0,0,0.12);
border-radius: 6px;
font-size: 1rem;
margin-bottom: 1rem;
}

.comment-form textarea {
min-height: 120px;
resize: vertical;
}

.comment-form .submit-button,
.comment-form input[type="submit"] {
background: #FF397C;
color: #fff;
border: none;
padding: 12px 24px;
border-radius: 6px;
cursor: pointer;
font-weight: 600;
font-size: 1rem;
}

/* ===== Sidebar ===== */
.widget-area {
padding: 1.5rem;
background: rgba(0,0,0,0.03);
border-radius: 8px;
}

.widget-area .widget {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(0,0,0,0.08);
}

.widget-area .widget:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}

.widget-area .widget-title {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: #210A27;
}

.widget-area ul {
list-style: none;
padding: 0;
margin: 0;
}

.widget-area li {
padding: 0.35rem 0;
}

.widget-area a {
color: #FF397C;
text-decoration: none;
}

.widget-area a:hover {
text-decoration: underline;
}

/* ===== Utility Classes ===== */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}

.skip-link:focus {
background-color: #f1f1f1;
clip: auto !important;
clip-path: none;
color: #21759b;
display: block;
font-size: 0.875rem;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}

/* Theme Designer Custom Styles */
:root {
 --td-color-primary: #FF397C;
 --td-color-secondary: #210A27;
 --td-color-accent: #B5D97A;
 --td-color-accent-2: #87D5EF;
 --td-color-background: #F7F1F8;
 --td-color-text: #4B4254;
 --td-color-heading: #210A27;
 --td-color-header-bg: #FFFFFF;
 --td-color-header-text: #4B4254;
 --td-color-footer-bg: #210A27;
 --td-color-footer-text: #F7F1F8;
 --td-font-heading: 'Montserrat', sans-serif;
 --td-font-body: 'Montserrat', sans-serif;
 --td-font-script: 'Montserrat', sans-serif;
 --td-spacing-section: 96px;
 --td-spacing-container: 1200px;
 --td-radius-card: 12px;
 --td-gap-grid: 30px;
}
body {
 font-family: var(--td-font-body);
 color: var(--td-color-text);
 background-color: var(--td-color-background);
 margin: 0;
 line-height: 1.6;
}
.fse-container {
 max-width: var(--td-spacing-container);
 margin: 0 auto;
 padding: 0 20px;
}
.fse-section {
 padding: var(--td-spacing-section) 0;
 position: relative;
 overflow: hidden;
}
.fse-section.fse-copy-preserve {
}
h1.fse-heading, h2.fse-heading, h3.fse-heading, h4.fse-heading, h5.fse-heading, h6.fse-heading {
 font-family: var(--td-font-heading);
 color: var(--td-color-heading);
 line-height: 1.2;
 margin-top: 0;
}
h1.fse-heading {
 font-size: 3.5em;
 font-weight: 700;
}
h2.fse-heading {
 font-size: 2.5em;
 font-weight: 700;
}
h3.fse-heading {
 font-size: 1.5em;
 font-weight: 600;
}
.fse-paragraph {
 font-size: 1.1em;
 margin-bottom: 1em;
}
.fse-image {
 max-width: 100%;
 height: auto;
 display: block;
}
.fse-group {
 display: block;
}
.fse-columns {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: var(--td-gap-grid);
}
.fse-button {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 14px 28px;
 border-radius: 50px;
 text-decoration: none;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.3s ease;
 font-size: 1em;
}
.fse-button i {
 margin-left: 8px;
 margin-right: -4px;
 font-size: 0.9em;
}
.fse-button:hover {
 filter: brightness(1.08);
 text-decoration: none;
}
.fse-button-primary {
 background-color: var(--td-color-primary);
 color: var(--td-color-footer-text);
 border: 2px solid var(--td-color-primary);
 box-shadow: 0 8px 15px rgba(255, 57, 124, 0.2);
}
.fse-button-outline {
 background-color: transparent;
 color: var(--td-color-heading);
 border: 2px solid var(--td-color-heading);
 box-shadow: none;
}
.fse-button-outline:hover {
 background-color: var(--td-color-heading);
 color: var(--td-color-background);
}
.fse-header {
 background-color: var(--td-color-header-bg);
 padding: 20px 0;
 border-bottom: 1px solid rgba(0,0,0,0.05);
}
.fse-header-content {
 display: flex;
 justify-content: space-between;
 align-items: center;
 max-width: var(--td-spacing-container);
 margin: 0 auto;
 padding: 0 20px;
}
.fse-logo-group {
 display: flex;
 align-items: center;
 flex-direction: column;
 align-items: flex-start;
}
.fse-logo-group h3 {
 font-size: 1.8em;
 margin: 0;
 color: var(--td-color-heading);
}
.fse-logo-group p {
 font-size: 0.95em;
 margin: 0;
 color: var(--td-color-text);
}
.fse-logo {
 margin-right: 10px;
 border-radius: 50%;
}
.fse-logo-text h3 {
 font-size: 1.2em;
 margin: 0;
 color: var(--td-color-heading);
}
.fse-logo-text p {
 font-size: 0.85em;
 margin: 0;
 color: var(--td-color-text);
}
.fse-primary-nav {
 display: flex;
 gap: 30px;
}
.fse-nav-link {
 background: none;
 border: none;
 padding: 8px 0;
 color: var(--td-color-text);
 font-weight: 500;
 position: relative;
 border-radius: 0;
 box-shadow: none;
}
.fse-nav-link:hover {
 color: var(--td-color-primary);
 filter: none;
}
.fse-nav-link.active::after, .fse-nav-link:hover::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0;
 width: 100%;
 height: 2px;
 background-color: var(--td-color-primary);
}
.fse-header-cta {
 padding: 10px 20px;
 font-size: 0.9em;
}
.fse-hero {
 padding: 120px 0;
 background-color: #F8F0F8; 
}
.fse-background-wave-pink {
 background-image: url('https://placehold.co/1920x600/F8F0F8/F7F1F8?text=Pink+Wave+Background'); 
 background-size: cover;
 background-position: center bottom;
 background-repeat: no-repeat;
}
.fse-hero-content {
 align-items: center;
 display: block;
}
.fse-hero-left {
 padding-right: 0px;
}
.fse-hero-greeting {
 font-size: 1.1em;
 color: var(--td-color-text);
 font-weight: 500;
 margin-bottom: 10px;
}
.fse-hero-heading {
 font-size: 3.8em;
 font-weight: 700;
 margin-bottom: 20px;
}
.fse-hero-heading .fse-accent-text {
 color: var(--td-color-primary);
}
.fse-hero-description {
 font-size: 1.1em;
 margin-bottom: 40px;
}
.fse-hero-ctas {
 display: flex;
 gap: 20px;
 margin-bottom: 40px;
}
.fse-social-links {
 display: flex;
 align-items: center;
 gap: 15px;
 flex-wrap: wrap;
}
.fse-social-links .fse-paragraph {
 font-weight: 600;
 margin: 0;
 font-size: 1em;
}
.fse-social-icon {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: #ECE7EB; 
 color: var(--td-color-text);
 font-size: 1.1em;
 padding: 0;
 border: none;
 box-shadow: none;
}
.fse-social-icon:hover {
 background-color: var(--td-color-primary);
 color: var(--td-color-footer-text);
 filter: none;
}
.fse-hero-illustration {
 max-width: 100%;
}
.fse-about-me {
 background-color: var(--td-color-background);
 padding: var(--td-spacing-section) 0;
}
.fse-about-content {
 align-items: center;
}
.fse-about-left {
 padding-right: 40px;
}
.fse-about-illustration {
 max-width: 100%;
}
.fse-subheading {
 font-size: 0.9em;
 font-weight: 600;
 color: var(--td-color-primary);
 margin-bottom: 10px;
 text-transform: uppercase;
}
.fse-about-heading {
 margin-bottom: 20px;
 color: var(--td-color-heading);
}
.fse-about-description {
 margin-bottom: 40px;
}
.fse-stats-grid {
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 margin-top: 40px;
}
.fse-stat-card {
 text-align: center;
 padding: 20px 10px;
}
.fse-stat-icon-wrapper {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 0 auto 15px;
}
.fse-stat-icon {
 font-size: 1.8em;
}
.fse-stat-number {
 font-size: 1.8em;
 font-weight: 700;
 color: var(--td-color-heading);
 margin: 0 0 5px;
}
.fse-stat-label {
 font-size: 0.9em;
 color: var(--td-color-text);
 margin: 0;
}
.fse-services {
 background-color: #F1EFFE; 
 padding: var(--td-spacing-section) 0;
}
.fse-services-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 60px;
}
.fse-services-heading {
 margin: 0;
 flex-basis: 50%;
 color: var(--td-color-heading);
}
.fse-services-heading .fse-accent-star {
 color: var(--td-color-primary);
 font-size: 0.8em; 
 vertical-align: top;
 margin-left: 5px;
}
.fse-services-intro {
 margin: 0;
 flex-basis: 45%;
 font-size: 1.1em;
}
.fse-services-grid {
 grid-template-columns: repeat(4, 1fr);
 gap: var(--td-gap-grid);
}
.fse-service-card {
 background-color: var(--td-color-header-bg);
 padding: 30px;
 border-radius: var(--td-radius-card);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fse-service-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.fse-service-icon-wrapper {
 width: 70px;
 height: 70px;
 border-radius: var(--td-radius-card);
 display: flex;
 align-items: center;
 justify-content: center;
 margin-bottom: 20px;
}
.fse-service-icon {
 font-size: 2em;
}
.fse-service-card h3 {
 margin-bottom: 15px;
 color: var(--td-color-heading);
}
.fse-service-card .fse-paragraph {
 font-size: 0.95em;
 margin-bottom: 20px;
}
.fse-read-more {
 background: none;
 border: none;
 padding: 0;
 color: var(--td-color-primary);
 font-weight: 600;
 font-size: 0.95em;
 box-shadow: none;
 border-radius: 0;
 justify-content: flex-start;
}
.fse-read-more:hover {
 text-decoration: underline;
 filter: none;
}
.fse-portfolio {
 background-color: var(--td-color-background);
 padding: var(--td-spacing-section) 0;
}
.fse-portfolio-header {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 margin-bottom: 60px;
}
.fse-portfolio-heading {
 margin: 0;
 flex-basis: 50%;
 color: var(--td-color-heading);
}
.fse-portfolio-intro {
 margin: 0;
 flex-basis: 45%;
 font-size: 1.1em;
}
.fse-portfolio-grid {
 grid-template-columns: repeat(4, 1fr);
 gap: var(--td-gap-grid);
 margin-bottom: 40px;
}
.fse-project-card {
 background-color: var(--td-color-header-bg);
 padding: 20px;
 border-radius: var(--td-radius-card);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
 transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fse-project-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.fse-project-image {
 border-radius: 8px;
 margin-bottom: 15px;
}
.fse-project-category {
 font-size: 0.85em;
 color: var(--td-color-primary);
 font-weight: 600;
 margin-bottom: 5px;
}
.fse-project-card h3 {
 margin-bottom: 10px;
 color: var(--td-color-heading);
}
.fse-project-card .fse-paragraph {
 font-size: 0.9em;
 margin-bottom: 20px;
 min-height: 50px; 
}
.fse-view-case-study {
 background: none;
 border: none;
 padding: 0;
 color: var(--td-color-heading);
 font-weight: 600;
 font-size: 0.9em;
 box-shadow: none;
 border-radius: 0;
 justify-content: flex-start;
}
.fse-view-case-study:hover {
 color: var(--td-color-primary);
 filter: none;
}
.fse-button-wrapper {
 text-align: center;
}
.fse-see-all-projects {
 padding: 12px 30px;
}
.fse-cta-banner {
 padding: 100px 0;
 background-color: #F8F0F8; 
}
.fse-cta-content {
 align-items: center;
}
.fse-cta-left {
 padding-right: 40px;
}
.fse-cta-heading {
 font-size: 2.8em;
 color: var(--td-color-heading);
 margin-bottom: 30px;
}
.fse-cta-heading .fse-accent-text {
 color: var(--td-color-primary);
}
.fse-cta-button {
 padding: 14px 30px;
 font-size: 1.1em;
}
.fse-cta-illustration {
 max-width: 100%;
}
.fse-footer {
 background-color: var(--td-color-footer-bg);
 color: var(--td-color-footer-text);
 padding: 80px 0 40px;
}
.fse-footer .fse-logo-text h3, .fse-footer .fse-logo-text p {
 color: var(--td-color-footer-text);
}
.fse-footer-columns {
 grid-template-columns: repeat(4, 1fr);
 gap: var(--td-gap-grid);
 margin-bottom: 60px;
}
.fse-footer-about .fse-paragraph {
 font-size: 0.95em;
 margin-top: 15px;
 color: var(--td-color-footer-text);
}
.fse-footer-columns h3 {
 color: var(--td-color-primary);
 margin-bottom: 25px;
 font-size: 1.3em;
}
.fse-footer-links a, .fse-footer-services p, .fse-footer-contact .fse-paragraph, .fse-footer-social .fse-paragraph {
 display: block;
 color: var(--td-color-footer-text);
 text-decoration: none;
 margin-bottom: 12px;
 font-size: 0.95em;
 transition: color 0.3s ease;
}
.fse-footer-links a:hover {
 color: var(--td-color-accent-2);
}
.fse-contact-item, .fse-tech-stack-item {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 12px;
}
.fse-contact-item .fse-contact-icon, .fse-tech-stack-item .fse-tech-stack-icon {
 color: var(--td-color-accent);
 font-size: 1.1em;
}
.fse-tech-stack-heading {
 margin-top: 30px;
}
.fse-footer-bottom {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding-top: 30px;
 border-top: 1px solid rgba(255, 255, 255, 0.1);
 max-width: var(--td-spacing-container);
 margin: 0 auto;
 padding-left: 20px;
 padding-right: 20px;
}
.fse-footer-bottom .fse-paragraph {
 margin: 0;
 font-size: 0.9em;
 color: var(--td-color-footer-text);
}
.fse-footer-bottom .fse-social-icons {
 display: flex;
 gap: 15px;
}
.fse-footer-bottom .fse-social-icon {
 background-color: rgba(255, 255, 255, 0.1);
 color: var(--td-color-footer-text);
 font-size: 1em;
 width: 36px;
 height: 36px;
 padding: 0;
 border: none;
 box-shadow: none;
}
.fse-footer-bottom .fse-social-icon:hover {
 background-color: var(--td-color-primary);
 filter: none;
}
@media (max-width: 1024px) {
 .fse-hero-heading {
 font-size: 3em;
 }
 .fse-header-content {
 gap: 20px;
 }
 .fse-primary-nav {
 gap: 20px;
 }
 .fse-services-grid,
 .fse-portfolio-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .fse-stats-grid {
 grid-template-columns: repeat(2, 1fr);
 }
 .fse-cta-heading {
 font-size: 2.2em;
 }
 .fse-footer-columns {
 grid-template-columns: repeat(2, 1fr);
 }
 .fse-footer-about {
 grid-column: span 2;
 }
}
@media (max-width: 768px) {
 .fse-section {
 padding: 64px 0;
 }
 h1.fse-heading {
 font-size: 2.5em;
 }
 h2.fse-heading {
 font-size: 2em;
 }
 .fse-header-content {
 flex-wrap: wrap;
 justify-content: center;
 text-align: center;
 }
 .fse-logo-group,
 .fse-primary-nav,
 .fse-header-cta {
 width: 100%;
 justify-content: center;
 margin-bottom: 15px;
 }
 .fse-logo-group {
 align-items: center;
 }
 .fse-primary-nav {
 flex-wrap: wrap;
 gap: 10px;
 }
 .fse-hero-content,
 .fse-about-content,
 .fse-cta-content {
 grid-template-columns: 1fr;
 }
 .fse-hero-left,
 .fse-about-left,
 .fse-cta-left {
 padding-right: 0;
 margin-bottom: 40px;
 }
 .fse-hero-ctas {
 flex-direction: column;
 gap: 15px;
 }
 .fse-social-links {
 flex-wrap: wrap;
 justify-content: center;
 }
 .fse-hero-illustration,
 .fse-about-illustration,
 .fse-cta-illustration {
 order: -1; 
 }
 .fse-services-header,
 .fse-portfolio-header {
 flex-direction: column;
 align-items: flex-start;
 margin-bottom: 40px;
 }
 .fse-services-heading,
 .fse-portfolio-heading {
 margin-bottom: 15px;
 font-size: 2em;
 }
 .fse-services-grid,
 .fse-portfolio-grid,
 .fse-stats-grid {
 grid-template-columns: 1fr;
 }
 .fse-footer-columns {
 grid-template-columns: 1fr;
 text-align: center;
 }
 .fse-footer-columns .fse-logo-group,
 .fse-footer-bottom {
 flex-direction: column;
 gap: 20px;
 }
 .fse-footer-bottom .fse-social-icons {
 margin-top: 10px;
 }
 .fse-contact-item, .fse-tech-stack-item {
 justify-content: center;
 }
}
:root {
 --td-color-primary: #FF397C !important;
 --td-color-secondary: #210A27 !important;
 --td-color-accent: #B5D97A !important;
 --td-color-accent-2: #87D5EF !important;
 --td-color-background: #F7F1F8 !important;
 --td-color-text: #4B4254 !important;
 --td-color-heading: #210A27 !important;
 --td-color-header-bg: #FFFFFF !important;
 --td-color-header-text: #4B4254 !important;
 --td-color-footer-bg: #210A27 !important;
 --td-color-footer-text: #F7F1F8 !important;
 --td-font-heading: 'Montserrat', sans-serif !important;
 --td-font-body: 'Montserrat', sans-serif !important;
 --td-font-script: 'Montserrat', sans-serif !important;
}
.fse-section:not(.fse-header):not(.fse-footer) img:not(.fse-icon):not([class*="icon"]):not(.fse-logo):not(.fse-footer-logo),
.fse-hero img:not(.fse-icon):not([class*="icon"]):not(.fse-logo),
.fse-gallery img,
.fse-portfolio img,
.fse-project img,
.fse-service img,
.fse-feature img,
.fse-card img:not(.fse-icon):not([class*="icon"]):not(.fse-template-thumb img),
.fse-column img:not(.fse-icon):not([class*="icon"]),
.wp-block-html img:not(.fse-icon):not([class*="icon"]) {
 max-width: 100% !important;
 max-height: none !important;
 width: auto;
 height: auto;
 object-fit: cover;
}
.fse-hero img.fse-image,
.fse-hero-content img.fse-image,
.fse-hero .fse-image img,
.fse-hero-content .fse-image img,
.fse-hero figure.wp-block-image img,
.fse-hero-content figure.wp-block-image img,
.fse-hero > img:only-child,
.fse-hero-content > img:only-child {
 width: 100%;
 height: auto;
 display: block;
}
.fse-hero figure.wp-block-image,
.fse-hero-content figure.wp-block-image {
 width: 100%;
 margin-left: 0;
 margin-right: 0;
}
.fse-hero-image img,
.fse-hero-graphic img,
.fse-card .fse-template-thumb img,
.fse-deal-card img,
.fse-product-card img,
.fse-template-card img,
.fse-product-grid .fse-card > img:first-child,
.fse-featured-grid .fse-card > img:first-child {
 max-width: 100% !important;
 max-height: none !important;
 width: 100% !important;
 height: auto !important;
 object-fit: cover;
}
.fse-card img.fse-icon,
.fse-column img.fse-icon,
img.fse-category-icon,
.fse-card img[class*="icon"]:not([class*="thumb"]),
.fse-column img[width="64"],
.fse-column img[height="64"] {
 max-width: 64px;
 max-height: 64px;
 width: auto !important;
 height: auto !important;
 object-fit: contain;
}
.fse-section.fse-header img.fse-logo,
header.fse-section img.fse-logo,
header.fse-header img.fse-logo {
 max-height: 64px !important;
 max-width: 260px !important;
 width: auto !important;
 height: auto !important;
 object-fit: contain !important;
}
.fse-section.fse-footer img.fse-footer-logo,
.fse-section.fse-footer img.fse-logo,
footer.fse-section img.fse-footer-logo,
footer.fse-section img.fse-logo,
footer.fse-footer img.fse-footer-logo {
 max-height: 56px !important;
 max-width: 220px !important;
 width: auto !important;
 height: auto !important;
 object-fit: contain !important;
}
.fse-section.fse-footer img:not(.fse-logo):not(.fse-footer-logo),
footer.fse-section img:not(.fse-logo):not(.fse-footer-logo),
footer.fse-footer img:not(.fse-logo):not(.fse-footer-logo) {
 max-height: 40px !important;
 width: auto !important;
 height: auto !important;
 object-fit: contain !important;
}
.fse-section.fse-header img:not(.fse-logo),
header.fse-section img:not(.fse-logo),
header.fse-header img:not(.fse-logo) {
 max-height: 48px !important;
 width: auto !important;
 height: auto !important;
 object-fit: contain !important;
}
.fse-hero-content,
.fse-hero-overlay,
.fse-section .fse-hero-content,
[class*="overlay"] .fse-hero-content {
 position: relative;
 z-index: 2;
}
.fse-hero[style*="background-image"],
.fse-section[style*="background-image"] {
 background-size: cover !important;
 background-position: center !important;
}
body { font-size: var(--td-font-size-base, 16px); line-height: 1.6; }
img.fse-image, .fse-image img, .fse-column img, .fse-card img {
 max-width: 100%;
 height: auto;
}
.fse-button:hover { text-decoration: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img, .fse-image { max-width: 100%; height: auto; display: block; }
.fse-group, .fse-container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.fse-top-bar, .fse-header, .fse-footer, .fse-section { width: 100%; box-sizing: border-box; }
.fse-nav-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.15rem; list-style: none; margin: 0; padding: 0; }
.fse-nav-menu a { text-decoration: none; white-space: nowrap; }
.fse-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; text-decoration: none !important; cursor: pointer; box-sizing: border-box; }
.fse-button:hover { text-decoration: none !important; }
.fse-columns { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.fse-column { min-width: 0; }
.fse-copy-preserve { }
@media (max-width: 768px) {
 .fse-columns { flex-direction: column; }
 .fse-nav-menu { flex-direction: column; align-items: flex-start; }
}
@keyframes fadeSlideUp {
 from { opacity: 0; transform: translateY(30px); }
 to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideLeft {
 from { opacity: 0; transform: translateX(-30px); }
 to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideRight {
 from { opacity: 0; transform: translateX(30px); }
 to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
 from { opacity: 0; transform: scale(0.95); }
 to { opacity: 1; transform: scale(1); }
}
.animate-on-scroll { opacity: 0; }
.animate-slide-left { opacity: 0; }
.animate-slide-right { opacity: 0; }
.animate-scale { opacity: 0; }
.animate-on-scroll.visible { animation: fadeSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-left.visible { animation: fadeSlideLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-slide-right.visible { animation: fadeSlideRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-scale.visible { animation: scaleIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.fse-button { transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.2s ease; }
.fse-button:hover { transform: translateY(-2px); filter: brightness(1.1); text-decoration: none !important; }
.fse-button:hover * { text-decoration: none !important; color: inherit !important; }
.fse-social-links .fse-button { border-radius: 8px; }
.fse-social-links .fse-button i { margin: 0; }
.fse-footer-social .fse-social-icon { border-radius: 8px; }
.fse-footer-social .fse-social-icon i { margin: 0; }
.fse-footer-social .fse-button { padding: 8px 12px; }
.fse-footer-social .fse-social-icons { flex-wrap: wrap; justify-content: flex-start; }
@media (max-width: 768px) {
 .fse-footer-social .fse-social-icons { justify-content: center; }
}




/* PressMeGPT FAQ accordion (native details/summary + JS fallback) */
.fse-faq-details,
details.fse-faq-item,
details[class*="faq"] {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.fse-faq-details summary,
details.fse-faq-item summary,
details[class*="faq"] summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 0;
  font-weight: 600;
}
.fse-faq-details summary::-webkit-details-marker,
details.fse-faq-item summary::-webkit-details-marker {
  display: none;
}
.fse-faq-answer,
.fse-faq-details > div,
details.fse-faq-item > div {
  padding-bottom: 1rem;
}
.fse-faq-item.is-open > .fse-faq-answer,
.fse-accordion-item.is-open > .fse-accordion-body {
  display: block;
}
.fse-faq-item:not(.is-open) > .fse-faq-answer,
.fse-accordion-item:not(.is-open) > .fse-accordion-body {
  display: none;
}



/* PressMeGPT header: static (design declares fse-header-static) */




/* ===== Per-Page Scoped Styles (PressMeGPT) ===== */


/* ===== PressMeGPT: Blog/Archive Layout Enforcement (must win over master CSS) ===== */
body.single .content-area,
body.blog .content-area,
body.archive .content-area,
body.search .content-area,
body.error404 .content-area {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 2rem !important;
padding-right: 2rem !important;
box-sizing: border-box;
}

@media (max-width: 768px) {
body.single .content-area,
body.blog .content-area,
body.archive .content-area,
body.search .content-area,
body.error404 .content-area {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}
}

body.single .content-area.has-sidebar,
body.blog .content-area.has-sidebar,
body.archive .content-area.has-sidebar,
body.search .content-area.has-sidebar {
display: grid !important;
grid-template-columns: minmax(0, 1fr) 300px !important;
gap: 3rem !important;
align-items: start;
}

@media (max-width: 900px) {
body.single .content-area.has-sidebar,
body.blog .content-area.has-sidebar,
body.archive .content-area.has-sidebar,
body.search .content-area.has-sidebar {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
}
}

body.single .primary-content,
body.single .primary-content > article,
body.single .entry-content,
body.single .entry-footer,
body.single .post-navigation,
body.single .comments-area,
body.blog .primary-content,
body.archive .primary-content {
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}