html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/*************************** COOKIES ***************************/
#cc-main {background:var(--bg-light)}
.cm__btn--secondary {display:none!important}

.cm__btn {background:var(--brand)!important; color:var(--text-on-color)!important; border:1px solid var(--brand)!important}
.cm__btn[data-role=necessary] {background:var(--bg-light)!important; color:var(--text)!important; border:1px solid var(--bg-light)!important}

.cm__btn:hover, .cm__btn[data-role=necessary]:hover {background:#FFFF75!important; color:var(--text)!important; border:1px solid #FFFF75!important}

#cc-main .cm {border-radius:1em!important; box-shadow: 0 .625em 1.875em rgba(30, 44, 70, .3)!important}
.cm--box {background:var(--bg-light)!important}
.cm__body, .cm__desc {color:var(--text)!important}
.cm__btns {border-top:1px solid var(--border)!important}

/*************************** RESET ***************************/
img {max-width:100%}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

.btn, .card, .card-img-top, .text-link {
	transition: border-radius 0.5s ease-out, background 0.5s ease-out !important;}

*:focus, *:focus-visible {outline:4px solid #FF7575!important; outline-offset:2px!important; box-shadow:none!important}
.box *:focus, .box *:focus-visible {outline:4px solid #FFFF75!important; outline-offset:2px!important; box-shadow:none!important}

a {color:#009; text-decoration:underline}
a.text-link:hover {background:#FFFF75}

.mt-1 {margin-top:1em!important}
.mt-2 {margin-top:2em!important}
.mt-3 {margin-top:3em!important}
.mt-4 {margin-top:4em!important}
.mt-5 {margin-top:5em!important}
.mt-6 {margin-top:6em}
.mt-7 {margin-top:7em}
.mt-8 {margin-top:8em}

.mb-1 {margin-bottom:1em!important}
.mb-2 {margin-bottom:2em!important}
.mb-3 {margin-bottom:3em!important}
.mb-4 {margin-bottom:4em!important}
.mb-5 {margin-bottom:5em!important}
.mb-6 {margin-bottom:6em}
.mb-7 {margin-bottom:7em}
.mb-8 {margin-bottom:8em}

/*************************** TYPOGRAPHY ***************************/
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
  font-family: 'Zooja';
  src: url('https://assets.radikal.id/zooja.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {background:var(--ui-000); color:var(--ui-900); font-family: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.5;}

h1, .h1 {font-size:2em;}
h2, .h2 {font-size:1.5em;}
h3, .h3 {font-size:1.25em; font-weight:bold}

h1, h2, h3 {margin-bottom:.5em}

h1 span, h2 span {font-family: 'Zooja', cursive; font-size:1.5em; display:inline-block}
h1 span {display:block; margin-bottom:-.25em}


/*************************** NAVBAR ***************************/
.color-toggle .nav-link .fa-check, .color-toggle .nav-link .sr-only {display:none}
.color-toggle .nav-link.active .fa-check, .color-toggle .nav-link.active .sr-only {display:inline-block}


/*************************** LAYOUT ***************************/
.box {color:var(--text-on-color)}
.hero .box {background:var(--brand) url('https://radikal.id/img/bg-pattern-red.svg') repeat;}
#contact .box {background:var(--brand-blue) url('https://radikal.id/img/bg-pattern-blue.svg') repeat;}

/*.label {display:inline-block; padding: .25em 1em; border-radius: 1em .25em; background:var(--brand); color:var(--text-on-color); margin-bottom:1.25em; font-size:.75em}*/

.label {display:inline-block; color:var(--brand); margin-bottom:.125em; font-size:2em}

#contact .label {color:#FFFF75}

section.accent {background:var(--bg-accent); padding:4em 0}

	.media-kit .row {
		--bs-gutter-x: 2rem;
		--bs-gutter-y: 2rem;
	}

.media-image {text-align:center; vertical-align:middle; margin-bottom:1em; padding:4em 1em}
.media-image img {height:3em}
.media-color span {display:block; padding:2em 0}


/*************************** FOOTER ***************************/
footer {background:var(--brand) url("https://radikal.id/img/bg-pattern-red.svg") repeat; color:var(--text-on-color); padding-top:4em; padding-bottom:6em}

footer {font-size:.875em}
img.footer-brand {height:48px; width:auto}

footer a {color:var(--text-on-color)!important; text-decoration:none!important}
footer a:hover {color:#212223!important; background:#FFFF75!important}

footer .text-md-start a {font-weight:bold}

.btn-social {color:#212223!important; background:#F1F2F3; font-size:.875em!important; font-weight:400!important}

footer .btn-linkedin i {color:#0a66c2}
footer .btn-instagram i {color:#e1306c}

footer .btn-linkedin:hover, footer .btn-linkedin:focus {color:#F1F2F3!important; background:#0a66c2!important;}
footer .btn-instagram:hover, footer .btn-instagram:focus {color:#F1F2F3!important; background:#e1306c!important;}

footer .btn-linkedin:hover i, footer .btn-linkedin:focus i, footer .btn-instagram:hover i, footer .btn-instagram:focus i {color:#F1F2F3}

/*************************** CARD ***************************/
.card-list {list-style:none; padding-left:0}
.card {border-radius:4em 1em; border-color:var(--bg-accent)}
.card-img-top {border-top-left-radius:4em; border-top-right-radius:1em}
.card-footer {background:none; border-top:none}
.card-body {padding:1.5em}
.card-footer {padding:0 1.5em 1.5em 1.5em}

.card:hover {border-radius:3em 1em}
.card:hover .card-img-top {border-top-left-radius:3em;}

.client-list a, .badge-list a {border-radius:.5em}
.client-list img {width:100%; height:auto}

a:hover img {filter: grayscale(100)}
a img {transition:filter 0.5s ease;}
/*************************** FORM ***************************/
.btn-custom, .btn-white {
	border-top-left-radius: 2em;
	border-top-right-radius: .5em;
	border-bottom-left-radius: .5em;
	border-bottom-right-radius: 2em;
	padding: .75em 1.5em;
	border:none;
}

.btn-custom:hover, .btn-white:hover {
	border-top-left-radius: .5em;
	border-top-right-radius: 2em;
	border-bottom-left-radius: 2em;
	border-bottom-right-radius: .5em;
}

.btn-custom {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: #212223;
  background: linear-gradient(45deg, #FFFF75 0%, #FF7575 100%);
  transition: color 0.5s ease;
}

.btn-white {
  position: relative;
  z-index: 1;
  overflow: hidden;
  color: #212223;
  background: #F1F2F3;
}

.btn-custom::before, .btn-white::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #FF7575 0%, #FFFF75 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.btn-custom:hover::before, .btn-white:hover::before {
  opacity: 1;
}

.btn-custom:hover, .btn-custom:active, .btn-custom:focus, .btn-custom:focus-visible, .btn-white:hover, .btn-white:active, .btn-white:focus, .btn-white:focus-visible {
	color: #212223!important;}

.btn-custom:focus, .btn-custom:focus-visible, .btn-white:focus, .btn-white:focus-visible {background:#F1F1F3!important}

/*************************** QUERY ***************************/

@media (max-width: 575.98px) {
    body, .btn {font-size:18px}
    .container {max-width:540px}
	.box {border-radius: 4em 1em 4em 1em; padding:2em}
}

@media (max-width: 991.98px) {
}
	
@media (min-width:576px) and (max-width: 991.98px) {
    body, .btn {font-size:20px}
    .container {max-width:960px}
	.box {border-radius: 4em 1em 4em 1em; padding:2em}
}

@media (min-width: 992px) {
    body, .btn {font-size:24px}
	.box {border-radius: 4em 1em 4em 1em; padding:3em}
}

@media (min-width: 1200px) {
    .container {max-width:1200px}
	.box {border-radius: 4em 1em 4em 1em; padding:4em}
}

/*************************** COLORS ***************************/

:root {
    --brand: #900;
	--brand-blue: #009;
	--text: #212223;
	--text-on-color: #F1F1F3;
	--bg-light: #F1F1F3;
	--bg-accent: #E5ECE9;
	--border: #E3E2E1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}