/*
Theme Name: Blud
Theme URI: https://example.com/demit
Description: WordPress Theme custom buatan Nozaracy Studio.
Author: Nozaracy Studio
Author URI: https://example.com/nozaracy-studio
Version: 0.1
Text Domain: Blud
Tags: responsive, fancy
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@font-face {
    font-family: 'Helvetica';
    src: url('assets/font/Helvetica-Light.ttf') format('truetype');
    font-weight: 100 300;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('assets/font/Helvetica-LightOblique.ttf') format('truetype');
    font-weight: 100 300;
    font-style: oblique;
}

@font-face {
    font-family: 'Helvetica';
    src: url('assets/font/Helvetica.ttf') format('truetype');
    font-weight: 400 500;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('assets/font/Helvetica-Oblique.ttf') format('truetype');
    font-weight: 400 500;
    font-style: oblique;
}

@font-face {
    font-family: 'Helvetica';
    src: url('assets/font/Helvetica-Bold.ttf') format('truetype');
    font-weight: 600 950;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: url('assets/font/Helvetica-BoldOblique.ttf') format('truetype');
    font-weight: 600 950;
    font-style: oblique;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-UltraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-UltraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-Bold.ttf') format('truetype');
    font-weight: 600 700;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-BoldItalic.ttf') format('truetype');
    font-weight: 600 700;
    font-style: italic;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-CondensedBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('assets/font/HelveticaNeue-CondensedBlack.ttf') format('truetype');
    font-weight: 900 950;
    font-style: normal;
}

:root {
    --primaryfont: 'Helvetica', Helvetica, Arial, sans-serif;
    --secondaryfont: 'HelveticaNeue', Helvetica, Arial, sans-serif;
    
    --black: black;
    --red: #E60012;
    --yellow: #E5FF00;
    --blue: #1e90ff;
    --cyan: #E4EDF4;
    --white: #ffffff;

    --primegreen: #CCFE97;
    --primepurple: #C69CE2;
    --primegray: #A3A3A3;
    --primegraydarker: #525252;
}

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

input::placeholder {
    color: #737373; /* Change the color to your desired value */
    opacity: 1;
}

input:-moz-placeholder {
    color: #737373; /* Change this to the desired color */
    opacity: 1;
}

input:-ms-input-placeholder {
    color: #737373; /* Change this to the desired color */
}

.text-primarygray {
    color: var(--primegray);
}

.text-primarydarkergray {
    color: var(--primegraydarker);
}

.text-primarygreen {
    color: var(--primegreen);
}

.text-primarypurple {
    color: var(--primepurple);
}

.bgn-primarygray {
    background-color: var(--primegray);
}

.bgn-primarydarkergray {
    background-color: var(--primegraydarker);
}

.bgn-primarygreen {
    background-color: var(--primegreen);
}

.bgn-primarypurple {
    background-color: var(--primepurple);
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    font-family: var(--secondaryfont);
}

body{
    font-family: var(--secondaryfont);
    background-color: var(--primepurple);
    margin: 0px;
    padding: 0px;
}

.body-shadow {
    margin-left: auto;
    margin-right: auto;

    min-height: 100vh;
    max-width: 1920px;

    -webkit-box-shadow: 8px 4px 51px 13px rgba(167,198,204,1);
    -moz-box-shadow: 8px 4px 51px 13px rgba(167,198,204,1);
    box-shadow: 8px 4px 51px 13px rgba(167,198,204,1);

    box-sizing: border-box;
}

.nz-main{
    margin-left: auto;
    margin-right: auto;

    min-height: 100vh;
    max-width: 1920px;
}

.nz-homepage {
    display: grid; 
    align-content: start; 
    padding: 32px;
    padding-top: 0px;
    padding-bottom: 0px;

    color: black;
    background: white; 
    box-sizing: border-box;
}

.nz-header-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 32px;
    padding-bottom: 0px;
    margin-left: auto;
    margin-right: auto;
    column-gap: 24px;
    max-width: 1920px;

    color: black;
    background-color: white;

    box-sizing: border-box;
}

.nz-header {
    display: grid;
    align-content: start;
    
    color: var(--black);
    
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    row-gap: 32px;
    z-index: 40;

    max-width: 1920px;
    box-sizing: border-box;
}

.header-img {
    border-radius: 24px;
    overflow: hidden;
}

.custom-logo {
    max-width: 64px;
    max-height: 64px;
}

.nz-title {
    padding-left: 24px;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
}

.nz-title-footer {
    display: flex;
    align-items: start;
    
    color: var(--black);
    font-size: 32px;
    font-weight: bold;

    column-gap: 12px;
}

.nz-nav {
    list-style: none;
}

.nav-header {
    display: flex;
    align-items: center;
    padding-left: 0px;
    row-gap: 16px;
}

.nav-footer {
    display: flex;
    align-items: center;
    padding-left: 0px;
    column-gap: 56px;
}

.nz-footer-nav li {
    list-style: none;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.nz-footer-nav li:hover {
    color: var(--black);
}

.nz-nav li {
    transition: color 0.3s ease, background-color 0.3s ease;
}

.nz-nav li:hover {
    color: var(--primegreen);
}

.nz-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--primegraydarker);
    background-color: var(--white);

    padding: 16px;
    padding-left: 75px;
    padding-right: 75px;
    margin-left: auto;
    margin-right: auto;
    column-gap: 32px;

    max-width: 1920px;
    box-sizing: border-box;
}

.copyright-text {
    font-size: 18px;
    color: var(--primegray);
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.wp-block-embed.aligncenter {
    text-align: center;
}
  
.wp-block-embed .wp-block-embed__wrapper {
    display: inline-block;
    max-width: 100%;
}