:root {
  /*Colors*/
  --bg-color: #056c79;
  --bg-white: #ffffff;
  --bg-inputs: #ffffff4a;
  --primary-font-color: #fff0e6;
  --secondary-font-color: #000000;
  --primary-color: #f786c0;
  --secondary-color: #4cbecd;
  --focus-color: #f7ea86;
  --placeholder-color: #ffffff47;
  --highlight-color: #f7ea86;
  --warning-color: #780540;
  --bd-primary-color: #000000;
  --bd-secondary-color: #ffffff47;

  /*Layout*/
  --box-width: 900px;
  --box-mb-width: 95%;
  --mg-lg: 30px;
  --mg-md: 20px;
  --mg-sm: 10px;
  --pd-lg: 20px;
  --pd-md: 10px;
  --pd-sm: 5px;

  /*Radius*/
  --bd-rad-lg: 20px;
  --bd-rad-md: 10px;
  --bd-rad-sm: 5px;

  /*Gap*/
  --gap-lg: 40px;
  --gap-md: 20px;
  --gap-sm: 10px;

  /*Borders*/
  --bd-lg: 2px;
  --bd-md: 1px;
  --bd-sm: 0.5px;

  /*Font-Size*/
  --font-xl: 1.6rem;
  --font-lg: 1.4rem;
  --font-md: 1.2rem;
  --font-sm: 1rem;
  --font-xs: 0.8rem;

  /*Animation*/
  --transition-speed-fast: 0.2s;
  --transition-speed-medium: 0.4s;
  --transition-speed-slow: 0.6s;

  /*Shadows*/
  --shadow-md: 5px 10px 8px #00000033;
}

html {
  scroll-behavior: smooth;
}

body{
    background-color: var(--bg-color);
    background-image: radial-gradient(circle at 87% 4%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 51% 31%, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.03) 8%,transparent 8%, transparent 92%),radial-gradient(circle at 58% 26%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 4% 34%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 30% 82%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 68% 92%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 6%,transparent 6%, transparent 94%),radial-gradient(circle at 19% 32%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 50% 41%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 46% 3%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),radial-gradient(circle at 49% 58%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.04) 4%,transparent 4%, transparent 96%),linear-gradient(0deg, rgb(2 44 49), rgb(5 108 121));
    font-family: "Sour Gummy", sans-serif;
    font-size: var(--font-md);
    font-weight: 400;
    font-style: normal;
    color: var(--primary-font-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

h1, h2, h3, h4 {
  margin: 0;
}

a{
  color: var(--primary-color);
  transition: color var(--transition-speed-fast);
}

a:hover{
  color: var(--highlight-color);
}

a.primary-btn:hover{
  color: var(--secondary-font-color);
}

mark{
  background-color: var(--highlight-color)!important;
}

hr{
  margin-top: var(--mg-md);
  margin-bottom: var(--mg-md);
}

input[type=text], input[type=email], input[type=tel], textarea{
  height: 40px;
  font-size: 1.2rem;
  font-family: inherit;
  color: var(--primary-font-color);
  background-color: var(--bg-inputs);
  border-color: var(--bd-secondary-color);
  border-style: solid;
  border-width: var(--bd-lg);
  border-radius: var(--bd-rad-sm);
  padding: 5px;
  transition: border-color var(--transition-speed-fast);
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, textarea:focus{
  border-color: var(--focus-color);
}

input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, textarea::placeholder{
  color: var(--placeholder-color);
}

textarea{
  resize: none;
  height: 140px;
}

/* Coustum Checkbox */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  border-color: var(--bd-secondary-color);
  border-style: solid;
  border-width: var(--bd-lg);
  border-radius: var(--bd-rad-sm);
  background-color: var(--bg-inputs);
}

.container:hover input ~ .checkmark {
  background-color: var(--highlight-color);
}

.container input:checked ~ .checkmark {
  background-color: var(--primary-color);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .checkmark:after {
  display: block;
}

.container .checkmark:after {
  left: 8px;
  top: 3px;
  width: 7px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*Coustum Checkbox End */

*, *::before, *::after {
  box-sizing: border-box;
}

.pd-sm{
  padding: var(--pd-sm);
}

.pd-md{
  padding: var(--pd-md);
}

.pd-lg{
  padding: var(--pd-lg);
}

.mg-sm{
  margin: var(--mg-sm);
}

.mg-md{
  margin: var(--mg-md);
}

.mg-lg{
  margin: var(--mg-lg);
}

.mt-sm{
  margin-top: var(--mg-sm);
}

.mt-md{
  margin-top: var(--mg-md);
}

.mt-lg{
  margin-top: var(--mg-lg);
}

.mb-sm{
  margin-bottom: var(--mg-sm);
}

.mb-md{
  margin-bottom: var(--mg-md);
}

.mb-lg{
  margin-bottom: var(--mg-lg);
}

.bd-lg{
  border-width: var(--bd-lg);
}

.bd-md{
  border-width: var(--bd-md);
}
.bd-sm{
  border-width: var(--bd-sm);
}

.bd-rad-sm{
  border-radius: var(--bd-rad-sm);
}

.bd-rad-md{
  border-radius: var(--bd-rad-md);
}

.bd-rad-lg{
  border-radius: var(--bd-rad-lg);
}

.bd-primary-color{
  border-color: var(--bd-primary-color);
}

.bd-secondary-color{
  border-color: var(--bd-secondary-color);
}

.bd-solid{
  border-style: solid;
}

.full-width{
  width: 100%;
}

.fb{
  display: flex;
}

.fb-direction{
  flex-direction: column;
}

.fb-direction-sm{
  flex-direction: column;
  gap: 0;
}

.fb-direction-md{
  flex-direction: column;
  gap: 0;
}

.fb-direction-lg{
  flex-direction: column;
  gap: 0;
}

.fb-sp-bet{
  justify-content: space-between;
}

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

.fb-start{
  justify-content: flex-start;
}

.fb-end{
  justify-content: flex-end;
}

.fb-align-center{
  align-items: center;
}

.fb-gap-lg{
  gap: var(--gap-lg);
}

.fb-gap-md{
  gap: var(--gap-md);
}

.fb-gap-sm{
  gap: var(--gap-sm);
}

.t-center{
  text-align: center;
}

.glass{
  background-color: #ffffff3b;
  backdrop-filter: blur(15px);
  border: 1px solid #ffffff3b;
}

.box.glass{
  background-color: #ffffff3b;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.float-left{
  float: left;
}

.float-right{
  float: right;
}

.colored-text{
  color: var(--primary-color);
}

.polaroid-picture{
  transform: rotate(4deg);
  padding: 5px 5px 10px 5px;
  margin: 0 0 10px 10px;
  text-align: center;
  border: 1px solid #c9c9c9;
  box-shadow: 3px 3px 3px 0px #dedede;
  background-color: var(--bg-white);
}

.polaroid-picture img{
  width: 170px;
  height: 170px;
  border-top-left-radius: var(--bd-rad-sm);
  border-top-right-radius: var(--bd-rad-sm);
}

.primary-btn{
  background-color: var(--primary-color);
  border: 0;
  font-family: inherit;
  font-size: 1.2rem;
  color: var(--secondary-font-color);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-speed-fast);
}

.primary-btn:hover{
  background-color: var(--highlight-color);
}

.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

#modal-container{
  display: none;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  z-index: 1000;
  position: fixed;
  top: 0;
}

#modal-container.show{
  display: flex;
}

#modal-dialog{
  background-color: var(--bg-white);
  width: 80%;
  min-height: 100px;
}

#modal-content{
  color: var(--secondary-font-color);
}

#header{
  position: fixed;
  z-index: 997;
  width: 100%;
  color: var(--primary-font-color);
  transition: var(--transition-speed-fast);
}

#header-box{
  width: 100%;
}

#header.is-sticky{
  font-size: 0.8rem;
  backdrop-filter: blur(15px);
}

#header.is-sticky > #header-box h1,
#header.is-sticky > #header-box h3 {
  text-shadow:
    0 1px 2px rgba(0,0,0,0.8),
    0 0 4px rgba(0,0,0,0.6);
}

#overlay{
  position: fixed;
  z-index:998;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
  opacity: 0;
  background-color: #0000008c;
  transition: opacity 2s;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}

#overlay.show{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

#main-nav{
  position: fixed;
  top:0;
  width: 0;
  right: 0;
  bottom: 0;
  color: var(--secondary-font-color);
  background-color: var(--bg-white);
  z-index: 999;
  transition: width 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#main-nav ul{
  padding: 0;
  list-style-type: none;
  text-align: center;
}

#main-nav li a{
  color: var(--secondary-font-color);
  font-size: 1.4rem;
  text-decoration: none;
}

#main-nav li a:hover, #main-nav li a.current-page{
  color: var(--primary-color);
  text-decoration: underline;
}

#main-nav.open{
  width: 80%;
}

#main-nav-close-btn.primary-btn{
  font-size: 1.8rem;
  padding: 2px 10px 2px 10px;
  background-color: transparent;
}
#main-nav-close-btn.primary-btn:hover{
  color: var(--primary-color);
}

.card{
  width: var(--box-mb-width);
  background-color: var(--bg-white);
  color: var(--secondary-font-color);
  box-shadow: var(--shadow-md);
}

.box{
  width: var(--box-mb-width);
  background-color: transparent;
  color: var(--primary-font-color);
}

main{
  margin-top: 140px;
}

#c-form-aside{
  display: none;
  width: 37%;
}

#c-form-aside img{
  width: 100%;
}

footer{
  text-align: center;
}

footer a{
  text-decoration: none;
  margin-right: 10px;
}

footer a:last-child {
  margin-right: 0;
}

@media (min-width: 900px) {
  .fb-direction-sm{
    flex-direction: row;
    gap: var(--gap-sm);
  }

  .fb-direction-md{
    flex-direction: row;
    gap: var(--gap-md);
  }

  .fb-direction-lg{
    flex-direction: row;
    gap: var(--gap-lg);
  }

  #header-box, .card, .box{
    width: var(--box-width);
  }

  main{
    margin-top: 110px;
  }

  #c-form-aside{
    display: block;
  }

  .fb-direction{
    flex-direction: row;
  }

  footer{
    text-align: inherit;
  }

  #modal-dialog{
    max-width: 400px;
  }
}

@media (min-width: 400px) {
  #main-nav.open{
    width: 270px;
  }
}