/* CSS Document */


:root{
    --primary:#0d6efd;
    --dark-bg:#111827;
    --dark-card:#1f2937;
    --dark-border:#374151;
    --light-text:#f8fafc;
    --muted:#9ca3af;
}

body{
    background:var(--dark-bg);
    color:var(--light-text);
}

.navbar{
    backdrop-filter:blur(10px);
}

.section-padding{
    padding:100px 0;
}

.hero{
    min-height:85vh;
    display:flex;
    align-items:center;
}

.feature-card,
.industry-card,
.price-card{
    background:var(--dark-card);
    border:1px solid var(--dark-border);
    transition:.3s;
}

.feature-card:hover,
.industry-card:hover,
.price-card:hover{
    transform:translateY(-5px);
    border-color:var(--primary);
}

.screenshot{
    border-radius:15px;
    overflow:hidden;
    border:1px solid var(--dark-border);
}

.stat-box h2{
    font-size:3rem;
    font-weight:700;
}

.footer{
    background:#0b1220;
}

.text-muted-custom{
    color:var(--muted);
}

.hero-image{
    border-radius:20px;
    box-shadow:0 0 40px rgba(13,110,253,.25);
}

.icon-box{
    font-size:3rem;
    color:var(--primary);
}
	
.screenshot .carousel{
    border-radius:20px;
    overflow:hidden;
    background:#111;
}

.screenshot .carousel-item img{
    width:100%;
    height:430px;
    object-fit:cover;
    transition:transform .6s ease;
}

.screenshot .carousel-item:hover img{
    transform:scale(1.02);
}

.carousel-control-prev,
.carousel-control-next{
    width:8%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color:rgba(0,0,0,.55);
    border-radius:50%;
    padding:18px;
}

.carousel-indicators button{
    width:10px;
    height:10px;
    border-radius:50%;
}

.carousel-indicators .active{
    background:#0d6efd;
}	


@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --primary-1: #00b1fd;
    --primary-2: #01d1ff;
    --primary-3: #01e2ff;
    --primary-4: #0592c3;
    --primary-5: #086ad8;

    --black-1: #434c4b;
    --black-2: #000000;
    --black-3: #9b9a9a;

    --brown-1: #454545;
    --brown-2: #d2a98e;
    --brown-3: #ccae9a2f;

    --light-1: #ffffff;

    --gold-1: #ffbb00;

    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

    --fs-15: 0.9375rem;
    --fs-17: 1.0625rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-25: 1.5625rem;
    --fs-30: 1.875rem;
    --fs-40: 2.5rem;
    --fs-60: 3.75rem;
    --fs-120: 7.5rem;
    --fs-250: 15.625rem;
}

* {
    font-family: "Barlow", sans-serif;
}

html {
    scroll-behavior: smooth;
}

.flex-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.main-content {
    flex: 1 0 auto;
}
.footer-content {
    flex-shrink: 0;
}

.primary-1 {
    color: var(--primary-1);
}

.primary-2 {
    color: var(--primary-2);
}

.primary-3 {
    color: var(--primary-3);
}

.primary-4 {
    color: var(--primary-4);
}

.primary-5 {
    color: var(--primary-5);
}

.text-gold {
    color: var(--gold-1);
}

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

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

.brown-1 {
    color: var(--brown-2);
}

.light-1 {
    color: #fff;
}

.light-2 {
    color: #c2c2c2;
}

.fw-500 {
    font-weight: var(--fw-500);
}
.fw-600 {
    font-weight: var(--fw-600);
}

.fw-700 {
    font-weight: var(--fw-700);
}

.fw-800 {
    font-weight: var(--fw-800);
}

.fw-900 {
    font-weight: var(--fw-900);
}

.fs-15 {
    font-size: var(--fs-15);
}

.fs-17 {
    font-size: var(--fs-17);
}

.fs-18 {
    font-size: var(--fs-18);
}

.fs-20 {
    font-size: var(--fs-20);
}

.fs-25 {
    font-size: var(--fs-25);
}

.fs-30 {
    font-size: var(--fs-30);
}

.fs-40 {
    font-size: var(--fs-40);
}

.fs-60 {
    font-size: var(--fs-60);
}

.fs-120 {
    font-size: var(--fs-120);
}

.fs-250 {
    font-size: var(--fs-250);
}

.mt-6 {
    margin-top: 220px;
}

.mt-7 {
    margin-top: 130px;
}

.text-justify {
    text-align: justify !important;
}

.dropdown-toggle {
    color: #ffffff;
    text-decoration: none;
}

.dropdown-toggle:hover {
    color: #f0eeee;
}

.dropdown-menu {
    border: none;
    box-shadow: 2px 15px 20px 2px#f5f2f2;
}

.navbar-brand {
    width: 10%;
    padding: 0 !important;
    margin: 0 !important;
}


.navbar .nav-link {
    color: #ffffff;
}

.home-navlink:hover {
    color: #f3f0f0;
}

.nav-link:focus {
    color: #ffffff;
}

.mobile-menu {
    background-color: hsl(191, 100%, 95%);
}

.offcanvas-body .nav-link {
    padding: 1.5rem 1rem;
    color: hsl(219, 100%, 50%) !important;
    font-weight: 600;
    text-shadow: 4px 4px 16px hsl(219, 100%, 70%);
    -webkit-transition: .6s;
            transition: .6s;
}

.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-link:focus,
.offcanvas-body .off-active {
    background-color: hsl(191, 100%, 85%) !important;
}

.index-navlink-txt:hover {
    color: #fff;
    text-decoration: 2px underline;
}

.nav-social a {
    color: var(--black-1);
}

.nav-social a:hover {
    color: var(--primary-1);
}

.primary-bg-1 {
    background-color: var(--primary-1);
}

.primary-bg-2 {
    background-color: var(--primary-4);
}

.light-bg-1 {
    background-color: #f5f2ec;
}

.light-bg-2 {
    background-color: var(--light-1);
}

.brown-bg-1 {
    background-color: var(--brown-1);
}

.brown-bg-2 {
    background-color: var(--brown-3);
}

.nav-text-light {
    color: #ffffff;
}

.nav-text-light:hover {
    color: #dddddd;
}

.roboto-font {
    font-family: 'Roboto', sans-serif;
}

.w-20 {
    width: 120px;
}

.main-btn {
    background-color: var(--primary-4);
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: var(--fw-700);
}

.main-btn-2 {
    background-color: transparent;
    color: #ffffff;
    width: 100px;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: var(--fw-700);
    border: 1px solid #ffffff;
}

.main-btn-3 {
    background-color: #ffffff;
    color: var(--primary-4);
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.main-btn-4 {
    background-color: var(--brown-2);
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.main-btn-5 {
    background-color: var(--brown-2);
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.main-btn-6 {
    background-color: var(--primary-1);
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}

.main-btn-2:hover {
    background-color: #e6bc86;
    transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}

.main-btn-3:hover {
    background-color: var(--primary-1);
    color: #ffffff;
    transition: transform 0.5s ease, background 0.8s ease, box-shadow 0.5s ease;
}

.main-btn-4:hover {
    background-color: var(--primary-1);
    color: #ffffff;
    transition: transform 0.5s ease, background 0.8s ease, box-shadow 0.5s ease;
}

.main-btn-5:hover {
    background-color: var(--brown-2);
    color: #ffffff;
    transition: transform 0.5s ease, background 0.8s ease, box-shadow 0.5s ease;
}

.main-btn-6:hover {
    background-color: var(--primary-4);
    color: #ffffff;
    transition: transform 0.5s ease, background 0.8s ease, box-shadow 0.5s ease;
}

.main-shadow {
    box-shadow: 2px 0px 12px 0px#ecdddda6;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}

.main-shadow-2 {
    box-shadow: 2px 15px 20px 2px#f5f2f2;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}

.txt {
    padding-bottom: 20px;
}

.box {
    position: static;
    top: 0;
    left: 0;
    background-color: inherit;
    color: var(--primary-1);
}

.box:hover {
    color: #ffffff;
    transition: color 1s ease;
}

.box:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 14%;
    transform: scaleY(0);
    transform-origin: bottom;
    background: var(--primary-4);
    z-index: -1;
    transition: transform 1s ease;
    border-radius: 8px;
}

.box:hover::after {
    transform: scaleY(1);
    color: deepskyblue;
}

.play-btn {
    padding: 40px;
    background-color: var(--primary-4);
    border-radius: 50%;
}

.play-btn:hover {
    padding: 50px;
    background-color: var(--primary-4);
    border-radius: 50%;
}

.pramary-bg-hover:hover {
    color: var(--primary-1);
    transition: transform 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}



.sun-quote-pages {
    border-radius: 50%;
    background-color: var(--primary-4);
    width: 70px;
    height: 70px;
    border: 2px solid transparent;
    transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}

.sun-quote-pages:hover {
    transform: scale(1.3);
    border: 2px solid var(--primary-4);
    margin: 0px;
    padding: 2px;
}

.wrapper {
    border: 2px solid var(--primary-3);
    border-radius: 50%;
    padding: 23px 23px;
    width: max-content;
}




.our-services-arrow {
    border-radius: 50%;
    background-color: transparent;
    color: var(--primary-1);
    width: 50px;
    height: 50px;
    padding-top: 13px;
    border: 2px solid var(--primary-1);
    transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}

.our-services-arrow:hover {
    transform: scale(1.05);
    background-color: var(--primary-1);
    color: var(--light-1);
    border: 2px solid var(--primary-1);
    margin: 0px;
    padding: 2px;
    padding-top: 13px;
}

.our-services-wrapper {
    border-radius: 50%;
    margin: auto;
    width: max-content;
}




.hover-top .hover-top-content {
    position: relative;
    top: 0;
    transition: top ease 0.5s;
}

.hover-top:hover .hover-top-content {
    top: -7px;
}

.footer-link {
    text-decoration: none;
    color: #838282;
}

.footer-link:hover {
    color: var(--brown-2);
    text-decoration: underline;
    text-underline-offset: 7px;
    transition: transform 0.5s ease, color 0.5s ease, text-decoration 0.5s ease;
}

.footer-social {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    color: #838282;
    border: 1px solid #838282;
    padding: 10px;
    border-radius: 50%;
}

.footer-social:hover {
    background-color: var(--primary-1);
    color: #ffffff;
    border: 1px solid var(--primary-1);
    transition: transform 1s ease, background 1s ease, box-shadow 0.5s ease;
}



.search-input .form-control {
    border: 1px solid transparent !important;
    padding: 10px !important;
    background-color: #ffffff31 !important;
}


.search-input .btn-search {
    border: 1px solid transparent !important;
    background-color: #ffffff31;
}

::placeholder {
    /* color: #fffdfd !important;
    font-weight: 600; */
}

.not-allowed {cursor: not-allowed;}

/*====================================================*/
/*===================About US Start===================*/
/*====================================================*/

.navlink-txt:hover {
    color: var(--primary-4);
    text-decoration: 2px underline;
    transition: transform 0.5s ease, color 0.5s ease, text-decoration 0.5s ease;
}

.active {
    color: var(--light-1) !important;
    text-decoration: 3px underline var(--light-1);
    text-underline-offset: 16px;
}

.nav-underline:hover {
    color: var(--light-1) !important;
    text-decoration: 3px underline;
    text-underline-offset: 16px;
    transition: transform 0.5s ease, color 0.5s ease, text-decoration 0.5s ease;
}

/*=================Search button start==================*/

.search-input-2 .form-control {
    border: 1px solid transparent !important;
    padding: 15px !important;
    background-color: transparent !important;
}

.search-input-2 .btn-search-2 {
    border: 1px solid transparent !important;
    background-color: transparent;
}

.search-input-2 input::placeholder {
    color: var(--black-1) !important;
}

.search-bar {
    padding: 0;
    margin: 0;
    border-radius: 5px;
    border: 1px solid #68686828 !important;
}

.search-bar:active {
    box-shadow: 1px 0px 6px 1px #6aa2ec5e;
}

.form-control:focus,
.form-select:focus {
    box-shadow: none;
}

/*==================search button end=================*/

.sticky {
    z-index: 1;
    position: sticky;
    top: 0;
    width: 100%;
}

.bg-image {
    height: 60vh;
    background-image: url('../image/about_bg.webp');
    background-position: center;
    background-size: cover;
}

.bg-image>div {
    background-color: #1111115b;
}

.bg-image h1 {
    color: #ffffff;
    text-shadow: 2px 2px 3px #000000;
}

/* ==================================== */

.bg-image-services {
    height: 60vh;
    background-image: url('../image/our_service.webp');
    background-position: center;
    background-size: cover;
}

.bg-image-services>div {
    background-color: #1111117c;
}

.bg-image-services h1 {
    color: #ffffff;
    text-shadow: 2px 2px 3px #000000;
}

/* ==================================== */


/* ==================================== */

.bg-image-contact {
    height: 60vh;
    background-image: url('../image/contact_us.webp');
    background-position: center;
    background-size: cover;
}

.bg-image-contact>div {
    background-color: #11111170;
}

.bg-image-contact h1 {
    color: #ffffff;
    text-shadow: 2px 2px 3px #000000;
}

/* ==================================== */

.about-link {
    text-decoration: none;
}

.about-link:hover {
    color: var(--brown-2);
    text-decoration: underline;
    text-underline-offset: 7px;
    transition: transform 0.5s ease, color 0.5s ease, text-decoration 0.5s ease;
}

.about-contact {
    cursor: pointer;
}

/*====================================================*/
/*===================Contact US Start===================*/
/*====================================================*/
.contact-form-input {
    border: none;
    font-weight: 600;
}

.contact-form-input::placeholder {
    color: var(--black-3) !important;
}

.contact-form-input:focus {
    box-shadow: 1px 0px 6px 1px #6aa2ec5e;
}

.main-eria {
    z-index: 0;
    background: #ffffff;
}

.footer-sticky {
    z-index: -10;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.end {
    height: 75vh;
}

.responsive-text-8,
.responsive-text-9,
.responsive-text-10,
.responsive-text-11 {
    line-height: 1.8;
}

/* ======================tooltip start========================== */
.tool-tip {
    position: relative;
    display: inline-block;
    transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}

.tool-tip .tooltip-text {
    visibility: hidden;
    width: 120px;
    background-color: var(--primary-2);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    margin-bottom: 10px;
}

.tool-tip:hover .tooltip-text {
    visibility: visible;
}

/* ================  Start: Request_ERP ================*/
input[name=userType] {
    display: none;
}
.user-type-label {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid #838282;
    border-radius: 3px;
    padding: 0.5rem;
    background-color: #d4d4d4;
    -webkit-transition: .4s;
            transition: .4s;
}
.user-type-label:hover ,
input[name=userType]:checked + .user-type-label {
    border-color: var(--primary-5);
    background-color: var(--primary-5);
    color: #ffffff;
}

.request-erp-container .form-control:hover,
.request-erp-container .form-control:focus,
.request-erp-container .form-select:hover,
.request-erp-container .form-select:focus {
    border-color: var(--primary-5) !important;
}