* {
    box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300..700;1,300..700&display=swap');@font-face {
    font-family: 'Optima';
    src: url('../fonts/Optima.woff2') format('woff2'),
        url('../fonts/Optima.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}@font-face {
    font-family: 'Optima';
    src: url('../fonts/Optima-Medium.woff2') format('woff2'),
        url('../fonts/Optima-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}@font-face {
    font-family: 'Optima';
    src: url('../fonts/Optima-Bold.woff2') format('woff2'),
        url('../fonts/Optima-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}@font-face {
    font-family: 'Optima';
    src: url('Optima-Italic.woff2') format('woff2'),
        url('Optima-Italic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}:root {
    --color-prime: linear-gradient(315deg, #FF6600, #0099FF);
    --color66: #6686C6;
    --colorff: #FF6600;
    --color009: #0099FF;
    --color-white: #ffffff;
    --color-black: #000000;
    --color70: #707070;
    --color003: #0036A1;
    --color99: #994073;
    --colorffa: #FFA600;
    --color335: #335EB3;
    --body-color: rgb(246, 246, 246);
    --family-roboto: 'Roboto', sans-serif;
    --family-roboto-co: 'Roboto Condensed', serif;
    --font-80: 400 8rem/1 var(--family-noto);
    --text-94: 300 9.4rem/.9 var(--family-roboto);
    --text-72: 300 7.2rem/.9 var(--family-roboto);
    --text-60: 300 6rem/.9 var(--family-roboto-co);
    --text-48: 600 4.8rem/1.2 var(--family-roboto);
    --text-42: 600 4.2rem/1.2 var(--family-roboto);
    --text-40: 600 4rem/1.2 var(--family-roboto);
    --text-38: 600 3.8rem/1.2 var(--family-roboto);
    --text-36: 600 3.6rem/1.2 var(--family-roboto);
    --text-30: 600 3rem/1.2 var(--family-roboto);
    --text-26: 400 2.6rem/1.2 var(--family-roboto);
    --text-24: 400 2.4rem/1.4 var(--family-roboto);
    --text-21: 400 2.1rem/1.4 var(--family-roboto);
    --text-20: 400 2rem/1.4 var(--family-roboto);
    --text-19: 400 1.9rem/1.4 var(--family-roboto);
    --text-18: 400 1.8rem/1.66 var(--family-roboto);
    --text-16: 400 1.6rem/1.5 var(--family-roboto);
    --text-14: 400 1.4rem/1.5 var(--family-roboto);
    --text-13: 400 1.3rem/1.5 var(--family-roboto);
    --text-12: 400 1.2rem/1.5 var(--family-roboto);
    --text-11: 400 1.1rem/1.5 var(--family-roboto);
}@media(min-width:2500px) {
    :root {
        --line-height-36: 36px;
        --text-60: 300 7rem/.9 var(--family-roboto-co);
        /* --text-48: 600 6.8rem / 1.2 var(--family-roboto); */
        --text-42: 600 5.2rem/1.2 var(--family-roboto);
        --text-24: 400 3.5rem / 1.4 var(--family-roboto);
        --text-24: 400 2.3rem / 1.4 var(--family-roboto);
        --text-20: 400 2.5rem / 1.4 var(--family-roboto);
        --text-16: 400 2.1rem / 1.5 var(--family-roboto);
        --text-14: 400 1.6rem / 1.5 var(--family-roboto);
        --text-13: 400 1.5rem/1.5 var(--family-roboto);
        --text-12: 400 1.4rem / 1.5 var(--family-roboto);
    }
}@media (max-width: 1699px) {
    :root {
        --text-94: 300 8.4rem/.9 var(--family-roboto);
        --text-60: 300 5rem/.9 var(--family-roboto);
        --text-48: 600 4.5rem/1.2 var(--family-roboto);
        --text-42: 600 4rem/1.2 var(--family-roboto);
        --text-40: 600 3.8rem/1.2 var(--family-roboto);
        --text-36: 600 3.2rem/1.2 var(--family-roboto);
        --text-30: 600 2.8rem/1.2 var(--family-roboto);
        --text-26: 400 2.4rem/1.2 var(--family-roboto);
        --text-24: 400 2.2rem/1.4 var(--family-roboto);
        --text-21: 400 2.1rem/1.4 var(--family-roboto);
        --text-20: 400 2rem/1.4 var(--family-roboto);
        --text-19: 400 1.9rem/1.4 var(--family-roboto);
        --text-18: 400 1.8rem/1.66 var(--family-roboto);
        --text-16: 400 1.4rem/1.5 var(--family-roboto);
        --text-14: 400 1.3rem/1.5 var(--family-roboto);
        --text-13: 400 1.3rem/1.5 var(--family-roboto);
        --text-12: 400 1.2rem/1.5 var(--family-roboto);
        --text-11: 400 1.1rem/1.5 var(--family-roboto);
        --text-10: 400 .9rem/1.5 var(--family-roboto);
    }
}@media (max-width: 1399px) {
    :root {
        --text-94: 300 8.4rem/.9 var(--family-roboto);
        --text-60: 300 4.3rem/.9 var(--family-roboto);
        --text-48: 600 4rem/1.2 var(--family-roboto);
        --text-42: 600 3.6rem/1.2 var(--family-roboto);
        --text-40: 600 3.5rem/1.2 var(--family-roboto);
        --text-36: 600 3rem/1.2 var(--family-roboto);
        --text-30: 600 2.6rem/1.2 var(--family-roboto);
        --text-26: 400 2.4rem/1.2 var(--family-roboto);
        --text-24: 400 2rem/1.4 var(--family-roboto);
        --text-21: 400 1.8rem/1.4 var(--family-roboto);
        --text-20: 400 1.7rem/1.4 var(--family-roboto);
        --text-19: 400 1.6rem/1.4 var(--family-roboto);
        --text-18: 400 1.5rem/1.66 var(--family-roboto);
        --text-16: 400 1.4rem/1.5 var(--family-roboto);
        --text-14: 400 1.3rem/1.5 var(--family-roboto);
        --text-13: 400 1.3rem/1.5 var(--family-roboto);
        --text-12: 400 1.2rem/1.5 var(--family-roboto);
        --text-11: 400 1.1rem/1.5 var(--family-roboto);
        --text-10: 400 .9rem/1.5 var(--family-roboto);
    }
}@media (max-width: 1260px) {
    :root {
        --text-94: 300 8rem/.9 var(--family-roboto);
        --text-60: 300 4rem/.9 var(--family-roboto);
        --text-48: 600 3.8rem/1.2 var(--family-roboto);
        --text-42: 600 3.6rem/1.2 var(--family-roboto);
        --text-40: 600 3.2rem/1.2 var(--family-roboto);
        --text-36: 600 2.8rem/1.2 var(--family-roboto);
        --text-30: 600 2.3rem/1.2 var(--family-roboto);
        --text-26: 400 2rem/1.2 var(--family-roboto);
        --text-24: 400 1.8rem/1.4 var(--family-roboto);
        --text-21: 400 1.7rem/1.4 var(--family-roboto);
        --text-20: 400 1.6rem/1.4 var(--family-roboto);
        --text-18: 400 1.5rem/1.66 var(--family-roboto);
        --text-16: 400 1.4rem/1.5 var(--family-roboto);
        --text-14: 400 1.3rem/1.5 var(--family-roboto);
        --text-13: 400 1.3rem/1.5 var(--family-roboto);
        --text-12: 400 1.2rem/1.5 var(--family-roboto);
        --text-11: 400 1.1rem/1.5 var(--family-roboto);
        --text-10: 400 .9rem/1.5 var(--family-roboto);
    }
}@media (max-width: 760px) {
    :root {
        --text-94: 300 7rem/.9 var(--family-roboto);
        --text-60: 300 3.6rem/.9 var(--family-roboto);
        --text-48: 600 3.3rem/1.2 var(--family-roboto);
        --text-42: 600 3rem/1.2 var(--family-roboto);
        --text-40: 600 2.8rem/1.2 var(--family-roboto);
        --text-36: 600 2.4rem/1.2 var(--family-roboto);
        --text-30: 600 2.2rem/1.2 var(--family-roboto);
        --text-26: 400 2rem/1.2 var(--family-roboto);
        --text-24: 400 1.8rem/1.6 var(--family-roboto);
        --text-21: 400 1.7rem/1.4 var(--family-roboto);
        --text-20: 400 1.6rem/1.4 var(--family-roboto);
        --text-18: 400 1.5rem/1.66 var(--family-roboto);
        --text-16: 400 1.4rem/1.5 var(--family-roboto);
        --text-14: 400 1.3rem/1.5 var(--family-roboto);
        --text-13: 400 1.3rem/1.5 var(--family-roboto);
        --text-12: 400 1.2rem/1.5 var(--family-roboto);
        --text-11: 400 1.1rem/1.5 var(--family-roboto);
        --text-10: 400 .9rem/1.5 var(--family-roboto);
    }
}
@media (max-width:575px) {
    :root {
        --text-60: 300 3rem / .9 var(--family-roboto);
        --text-36: 600 1.9rem / 1.2 var(--family-roboto);
    }
}
html,
body {
    margin: 0;
    scroll-behavior: smooth;
    font-size: 62.5%;
    color: #000;
}body {
    font-family: var(--family-roboto);
}figure {
    margin: 0px;
}a {
    text-decoration: none;
}a:hover {
    transition: .2s ease;
}p {
    font: var(--text-19);
}
@media (max-width:1699px) {
    p {
            font: var(--text-19);
        }
}
    figcaption {
    font: var(--text-30);
}h1,
h2,
h3,
h4 {
    font-family: var(--family-roboto);
}ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
/* Misc */
.font-80 {
    font: var(--font-80);
}
.btn-prime {
    color: #000;
    background: linear-gradient(to right, #FFA600 100%, var(--color-prime) 50%);
    background-size: 200% 110%;
    background-position: right bottom;
    transition: all .5s ease-out;
    border-radius: 0;
    font: var(--text-16);
    margin: 0 .5rem;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.75px;
    padding: 1.2rem 1.5rem;
    font-weight: 500;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.btn-prime:hover {
    background: #994073;
    color: #fff;
}
.maxwidth {
    max-width: 2500px;
    width: 100%;
    margin-inline: auto;
}
/* Reveal Animations */
.image,
.image2,
.image3,
.image4,
.image5 {
    opacity: 0;
}
.reveal-image,
.reveal-image:after {
    position: absolute;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-duration: 1000ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}
.reveal-image2 {
    opacity: 0;
    position: relative;
    animation-name: reveal-image;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-duration: 1000ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    transform-origin: top;
}
.reveal-image3 {
    opacity: 1;
    position: relative;
    animation-name: fadeInline1;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-duration: 1000ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    transform-origin: top;
}
.reveal-image4 {
    opacity: 1;
    position: relative;
    animation-name: reveal-image;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-duration: 1000ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    transform-origin: top;
}
.reveal-image5 {
    opacity: 1;
    position: relative;
    animation-name: reveal-image;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-duration: 1000ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    transform-origin: top;
}
.reveal-image6 {
    opacity: 1;
    position: relative;
    animation-name: fadeInline1;
    animation-delay: .1s;
    animation-iteration-count: 1;
    animation-duration: 1000ms;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
    transform-origin: top;
}
.image3.reveal-image3 {
    opacity: 1;
}
.image2.reveal-image2 {
    opacity: 1;
}
.image-container {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(50% / (var(--ratio)));
}
.img-hover {
    overflow: hidden;
}
.img-hover img {
    transition: .8s all;
    -webkit-transition: .8s all;
    -moz-transition: .8s all;
    -ms-transition: .8s all;
    -o-transition: .8s all;
}
.img-hover img:hover {
    scale: 1.1  ;
}@keyframes reveal-image {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}
@keyframes reveal-image2 {
    from {
        clip-path: inset(0 0% 100% 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}@keyframes fadeInLeft {
    from {
        opacity: 0;
        margin-left: -25%;
    }
    to {
        opacity: 1;
        margin-left: 0%;
    }
}@keyframes fadeInRight {
    from {
        opacity: 0;
        margin-left: 30%;
    }
    to {
        opacity: 1;
        margin-left: 0%;
    }
}@keyframes fadeInline1 {
    0% {
        opacity: 0;
        scale: 1 0
    }
    100% {
        opacity: 1;
        scale: 1 1;
    }
}@keyframes fadeInline2 {
    0% {
        opacity: 0;
        scale: 0 1
    }
    100% {
        opacity: 1;
        scale: 1 1;
    }
}
.reveal-image {
    opacity: 1;
    position: relative;
    animation-name: reveal-image;
}
.verticle-line1 {
    position: absolute;
    width: 7px;
    height: 509px;
    background: url(../jklu-img/line-3.svg) no-repeat;
    z-index: 1;
    left: 0rem;
    top: 0;
}
.side-line2 {
    position: absolute;
    width: 46%;
    height: 7px;
    background: url(../jklu-img/line2.svg) no-repeat;
    z-index: 1;
    right: -12rem;
    bottom: 5rem;
}
@media (min-width:1799px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1425px;
    }
    /* .home_experience_slider {
        padding-left: 25rem;
    } */
}
    
@media (min-width:2499px) {
    .btn-prime {
        margin: 0 1rem;
        padding: 2.1rem 2.5rem;
        font-weight: 500;
        letter-spacing: 2.8px;
        text-transform: uppercase;
    }
    .verticle-line1 {
        height: 639px;
    }
    /* .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1835px;
    } */
}
    .title_head {
    font: var(--text-60);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -2.88px;
    background-image: linear-gradient(315deg, #FF6600, #0099FF);
    background-clip: text;
    color: transparent;
    margin: 0;
    padding-right: 1rem;}
.title_head1 {
    font: var(--text-48);
    /* font-family: var(--family-roboto-co); */
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0;
    color: var(--color003);
    margin: 0;
    padding-right: 1rem;
    
    
}
.verticle-line2 {
    position: absolute;
    right: 8rem;
    top: 1rem;
}
.block {
    display: block;
}
.start_your .btn {
    color: #fff;
    background: linear-gradient(to right, #ffa600 49%, #994073 49%);
    background-size: 200% 110%;
    background-position: right bottom;
    transition: all .5s ease-out;
    font: var(--text-14);
    padding: .8rem 2.5rem;
    text-transform: uppercase;
    font-family: var(--family-roboto);
    border-radius: 0;
    margin-bottom: 1rem;
}
.start_your .btn:hover {
    background-position: left bottom;
    color: #fff;
}
.block_text {
    font: var(--text-36);
    font-weight: 300;
}
.block_text1 {
    /* font: var(--text-24);
    font-weight: 300;
    margin: 0; */
    font: var(--text-19);
    line-height: 1.6;
    font-weight: 300;
}
.block_text2 {
    font: var(--text-21);
    font-weight: 300;
    margin: 0;
}
.width-container {
    max-width: 1088px;
}a.streched_link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
}
.conatiner-medium {
    max-width: 1640px;
    margin: auto;
}a.read-more {
    font: var(--text-19);
    font-weight: bold;
    color: var(--color003);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: .2s ease all;
}a.read-more svg {
    stroke: var(--colorff);
}a.read-more:hover {
    color: var(--colorff)
}a.read-more:hover {
    gap: 12px;
}
.font-30 {
    font: var(--text-30);
}
@media(min-width:2100px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1460px;
    }
    .conatiner-medium {
        max-width: 1560px;
    }
    
}
@media (max-width: 991px) {
    .tab-content>.tab-pane {
        display: block;
        opacity: 1;
    }
    .conatiner-medium {
        max-width: 720px;
    }
    .title_head{
        letter-spacing: -1px;
    }      }
.line {
    width: 84px;
    height: 2px;
    background: var(--colorff);
    margin-block: 2rem;
}@media (min-width:2499px) {
    /* .conatiner-medium {
        max-width: 1920px;
        margin: auto;
    } */
}@media (max-width: 767px) {
    .conatiner-medium {
        max-width: 100%;
    }
    .container {
        max-width: 100%;
    }
.image,
.image2,
.image3,
.image4,
.image5 {
    opacity: 1;
}
}
/*search css tart here*/
.search.fade.search-panel.open {
    opacity: 1;
    height: 100%;
    /* z-index: 9999999; */
    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.overlay {
    position: fixed;
    background: #000000d1 0% 0% no-repeat padding-box;
    opacity: 1;
    backdrop-filter: blur(2px);
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
}
.overlay.open {
    opacity: 1;
    visibility: visible;
    height: 100%;
}
.overlay1 {
    position: fixed;
    background: #000000d1 0% 0% no-repeat padding-box;
    opacity: 1;
    backdrop-filter: blur(2px);
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
}
.overlay1.open {
    opacity: 1;
    visibility: visible;
    height: 100%;
}
.search.fade.search-panel.open {
    opacity: 1;
    height: 100%;
    z-index: 9999;
}
.search.fade.search-panel.open {
    opacity: 1;
    height: 100%;
    z-index: 9999;
}
.search.fade.search-panel.open a.close-btn {
    opacity: 1;
    z-index: 999999;
    visibility: visible;
    display: block;
    right: 5rem;
    top: 3rem;
}
.overlay1.open li {
    animation: fadeInRight .5s ease forwards;
    animation-delay: .35s;
}
.overlay1.open li:nth-of-type(2) {
    animation-delay: .4s;
}
.overlay1.open li:nth-of-type(3) {
    animation-delay: .45s;
}
.overlay1.open li:nth-of-type(4) {
    animation-delay: .50s;
}
.overlay1 ul {
    list-style: none;
    padding: 0;
    margin: 0 auto 4rem;
    display: inline-block;
    position: relative;
    height: 100%;
    width: 100%;
}
.overlay1 ul li {
    display: block;
    position: relative;
    opacity: 0;
}
.overlay1 ul li a {
    display: block;
    position: relative;
    text-decoration: none;
    overflow: hidden;
}
.overlay1 ul li a:hover:after,
.overlay1 ul li a:focus:after,
.overlay1 ul li a:active:after {
    width: 100%;
}
.overlay1 ul li a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0%;
    transform: translateX(-50%);
    height: 3px;
    /* background: #FFF; */
    transition: .35s;
}@keyframes fadeInRight {
    0% {
        opacity: 0;
        left: 20%;
    }
    100% {
        opacity: 1;
        left: 0;
    }
}
.close-btn {
    position: absolute;
    right: 3rem;
    z-index: 2;
    top: 5rem;
    opacity: 0;
    visibility: hidden;
}
.overlay1.open .close-btn {
    position: absolute;
    right: 3rem;
    z-index: 2;
    top: 5rem;
    opacity: 1;
    visibility: visible;
    display: block;
}
.close-btn img {
    width: 2.5rem;
    cursor: pointer;
}
/**********************/
/* Full screen search */
/**********************/
.search {
    align-items: center;
    background: rgb(63 151 253);
    height: 0;
    display: flex;
    justify-content: center;
    opacity: 0;
    position: fixed;
    transition: all 0.5s;
    width: 100vw;
    will-change: transform, opacity;
    z-index: -1;
}
.search:target {
    height: 100vh !important;
    opacity: 1;
    width: 100vw !important;
    z-index: 9999;
}
.search:target .close-btn {
    display: block;
    visibility: visible;
    z-index: 999;
    opacity: 1;
    right: 5rem;
    top: 5rem;
}
.searchbox {
    background: transparent;
    border-width: 0 0 1px 0;
    color: #fff;
    flex: 1 0 auto;
    font-size: 2rem;
    height: 2rem;
    max-width: 100%;
    outline: 0;
    padding: 2rem 3rem 2rem 0rem;
    width: 100%;
    border-bottom: 1px solid #fff;
}input.searchbox::placeholder {
    color: #fff;
}
.close-btn {
    display: none;
    color: #fff;
    font-size: 2rem;
    position: absolute;
    top: 0.5rem;
    right: 2rem;
}
.search-name {
    display: flex;
    width: 100rem;
    justify-content: center;
    align-items: center;
}
.search-name button {
    border: 0;
    background: none;
    position: relative;
    right: 3rem;
}a.btn.btn_yellow {
    background: var(--color-ed);
    font-size: var(--font-14);
    border: none;
    border-radius: 0;
    /* max-width: 130px; */
    height: 35px;
    color: var(--color-white);
    padding: 9px 15px;
    display: inline-block;
    line-height: 1.3;
}a.btn.btn_yellow:hover {
    background-color: var(--color-fd);
    color: var(--color-18);
}
.search-name div {
    width: 100%;
    display: flex;
    align-items: center;
}
.search-name a {
    margin-left: -2rem;
}
.anachor-tag {
    position: relative;
    top: -60px;
    transform: translateZ(0);
    transition: transform .6s ease-in-out;
    backface-visibility: hidden;
}@media screen and (max-width:1366px){
    .conatiner-medium {
        padding-inline: 3rem;
    }
}@media screen and (max-width:991px){
    .conatiner-medium {
        padding-inline: 0.8rem;
    }
}