/**
* Preslate minimal styles
* Purpose: Minimal styles for Home and Contact only
*/

/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/
:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

:root {
  --background-color: #000000;
  --default-color: #fafafa;
  --heading-color: #ffffff;
  --accent-color: #18d26e;
  --surface-color: #1a1a1a;
  --contrast-color: #000000;
}

:root {
  --nav-color: #fafafa;
  --nav-hover-color: #18d26e;
  --nav-mobile-background-color: #1a1a1a;
  --nav-dropdown-background-color: #1a1a1a;
  --nav-dropdown-color: #fafafa;
  --nav-dropdown-hover-color: #18d26e;
}

.light-background { --background-color: #1a1a1a; --surface-color: #343434; }
.dark-background { 
  --background-color: rgba(10, 15, 25, 0.975); /* deep black with a blue hint */
  --default-color: #fff; 
  --heading-color: #fff; 
  --surface-color: #1e1e2a; /* slightly bluish surface */
  --contrast-color: #000; 
}

:root { scroll-behavior: smooth; }

/*--------------------------------------------------------------
# General Styling
--------------------------------------------------------------*/
body { color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font); }
a { color: var(--accent-color); text-decoration: none; transition: 0.3s; }
a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); text-decoration: none; }
h1,h2,h3,h4,h5,h6 { color: var(--heading-color); font-family: var(--heading-font); }

/* PHP Email Form Messages */
.php-email-form .error-message { display:none; background:#df1529; color:#fff; text-align:left; padding:15px; margin-bottom:24px; font-weight:600; }
.php-email-form .sent-message { display:none; color:#fff; background:#059652; text-align:center; padding:15px; margin-bottom:24px; font-weight:600; }
.php-email-form .loading { display:none; background:var(--surface-color); text-align:center; padding:15px; margin-bottom:24px; }
.php-email-form .loading:before { content:""; display:inline-block; border-radius:50%; width:24px; height:24px; margin:0 10px -6px 0; border:3px solid var(--accent-color); border-top-color:var(--surface-color); animation: php-email-form-loading 1s linear infinite; }
@keyframes php-email-form-loading { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header { --background-color: rgba(0,0,0,0); color: var(--default-color); background-color: var(--background-color); padding: 15px 0; transition: all 0.5s; z-index: 997; }
.header .logo { line-height:1; }
.header .logo img { max-height:32px; margin-right:8px; }
.header .logo h1 { font-size:30px; margin:0; font-weight:700; color: var(--heading-color); }
.scrolled .header { box-shadow: 0 0 18px rgba(0,0,0,0.1); --background-color: rgba(0,0,0,0.8); }

/* Navigation */
@media (min-width:1200px) {
  .navmenu { padding:0; }
  .navmenu ul { margin:0; padding:0; display:flex; list-style:none; align-items:center; }
  .navmenu li { position:relative; }
  .navmenu>ul>li { white-space:nowrap; padding:15px 14px; }
  .navmenu>ul>li:last-child { padding-right:0; }
  .navmenu a, .navmenu a:focus { color: var(--nav-color); font-size:15px; padding:0 2px; font-family: var(--nav-font); font-weight:400; display:flex; align-items:center; justify-content:space-between; white-space:nowrap; transition:0.3s; position:relative; }
  .navmenu a i, .navmenu a:focus i { font-size:12px; line-height:0; margin-left:5px; transition:0.3s; }
  .navmenu>ul>li>a:before { content:""; position:absolute; height:2px; bottom:-6px; left:0; background-color: var(--nav-hover-color); visibility:hidden; width:0; transition: all 0.3s ease-in-out; }
  .navmenu a:hover:before, .navmenu li:hover>a:before, .navmenu .active:before { visibility:visible; width:25px; }
  .navmenu li:hover>a, .navmenu .active, .navmenu .active:focus { color: var(--nav-hover-color); }
}

@media (max-width:1199px) {
  .mobile-nav-toggle { color: var(--nav-color); font-size:28px; line-height:0; margin-right:10px; cursor:pointer; transition: color 0.3s; }
  .navmenu { padding:0; z-index:9997; }
  .navmenu ul { display:none; list-style:none; position:absolute; inset:60px 20px 20px 20px; padding:10px 0; margin:0; border-radius:6px; background-color: var(--nav-mobile-background-color); border:1px solid color-mix(in srgb, var(--default-color), transparent 90%); overflow-y:auto; transition:0.3s; z-index:9998; }
  .navmenu a, .navmenu a:focus { color: var(--nav-dropdown-color); padding:10px 20px; font-family: var(--nav-font); font-size:17px; font-weight:500; display:flex; align-items:center; justify-content:space-between; white-space:nowrap; transition:0.3s; }
  body.mobile-nav-active .navmenu > ul { display:block; }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer { color: var(--default-color); background-color: var(--background-color); font-size:14px; text-align:center; padding:30px 0; position:relative; }
.footer h3 { font-size:36px; font-weight:700; margin:0 0 15px 0; }
.footer p { font-size:15px; font-style:italic; margin:0 0 30px 0; }
.footer .social-links { margin:0 0 30px 0; }
.footer .social-links a { font-size:16px; display:flex; align-items:center; justify-content:center; background: var(--accent-color); color: var(--contrast-color); line-height:1; margin:0 4px; border-radius:50%; width:36px; height:36px; transition:0.3s; }
.footer .social-links a:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); }
.footer .copyright { padding-top:25px; border-top:1px solid color-mix(in srgb, var(--default-color), transparent 90%); }
.footer .credits { font-size:13px; padding-top:5px; }

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader { position:fixed; inset:0; z-index:999999; overflow:hidden; background: var(--background-color); transition: all 0.6s ease-out; }
#preloader:before { content:""; position:fixed; top:calc(50% - 30px); left:calc(50% - 30px); border:6px solid #fff; border-color: var(--accent-color) transparent var(--accent-color) transparent; border-radius:50%; width:60px; height:60px; animation: animate-preloader 1.5s linear infinite; }
@keyframes animate-preloader { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top { position:fixed; visibility:hidden; opacity:0; left:15px; bottom:-15px; z-index:99999; background-color: var(--accent-color); width:44px; height:44px; border-radius:50px; transition: all 0.4s; }
.scroll-top i { font-size:24px; color: var(--contrast-color); line-height:0; }
.scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 20%); }
.scroll-top.active { visibility:visible; opacity:1; bottom:15px; }

/* Disable AOS delay on mobile */
@media screen and (max-width:768px) { [data-aos-delay]{ transition-delay:0 !important; } }

/*--------------------------------------------------------------
# Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title { color: var(--default-color); background-color: var(--background-color); position:relative; }
.page-title .heading { padding:160px 0 80px 0; border-top:1px solid color-mix(in srgb, var(--default-color), transparent 90%); }
.page-title .heading h1 { font-size:38px; font-weight:700; }
.page-title nav { background-color: color-mix(in srgb, var(--default-color), transparent 90%); padding:20px 0; }
.page-title nav ol { display:flex; flex-wrap:wrap; list-style:none; margin:0; font-size:16px; font-weight:600; }
.page-title nav ol li+li { padding-left:10px; }
.page-title nav ol li+li::before { content:"/"; display:inline-block; padding-right:10px; color: color-mix(in srgb, var(--default-color), transparent 70%); }

/*--------------------------------------------------------------
# Sections & Titles
--------------------------------------------------------------*/
section, .section { color: var(--default-color); background-color: var(--background-color); padding:60px 0; scroll-margin-top:100px; overflow:clip; }
@media (max-width:1199px){ section, .section { scroll-margin-top:66px; } }
.section-title { padding-bottom:60px; position:relative; }
.section-title h2 { font-size:14px; font-weight:500; line-height:1px; letter-spacing:1.5px; text-transform:uppercase; color: color-mix(in srgb, var(--default-color), transparent 50%); }
.section-title h2::after { content:""; width:120px; height:1px; display:inline-block; background: var(--accent-color); margin:4px 10px; }
.section-title div { color: var(--heading-color); font-size:28px; font-weight:700; text-transform:uppercase; font-family: var(--heading-font); }

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero { width:100%; min-height:100vh; position:relative; padding:80px 0; display:flex; align-items:center; justify-content:center; }
.hero img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero .container { position:relative; z-index:3; }
.hero h2 { margin:0; font-size:64px; font-weight:700; }
.hero p { margin:5px 0 0 0; font-size:26px; }
.hero p span { letter-spacing:1px; border-bottom:2px solid var(--accent-color); }
.hero .social-links { margin-top:25px; }
.hero .social-links a { background-color: color-mix(in srgb, var(--default-color), transparent 90%); color: var(--default-color); font-size:14px; width:40px; height:40px; border-radius:50px; display:inline-flex; align-items:center; justify-content:center; margin-right:20px; transition:0.3s; }
.hero .social-links a:hover { background-color: var(--accent-color); }
@media (max-width:768px){ .hero h2{ font-size:32px;} .hero p{ font-size:20px;} }

/* Buttons */
.btn-primary { background-color: var(--accent-color); border-color: var(--accent-color); color: var(--contrast-color); }
.btn-primary:hover, .btn-primary:focus { background-color: color-mix(in srgb, var(--accent-color), transparent 15%); border-color: color-mix(in srgb, var(--accent-color), transparent 15%); color: var(--contrast-color); }
.btn-outline-light:hover, .btn-outline-light:focus { color: var(--contrast-color); background-color: #fff; border-color: #fff; }

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item { box-shadow:0 0 20px rgba(0,0,0,0.1); padding:20px 30px; }
.contact .info-item .icon { color: var(--contrast-color); background-color: var(--accent-color); width:56px; height:56px; font-size:24px; display:flex; justify-content:center; align-items:center; transition: all 0.3s ease-in-out; border-radius:50%; margin-right:15px; }
.contact .info-item h3 { font-size:18px; font-weight:700; margin:0 0 2px 0; }
.contact .info-item p { padding:0; margin-bottom:0; font-size:14px; }
.contact .info-item .social-links a { font-size:24px; display:inline-block; line-height:1; margin:4px 6px 0 0; transition:0.3s; color: color-mix(in srgb, var(--default-color), transparent 50%); }
.contact .info-item .social-links a:hover { color: var(--accent-color); }
.contact .php-email-form { box-shadow:0 0 20px rgba(0,0,0,0.1); padding:30px; margin-top:30px; }
@media (max-width:575px){ .contact .php-email-form { padding:20px; } }
.contact .php-email-form input[type=text], .contact .php-email-form input[type=email], .contact .php-email-form textarea { color: var(--default-color); background-color: color-mix(in srgb, var(--background-color), transparent 50%); border-color: color-mix(in srgb, var(--default-color), transparent 80%); font-size:14px; padding:10px 15px; box-shadow:none; border-radius:0; }
.contact .php-email-form input[type=text]:focus, .contact .php-email-form input[type=email]:focus, .contact .php-email-form textarea:focus { border-color: var(--accent-color); }
.contact .php-email-form input[type=text]::placeholder, .contact .php-email-form input[type=email]::placeholder, .contact .php-email-form textarea::placeholder { color: color-mix(in srgb, var(--default-color), transparent 70%); }
.contact .contact-form button[type=submit] { 
  color: var(--contrast-color); 
  background: var(--accent-color); 
  border: 0; 
  padding: 15px 40px; 
  transition: all 0.3s ease-in-out; 
  border-radius: 50px; 
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(24, 210, 110, 0.3);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.contact .contact-form button[type=submit]:hover { 
  background: color-mix(in srgb, var(--accent-color), transparent 20%); 
  box-shadow: 0 6px 20px rgba(24, 210, 110, 0.4);
  transform: translateY(-2px);
}
.contact .contact-form button[type=submit]:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px rgba(24, 210, 110, 0.3);
}
.contact .contact-form button[type=submit]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}