/**
 * Theme Name: Good Going Custom Theme
 * Template:   hello-elementor
 * Author: Good Going Team
 * Author URI: https://goodgoing.dk/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
 * Description: Vi har skræddersyet dette tema til jeres hjemmeside ud fra hvad vi har aftalt. Hvis der er spørgsmål eller problemer, så ræk ud til os på hej@goodgoing.dk :)
 * Version: 1.3.2
 * Stable tag: 1.3.2
 * ...other header fields
 */

@import url(https://fonts.bunny.net/css?family=inter:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i);
@import url(https://fonts.bunny.net/css?family=dm-mono:300,300i,400,400i,500,500i);
@import url(https://fonts.bunny.net/css?family=commissioner:100,200,300,400,500,600,700,800,900);
@import url(https://fonts.bunny.net/css?family=commissioner:100,200,300,400,500,600,700,800,900);

/*----ROOT START----*/
:root {
  /*FONTS*/
  /*--display-font: "Inter", "Roboto", sans-serif;*/
  --display-font: var(--custom-display);
  /*--text-font: "Manrope", "Roboto", sans-serif;*/
  --text-font: var(--custom-text);
  --btn-font: var(--display-font);

  --display-weight: 600;
  --text-weight: 400;
  --button-weight: 600;

  /*------COLORS------*/

  /*PRIMITIVES*/
  --primary: var(--custom-primary);
  --secondary: var(--custom-secondary);
  --grayscale: var(--custom-grayscale);
  --white: #ffffff;

  /*PRIMARY*/
  --primary-25: lch(from var(--primary) calc(l + 65) calc(c - 52) h);
  --primary-50: lch(from var(--primary) calc(l + 45) calc(c - 50) h);
  --primary-100: lch(from var(--primary) calc(l + 45) calc(c - 40) h);
  --primary-200: lch(from var(--primary) calc(l + 35) calc(c - 35) h);
  --primary-300: lch(from var(--primary) calc(l + 32) calc(c - 30) h);
  --primary-400: lch(from var(--primary) calc(l + 15) calc(c - 5) h);
  --primary-500: var(--primary);
  --primary-600: lch(from var(--primary) calc(l - 3) calc(c - 5) h);
  --primary-700: lch(from var(--primary) calc(l - 15) calc(c - 12) h);
  --primary-800: lch(from var(--primary) calc(l - 25) calc(c - 25) h);
  --primary-900: lch(from var(--primary) calc(l - 40) calc(c - 45) h);

  /*SECONDARY*/
  --secondary-25: lch(from var(--secondary) calc(l + 55) calc(c - 26) h);
  --secondary-50: lch(from var(--secondary) calc(l + 45) calc(c - 20) h);
  --secondary-100: lch(from var(--secondary) calc(l + 40) calc(c - 14) h);
  --secondary-200: lch(from var(--secondary) calc(l + 30) calc(c - 8) h);
  --secondary-300: lch(from var(--secondary) calc(l + 20) calc(c - 4) h);
  --secondary-400: lch(from var(--secondary) calc(l + 12) calc(c - 2) h);
  --secondary-500: var(--secondary);
  --secondary-600: lch(from var(--secondary) calc(l - 16) c h);
  --secondary-700: lch(from var(--secondary) calc(l - 28) c h);
  --secondary-800: lch(from var(--secondary) calc(l - 40) c h);
  --secondary-900: lch(from var(--secondary) calc(l - 55) calc(c - 1) h);

  /*grayscale*/
  --grayscale-25: lch(from var(--grayscale) calc(l + 52) calc(c - 10) h);
  --grayscale-50: lch(from var(--grayscale) calc(l + 50) calc(c - 10) h);
  --grayscale-100: lch(from var(--grayscale) calc(l + 47) calc(c - 8) h);
  --grayscale-200: lch(from var(--grayscale) calc(l + 43) calc(c - 6) h);
  --grayscale-300: lch(from var(--grayscale) calc(l + 35) calc(c - 4) h);
  --grayscale-400: lch(from var(--grayscale) calc(l + 16) calc(c - 2) h);
  --grayscale-500: var(--grayscale);
  --grayscale-600: lch(from var(--grayscale) calc(l - 13) c h);
  --grayscale-700: lch(from var(--grayscale) calc(l - 22) c h);
  --grayscale-800: lch(from var(--grayscale) calc(l - 32) c h);
  --grayscale-900: lch(from var(--grayscale) calc(l - 40) calc(c - 1) h);

  /*Backgrounds*/
  --bg-color: var(--grayscale-50);
  --bg-color-alt: var(--grayscale-100);

  --stroke-color: var(--grayscale-200);

  /*Font styles*/
  --ds-primary: var(--grayscale-900);
  --ds-secondary: var(--grayscale-700);

  --text-color: var(--grayscale-600);
  --text-color-alt: var(--grayscale-400);

  /*------BUTTONS------*/

  /*PADDING*/
  --btn-sm-x: 16px;
  --btn-sm-y: 10px;

  --btn-md-x: 24px;
  --btn-md-y: 14px;

  --btn-lg-x: 28px;
  --btn-lg-y: 18px;

  /*RADIUS*/
  --btn-rad-sm: 8px;
  --btn-rad-md: 8px;
  --btn-rad-lg: 10px;
}

/*Elementor tweaks*/
  --e-global-color-primary: var(--primary-500) !important;

/*----ROOT END----*/
img{
    width: 736px;
    height: 736px;
    object-fit: cover;
}

a {
  text-decoration: none;
  width: auto;
  background-color: red;
  color: var(--primary-500);
  font-weight: var(--button-weight) !important;
}

.bg-gradient{
  background-image: linear-gradient(45deg, var(--primary-400), var(--primary-700));
}


/*-------------*/
/*---LAYOUT---*/
/*-----------*/
.body{
  background-color: var(--bg-color, red) !important;
}

.section {
  display: flex;
  flex-direction: row;
  padding: 64px 32px;
  gap: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  width: min(100%, 1140);
}

.section-inner{
	max-width: 1376px;
	margin-left:auto;
	margin-right:auto;
}

.container {
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
}

.fonts-container {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
}

.display-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-grow: 2;
}

.text-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 2;
}

.button-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 2;
}

hr {
  color: var(--stroke-color);
  border-width: 0;
  background: var(--stroke-color);
  height: 1px;
}

/*---------------------*/
/*---DISPLAY + TEXT---*/
/*-------------------*/
.display-3xl,
h1 {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight);
  font-size: 3.5em;
  color: var(--display-color);
}

.display-2xl,
h2 {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight);
  font-size: 3em;
  color: var(--display-color);
}

.display-xl,
h3 {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight);
  font-size: 2.5em;
  color: var(--display-color);
}

.display-lg {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight);
  font-size: 2em;
  color: var(--display-color);
}

.display-md,
h4 {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight);
  font-size: 1.5em;
  color: var(--display-color);
}

.display-sm {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight);
  font-size: 1.25em;
  color: var(--display-color);
}

.display-xs,
h5 {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight);
  font-size: 1em;
  color: var(--display-color);
}

.display-2xs,
h6 {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight);
  font-size: 0.875em;
  color: var(--display-color);
}

/*TEXT*/
.text-lg {
  font-family: var(--text-font);
  font-weight: var(--text-weight);
  font-size: 1.125rem;
  /*color: var(--text-color);*/
}

.text-md, p , div{
  font-family: var(--text-font) !important;
  font-weight: var(--text-weight);
  font-size: 1rem;
  /*color: var(--text-color);*/
}

.text-sm {
  font-family: var(--text-font);
  font-weight: var(--text-weight);
  font-size: 0.875rem;
  /*color: var(--text-color);*/
}

/*---------------------*/
/*-------BUTTONS------*/
/*-------------------*/
.btn {
  font-family: var(--btn-font);
  font-weight: var(--button-weight);
  width: fit-content;
  cursor: pointer;
  transition: 0.3s;
  line-height: 1em;
  color: var(--white);
  border:0px;
}

/*Button sizes*/
.btn-lg {
  padding: var(--btn-lg-y) var(--btn-lg-x);
  border-radius: var(--btn-rad-lg);
}

.btn-md {
  padding: var(--btn-md-y) var(--btn-md-x);
  border-radius: var(--btn-rad-md);
}

.btn-sm {
  padding: var(--btn-sm-y) var(--btn-sm-x);
  border-radius: var(--btn-rad-sm);
  font-size: 14px;
}

/*Button colors*/
.btn-primary{
  background-color: var(--primary-500);
}

.btn-secondary {
  background-color: var(--secondary-500);
}

.btn-dark {
  background-color: var(--grayscale-900);
}

.btn-white {
  background-color: var(--white);
}

/*Button hover effects*/
.btn-primary:hover {
  background-color: var(--primary-700);
  transition: 0.3s;
}

.btn-secondary:hover {
  background-color: var(--secondary-700);
  transition: 0.3s;
}

.btn-dark:hover {
  background-color: var(--grayscale-600);
  transition: 0.3s;
}

.btn-white:hover {
  background-color: var(--grayscale-300);
  transition: 0.3s;
}


/*----ELEMENTOR TWEAKS----*/
h1 .elementor-heading-title, .display-3xl .elementor-heading-title {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight) !important;
  font-size: 3.5em  !important;
  color: var(--display-color) !important;
}

h2 .elementor-heading-title, .display-2xl .elementor-heading-title{
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight) !important;
  font-size: 3em;
  color: var(--display-color) !important;
}

h3 .elementor-heading-title, .display-xl .elementor-heading-title {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight) !important;
  font-size: 2.5em !important;
  color: var(--display-color) !important;
}

.display-lg .elementor-heading-title {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight) !important;
  font-size: 2em !important;
  color: var(--display-color) !important;
}

h4 .elementor-heading-title, .display-md .elementor-heading-title{
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight) !important;
  font-size: 1.5em !important;
  color: var(--display-color) !important;
}

.display-sm .elementor-heading-title {
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight) !important;
  font-size: 1.25em !important;
  color: var(--display-color) !important;
}


h5 .elementor-heading-title, .display-xs .elementor-heading-title{
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight) !important;
  font-size: 1em !important;
  color: var(--display-color) !important;
}

h6 .elementor-heading-title, .display-2xs .elementor-heading-title{
  font-family: var(--display-font) !important;
  font-weight: var(--display-weight) !important;
  font-size: 0.875em !important;
  color: var(--display-color) !important;
}

/*--Elementor buttons--*/
.e-btn{
	border-width: 0px !important;
}

/*Button sizes*/
.e-btn-lg .elementor-button{
  padding: var(--btn-lg-y) var(--btn-lg-x) !important;
  border-radius: var(--btn-rad-lg) !important;
}

.e-btn-md .elementor-button{
  padding: var(--btn-md-y) var(--btn-md-x) !important;
  border-radius: var(--btn-rad-md) !important;
}

.e-btn-sm .elementor-button{
  padding: var(--btn-sm-y) var(--btn-sm-x) !important;
  border-radius: var(--btn-rad-sm) !important;
  font-size: 14px;
}

/*Colors*/
.e-btn-primary .elementor-button{
	background-color:var(--primary-500) !important;
}

.e-btn-secondary .elementor-button{
	background-color:var(--secondary-500) !important;
}

.e-btn-dark .elementor-button{
	background-color:var(--grayscale-900) !important;
}

.e-btn-white .elementor-button{
	background-color:var(--white) !important;
	color:var(--grayscale-900) !important;
}

/*Button hover effects*/
.e-btn-primary .elementor-button:hover {
  background-color: var(--primary-700) !important;
  transition: 0.3s;
}

.e-btn-secondary .elementor-button:hover {
  background-color: var(--secondary-700) !important;
  transition: 0.3s;
}

.e-btn-dark .elementor-button:hover {
  background-color: var(--grayscale-600) !important;
  transition: 0.3s;
}

.e-btn-white .elementor-button:hover {
  background-color: var(--grayscale-300) !important;
  transition: 0.3s;
}

/*------------------*/
/*------FOOTER-----*/
/*----------------*/
.footer {
  background-color: var(--grayscale-25);
}

.footer .menu-title {
  color: var(--grayscale-400);
}

/*---MISC---*/
.credit a{
    border-radius:50px;
    transition:0.3s;
	color: var(--primary-700);
}

.credit a:hover{
    padding:8px 16px;
    background-color:var(--primary-50);
    color:var(--primary-700) !important;
    border-radius:50px;
    transition:0.3s;
    border:1px solid var(--primary-500);
}

.credit-bot {
    display: none !important;
}

/*------------------*/
/*------Mobile-----*/
/*----------------*/
@media only screen and (max-width: 768px) {
  .section {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
	
  img{
    width: 368px;
    height: 368px;
}
}