/* ===================================
    Crafto - Branding Studio
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100..900&display=swap');
/* variable */
:root {      
    --alt-font: "Archivo", sans-serif; 
    --primary-font: "Archivo", sans-serif;
    --base-color:#FF6036;
    --dark-gray: #151515;
    --medium-gray:#626262;
}
/* reset */
body { 
    font-size: 17px;
    line-height: 28px;
}
/* heading */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    letter-spacing: -1px;
}
h1, .h1 {
    font-size: 5rem;
    line-height: 5.2rem;
}
.h2, h2 {
    line-height: 3.2rem;
}
.h3, h3 {
    line-height: 2.8rem;
}
.h6, h6 {
    line-height: 2.2rem;
}
/* btn */
.btn {
    letter-spacing:0px;
    text-transform: none;
}
.btn.btn-extra-large {
    font-size: 19px;
    padding: 22px 45px;
}
.btn.btn-large {
    font-size: 16px;
    padding: 16px 34px;
}
.btn.btn-medium {
    font-size: 14px;
    padding: 12px 24px;
}
.btn.btn-small {
    font-size: 12px;
    padding: 9px 20px;
}
.btn.btn-very-small {
    font-size: 11px;
    padding: 9px 16px 7px;
}
.btn.btn-switch-text.btn-extra-large>span {
    padding: 22px 47px;
}
.btn.btn-switch-text.btn-large>span {
    padding: 16px 36px;
}
.btn.btn-switch-text.btn-medium>span {
    padding: 12px 26px;
}
.btn.btn-switch-text.btn-small>span {
    padding: 7px 22px;
}
.btn.btn-switch-text.btn-very-small>span {
    padding: 11px 18px 9px;
}
.btn.btn-link {
    padding: 0 0 2px;
}
.btn.btn-transparent-light-gray:active, .btn.btn-transparent-light-gray:hover {
    border-color: var(--dark-gray);
}
/* gradient background color */
.bg-gradient-misty-rose {
    background-image: linear-gradient(360deg, rgba(254, 243, 240, 0.5) 0%, #fff6f3 100%);
}
/* text gradient color */
.text-gradient-light-gray-white {
    background-image: linear-gradient(to bottom, #eaeaea, #efefef, #f7f7f7, #fafafa, #ffffff); 
} 
/* background */
.bg-bright-turquoise {
    background-color: #ffddd4;
}
.bg-seashell {
    background-color: #fff6f3;
}
.bg-base-color-transparent {
    background-color: rgba(255, 96, 54, .8);
}
/* padding */
.pb-190px {
    padding-bottom: 190px;
}
/* bg sliding line */ 
.bg-sliding-line-dark-gray { 
    background-image: linear-gradient(135deg, transparent 45%, #464646 45%, #464646 55%, transparent 0);
    background-size: 5px 5px;
}
/* header */
header .container-fluid {
    padding-left: 4%;
    padding-right: 4%;
}
.navbar .navbar-nav .nav-link {
    font-size: 17px;
}
.navbar .btn.btn-switch-text.btn-large > span {
    padding: 13px 25px 12px;
}
header .left-nav .navbar-nav:before {
    background: rgba(0,0,0,.3);
}
/* highlight separator */
.highlight-separator[data-shadow-animation] span,
.highlight-separator[data-shadow-animation] span img {
    height: 29px;
    z-index: -1;
}
.highlight-separator[data-shadow-animation] span {
    bottom: -13px;
}
/* height */
.h-430px {
    height: 430px !important;
}
/* position */
.bottom-minus-180px {
    bottom: -180px;
}
/* HTML video play */
.video-icon-medium .video-icon {
    width: 60px;
    height: 60px;
}
.video-icon-medium .video-icon .video-icon-sonar .video-icon-sonar-bfr {
    width: 110px;
    height: 110px;
}
/* blog button */
.categories-btn {
    font-size: 12px;
}
/* accordion style 02 */
.accordion-style-02 .accordion-item .accordion-header {
    padding: 24px 0;
}
.accordion-style-02 .accordion-item .accordion-body {
    padding-right: 35px;
}
/* review star */
.review-star-icon i {
    color: var(--base-color);
}
/* animation rotation */
.animation-rotation-slow {
    -webkit-animation: rotation 35s infinite linear;
}
/* list */
.list-style-02 li {
    align-items: center;
}
/* portfolio */
.portfolio-transform .portfolio-box .caption {
    box-shadow: none;
    padding: 10px 35px;
}
/* page title */
.page-title-extra-large h2 {
    font-size: 5rem;
    line-height: 5rem;
}
.page-title-extra-large h1 {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0px;
}
/* swiper */
.swiper-pagination-style-2 .swiper-pagination-bullet:first-child{
    margin-left: 0 !important;
}
.swiper-pagination-style-2 .swiper-pagination-bullet {
    margin: 0 10px !important;
}
/* footer */
footer {
    line-height: 24px;
}
footer ul li {
    margin-bottom: 3px;
}
footer ul li a {
    color: var(--white);
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1270px;
    }
}
@media (max-width: 1900px) {
    .fs-275 {
        font-size: 14rem;
        line-height: 14rem;
    }
}
@media (max-width: 1600px) {
    header .container-fluid {
        padding-left: 2%;
        padding-right: 2%;
    }
    h1, .h1 {
        font-size: 4rem;
        line-height: 4rem;
    }
    .fs-275 {
        font-size: 12rem;
        line-height: 12rem;
    }
}
@media (max-width: 1399px) {
    .navbar .navbar-nav .nav-link {
        padding: 10px 10px;
    }
    .fs-275 {
        font-size: 9rem;
        line-height: 9rem;
    }
}
@media (max-width: 991px) {
    .fs-275 {
        font-size: 8rem;
        line-height: 8rem;
    }
}
@media (max-width: 767px) { 
    .fs-275 {
        font-size: 4rem;
        line-height: 4rem;
    }
}


/***************** INI Additional Styles Added *****************/



.w-92 {width:  92% !important;}
.bg-hero-radius-white {position: absolute; top: auto; left 0px; height: same-as-width !important; min-height: same-as-width !important; aspect-ratio : 1 / 1; border-radius: 50%; background-image: radial-gradient(circle at center, rgba(243, 245, 247,0.0) 0%, rgba(255,255,255,0.6) 60%); box-shadow: 0px 0px 40px rgba(255,255,255, 1.0);}
.bg-hero-radius-inter {position: absolute; top: 0; left 0; width: 100%; height: same-as-width !important; aspect-ratio : 1 / 1; border-radius: 50%; background-image: radial-gradient(circle at center, rgba(243, 245, 247,0.6) 0%, rgba(255,255,255,0.6) 60%); background-position: 20% 20%; background-size: 60% 60%; box-shadow: inset 50px 0px 20px rgba(0, 0, 0, 0.1);}
.z-index-m2 {z-index: -999 !important;}
.z-index-m1 {z-index: -99 !important;}
.z-index-1 {z-index: 99 !important;}
.z-index-2 {z-index: 999 !important;}
.z-index-9 {z-index: 9999 !important;}
.bg-gradient-faint-light-clear-top {background-image: linear-gradient(to top, rgba(255,255,255,1.00) 0%, rgba(255,255,255,0.30) 100%); -webkit-background-image: linear-gradient(to top, transparent 0%, #ffffff 0%, #ffffff 100%, transparent 70%);}
.color-ghost-white-transparent {color: rgba(255,255,255,0.05)}
.bg-notenic-blue {background-color: #320275;}
.bg-midnight-dark {background-color: #2a2e35;}
.prod-card-shadow {box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}

sup.lgl {font-size: 0.4em; top: -1.2em;}
sup.lglscl {font-size: 0.2em; top: -2.8em;}
.countind {font-size: 0.4em; font-weight: 700; position: absolute; right: 0px; top: 0px; text-align: right;}
i.notenic-icon.color {display: inline-block; aspect-ratio : 1 / 1; vertical-align: middle; background-image: url(../../images/theme/notenic-logo-emblem-outline-colr.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat;} 
i.notenic-icon.black {display: inline-block; aspect-ratio : 1 / 1; vertical-align: middle; background-image: url(../../images/theme/notenic-logo-emblem-outline-dark.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat;} 
i.notenic-icon.light {display: inline-block; aspect-ratio : 1 / 1; vertical-align: middle; background-image: url(../../images/theme/platforms/notenic-ai-socm-prof-lgttrn.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat; margin-left: 3%;} 
i.chatbot-icon.black {display: inline-block; aspect-ratio : 1 / 1; vertical-align: middle; background-image: url(../../images/theme/icons/chatbot-outl-blck.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat;} 
i.notenic-icon.linkedin {display: inline-block; aspect-ratio : 1 / 1; vertical-align: middle; background-image: url(../../images/theme/icons/notenic-ai-logo-linkedin.png); background-size: 100% auto; background-position: center center; background-repeat: no-repeat;} 

/* HTML video */ 


html {
  scroll-behavior: smooth;
}

video {
    background-size: cover;
    display: table-cell;
    vertical-align: middle;
    width: auto;
    top: auto;
}

.html-video {
    background-color: none;
    left: 40%;
    position: absolute;
    top: 0%;
    width: 60%;
    z-index: -3;
    object-fit: cover;
    -webkit-transform: translateY(-20%);
    transform: translateY(-20%);
}

.accordion-style-06 .accordion-item.active-accordion {background-image: linear-gradient(to bottom, #eaeaea, #efefef, #f7f7f7, #fafafa, #ffffff);}
.accordion-style-06 .accordion-item i.heading-icon {
position: relative; 
right: auto;
top: auto;
opacity: 1;
-webkit-transition: 0.3s;
transition: 0.3s;
color: var(--base-color);
-webkit-transform: none;
transform: none;
}

.bg-gradient-light-faint-transparent {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.30) 1%, rgba(255, 255, 255, 0.00) 99%);
  border-bottom: 2px rgb(233, 117, 34) solid;
}
.interactive-banner-style-06:hover a i {opacity: 0.10;}

.bg-very-light-gray-trnsmask {background-color: rgba(247, 247, 247,0.85) !important;}


.bg-white-faint-transparent-01 {background-color: rgba(255, 255, 255,0.10) !important;}
.bg-black-faint-transparent-01 {background-color: rgba(0, 0, 0,0.10) !important;}
.bg-gradient-very-light-gray-transparent {background: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0)); background: linear-gradient(to right, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0));}
.text-gradient-very-light-gray-transparent {color: transparent; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 100%); -webkit-background-clip: text; background-clip: text;}
.bg-gradient-btt-blck-trns {background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.10)); background: linear-gradient(to top, rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.10));}
.bg-gradient-btt-lght-trns {background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.00)); background: linear-gradient(to top, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.00));}
.bg-gradient-ttb-lght-trns {background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.10)); background: linear-gradient(to top, rgba(0, 0, 0, 0.00), rgba(0, 0, 0, 0.10));}

.bg-black-light1-trans-3tier-1 {background-color: rgba(0, 0, 0,0.10);}
.bg-black-light1-trans-3tier-2 {background-color: rgba(0, 0, 0,0.20);}
.bg-black-light1-trans-3tier-3 {background-color: rgba(0, 0, 0,0.30);}
.bg-nero-gray {background-color: #1F1F1F;}
.bg-clay-white {background-color: #f9f9f7 !important;}
.blur-box-white-01 {backdrop-filter: blur(5px); background-color: rgba(255, 255, 255, 0.20) !important;}
.blur-box-white-02 {backdrop-filter: blur(10px); background-color: rgba(220, 220, 220, 0.25) !important;}
.blur-box-white-prod {backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(220, 220, 220, 0.20) !important;}
.blur-box-dark-prod {backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(15, 15, 15, 0.20) !important;}
.unblurrr {backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); background-color: rgba(15, 15, 15, 0.00) !important;}

.text-nero-gray {color: #1F1F1F !important;}
.opacity-10 {opacity: 1.0 !important;}

.team-style-05 img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}

.team-style-05:hover img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
}

.bg-sliding-line-base-color {background-image: linear-gradient(135deg, transparent 45%, #fd9414 45%, #fd9414 55%, transparent 0); background-size: 5px 5px;}
.fs-25 {font-size: 25px !important;}
.fs-31 {font-size: 31px !important;}
.fs-33 {font-size: 33px !important;}
.fs-34 {font-size: 34px !important;}
.fs-35 {font-size: 35px !important;}
.fs-36 {font-size: 36px !important;}
.fs-37 {font-size: 37px !important;}
.fs-38 {font-size: 38px !important;}
.fs-39 {font-size: 39px !important;}
.fs-41 {font-size: 41px !important;}
.fs-42 {font-size: 42px !important;}
.fs-43 {font-size: 43px !important;}
.fs-44 {font-size: 44px !important;}
.fs-46 {font-size: 46px !important;}
.fs-47 {font-size: 47px !important;}
.fs-48 {font-size: 48px !important;}
.fs-49 {font-size: 49px !important;}
.fs-51 {font-size: 51px !important;}
.fs-52 {font-size: 52px !important;}
.fs-53 {font-size: 53px !important;}
.fs-54 {font-size: 54px !important;}
.fs-56 {font-size: 56px !important;}
.fs-57 {font-size: 57px !important;}
.fs-58 {font-size: 58px !important;}
.fs-59 {font-size: 59px !important;}
.fs-61 {font-size: 61px !important;}
.fs-62 {font-size: 62px !important;}
.fs-63 {font-size: 63px !important;}
.fs-64 {font-size: 64px !important;}
.fs-66 {font-size: 66px !important;}
.fs-67 {font-size: 67px !important;}
.fs-68 {font-size: 68px !important;}
.fs-69 {font-size: 69px !important;}

.mx-50px {margin: auto 50px auto 50px;}
.px-25px {padding-left: 25px; padding-right: 25px;}
.py-15px {padding-top: 15px; padding-bottom: 15px;}
.py-10px {padding-top: 10px; padding-bottom: 10px;}
.py-08px {padding-top: 8px; padding-bottom: 8px;}
.py-05px {padding-top: 5px; padding-bottom: 5px;}


.h-21px {height: 21px !important;}
.h-22px {height: 22px !important;}
.h-23px {height: 23px !important;}
.h-24px {height: 24px !important;}
.h-26px {height: 26px !important;}
.h-27px {height: 27px !important;}
.h-28px {height: 28px !important;}
.h-29px {height: 29px !important;}
.h-150pct {height: 150% !important;}
.min-w-40 {min-width: 40%;}
.min-w-100 {min-width: 100%}

.left-minus-200px {left: -200px !important;}
.left-minus-030pc {left: -30% !important;}
.left-minus-020pc {left: -20% !important;}

.bottom-minus-100px {bottom: -100px !important;}

@media (max-width: 767px) {
  .sm-text-center {text-align: center !important;}
  .sm-opacity-2 {opacity: 0.2}
  .sm-opacity-4 {opacity: 0.4}
  .sm-opacity-6 {opacity: 0.6}
  .sm-opacity-8 {opacity: 0.8}
  .sm-opacity-10 {opacity: 1.0}
  .sm-h-900px {height: 900px !important;}
  .sm-d-block {display: block !important;}
  .sm-d-inline-block {display: inline-block !important;}
  .sm-text-gradient-very-light-gray-transparent {color: #efefef;}
  .sm-d-none {display: none !important;}
  .sm-justify-content-center {display: flex !important; justify-content: center !important;}
  }
  
  
.rotated-text {
  position: absolute;
  left: 45px;
  bottom: -60px;
  width: 400px;
  height: 100px;
  transform: rotate(-90deg); /* Rotates the text 90 degrees clockwise */
  transform-origin: left top; /* Adjust origin if needed */
  text-align: left !important;
}
/***************** END Additional Styles Added *****************/