@charset "UTF-8";
/*!
 * Soka Solutions DMCC
 * Copyright 20124
 */
 :root {
  --ska-sz-head: 60px;
  --ska-sz-section: 200px;

  --ska-bg: url('assets/webp/bg-sand.webp');
  --ska-bgDarkSand: url('assets/webp/bg-dark-sand.webp');
  --ska-bgSimba: url('assets/webp/bg-lion.webp');
  --ska-bgDumbo: url('assets/webp/bg-dumbo.webp');
  --ska-hamburger:url('assets/svg/hamburger.svg');

  --ska-dGreen: #003300;
  --ska-Dark: #1D1F20;
  --ska-Dark10: rgba(29, 31, 32, 0.1);
  --ska-Light: #f4f3e5;
  --ska-Light10: rgba(244, 243, 229, 0.1);
  --ska-Grey: #85888d;
 }
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:1.5em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

.red{border: red 1px solid;}
.green{border: green 1px solid;}
.p-0{padding: 0 !important;}
.p-1{padding: 1em;}

.crd-1{border-radius: 25px; margin-right: .1em; border: 3px solid var(--ska-Dark10);}

.bg{background: var(--ska-bg);}
.bg-dark-sand{background: var(--ska-bgDarkSand);}

.bg-light{background-color: var(--ska-Light); color: var(--ska-Dark);}
.bg-light .col {  background: linear-gradient( to right, transparent, var(--ska-Light)  25px, var(--ska-Light)  calc(100% - 25px), transparent 100%  );}

.bg-dark{background-color:var(--ska-Dark); color:var(--ska-Light);}
.bg-dark .col {  background: linear-gradient( to right, transparent, var(--ska-Dark)  25px);}

.bg-simba {min-height: var(--ska-sz-section); background-position: left center; background-image: var(--ska-bgSimba); background-size: auto 100%; background-repeat: no-repeat;}
.bg-dumbo {min-height: var(--ska-sz-section); background-position: left center; background-image: var(--ska-bgDumbo); background-size: auto 100%; background-repeat: no-repeat;}

.txt-sand{font-family: "Arial", sans-serif; letter-spacing: 0.15em; font-weight: unset; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: none; color: rgba(82,66,32,1); text-align: center; text-transform: normal; -o-text-overflow: clip; text-overflow: clip; white-space: pre; text-shadow: 1px 1px 0 rgba(191,172,136,0.6) , -1px -1px 1px rgba(0,0,0,0.67) ;}
.txt-light{color: var(--ska-Light)!important;}
.txt-dark{color: var(--ska-Dark)!important;}

.shadow{box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}
.shadow-in{box-shadow: inset 0 -8px 8px -6px rgba(0,0,0,0.3); border: 1px solid transparent;}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 395px;
  margin: 0;
  background-color: var(--ska-Dark);
}

/* === HEADER Content &HAMBURGER BUTTON === */

header {
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--ska-sz-head);
  background-color: #fff;
  z-index: 1;
  display: flex;
  align-items: center;
}
.head-logo svg { height: calc(var(--ska-sz-head)*0.8); }

.btn-hamburger {
  position: absolute;
  right: calc(var(--ska-sz-head)*0.9);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ska-hamburger) no-repeat center;
  width: calc(var(--ska-sz-head)*0.8);
  height: calc(var(--ska-sz-head)*0.8);
  border: none;
  outline: none;
}
.sticky-title {
  width: 100%;
  text-align: center;
  transition: all 0.3s ease;
  z-index: 1;
}

.sticky-title.stuck {
  position: fixed;
  top: var(--ska-sz-head);
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ska-bg);
}

.sticky-title h1 {
  transition: all 0.3s ease;
  transform: scale(1);
  opacity: 1;
}

.sticky-title.stuck h1 {
  font-size: 1.5em;
  margin: 0 !important;
  transform: scale(0.9);
  opacity: 0.9;
}
/* === MAIN CONTENT === */
main {
  text-align: justify;
  padding-top: var(--ska-sz-head);
  padding-bottom: 80px;
  min-height: 100%;
}
.panel {
  margin-left: 0;
  transition: margin-left 0.3s ease-in-out;
}
.container {
  width: 100%;
  margin: 0 auto;
}
.row {
  display: flex;
  flex-direction: column; /* Stack columns */
  align-items: center;
  gap: 1rem;
}
.col {
  width: 100%;
  box-sizing: border-box;
  padding: 2em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}
.col-l-right{ width: 80%; margin-left: auto; margin-right: 0;}
.col-l-right p {margin-left: 10%;}
.col-l-left { width: 80%; margin-left: 0; margin-right: auto;}
.col-l-left p {margin-right: 10%;}




footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: var(--ska-Light); /* Optional: match site style */
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === MENU === */
.menu {
  position: fixed;
  top: var(--ska-sz-head);
  right: -256px;
  width: 256px;
  height: 100vh;
  border-left: 3px solid var(--ska-Light10);
  background-color: var(--ska-Dark);
  background-image: linear-gradient(145deg, var(--ska-Dark10), transparent), var(--ska-bgDarkSand);
  transition: right 0.3s ease-in-out;
  z-index: 9998;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu.menu-open {right: 0;}
.menu-opened {overflow: hidden;}
.menu a {color: var(--ska-Light);}
.menu a:hover {text-decoration: underline;}
.menu-header { margin-top: 100px; border-bottom: 1px solid var(--ska-Dark); padding: 20px; background-size: 32px; }
.menu-header-title { font-weight: 400; letter-spacing: 0.5px; margin: 0; }
.menu-section { margin: 25px 0; }

.menu-section-title {
  text-transform: uppercase;
  color: #85888d;
  font-weight: 200;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 0 20px;
  margin: 0;
}

.menu-section-list {
  padding: 0;
  margin: 10px 0;
  list-style: none;
}

.menu-section-list a {
  display: block;
  padding: 10px 20px;
}


.ska-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.slider-track {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
}

.slider-track img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* If only one image, center it */
.slider-track:has(img:nth-child(1):nth-last-child(1)) {
  justify-content: center;
}

@media (min-width: 992px) {
  main{border-left: 3px solid rgba(0,0,0,1);}
  body.menu-opened {overflow: auto;}
  .btn-hamburger {display: none;}
  .menu { right: 0; z-index: 2; overflow-y: scroll;}
  .panel {margin-left: clamp(0px, 10vw, 256px); padding-right: 256px;}
  .sticky-title.stuck h1 {padding-right: 350px;}
  .bg-simba {min-height: var(--ska-sz-section); background-position: left center; background-image: var(--ska-bgSimba);}
  .bg-dumbo {min-height: var(--ska-sz-section); background-position: left center; background-image: var(--ska-bgDumbo);}
  .row {flex-direction: row;}
  .col {width: 50%;}
  .col-l-right { width: 66.6667%; margin-left: auto; margin-right: 0;}
  .col-l-left { width: 66.6667%; margin-left: 0; margin-right: auto;}
}