@import url(carbon.css?2);
@import url('https://fonts.googleapis.com/css2?family=Castoro:ital@0;1&family=Inter:wght@400;700&display=swap');

:root {
  --font: 'Inter', sans-serif;
  --font2: 'Castoro', sans-serif;
  --font3: 'Castoro', sans-serif;
  --display: 400;
  --medium: 700;
  --bold: 700;
  /* colors */
  --body: #000;
  --color: #C4B9B1;
  --ac: #CAAC8C;
  --light: #deba94;
  --dark: #a1845e;
  --darker: #6D6150;
  --darkest: #000;
  --link: var(--ac);
  --h1-c: var(--ac);
  --h2-c: var(--ac);
  --h3-c: var(--ac);
  --h4-c: var(--ac);
  --elg-c: var(--dark);
  --lead: var(--dark);
  --inv: var(--body);
  /* table & form */
  --form: #F4F1EA;
  --th: var(--ac);
  --tr: rgba(255, 255, 255, .3);
  --th-txt: #f0f0f0;
  /* buttons */
  --rad: 8px;
  --btn: var(--darkest);
  --btn-font: var(--font);
  --btn-fs: .875rem;
  --btn-fw: var(--medium);
  --btn-bg: linear-gradient(to bottom, #deba94, #AA8D67);
  --btn2: var(--light);
  --btn2-bg: #666;
  --btn-inv: var(--light);
  --btn-bg-inv: var(--light);
  /* layout */
  --container: 1300px;
  --narrow: 730px;
  --x: 1.5rem;
  --y: 3rem;
  --y2: clamp(1.5rem, 10vmin, 8rem);
  --spacer: 1rem;
  /* nav */
  --header: rgba(0, 0, 0, .8);
  --header-alt: linear-gradient(to bottom, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, 0) 100%);
  --header-alt-noban: transparent;
  --nav: 60px;
  --nav-alt: 100px;
  --logo-height-alt: 100px;
  --logo: url(../i/logo.png);
  --logo-filter: none;
  --logo-filter-alt: none;
  /* navico */
  --nico: var(--ac);
  --nico-alt: var(--ac);
  --nico-close: var(--ac);
  /* mobile menu */
  --menu-bg: #000;
  --menu: var(--dark);
  --menu-active: var(--color);
  --menu-font: var(--font2);
  --menu-fs: 1.5rem;
  --menu-fw: 400;
  --olay: rgba(0, 0, 0, .5);
  --cta-bg: var(--light);
  --cta-url: url(../i/whatsapp.svg);
  /* footer */
  --footer: var(--darker);
  --footer-bg: transparent;
  --footer-a: var(--darker);
  /* icons */
  --ico: 44px;
  --ico-sm: 18px;
  --ico-filter: none;
  --ico-sm-filter: none;
}

/* desktop */
@media (min-width: 1200px) {
  :root {
    /* layout */
    --x: 3rem;
    --spacer: 2rem;
    /* nav */
    --header-alt: linear-gradient(to bottom, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 100%);
    --nav: 70px;
    --nav-alt: 120px;
    --logo-height-alt: 140px;
    --menu-pad: .5625rem 1.5rem;
    --menu: var(--light);
    --menu-alt: var(--light);
    --menu-noban-alt: var(--dark);
    --menu-fs: 1rem;
    --submenu-bg: var(--dark);
    --cta-bg: none;
    --cta-bg-alt: none;
  }
}

/* large desktop */
@media (min-width: 1440px) {
  :root {
    --x: 5rem;
    --nav: 90px;
    --nav-alt: 120px;
    --logo-height-alt: 160px;
    --menu-pad: .625rem 2rem;
  }
}

/* Custom Styles */
.logo {
  text-indent: -99999rem;
  background: transparent url(../i/logo-karpal.png) no-repeat left center;
  background-size: auto 80% !important;
}

.alt .logo {
  background-image: url(../i/logo.png);
}

.b1 {
  background-color: var(--darker);
}

.b4 {
  background-color: var(--darkest);
}

.b2 {
  background: var(--darkest) url(../i/bg.jpg);
  background-size: cover;
}

.b3 {
  background-color: var(--light);
}

.light {
  color: var(--color) !important;
}

.dark {
  color: var(--dark) !important;
}

h1,
h2,
h3,
.lead {
  font-family: var(--font2);
  font-weight: 400;
  color: var(--ac);
}

p, main ul li, main ol li {
  font-size: 15px;
}

.elg {
  font-weight: 400;
}

footer {
  color: var(--footer);
  background: var(--footer-bg);
  padding: var(--x) 0
}

footer p {
  font-size: .6875rem;
  color: var(--footer);
}

footer p a {
  color: var(--darker) !important
}

@media screen and (max-width: 1199px) {
  nav>ul {
    background: var(--menu-bg) url(../i/karpal.webp) 70% center no-repeat;
    background-size: auto 80%;
  }

  nav ul li a {
    font-style: italic;
  }
}

/* Modules */
/* Reveal Animation */
[class*=reveal] {
  opacity: 0;
  position: relative;
  transition: 1s cubic-bezier(.4, 0, .2, 1);
}

.reveal {
  clip-path: polygon(25% 0, 75% 0%, 75% 100%, 25% 100%);
}

.reveal-left {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
}

.reveal-right {
  clip-path: polygon(50% 0, 100% 0%, 100% 100%, 50% 100%);
}

[class*=reveal].done {
  opacity: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

[class*=reveal] img {
  width: 100%;
  transform: scale(1.1);
  transition: 2s cubic-bezier(.4, 0, .2, 1);
}

[class*=reveal].done img {
  transform: scale(1);
  transition: 4s cubic-bezier(.4, 0, .2, 1);
}

/* Banners */
.hero,
.banner {
  --gradient-dir: to top;
  display: flex;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #000;
  justify-content: center;
}

.shaded::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .2) 80%, rgba(0, 0, 0, 1) 100%);
}

.jut, .jut2 {
  margin-top: -70px
}


.tagline {
  position: absolute;
  top: 50%;
  width: 100%;
  max-width: var(--container);
  padding: 0 var(--x);
  z-index: 2;
}

.tagline>* {
  text-shadow: 1px 2px 8px rgba(53, 45, 33, .3);
  width: 100%;
  max-width: 42rem;
}

.tagline>*:last-child {
  margin-bottom: 0;
}

.tiger-r, .tiger-l{
  background: transparent url(../i/tiger.jpg) no-repeat center bottom;
  background-size: 100% auto
}

.tiger-rv, .tiger-lv, .tiger-lv2{
  background: transparent url(../i/tiger2.jpg) no-repeat left top;
  background-size: 100% auto
}

.tiger-rs, .tiger-ls{
  background: transparent url(../i/tiger.jpg) no-repeat center bottom;
  background-size: contain
}

.prop{
  width: 100%;
  height: 280px;
  background: transparent;
}

.contact{
  background: #000 url(../i/karpal.webp) no-repeat 90% 10%;
  background-size: 300px auto;
}


@media (min-width:768px) {

  .karpal{
    background: transparent url(../i/karpal.webp) no-repeat center top;
    background-size: contain;
  }

  .tiger-r{
    background: transparent url(../i/tiger.jpg) no-repeat right top;
    background-size: 1000px auto
  }
  
  .tiger-l{
    background: transparent url(../i/tiger.jpg) no-repeat left center;
    background-size: 760px auto
  }

  .tiger-rs{
    background: transparent url(../i/tiger.jpg) no-repeat right bottom;
    background-size: auto 50%
  }

  .tiger-ls{
    background: transparent url(../i/tiger.jpg) no-repeat left bottom;
    background-size: auto 50%
  }

  .tiger-rv{
      background: transparent url(../i/tiger3.webp) no-repeat right top;
      background-size: 40vw auto
    }

    .tiger-lv{
        background: transparent url(../i/tiger4.webp) no-repeat left top;
        background-size: 40vw auto
      }

      .tiger-lv2{
          background: transparent url(../i/tiger2.jpg) no-repeat left top;
          background-size: 100% auto
        }


  .contact{
    background-size: 500px auto;
  }

  .prop{
    height: 350px;
  }
  
}

.home .alt{
  opacity: 0;
}

ul.highlights-menu{
  padding-left: 0;
}

.highlights-menu li{
  list-style: none;
  font: 1.375rem/1.5 var(--font2);
  font-style: italic;
  margin-bottom: 1rem
}

.highlights-menu li.active a{
  color: var(--color);
}

.narrow{
  max-width: 1200px;
}

.news p.elg{
  margin-top: 1.5rem
}

.home .news p.elg{
  margin-top: 0
}

.news h4{
  color: var(--color);
  margin-bottom: .5rem;
}

.news ol, .new ul{
  margin-bottom: 2rem;
}

.news li{
  margin-bottom: 1rem;
}

.news h4 a{
  text-decoration: underline;
}

.font2{
  font-family: var(--font2);
  color: var(--color)
}

.dark{
  color: var(--dark);
}

@media (min-width:1200px) {
nav ul>li>a{
  padding-right: 0;
  padding-left: 1.6875rem
}
  .jut {
    margin-top: -250px
  }

  .jut2 {
    margin-top: -360px
  }
}


@media (max-width: 767px) {
	.pb-sm-1{padding-bottom: 1.5rem;}
	
	
  .hide-sm {
    display: none !important
  }
}



@media (min-width: 768px) {

  .just p, .just li {
    text-align: justify !important;
    text-justify: distribute;
    text-align-last: left;
    word-spacing: -1px;
  }
  
    .hide-md {
    display: none !important
  }
  
}

.jut-sm{
  margin-top: -60px
}