/**
 * Theme Name:     KidDotCo Child
 * Author:         kidd81
 * Template:       KidDotCo Parent
 * Text Domain:	   KidDotCo Parent
 * Description:    A powerful Bootstrap 5 WordPress Starter Theme with WooCommerce Support. Documentation. This theme gives you full control whatever you do and the full freedom to design whatever you want. It comes with a wide selection of category, page, post, author and archive templates as well as sidebar, header, footer and 404 widgets. There are no customizer settings in the backend. All settings can only be made by touching the code. Some CSS, HTML, PHP and JS Skills are required to customize it.
 */


/* Base Typography */
body {
	scroll-behavior: smooth;
	font-family: 'Satoshi Bold';
    font-weight: 700;
    font-size: 22px;
    line-height: 1.8;
    color: #28282B;
    margin: 0;
    padding: 0;
	-webkit-font-smoothing: antialiased!important;
  	-moz-osx-font-smoothing: grayscale!important;
} 

div.link a { color: white; font-family: 'AgencyCompressedBlack'; text-transform: uppercase; font-size: 100px;}

.postitem {
  opacity: 0;
  transform: translateY(50px); /* start slightly lower */
}


/* NAVIGATION */

#spaceman {
    opacity: 1;
   transition: opacity 0.3s ease-in-out;
}

#spaceman.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* NAVIGATION */

/* ANIMATED PANELS */

#profiles {
  min-height: auto!important;
  background-color: #2b2b28;
  background-image: url('images/bar.svg');
  background-repeat: repeat;
  background-size:400%;
  background-position: 0 0;
	color: #fff;
	
}

#profiles h3 { color: #ffff01;}

#testimonials {
  min-height: auto!important;
  background-color: #ffff01;
  background-image: url('images/spaceman-yellow.svg');
  background-repeat: repeat;
  background-size:250px 250px;
  background-position: 0 0;
	color: #fff;
	
}

#statement {
  min-height: auto!important;
  background-color: #2b2b28;
  background-image: url('images/cog-black.svg');
  background-repeat: repeat;
  background-size:250px 250px;
  background-position: 0 0;
	color: #fff;
	
}
/* ANIMATED PANELS */


/* SITE WIDE */

.fixed { position: fixed; z-index: 100;}


/* ======================================
   HEADINGS
====================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'AgencyCompressedBlack';
    line-height: 0.9;
    color: #28282B;
    margin: 0 0 1em 0;
    text-transform: uppercase;
}

/* ======================================
   LINKS
====================================== */
a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

a:hover {
    opacity: 0.8;
}

/* ======================================
   TEXT SELECTION
====================================== */
/* Modern browsers (Chrome, Edge, Safari, Firefox 63+) */
::selection {
    background: #ffff01;
    color: #28282B;
    text-shadow: none;
}

/* Old Firefox fallback (pre-63) */
::-moz-selection {
    background: #ffff01;
    color: #28282B;
    text-shadow: none;
}

/* ======================================
   CONTAINERS & LAYOUT
====================================== */
.container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

/* Responsive Grid Example */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
}

.col {
    flex: 1 0 100%;
    padding: 0 0.5rem;
}

/* ======================================
   LISTS
====================================== */
ul, ol {
    padding-left: 1.3rem;
    margin: 0 0 1em 0;
    list-style-position: inside;
}

/* ======================================
   BACKGROUNDS & BORDERS
====================================== */
.bblack { border: 1px dotted #28282B; }
.bgblack { background: #28282B; }
.bgwhite { background: #fff; }
.bgyellow { background: #ffff01 !important; }

.bt1 { 
    border-top: 1px solid #28282B; 
    border-bottom: 1px solid #28282B; 
}

.br1 { border-right: 1px solid #28282B; }

/* ======================================
   IMAGES
====================================== */
.roundimg { border-radius: 20px; }

/* ======================================
   BUTTONS
====================================== */
.btn {
    padding: 8px 20px;
    border-radius: 15px;
    font-family: 'AgencyCompressedBlack';
    border: 0 solid #eee;
    text-transform: uppercase;
    font-size: 1.2em; /* previously 30px */
    transition: transform 0.3s ease;
}

.btn:hover {
    transform: scale(1.04);
    outline: none;
}

.btnyellow { 
    background: #ffff01; 
    border: 0 solid #eee; 
}

.btnyellow:hover { 
    background: #fff !important; 
    color: #28282B; 
}

.btnyellow:active {   
    transform: scale(1.01); 
    outline: none;
}



ul#signposts { margin: 0px; padding: 0px;}
ul#signposts li {   display: inline-block;}
ul#signposts li a {   display: inline-block; font-family: 'AgencyCompressedBlack';
	border: 0;
	color: white;
	margin: 0px 0.2em;
	padding: 8px 40px;
	border-radius: 15px;
	border:3px solid white;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

ul#signposts li a:hover {  
	background: #ffff01;
	color: #28282B;
	border:3px solid #ffff01;
	opacity: 1!important;
	}


.content { padding:  6em 0em;}
.responsive-columns {
  column-count: 1;      /* Default: 1 column for mobile */
  column-gap: 75px;     /* Space between columns */
}

@media (min-width: 768px) {
  .responsive-columns {
    column-count: 2;    /* 2 columns for tablets and up */
  }
}
.divider { overflow: hidden!important;}
/* SITE WIDE */

/* HEADINGS */
div.word {  filter: blur(3px);}
.hero-title .line { filter: blur(10px);}
.hero-title { line-height: 0.83;}
.hero-title-mask { overflow-y: hidden!important; overflow-x: scroll!important;   display: block;}
.hero-title .line { display: inline-block;       /* ensures each line is separate */ transform: translateY(160px); /* start position for animation */ opacity: 0;           /* start invisible */}
#summary h3 { margin: 0px; padding: 0px; filter: blur(3px);}
/* HEADINGS */

 /* =========================
   HORIZONTAL SCROLL GALLERY
========================= */

.js-horizontal-gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}

.panel {
  flex: 0 0 auto;
}


.section.portfolio {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  background-color: #2b2b28;
}

.section.portfolio .panel {
  flex: 0 0 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding: 8rem 6rem;*/
  transition: background-color 0.3s ease;
}

#portfolio1.section.portfolio .panel {
  flex: 0 0 100vw;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding: 8rem 6rem;*/
  transition: background-color 0.3s ease;
}



.section.portfolio .panel.bg {
  background-color: #28282B;
}

.panel_item {
  width: 100%;
}

.panel_item_content h1 {
  color: #fff;
  font-size: 3rem;
  margin-bottom: 1rem;
}

.panel_item_content p {
  color: #b5b9c3;
  /*max-width: 420px;*/
}

.panel_item {
  position: relative;
  height: 100%;
  /* min-height: 420px;  adjust to taste */
  overflow: hidden;
}

/* Background image */
.panel_item_bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Optional overlay for readability */
.panel_item_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.65)
  );
}

/* Full clickable layer */
.panel_item_link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content on top */
.panel_item_content {
  position: relative;
  z-index: 2;
  padding: 5rem;
  color: white;
}

/* Content on top */
#portfolio1.panel_item_content {
  position: relative;
  z-index: 2;
  padding: 3rem;
  color: white;
}

#portfolio.panel_item_content {
 padding: 0rem;
}


.panel_item_content h3 {  color: white;}
.panel_item_content h3 a { color: white; }

section#portfolio div.panel_item div.panel_item_content {padding: 0rem!important;}
 /* =========================
   HORIZONTAL SCROLL GALLERY
========================= */


 /* =========================
   SECTIONS
========================= */
section#introduction {  height: auto;}
section#introduction h2 {
    font-size: 40px;
    line-height: 0.9; /* keep consistent with other headings */
}

section#introduction h2 .emoji-icon {
    display: inline-block;        /* behave like text */
    vertical-align: top;       /* aligns with text */
    width: 0.8em;                   /* scales with font-size */
    height: 0.8em;                /* keeps square */
    object-fit: contain;          /* preserves aspect ratio */
    margin: 0em 0em;              /* optional spacing between words */
}

section#profiles h2 {
    font-size: 110px;
    line-height: 0.9; /* keep consistent with other headings */
}

section#profiles h2 .emoji-icon {
    display: inline-block;        /* behave like text */
    vertical-align: top;       /* aligns with text */
    width: 0.8em;                   /* scales with font-size */
    height: 0.8em;                /* keeps square */
    object-fit: contain;          /* preserves aspect ratio */
    margin: 0em 0em;              /* optional spacing between words */
}
 /* =========================
   SECTIONS
========================= */

 /* =========================
   TAGS
========================= */

ul.tagcloud { margin: 0px; padding: 0px;}
ul.tagcloud li {   display: inline-block; }
ul.tagcloud li a {   display: inline-block; font-family: 'AgencyCompressedBlack';
	border: 0;
	color: white;
	margin: 0.2em 0em;
	padding: 6px 30px;
	border-radius: 60px;
	font-size:2em;
	border:3px solid  #28282B;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	background:  #28282B;
}

 /* =========================
   TAGS
========================= */

 /* =========================
   WEBSITE LINK
========================= */
div.link a {
  position: relative;
  display: inline-block;
  background: #28282B;
  color: #fff;
  overflow: hidden;
}

/* shimmer layer */
div.link a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%
  );
  animation: shimmer 3s infinite;
}

/* animation */
@keyframes shimmer {
  0% {
    left: -150%;
  }
  60% {
    left: -150%;
  }
  100% {
    left: 150%;
  }
}
 /* =========================
   WEBSITE LINK
========================= */

/* === PAGE TRANSITIONS === */

#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}

#wipe, .wipe {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.wipe-black { background: url('https://www.kidd.co/wp-content/uploads/2026/01/circuit.png')}
.wipe-yellow { background: #ffff01; }

.loader {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #28282B;
  font-size: 16rem;
  z-index: 10000;
	
}




body.no-scroll {
  overflow: hidden !important;
  height: 100vh; /* prevents mobile bounce */
}

html.is-animating .transition-fade {
  opacity: 0;
}

/* after animation completes */
html.is-changing .transition-fade {
  transition: opacity 0.25s;
  opacity: 1;
}

.loader { font-family: 'AgencyCompressedBlack';}
/* === PAGE TRANSITIONS === */


/* Only exact current page appears active */
.current-menu-parent > a,
.current_page_parent > a,
.current-menu-ancestor > a {
  color: inherit !important; /* remove highlight */
  font-weight: normal !important;
}



a.nav-link.active {font-family: 'AgencyCompressedBlack';}
ul.sociallinks { margin: 0px; padding: 0px;  }
ul.sociallinks li { display: inline-block; margin: 0px; padding: 0px; font-size: 30px;  }
ul.sociallinks li a { }
ul#bootscore-navbar li { text-transform: uppercase; font-size: 34px;}
.navbar-toggler {border: 0px solid #eee;}

.sociallinks a {
  transition: color 0.3s ease;
}




/* HERO */
section#hero  { width: 100%; height: 100vh;}
header#hero h1 { font-size: 100px; opacity: 0; color: white;}
header#hero h1 span { font-family: 'AgencyCompressedBlack'; color: white;}
h1 span.d-block {   font-family: 'AgencyCompressedBlack';}
header#hero h2 { font-size: 18px; line-height: 1.5em; opacity: 0; color: white;}
/* HERO */

/* UNIT */

#wheel img {
  transform-origin: center center;
  display: block; /* ensure no inline-block weirdness */
}

#wheel img {
  transform-origin: center center; /* pivot at center */
  display: block;
  transform: rotate(-270deg);      /* start rotated */
}

#wheel {
  position: relative; /* or keep absolute if you need it stacked, see note below */
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 2000;
  text-align: center; /* in case it contains inline content */
}
#wheel {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
	margin-top: -70px;
}

/* Base button styles */
header#mainnav #menuBtn {
  background: #ffff01;
  color: #2b2b28;
  border: 0;
  padding: 6px 20px;
  border-radius: 15px;
  font-size: 1.5em;
  font-weight: normal;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: 'AgencyCompressedBlack', sans-serif;
  cursor: pointer;
  
  /* Smooth buttery transitions */
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.3s ease;
}

/* Hover effect */
header#mainnav #menuBtn:hover {
  transform: scale(1.1);
  background-color: #ffea66; /* slightly softer buttery tone */
    color: #2b2b28; /* optional: keep text color consistent */
}

/* Dark header variant */
header#mainnav.dark #menuBtn {
  background: #ffff01;
  color: #2b2b28;
}

/* Light header variant */
header#mainnav.light #menuBtn {
  background: #2b2b28;
  color: #fff;
}



/* WIPE LAYERS */
.navwipe {
  position: fixed;
  top: -100vh;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 2000;
}

.navwipe-black {
  background: #111;
}

.navwipe-yellow {
  background: #ffff01; 
  z-index: 2100;
}

/* OVERLAY */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* MENU CONTENT */
.overlay-content {
  position: relative;
  z-index: 2600;
}

.overlay-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.overlay-menu li {
  margin: 15px 0;
	text-transform: uppercase;
	font-family: 'AgencyCompressedBlack';
}

.overlay-menu li a {
  color: #000;
  font-size: 6rem;
  font-weight: 700;
  text-decoration: none;
}

/* CLOSE BUTTON */
.close-nav {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 4rem;
  background: none;
  border: none;
  color: #000;
  cursor: pointer;
  z-index: 2700;
}


.fixed { position: fixed;}


#mainnav {
  position: fixed;
	z-index: 1004;
  top: 0em;
  left: 0em;
  right: 0em;

  padding: 0.8rem;
  transition: all 0.3s ease;
}

#mainnav.shrink {
  top: 0;
  left: 0;
  right: 0;
padding: 0.4rem;
  margin: 0;
  border-radius: 0;
 /* background: #28282B;*/
}

#mainnav.shrink img {
  width: 80px;  
  transition: width 0.3s ease;
}


#mainnav img {
  transition: width 0.3s ease;
}

#hero {
  position: relative; /* makes canvas absolute relative to hero */
  overflow: hidden;
}

#particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* don’t block clicks */
  z-index: 0; /* behind content */
}

#hero > .container-fluid,
#hero h1,
#hero h2 {
  position: relative;
  z-index: 2; /* above canvas */
	color: #ffff01;
}



/* Base state */
header#mainnav .sociallinks i {
  color: #28282B;
  transition: color 0.25s ease;
}

/* Dark section */
header#mainnav.dark .sociallinks i {
  color: white;
}

/* Light section */
header#mainnav.light .sociallinks i {
  color: #28282B;
}

/* FOOTER */
footer#main { padding-bottom: 200px;background: #ffff02 url("images/kiddotco-black.svg") bottom center no-repeat;}
footer#main a.nav-link { color: #fff; margin: 0px; padding: 0px; }
ul.footer-nav li { list-style: none; text-transform: uppercase; font-size: 34px; line-height: 1em; margin: 0px; padding: 0px;}
ul.footer-nav li a { color: #28282B!important;}
ul.footer-nav { margin: 0px; padding: 0px;}
footer#main ul li a { color: #28282B; font-family: 'AgencyCompressedBlack';}
footer#base { color: white;}
footer#base ul { margin: 0px; padding: 0px;}
footer#base ul li { margin: 0px; padding: 0px; list-style-type: none;}
/* FOOTER */

section#hero h1 { font-size: 80px; margin: 0px; padding: 0px; }


header#blogheader { height: 75vh;}
header#blogheader h1 { font-size: 30px; line-height: 0.8em;  font-family: 'AgencyCompressedBlack';}
header#blogheader h2 { font-size: 18px; line-height: 0.8em; opacity: 0;  font-family: 'AgencyCompressedBlack';}
header#blogheader ul { margin: 0px; padding: 0px; display: block;}
header#blogheader ul li { margin: 0px; padding: 0px; list-style: none; display: inline-block;}
ul#share.text-center li { margin: 0px; padding: 0px 0.3em; list-style: none; display: inline-block;}
header#blogheader li.list-inline-item {font-family: 'AgencyCompressedBlack'; padding: 0px 0.3em;}


header#blogheader.alt h1 { font-size: 30px; line-height: 0.8em;  font-family: 'AgencyCompressedBlack'; color: white;}

header#blogheader.alt.hero-title {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}


#hero,
#panel,
#panel .container-fluid,
.col-md-12 {
  overflow: visible;
}

.marquee {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background-color: #000;
  overflow: hidden;
  position: relative;
  flex: none;
}

.marquee::before,
.marquee::after {
  position: absolute;
  top: 0;
  width: 8rem;
  height: 100%;
  content: "";
  z-index: 2;
  pointer-events: none;
}

.marquee::before {
  left: 0;
  background: linear-gradient(to right, #111 0%, transparent 100%);
}

.marquee::after {
  right: 0;
  background: linear-gradient(to left, #111 0%, transparent 100%);
}

.marquee-content {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
	color: #ffffff;
}

.marquee-content h3 {
  font-size: 100px !important;
  color: #fff;
  white-space: nowrap;
  margin: 0;
  padding-right: 2rem;
  flex-shrink: 0;
		color: #ffffff;
}



/*PULSE*/
@keyframes pulse {
    0% {
        transform: scale(0.95);
   
    }

    70% {
        transform: scale(1);
      
    }

    100% {
        transform: scale(0.95);
     
    }
}
/*PULSE*/



/* Breakpoints */
@media (min-width: 576px) {
    .col-sm { flex: 1 0 50%; }
}

@media (min-width: 768px) {
	
	section#hero h1 { font-size: 100px; margin: 0px; padding: 0px; }
	
	header#mainnav #menuBtn {
  padding: 8px 40px;
  border-radius: 15px;
  font-size: 2em;
	}
	
    .col-md { flex: 1 0 33.33%; }
	
	/* HERO */
header#hero h1 { font-size: 76px;}
header#hero h2 { font-size: 20px; }
/* HERO */
	
	
	/*PROGRESS*/
#scroll-progress {
  position: fixed;
	background: red;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent; /* container only */
  z-index: 99999999;
  pointer-events: none;
}

#scroll-progress span {

  display: block;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 👈 force white */
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
		 background: #0000c2;
}


/*PROGRESS*/
	
		/* BLOG */
	header#blogheader h1 { font-size: 250px; }
header#blogheader h2 { font-size: 20px; }
/* BLOG */
	
	h3 { font-size: 100px;}
	h2 { font-size: 120px;}
	
	#mainnav {
  position: fixed;
	z-index: 1004;
  top: 1em;
  left: 3em;
  right: 3em;

  padding: 1rem;
  transition: all 0.3s ease;
}

#mainnav.shrink {
  top: 0;
  left: 0;
  right: 0;
padding: 0.8rem;
  margin: 0;
  border-radius: 0;
 /* background: #28282B;*/
}

#mainnav.shrink img {
  width: 80px;  
  transition: width 0.3s ease;
}
	

	section#introduction h2 {
    font-size: 76px;
    line-height: 0.9; /* keep consistent with other headings */
}
	
	footer#main { padding-bottom: 400px;}

	
}

@media (min-width: 992px) {
	
		footer#main { padding-bottom: 600px;}

	.btn { font-size: 2em;}
	
}

@media (min-width: 1200px) {
    .col-xl { flex: 1 0 20%; }
	
	#portfolio1.section.portfolio .panel {
		flex: 0 0 50vw;}
	
	section#introduction {  height: 100vh;}
	
section#introduction h2 {
    font-size: 110px;
    line-height: 0.9; /* keep consistent with other headings */
}
	
/* HERO */
section#hero h1 { font-size: 200px; margin: 0px; padding: 0px; }
/* HERO */
	

/* BLOG */
header#blogheader h1 { font-size: 230px; line-height: 0.8em;}
header#blogheader.alt h1 { font-size: 150px;}

header#blogheader h2 { font-size: 22px; line-height: 0.8em; }
/* BLOG */
	
	#mainnav {
  position: fixed;
	z-index: 1004;
  top: 1em;
  left: 12em;
  right: 12em;

  padding: 1rem;
  transition: all 0.3s ease;
}
	
	
}

/* Utility Classes */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }