/*TABLE OF CONTENTS*/
/*=====================
01. dexon Header Top Menu Area Css
02. dexon Nav Menu Area Css 
03. dexon Slider Area Css
04. dexon Section Title Css
05. dexon Service Area css
06. dexon About Area Css
07. dexon Counter Area Css
08. dexon Case Study Area Css
09. dexon Testimonial Area Css
10. dexon Process Area Css
11. dexon Team Area Css
12. dexon Faq Area Css
13. dexon Brand Section Css
14. dexon Call Do Section Css
15. dexon Form Box Css
16. dexon Skill Area Css
17. dexon Blog Area Css
18. dexon footer Area Css
19. dexon Subscribe Area Css
20. dexon Lines CSS
21. dexon Prossess Ber Css
22. dexon Scrollup Section
23. dexon Bounce Animation Css 
24. dexon Animation Dance
25. dexon Breadcumb Area Css
26. dexon abouts_areas Css
27. dexon Feture-Area Css
28. dexon Pricing Section Css
29. dexon Web Development Section CSS
30. dexon Contact  US Css
31. dexon Blog Sidber Widget CSS
32. dexon Case Study Details Css
33. dexon Search Box Css
34. dexon Loader Css
=======================*/


/*================================
<--  Jean Nav Menu Area Css -->
==================================*/


/* Carousel Styles */
.carousel-wrapper {
    overflow: hidden;
    width: 100%; /* Make the width flexible to the container */
    max-width: 100%; /* Remove any hard width limit */
    border: 2px solid #173862;
    border-radius: 10px;
}

.carousel {
    display: flex;
    animation: scroll 20s linear infinite;
}

.carousel .brand-thumb {
    flex-shrink: 0;
    width: 200px; /* You can modify the width as needed */
    margin-right: 20px; /* Space between images */
}

.carousel img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Animation for scrolling the carousel */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


/* Specific class for the styled button */
.styled-button {
    --b: 2px;   /* border thickness */
    --s: .15em; /* size of the corner */
    --c: #013565;

    padding: calc(.05em + var(--s)) calc(.3em + var(--s));
    color: var(--c);
    --_p: var(--s);
    background:
        conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--c) 0)
        var(--_p) var(--_p)/calc(100% - var(--b) - 2*var(--_p)) calc(100% - var(--b) - 2*var(--_p));
    transition: .3s linear, color 0s, background-color 0s;
    outline: var(--b) solid #0000;
    outline-offset: .2em;
}

.styled-button:hover,
.styled-button:focus-visible {
    --_p: 0px;
    outline-color: var(--c);
    outline-offset: .05em;
}

.styled-button:active {
    background: var(--c);
    color: #fff;
}

/* Optional styling for the button container */
.button-container {
    text-align: center; /* Center align button within the container */
    margin-top: 20px;  /* Optional margin for spacing */
}




.dexon_nav_manu {
    transition: .5s;
    z-index: 2;
    position: relative;
    padding: 0 70px 0;
    margin-bottom: -95px;
    border-bottom: 1px solid rgba(23, 38, 98, 0.1); /* Updated to use main blue with opacity */
}

.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #19375E!important; /* Kept black background */
    transition: .5s !important;
    z-index: 922;
    -webkit-animation: 300ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}

.sticky .dexon_menu>ul>li>a {
    color: #ffffff; /* White for sticky menu links */
}

.sticky .header-button a {
    background: #accaf6; /* Combination blue background */
    color: #19375E;
}
.sticky .header-button a i {
    color: #19375E;
}

/* dexon Menu Css */
nav.dexon_menu {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: -3px;
    margin-left: 11px;
}

.dexon_menu ul {
    list-style: none;
    display: inline-block;
}

.dexon_menu>ul>li {
    display: inline-block;
    position: relative;
    z-index: 1;
}

.dexon_menu>ul>li>a {
    font-size: 17px;
    display: block;
    margin: 35px 15px;
    transition: .5s;
    color: #101210; /* Kept black for non-sticky menu links */
    font-weight: 500;
}

.dexon_menu>ul>li>a:hover {
    color: #accaf6; /* Hover color updated to combination blue */
}

/* Menu button */

.header-button {
    display: inline-block;
    float: right;
    margin-top: 20px;
}

.header-button a {
    font-size: 16px;
    padding: 12px 30px 14px;
    font-weight: 500;
    color: #ffffff; /* White text */
    background: #173862; /* Main blue background */
    border-radius: 5px;
    display: inline-block;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.header-button a:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background: #ffffff; /* Combination blue hover effect */
    transform: scale(0);
    transition: .5s;
}

.header-button a i {
    padding-right: 5px;
    position: relative;
    top: 3px;
    color: #ffffff; /* Icon color updated to combination blue */
    transition: .5s;
}

.header-button a:hover:before {
    transform: scale(1);
}

.header-button a:hover {
    color: #101210; /* Black text on hover */
}
.header-button a:hover i {
    color: #101210;
}

/* Style Two Nav Menu */

.style-two.dexon_nav_manu {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* White with opacity */
}

.style-two .dexon_menu>ul>li>a {
    color: #ffffff; /* White text for style-two */
}
.style-two .dexon_menu>ul>li>a:hover {
    color: #ffffff; /* Hover color updated to combination blue */
}

/* Style Two Button */

.style-two .header-button a {
    background: rgba(255, 255, 255, 0); /* Transparent main blue background */
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.sticky.style-two .header-button a {
    color: #ffffff; /* White text for sticky style-two */
}
.style-two.dexon_nav_manu .header-button a:before {
    background: #ffffff; /* Gradient with main and combination blue */
}
.style-two .header-button a i {
    color: #accaf6; /* Icon color updated to combination blue */
}
.style-two .header-button a:hover i {
    color: #101210;
}
.sticky.style-two .header-button a:hover {
    color: #101210;
}

/* Sub Menu Style */

.dexon_menu ul .sub-menu {
    position: absolute;
    left: 0;
    top: 130%;
    width: 217px;
    text-align: left;
    background: #ffffff; /* White submenu background */
    margin: 0;
    z-index: 1;
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: .5s;
    visibility: hidden;
    border-top: 2px solid #accaf6; /* Combination blue border */
    opacity: 0;
}

.dexon_menu ul li:hover>.sub-menu {
    visibility: visible;
    top: 100%;
    opacity: 1;
}

.dexon_menu ul .sub-menu li a {
    display: block;
    padding: 12px 20px;
    margin: 0;
    line-height: 1.3;
    letter-spacing: normal;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: .1s;
    transition: .1s;
    visibility: inherit !important;
    color: #101210 !important; /* Black submenu link color */
}

.dexon_menu ul .sub-menu li:hover>a {
    background: #accaf6; /* Combination blue hover background */
    color: #ffffff !important; /* White text on hover */
}

/* Other styles remain the same */

ul.sub-menu li a span {
    background: #173862; /* Main blue for submenu icons */
    padding: 5px 10px;
    color: #ffffff; /* White text */
    opacity: 1;
    font-family: 'Fira Sans';
    border-radius: 2px;
    margin-left: 5px;
    transition: .5s;
}

ul.sub-menu li:hover a span {
    background: rgba(23, 38, 98, 0.20); /* Main blue with opacity on hover */
}


/* sub menu 4 
====================*/

.dexon_menu ul .sub-menu .sub-menu .sub-menu li {
    position: relative;
}


.dexon_menu ul .sub-menu .sub-menu .sub-menu li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    top: 0%;
}

.dexon_menu li a:hover:before {
    width: 101%;
}

.dexon_nav_manu.sticky .logo_img {
    display: none;
    
}

.main_sticky {
    display: none;
}

.dexon_nav_manu.sticky .main_sticky {
    display: inherit;
}

.mobile-menu.mean-container {
    overflow: hidden;
}



/*
<!-- ============================================================== -->
<!-- Start dexon Slider Section Css -->
<!-- ============================================================== -->*/

.hero-section {
    background: url(../images/slider/hero-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 500px;
}

/* .hero2.hero-section {
    background: url(../images/slider/hero-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 500px;
} */

/* Alternative version for hero2 */
.hero2.hero-section {
    background: url(../images/slider/hero-bg.jpg);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    height: 100vh;
    padding-top: 0;
    margin-top: 0;
}

/* Styles for index and blog pages */
.index-page #sticky-header,
.blog-page #sticky-header {
    position: sticky; /* Make it sticky */
    top: 0; /* Stick to the top */
    z-index: 1000; /* Ensure it's on top */
    background-color: #173862; /* Match the desired header background */
}


.row.hero-bg {
    position: relative;
    z-index: 1;
    margin-top: 75px;
}

.hero-content {
    animation: 3.1s running fadeInLeft;
    text-align: center;
    padding-right: 60px;
}

.hero-content h4 {
    font-size: 16px;
    color: #ffde5d;
    padding: 0 0 14px 90px;
}

.hero-content h1 {
    font-size: 80px;
    line-height: 60px;
    font-weight: 600;
    padding-left: 0;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.hero-content h1:before {
    position: absolute;
    content: "";
    right: -150px;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/slider/hero-shap3.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    z-index: -1;
}

.hero-content h2 {
    font-size: 80px;
    font-weight: 500;
    padding: 5px 0 52px 340px;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.hero-content h2:before {
    position: absolute;
    content: "";
    left: 139px;
    top: -24px;
    width: 100%;
    height: 100%;
    background: url(../images/slider/shap4.png);
    background-repeat: no-repeat;
    background-position: left;
    z-index: -1;
}

.hero-content-text-btn {
    margin-left: 120px;
}

.hero-content p {
    font-size: 18px;
    width: 50%;
    margin: auto;
    color: #101210;
    font-weight: 500;
}

.hero-button a {
    font-size: 16px;
    padding: 12px 38px 15px;
    background:  #5da6ff;
    color: #fff;
    font-weight: 500;
    display: inline-block;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    transition: .5s;
    margin-top: 38px;
    margin-left: 50px;
}

.hero-button a:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    background: #101210;
    
    transform: scale(0);
    transition: .5s;
}

.hero-button a i {
    font-size: 26px;
    position: relative;
    top: 5px;
    left: 2px;
    transform: rotate(-52deg);
    transition: .5s;
    display: inline-block;
}

.hero-button a:hover:before {
    transform: scale(1);
    
}
.hero-button a:hover {
    color: #101210;
}

.hero-button a:hover i{
    color: #5da6ff;
}
.hero-shape {
    position: absolute;
    bottom: -8rem;
    left: -290px;
}

.hero-shape2 {
    position: absolute;
    right: -17rem;
    top: 4rem;
}

.hero-shape3 {
    position: absolute;
    left: 116px;
    right: 0;
    top: 175px;
}

.hero-shape4 {
    position: absolute;
    right: -14rem;
    top: -16rem;
}

.hero-shape5 {
    position: absolute;
    left: 92px;
    bottom: -113px;
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

/*Hero Style two*/

.hero-content2 h1 {
    font-size: 60px;
    line-height: 60px;
    color: #fff; /* White text */
}

.hero-content2 h1 span {
    background: linear-gradient(90deg, #e0f7fa 0%, #89daff 100%); /* Light cyan to light blue gradient */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}




.hero-content2 p {
    font-size: 18px;
    color: #a8a8b3; /* Adjusted text color for better readability */
    padding: 25px 0 0;
}

.hero2 .hero-content2 .hero-button a {
    background: linear-gradient(90deg, #173862 100%, #accaf6 100%); /* Main blue to combination blue gradient */
    color: #fff; /* White text on button */
    margin-top: 24px;
    margin-left: 0;
}

.hero2 .hero-content2 .hero-button a:before {
    background: linear-gradient(90deg, #accaf6 0%, #173862 100%); /* Reversed gradient for button hover */
}

.hero-thumb {
    position: relative;
    z-index: 1;
    padding-left: 28px;
}


/*hero thumb*/
.hero-counter-box {
    position: absolute;
    bottom: 24px;
    left: 140px;
    width: 100%; /* Ensure it takes the full width of the container */
}

.hero-counters-row {
    display: flex;
    justify-content: space-between; /* Space between the two counters */
    align-items: center; /* Aligns the numbers vertically to the center */
    max-width: 500px; /* Set a max width to control the width of the counter box */
}

.hero-counter {
    display: flex;
    align-items: baseline; /* Align numbers like '50' and '+' */
    padding-left: 0; /* Remove any extra padding */
    margin-right: 20px; /* Add spacing between the two counters */
}

.hero-counter h2 {
    font-size: 40px;
    font-weight: 500;
    color: #fff;
    display: inline-block;
    margin: 0;
}

.hero-counter span {
    color: #a8a8b3;
    display: block;
    padding-top: 5px; /* Ensure text has proper spacing */
}

/* Optional: Adjust for mobile responsiveness */
@media screen and (max-width: 767px) {
    .hero-counter-box {
        left: 50px;
        bottom: -65px;
    }

    .hero-counters-row {
        flex-direction: column; /* Stack counters vertically on small screens */
        align-items: flex-start;
    }

    .hero-counter {
        margin-bottom: 10px; /* Space between counters when stacked */
    }
}

/* ---- */

.hero-shape6 {
    position: absolute;
    z-index: 1;
    right: 67px;
    top: 91px;
    animation-name: rotateme;
    animation-duration: 14s;
    animation-iteration-count: infinite;
    max-width: 200px; /* Set a max size for larger screens */
}

@media screen and (max-width: 1200px) {
    .hero-shape6 {
        right: 30px; /* Adjust the position for smaller screens */
        top: 50px; /* Adjust the position for smaller screens */
        max-width: 150px; /* Scale down the shape */
        bottom: 30px;
    }
}

@media screen and (max-width: 768px) {
    .hero-shape6 {
        right: 10px; /* Further adjust position for mobile */
        top: 30px; /* Further adjust position for mobile */
        max-width: 100px; /* Reduce size for mobile screens */
        bottom:50px
    }
}

.hero-shape7 {
    position: absolute;
    left: 200px;
    right: 0;
    bottom: 240px;
    text-align: center;
    transform: rotate(-90deg);
    z-index: 2; /* Make sure it's on top */
}


.hero-shape7 h1 {
    font-size: 160px;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #e0f7fa; /* Light cyan outline */
    color: transparent;
    letter-spacing: 20px;
    -webkit-mask-image: linear-gradient(-75deg, rgba(224,247,250,0.6) 50%, #b3e5fc 50%, rgba(224,247,250,1) 70%); /* Light cyan to light blue gradient */
    -webkit-mask-size: 200%;
    animation: shine 3s infinite;
    transition: .5s;
}

@media screen and (max-width: 999px) {
    .hero-all-shape {
        display: block; /* Make sure hero shapes are visible */
    }
    
    .hero-shape7 {
        left: -550px;
        bottom: 150px;
        transform: rotate(-90deg);
    }

    .hero-shape7 h1 {
        font-size: 250px; /* Adjust font-size for tablet screens */
        letter-spacing: 10px;
    }
}


@media screen and (max-width: 480px) {
    .hero-shape7 {
        
        bottom: 100px; /* Raise it so it's more visible */
        transform: rotate(0deg); /* Remove rotation for better readability */
        left: 50px; /* Move closer to the left edge */  
    }

    .hero-shape7 h1 {
        font-size: 30px; /* Smaller font for mobile screens */
        letter-spacing: 5px; /* Adjust spacing */
    }
}

@media screen and (max-width: 768px) {
    .hero-all-shape {
        display: block; /* Make sure hero shapes are visible */
    }
    
    .hero-shape7 {
        left: -150px;
        bottom: 150px;
        transform: rotate(-90deg);
    }

    .hero-shape7 h1 {
        font-size: 50px; /* Adjust font-size for tablet screens */
        letter-spacing: 10px;
    }
}

/* Override to make sure shapes are visible on smaller screens */
@media only screen and (max-width: 768px) {
    .hero-all-shape {
        display: block !important; /* Ensure shapes are visible below 768px */
    }

    .hero-shape7 {
        left: -380px;
        bottom: 150px;
        transform: rotate(-90deg);
    }

    .hero-shape7 h1 {
        font-size: 170px; /* Adjust font-size for tablet screens */
        letter-spacing: 10px;
    }
}

/* Small mobile: 480px to 599px */
@media only screen and (max-width: 599px) {
    .hero-all-shape {
        display: block !important; /* Ensure shapes are visible */
    }

    .hero-shape7 {
        left: -350px; /* Adjust for smaller screens */
        bottom: 100px;
        transform: rotate(270deg); /* Remove rotation for better readability */
    }

    .hero-shape7 h1 {
        font-size: 200px; /* Smaller font for mobile screens */
        left: -150px;
        letter-spacing: 5px;
    }
}

/* Very small mobile: 320px to 479px */
@media only screen and (max-width: 479px) {
    .hero-all-shape {
        display: block !important; /* Ensure shapes are visible */
    }

    .hero-shape7 {
        left: -350px; /* Adjust for very small screens */
        bottom: 100px;
        /* transform: rotate(0deg); Keep rotation off */
    }

    .hero-shape7 h1 {
        font-size: 145px; /* Smaller font for very small screens */
        letter-spacing: 3px;
        transform: rotate(0deg);
    }
}




.hero-shape8 {
    position: absolute;
    top: 30px;
    left: -20px;
    animation: dance3 4s alternate infinite;
}

@-webkit-keyframes shine {
  from {
    -webkit-mask-position: 150%;
  }
  
  to {
    -webkit-mask-position: -50%;
  }
}


/* Whatsapp css  */
/* Style specifically for the number inside .call-number a */
.call-number a {
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    position: relative;
    display: inline-block;
    font-size: 27px; /* Match the font size of the number */
   
}

.call-number a::before,
.call-number a::after {
    content: '';
    position: absolute;
    width: 100%;
    left: 0;
    font-size: inherit; /* Match the font size */
    line-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-number a::before {
    background-color: #F6D75A;
    height: 2px;
    bottom: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
    transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

.call-number a::after {
    content: attr(data-replace);
    height: 100%;
    top: 15%; /* Adjust vertical positioning */
    transform-origin: center center;
    transform: translate3d(100%, 0, 0);
    transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
    color: #F6D75A;
    font-size: 27px; /* Match the font size of the number */
    line-height: 1; 
    white-space: nowrap; /* Prevent text wrapping */
    text-align: center; /* Center text alignment */
   
}

.call-number a:hover::before {
    transform-origin: 0% 50%;
    transform: scaleX(1);
}

.call-number a:hover::after {
    transform: translate3d(0, 0, 0);
}

.call-number a span {
    display: inline-block;
    transition: transform .3s cubic-bezier(0.76, 0, 0.24, 1);
}

.call-number a:hover span {
    transform: translate3d(-200%, 0, 0);
}


/*Section title
===================================*/

/* Specific styles for the 'why-choose-us' section title */
.why-choose-us .dexon-section-title h1, 
.why-choose-us .dexon-section-title p {
    color: #ffffff;
}



.dexon-section-title h1 {
    font-size: 38px;
    line-height: 44px;
    margin: 0;
}

.dexon-section-title-feature h1 {
    color: #ffffff;
}

.dexon-section-title h4 {
    font-size: 16px;
    font-weight: 500;
    color: #e0f7fa;
    padding: 0 0 18px;
}

.dexon-section-title p {
    padding: 18px 0 0;
}

.dexon-section-title.padding-lg {
    padding: 0 0 68px;
}

.text-center.dexon-section-title p {
    padding: 18px 0 0;
    width: 43%;
    margin: auto;
}

.dexon-section-title.padding-lg.text-center.dreamit {
    padding: 0 0 39px;
}

.dexon-section-title.padding-lg2 {
    padding: 0 0 76px;
}

/**======================================================
<--  Feature Section -->
======================================================**/

.feature-section {
    background: url(../images/resource/feature-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 110px 0 100px;
}

.feature-single-box {
    padding: 45px 50px 28px;
    margin-bottom: 30px;
    text-align: center;
    background: #ffffff;
    border-radius: 30px;
    filter: drop-shadow(0px 5px 15px rgba(23,56,98,0.2)); /* Updated shadow color */
    transition: .5s;
}

.feature-content h2 {
    font-size: 24px;
    font-weight: 500;
    padding: 23px 0 20px;
    color: #173862; /* Updated heading color */
}

/*Dream shape*/
.row.dream-bg {
    position: relative;
    z-index: 1;
}

.dream-shape {
    position: absolute;
    top: -50px;
    left: -90px;
    z-index: -1;
}

.center .dream-shape {
    position: absolute;
    top: -50px;
    left: 0;
    text-align: center;
}

.feature-single-box:hover {
    margin-top: -20px;
}

/*Feature Section Style Two */

.style-two.feature-section {
    background: url(../images/resource/feature-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 110px 0 90px;
}

.style-two .feature-single-box {
    padding: 40px 52px 28px;
    border-radius: 10px;
    background: linear-gradient(0deg, rgba(173,202,246,0) 0%, rgba(173,202,246,0.1) 100%); /* Updated gradient color */
    position: relative;
    z-index: 1;
}

.style-two .feature-single-box:before {
    position: absolute;
    content: "";
    border-top: 1px solid rgba(173,202,246,0.5); /* Updated border color */
    border-bottom: 1px solid rgba(173,202,246,0.5); /* Updated border color */
    transform: scale(0, 1);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s;
    border-radius: 5px;
}

.style-two .feature-single-box:after {
    position: absolute;
    content: "";
    border-left: 1px solid rgba(173,202,246,0.5); /* Updated border color */
    border-right: 1px solid rgba(173,202,246,0.5); /* Updated border color */
    transform: scale(1, 0);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s;
    border-radius: 5px;
}

.style-two .feature-content h2 {
    color: #ffffff; /* Keeping text white for contrast */
}

.style-two .feature-content p {
    font-size: 18px;
    color: #accaf6; /* Updated text color for better readability */
}

.style-two .feature-single-box:hover::before {
    transform: scale(1);
}

.style-two .feature-single-box:hover::after {
    transform: scale(1);
}

.dream-shape2 {
    position: absolute;
    right: 0;
    top: 4rem;
    text-align: right;
    animation: dance2 4s alternate infinite;
}

.dexon-section-title p span {
    padding: 15px 0 30px;
    display: inline-block;
    border-bottom: 1px solid rgba(16,18,16,0.1);
}

.style-two .feature-single-box:hover {
    margin-top: 0;
}

/**
======================================================
<--  dexon About Section Css -->
======================================================**/

/* Center the image using flexbox */
.about-center-thumb {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 100%; /* Ensure the div takes up the full height */
    
}

.about-center-thumb img {
    max-width: 200%; /* Ensure the image fits within the container */
    height: auto; /* Keep the aspect ratio of the image */
}


.row.about-bg {
    padding: 90px 0 0;
}

.about-item-list {
    padding: 20px 0 0;
    border-top: 1px solid rgba(16,18,16,0.10196078431372549);
    margin-top: 30px;
}

.about-item-list ul li {
    list-style: none;
    padding: 5px 0 3px;
}

.about-item-list ul li i {
    font-size: 20px;
    color: #575857;
    padding-right: 5px;
}

.dexon-button a {
    position: relative;
}

.about-button2 {
    padding: 28px 0 0;
}

/*About Style Two
==================*/

.row.about-bg2 {
    padding-top: 110px;
    border-top: 1px solid rgba(16,18,16,0.10196078431372549);
    margin-top: 115px;
}

.testimoonial-section .owl-dots {
    padding: 18px 0 0;
}

.about-counter-style {
    border-top: 1px solid rgba(16,18,16,0.10196078431372549);
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
    padding: 8px 0 17px;
    margin: 28px 0 28px;
}

.row.about-bg2 .about-counter {
    display: flex;
    align-items: center;
}

.row.about-bg2 .counter-title h1 {
    font-size: 44px;
}

.row.about-bg2 .counter-text span {
    padding: 0 0 0 15px;
    margin-left: 15px;
    border-left: 1px solid rgba(16,18,16,0.2);
}

/*About Counter*/

.row.counter-bg {
    padding: 95px 0 0;
    position: relative;
    z-index: 1;
}

.counter-title h1 {
    font-size: 50px;
    font-weight: 500;
    display: inline-block;
}

.counter-text p {
    display: block;
    padding: 5px 0 0;
}

/*About thumb*/

.about-thumb2 {
    padding-left: 115px;
    position: relative;
    z-index: 1;
}

.about-shape {
    position: absolute;
    left: 104px;
    bottom: -10px;
    -webkit-animation: dance3 4s alternate infinite;
}

.dream-shape3 {
    position: absolute;
    left: -19rem;
    bottom: -96px;
    z-index: -1;
}

.dream-shape4 {
    position: absolute;
    right: -4rem;
    text-align: right;
    bottom: 11rem;
    animation: dance2 4s alternate infinite;
}

/*About Style Three
======================*/

.about-section {
    background: url(../images/resource/about-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 0 0 98px;
}

.about-section .row.about-bg {
    border-top: 1px solid rgba(255,255,255,0.10196078431372549);
    padding-top: 120px;
}

.about-section .about-item-list {
    padding: 2px 0 28px;
    border-bottom: 1px solid rgba(255,255,255,0.10196078431372549);
    margin: 0;
}

.about-section .about-item-list ul li i {
    font-size: 20px;
    color: #bbf838;
    padding-right: 5px;
}

.about-section .about-thumb {
    padding: 0 0 0 125px;
    position: relative;
    z-index: 1;
}

.about-section .dexon-section-title p {
    color: #7b7b7b;
}

.about-people {
    padding: 30px 0 0;
    float: left;
}

.people-text p {
    display: inline-block;
    width: 40%;
    padding: 28px 0 0 20px;
    color: #fff;
}

.about-section .about-shape {
    left: 248px;
    bottom: 26rem;
    -webkit-animation: dance3 4s alternate infinite;
}

/*About Style Two*/

.style-two.about-section {
    background: url(../images/resource/about-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 120px 0 100px;
}


.style-four.about-section {
    background: url(../images/resource/about-shp2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 120px 0 100px;
}

.row.about-bg3 {
    padding: 0 0 115px;
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
    margin-bottom: 116px;
}

.about-left-thumb {
    margin: 0 0 0 -35px;
}

/*About testi*/


.people-name h2 {
    font-size: 22px;
    font-weight: 500;
}

.ceo-title {
    color: #101210; /* Black color for CEO & Founder title */
    font-size: 16px; /* Adjust size if necessary */
}

.testi-people {
    float: left;
    margin-right: 20px;
}

.rounded-image {
    border-radius: 50%; /* Make the image rounded */
    width: 100px; /* Adjust width as needed */
    height: 100px; /* Adjust height as needed */
    object-fit: cover; /* Ensure the image fits within the rounded frame */
}

.testi-description-ceo p {
    padding: 20px 0; /* Reduce padding to avoid overflow */
    margin-bottom: 10px; /* Smaller margin for mobile */
    border-bottom: 1px solid rgba(16,18,16,0.1);
    font-size: 16px;
    color: #101210;
    line-height: 35px; /* Adjust line-height for better readability */
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    height: auto; /* Ensure the height adapts to the content */
}

@media (max-width: 768px) {
    .testimonial-single-box2 {
        padding: 10px; /* Ensure padding is mobile-friendly */
        height: auto; /* Ensure container adapts to content */
    }

    .testi-description-ceo p {
        padding: 15px 0; /* Reduce padding for mobile */
        font-size: 14px; /* Smaller font size for mobile */
        line-height: 1.4; /* Tighter line-height for smaller screens */
        height: auto; /* Ensure full height for the content */
    }

    .people-name h2 {
        font-size: 1.25rem;
    }
}



.testimonial-single-box2 .testi-description p {
    font-size: 20px !important;
    color: #101010 !important;
    padding: 0 !important;
    opacity: 1 !important;
    overflow: hidden;
    line-height: 35px;
}



.testimonial-single-box2 {
    margin-bottom: 40px;
}

.testimonial-single-box2 .people-name h2 {
    color: #101010 !important;
    padding: 10px 0 2px;
}

.testimonial-single-box2 .testi-description {
    display: inline-block;
    padding: 45px 0 0;
}



.testimonial-single-box2 .testi-description p {
    font-size: 20px !important;
    color: #101010 !important;
    padding: 0 !important;
    opacity: 1 !important;
    overflow: hidden;
    line-height: 35px;
}



.testimonial-single-box2 .quote-icon {
    float: left;
    padding: 0 10px 0 0;
}

.testimonial-single-box2 .quote-icon i {
    font-size: 50px;
    color: #ffde5d;
    display: inline-block;
}

.about-testi-scroll {
    height: 290px;
    overflow: hidden;
}

.about-scroll {
    animation: 10s normal infinite running scroll;
}

@keyframes scroll {
   0%   {margin-top: 0px;}
   15%  {margin-top: 0px;}

   25%  {margin-top: -230pt;}
   40%  {margin-top: -230pt;}
   
   50%  {margin-top: -460pt;}
   65%  {margin-top: -460pt;}

   75%  {margin-top: -690pt;}
   90%  {margin-top: -690pt;}

   100% {margin-top: 0px;}
}

.dream-shape5 {
    position: absolute;
    right: -6rem;
    text-align: right;
    bottom: 38rem;
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.style-two.about-section .row.counter-bg {
    padding: 54px 0 0;
}
/*About Style Three
=====================*/

.style-three.about-section {
    background: url(../images/resource/about-bg3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 120px 0 102px;
}

.style-three.about-section .row.counter-bg {
    padding: 65px 0 98px;
    margin-bottom: 110px;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
}
.style-three.about-section .row.faq-bg {
    padding-top: 80px;
}
.about-section.style-three.faq {
    padding: 110px 0 102px;
}
/*
    Video  Css  
 ==========================================*/

.rs-video {
    padding: 30px 0 0;
}

.rs-video .animate-border a {
    color: #101010;
}

.video-vemo-icon {
    background: #ACCAF6;
    font-size: 34px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    text-align: center;
    display: inline-block;
}

span.video-title {
    display: inline-block;
    color: #101210;
    font-weight: 500;
    padding: 0 0 0 10px;
}




/**
======================================================
<--  dexon Service Section Css -->
======================================================**/

.service-section {
    background: url(../images/resource/service-bg.jpg);
    padding: 135px 0 90px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.single-service-box {
    padding: 35px 40px 30px;
    background: #a8ff9c;
    border-radius: 20px;
    margin-bottom: 30px;
}

.single-service-box.upper {
    background: url(../images/resource/box-bg1.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 330px;
}

.single-service-box.upper2 {
    background: url(../images/resource/box-bg2.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 500px;
}

.single-service-box.upper3 {
    background: url(../images/resource/box-bg3.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 330px;
}

h3.service-title {
    font-size: 26px;
    font-weight: 500;
    transition: .5s;
}

p.service-desc {
    color: #101210;
    display: inline-block;
    padding: 15px 0 5px;
}

a.dexon-button {
    font-weight: 500;
    text-decoration: underline;
    color: #101210;
    transition: .5s;
    position: relative;
    z-index: 2;
}
a.dexon-button:hover{
    color: #ffde5d;
}
.single-service-box.upper2 a.dexon-button:hover{
    color: #fff;
}
a.dexon-button i {
    font-size: 28px;
    position: relative;
    top: 5px;
    transform: rotate(-45deg);
    display: inline-block;
}

.service .dexon-section-title h1 {
    line-height: 0;
}

.service h1.sections {
    margin-top: 48px;
    white-space: nowrap;
    text-overflow: ellipsis; /* Optional: adds ellipsis (...) if text overflows */

}

.service .dexon-section-title p {
    padding: 40px 0 34px;
}

.dexon-button a:hover {
    color: #FFDE5D;
}

/*shape*/

.serivce-shape {
    position: absolute;
    top: -45px;
    left: 34rem;
    animation-name: moveleftbounce;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.serivce-shape2 {
    position: absolute;
    left: -14rem;
    top: 75px;
    animation: dance3 4s alternate infinite;
}

/* Service Style Two */

.style-two.service-section {
    background: #0d1a2b; /* Darker blue shade */
    padding: 102px 0 115px;
}

.single-service-box2 {
    padding: 30px 35px 5px;
    border-radius: 10px;
    background-image: linear-gradient(10deg, rgba(190, 190, 190, 0.1) 0%, rgba(245, 248, 253, 0) 100%); /* Light blue gradient with transparency */
    position: relative;
    z-index: 1;
    transition: .5s;
    margin-top: 20px;
}

.single-service-box2 h2.service-title {
    font-size: 24px;
    font-weight: 500;
    color: #ffffff; /* White text for clear readability */
    padding: 0 0 22px;
    line-height: 0;
}

.single-service-box2 p.service-desc {
    color: #accaf6; /* Light blue text color for subtle contrast */
    padding: 4px 0 5px;
    width: 75%;
}

.service-icon {
    float: left;
}

.service-icon img {
    width: 70%;
}

.single-service-box2 .service-content {
    overflow: hidden;
}

.right-arrow a i {
    color: #accaf6; /* Light blue arrow color */
    font-size: 52px;
    position: absolute;
    right: 15px;
    top: 32%;
    margin: auto;
    display: inline-block;
    transform: rotate(-45deg);
    transition: .5s;
}

.single-service-box2:hover .right-arrow a i {
    color: #ffffff; /* White on hover for a pop effect */
}

.single-service-box2:hover {
    background: linear-gradient(90deg, rgba(173,198,246,0) 0%, rgba(173,198,246,0.15) 100%); /* Subtle blue glow effect on hover */
}

.style-two.service-section .dexon-desc p {
    padding: 45px 0 0;
    width: 70%;
    color: #ffffff; /* White text for general descriptions */
}

.services-icon {
    float: right;
    margin-top: -80px;
}

.services-icon a {
    font-size: 50px;
    height: 80px;
    width: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    display: inline-block;
    background-color: rgba(23,56,98,0); /* Transparent base */
    border: 1px solid rgba(255,255,255,0.2); /* Light white border */
    color: #accaf6; /* Light blue icon color */
    transform: rotate(-45deg);
    transition: .5s;
    position: relative;
    z-index: 1;
}

.services-icon a:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: linear-gradient(90deg, #173862 0%, #accaf6 100%); /* Blue gradient effect */
    z-index: -1;
    transform: scale(0);
    transition: .5s;
}

.services-icon a:hover:before {
    transform: scale(1);
}

/*Service Style Three
========================*/

.single-service-box3 {
    margin-bottom: 30px;
}

.single-service-box3.upp {
    margin-top: 20px;
}

.single-service-box3.upp2 {
    margin-top: 40px;
}

.service-thumb img {
    border-radius: 5px 5px 0 0;
    width: 100%;
}

.single-service-box3 .service-content {
    padding: 15px 35px 40px;
    background: #fff;
    border-radius: 0 0 5px 5px;
}

a.dexon-button2 {
    font-weight: 500;
    text-decoration: none;
    color: #101210;
    position: relative;
    z-index: 1;
    transition: .5s;
}

a.dexon-button2:before {
    position: absolute;
    content: "";
    bottom: -8px;
    left: 0;
    height: 1px;
    width: 105px;
    background: #101210;
    transition: .5s;
}

a.dexon-button2:hover {
    color: #e9ba04;
}

a.dexon-button2:hover:before {
    background: #e9ba04;
}

/**
======================================================
<--  Dexon Service Details Area Css -->
======================================================**/
.service-detials-area {
    padding: 120px 0 85px;
}

.service-detials-area .dexon-service-thumb img {
    width: 100%;
}

/*service page title*/
.service-page-title h1 {
    line-height: 42px;
}

.service-page-title h1 {
    font-size: 36px;
    font-weight: 600;
    color: #0D0E14;
    padding: 20px 0 20px;
    display: inline-block;
}

/*detials description*/
.serivce-details-desc p span {
    color: #013565;
}

.serivce-details-desc {
    color: black;
}

/*detials box*/
.service-details-box {
    background: #F5F5F5;
    padding: 20px 25px 13px;
    border-radius: 4px;
    margin-bottom: 30px;
    margin-right: 5px;
}

/*detials icon*/
.service-details-icon {
    float: left;
    margin-right: 25px;
    margin-top: 10px;
}

.service-details-icon img {
    border-radius: 4px;
}

/*detials title */
.service-details-title h4 {
    font-size: 22px;
    font-weight: 500;
    line-height: 28px;
    padding: 0 0 12px;
}

/*detils desc*/
.services-detials-desc p {
    font-size: 15px;
    line-height: 26px;
    color: black;
}



/*page title*/
.service-page-title2 h1 {
    line-height: 38px;
    margin: 0;
}

.service-page-title2 h1 {
    font-size: 30px;
    font-weight: 600;
    color: #0D0E14;
    padding: 10px 0 16px;
    display: inline-block;
}

/*details thumb*/
.service-details-thumb {
    position: relative;
}

/*service details icon*/
.widget-service-details-icon p {
    margin-bottom: 12px;
    color: #013565;
    position: relative;
    padding-left: 30px;
}

.widget-service-details-icon i {
    font-size: 25px;
    color: #ffde5d;
    display: inline-block;
    margin-right: 2px;
    position: relative;
    top: 4px;
}

.widget-service-details-icon i {
    position: absolute;
    left: 0;            /* Keep icon at the left */
    top: 0;             /* Align it with the start of the text */
    width: 20px;        /* Set a fixed width for the icon */
}

/*service work process box*/
.service-work-process-box {
    padding: 40px 25px 20px;
    background: #F5F5F5;
    border-radius: 4px;
    text-align: center;
    margin-bottom: 30px;
}

/*work process number*/
.service-work-process-number {
    display: inline-block;
    padding: 10px;
    position: relative;
}

.service-work-process-number:before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 10px solid #ffde5d;
    border-radius: 50%;
    opacity: .3;
}

.service-work-process-number span {
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    color: #fff;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: #ffde5d;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    z-index: 1;
}

/*work process title*/
.service-work-process-title h4 {
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    padding: 20px 0 10px;
}

/*work process desc*/
.service-work-process-desc p {
    font-size: 15px;
    line-height: 26px;
    color: #04192d;
}

/*widget search*/
.widget_search {
    padding: 30px 30px 30px;
    border-radius: 4px;
    margin-bottom: 30px;
    background: #F5F5F5;
}

.widget_search form {
    position: relative;
}

.widget_search input {
    border-radius: 4px;
    padding-left: 20px;
    height: 60px;
    width: 100%;
    position: relative;
    color: #0D0E14;
    border: 0;
}

button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #ffde5d;
    border-radius: 0 4px 4px 0;
}

/*widget search upper*/
.upper.widget_search {
    padding: 0;
    margin-bottom: 30px;
    background: inherit;
    text-align: right;
}

.upper.widget_search input {
    height: 56px;
    width: 73%;
    color: #0D0E14;
    border: 1px solid rgba(13, 14, 20, 0.1);
    border-radius: 4px 0px 0px 4px;
}

.upper.widget_search input:focus-visible {
    box-shadow: none;
}

.upper button.icons {
    height: 56px;
    width: 56px;
}

/*widget categories box*/
.widget-categories-box {
    background: #F5F5F5;
    padding: 42px 40px 25px;
    border-radius: 5px;
}

/*title*/
.categories-title h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    border-bottom: 2px solid #E9E9EA;
    padding: 0px 0 15px;
    margin: 0 0 30px;
    position: relative;
}

.categories-title h4:before {
    position: absolute;
    content: "";
    left: -42px;
    top: 0;
    height: 24px;
    width: 2px;
    background: #ffde5d;
}

.service-detials-area .categories-title h4:before {
    left: -37px;
}

/*categories menu*/
.widget-categories-menu ul {
    display: block;
}

.widget-categories-menu ul li {
    display: block;
    list-style: none;
    margin-bottom: 15px;
    background: #fff;
    padding: 16px 20px 16px;
    border-radius: 4px;
    transition: .5s;
    color: #0D0E14;
}

.widget-categories-menu ul li:hover,
.widget-categories-menu ul li.active {
    background: #ffde5d;
}

.widget-categories-menu ul li a {
    display: block;
    transition: .5s;
    color: inherit;
}

/*all hover*/
.widget-categories-menu ul li:hover a {
    color: inherit;
}

.service-details-icon-box {
    margin-left: 20px;
}

/*widget categories thumb*/
.widget-categories-thumb {
    background: url(../images/resource/feature-bg2.jpg);
    background-repeat: no-repeat;
    padding: 80px 0 80px;
    margin-top: 30px;
    background-size: cover;
}

/*widget title2*/
.widget-title2 h3 {
    font-size: 42px;
    line-height: 44px;
    font-weight: 600;
    color: #ffff;
    padding: 31px 0 40px;
}

/*widget button*/
.widget-button a {
    padding: 17px 40px;
    font-size: 17px;
    font-weight: 500;
    background: #ffde5d;
    color: #0D0E14;
    border-radius: 4px;
    display: inline-block;
}

.widget-button a i {
    margin-right: 5px;
}
.service-detials-area button.icons {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 60px;
    width: 60px;
    background: #ffde5d;
    border-radius: 0 4px 4px 0;
}
/**
======================================================
<--  dexon Testimonila Section Css -->
======================================================**/

.testimoonial-section {
    background: url(../images/resource/testi-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 110px 0 110px;
}

.testimonial-single-box {
    padding: 40px 30px 30px;
    filter: drop-shadow(0px 5px 15px rgba(215,215,217,0.3));
    background-color: #ffffff;
    border-radius: 25px;
    margin-top: 30px;
    transition: .5s;
}

.testi-people {
    float: left;
    margin-right: 20px;
}

.people-name h2 {
    font-size: 22px;
    font-weight: 500;
}

.testi-description p {
    padding: 45px 0 28px;
    margin-bottom: 27px;
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
    font-size: 17px;
    color: #101210;
}

.company-logo {
    display: inline-block;
}

.company-rating {
    float: right;
    position: relative;
    top: -3px;
}

.company-rating ul li {
    display: inline-block;
    font-size: 15px;
    letter-spacing: 7px;
    color: #ffffff;
}

/*All hover */

.testimonial-single-box:hover {
    margin-top: 10px;
}

.active.center .testimonial-single-box {
    margin-top: 10px;
}


/*Owl dots*/

.owl-dots {
    text-align: center;
    padding: 35px 0 0;
}

.owl-dot {
    width: 13px;
    height: 13px;
    border-radius: 10px;
    background-color: #52DAA8;
    display: inline-block;
    margin-right: 7px;
}

.owl-dot.active {
    background-color: #FFDD5D;
    position: relative;
    z-index: 1;
    margin: 0 9px 0 2px;
}

.owl-dot.active:before {
    position: absolute;
    content: "";
    left: -4px;
    top: -4px;
    width: 21px;
    height: 21px;
    border: 1px solid #FFDD5D;
    border-radius: 15px;
}

/*Testimonial Style Two
==========================*/
.style-two.testimoonial-section {
    background: url(../images/resource/testi-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 105px 0 90px;
}

.dexon-section-title.padding-lg.black h4 {
    color: #173862; /* Dark blue for "Testimonials" */
}

.dexon-section-title.padding-lg.black h1 {
    color: #173862; /* Dark blue for "What Our Clients Say" and "About JeanC. & Co." */
}

.style-two .testimonial-single-box {
    padding: 40px 30px 30px;
    filter: inherit;
    background: #accaf68d; /* Darker transparent background */
    border-radius: 10px;
    margin-top: 0;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.style-two .testimonial-single-box:before {
    position: absolute;
    content: "";
    border-top: 2px solid #013565; /* Darker border */
    border-bottom: 2px solid #013565; /* Darker border */
    transform: scale(0, 1);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s;
    border-radius: 5px;
}

.style-two .testimonial-single-box:after {
    position: absolute;
    content: "";
    border-left: 2px solid #013565; /* Darker border */
    border-right: 2px solid #013565; /* Darker border */
    transform: scale(1, 0);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: .5s;
    border-radius: 5px;
}

.style-two .people-name h2 {
    font-size: 22px;
    color: #173862; /* White text for contrast */
    font-weight: 500;
}

.style-two .people-name span {
    font-size: 15px;
    color: #5d86c2; /* White text for contrast */
    font-weight: 500;
}

.style-two .testi-description p {
    padding: 45px 0 5px;
    margin-bottom: 0;
    border-bottom: 0;
    font-size: 18px;
    color: #173862; /* White text for contrast */
    opacity: .9;
}

.style-two .company-rating {
    float: right;
    position: relative;
    top: -38px;
}

.style-two .testimonial-single-box:hover:after {
    transform: scale(1);
}

.style-two .testimonial-single-box:hover:before {
    transform: scale(1);
}

.testi-shape {
    position: absolute;
    right: 7rem;
    bottom: 5rem;
    text-align: right;
    animation: dance2 4s alternate infinite;
}

.testi-shape1 {
    position: absolute;
    left: 9rem;
    top: 30px;
    animation-name: rotateme;
    animation-duration: 20s;
    animation-iteration-count: infinite;
}

.dexon-section-title.text-center.white h1 {
    color: #173862; /* Dark blue for "Ready to Transform" and "Your Recruitment Process?" */
}

.dexon-button2.text-center a {
    color: #173862; /* Dark blue for the "Get Started" button text */
    border-color: #173862; /* Dark blue for the button border */
}

.dexon-button2.text-center a:hover {
    background-color: #173862; /* Dark blue background on hover */
    color: #fff; /* White text on hover */
}


/**
======================================================
<--  dexon Team Section Css -->
======================================================**/

.team-section {
    background: url(../images/resource/team-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 110px 0 105px;
}

.single-team-box {
    margin-bottom: 30px;
    text-align: center;
}

h3.team-title {
    padding: 15px 0 5px;
    font-size: 24px;
    font-weight: 500;
}

.team-thumb {
    overflow: hidden;
}

.team-thumb img {
    transition: .5s;
}

.single-team-box:hover .team-thumb img {
    transform: scale(1.1);
}



@keyframes run {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-216px);
        transform: translateX(-216px);
    }
}

/*Team Style two*/

.style-two.team-section {
    background: url(../images/resource/team-bg2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 120px 0 40px;
}

.style-two .single-team-box {
    margin-bottom: 75px;
    text-align: center;
}

.style-two .team-content {
    position: relative;
    z-index: 1;
}

p.team-text {
    transition: .5s;
}

.style-two .team-social {
    position: absolute;
    right: 0;
    top: 52px;
    opacity: 0;
    transition: .5s;
}

.style-two .team-social ul li {
    display: inline-block;
    list-style: none;
}

.style-two .team-social ul li a {
    font-size: 15px;
    color: #7b7b7b;
    padding-right: 8px;
    transition: .5s;
}

.style-two .team-social ul li a:hover {
    color: #ffde5d;
}

.style-two .single-team-box:hover p.team-text {
    margin-left: -10rem;
    opacity: 0;
}

.style-two .single-team-box:hover .team-social {
    opacity: 1;
    right: 160px;
}

/**
======================================================
<--  Dexon Project Section Css -->
======================================================**/

.project-section {
    background: #ffffff;
    padding: 110px 0 90px;
}

.single-project-box {
    margin-bottom: 30px;
}

.project-thumb {
    position: relative;
    z-index: 1;
}

.project-thumb img {
    width: 100%;
    border-radius: 10px;
}

.project-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(0deg, #e3e3e3 0%, #19375E 100%);
    opacity: .95;
    transition: .5s;
    border-radius: 10px;
}
.style-two .project-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    left: 0;
}
.project-content {
    position: absolute;
    z-index: 1;
    top: 36%;
    left: 0;
    right: 0;
    text-align: center;
    opacity: 0;
    transition: .5s;
}
.project-button .icon img {
    width: inherit;
}
.project-button .icon {
    text-align: center;
}
.project-content h5 {
    font-size: 18px;
    font-weight: 400;
}

.project-content h2 {
    font-size: 26px;
    font-weight: 500;
    padding: 3px 0 4px;
}

.project-content i {
    font-size: 44px;
    display: inline-block;
    transform: rotate(45deg);
}

.project-thumb:hover:before{
    height: 100%;
    top: 0;
}

.project-thumb:hover .project-content {
    opacity: 1;
}

/**
======================================================
<--  Dexon Call To Action Css -->
======================================================**/

.call-to-action {
    background: url(../images/resource/call-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 110px 0 114px;
}

.call-info {
    text-align: center;
}

.call-number h1 {
    font-size: 30px;
    font-weight: 500;
    padding: 18px 0 13px;
    color: #fff;
}

.call-text span {
    color: #a8a8b3;
}

.call-to-action .dexon-button a {
    color: #ffde5d;
    padding: 10px 0 0;
    display: inline-block;
}

/*Call Shape*/

.row.dream1-bg {
    position: relative;
    z-index: 1;
}

.call-shape {
    position: absolute;
    left: -19rem;
    top: -7rem;
    animation-name: moveleftbounce;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.call-shape2 {
    position: absolute;
    bottom: -15px;
    right: -3rem;
    animation-name: moveleftbounce;
    animation-duration: 6s;
    animation-iteration-count: infinite;
}

.call-shape3 {
    position: absolute;
    left: 80px;
    text-align: center;
    right: 0;
    top: -33px;
    animation: dance2 4s alternate infinite;
}

.row.call-bg {
    padding: 111px 0 30px;
}

.dexon-button2 a {
    
    padding: 12px 40px 15px;
    display: inline-block;
    border-radius: 5px;
    margin-top: 30px;
    font-weight: 500;
    position: relative;
    z-index: 1;
    border: 1px solid #7fa2cd;
    color:#ffffff;
}

.dexon-button2 a:before {
    color:#ffffff;
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #103d6f 10%;
    transform: scale(0.0, 1);
    transition: .5s;
    border-radius: 5px;
    border: 1px solid #ffffff;
}

.dexon-button2 a i {
    font-size: 26px;
    position: relative;
    top: 5px;
    left: 2px;
    transform: rotate(-52deg);
    transition: .5s;
    display: inline-block;
}

.dexon-button2 a:hover {
    color: #fff;
}

.dexon-button2 a:hover:before {
    transform: scale(1);
}


/**
======================================================
<--  dexon Footer Section Css -->
======================================================**/

.footer-section {
    background: url(../images/resource/footer-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 118px 0 0px;
}

.style-two.footer-section {
    background: #173862;
    padding: 120px 0 0px;
}

/*widget title*/

h4.widget-title {
    font-size: 24px;
    font-weight: 500;
    margin-top: -5px;
    padding: 0 0 21px;
}

.company-info-desc p {
    padding: 27px 0 9px;
}

/*social icon*/

.follow-company-icon a {
    font-size: 17px;
    display: inline-block;
    margin-right: 21px;
    transition: .5s;
    color: #7b7b7b;
}

/*footer menu*/

ul.footer-menu li {
    display: block;
    list-style: none;
    padding: 0 0 10px;
}

ul.footer-menu li a {
    transition: .6s;
    color: #7b7b7b;
}

/*company contact info*/

ul.footer-info li {
    display: block;
    list-style: none;
    padding: 0 0 12px;
}

ul.footer-info li a {
    color: #7b7b7b;
}

/*input form*/

.subscribe-widget {
    padding: 8px 0 0;
}

.subscribe-widget form {
    position: relative;
}

.subscribe-widget input {
    position: relative;
    height: 54px;
    width: 94%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 25px 0;
}

.subscribe-widget input:active {
    position: relative;
    height: 54px;
    width: 94%;
    border: 2px solid rgb(255, 255, 255);
    padding: 0 25px 0;
}

span.input-icn {
    position: absolute;
    right: 42px;
    top: 15px;
}

.widget-desc p {
    padding: 23px 0 0;
}

a.border-undr {
    text-decoration: underline;
}

/*footer all hover*/

ul.footer-menu li a:hover {
    color: #ACCAF6
}

.follow-company-icon a:hover { 
    color: #ACCAF6;
}

/**footer bottom area**/

.row.footer-bg {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(16,18,16,0.10196078431372549);
    margin: 100px 0 0;
    padding: 25px 0 13px;
}

.footer-bottom-section {
    padding: 23px 0 22px;
    border-top: 1px solid rgba(255,255,255,0.10196078431372549);
    background: #052361;
}

.footer-bottom-content-copy span {
    color: #ACCAF6;
}

.footer-bottom-menu ul li {
    list-style: none;
    display: inline-block;
    padding-left: 42px;
}

.footer-bottom-menu ul li a {
    transition: .5s;
}

.footer-bottom-content-copy p {
    color: #101210;
}

.footer-bottom-menu ul li a:hover {
    color: #ACCAF6;
}

/*Style two*/

.style-two .company-info-desc p {
    color: #a8a8b3;
}

.style-two h4.widget-title {
    color: #fff;
}

.follow-company-icon a {
    color: #a8a8b3;
}

.style-two ul.footer-menu li a {
    color: #a8a8b3;
}

.style-two ul.footer-info li a {
    color: #a8a8b3;
}

.style-two .subscribe-widget input {
    background: rgba(255,255,255,0.10196078431372549);
    color: #fff;
    border-radius: 5px;
}

.style-two .subscribe-widget input::placeholder {
    color: #7b7b7b;
}

.style-two span.input-icn {
    color: #ACCAF6;
}

.style-two .widget-desc p {
    color: #a8a8b3;
}

.style-two .follow-company-icon a:hover {
    color: #ACCAF6;
}

.style-two ul.footer-menu li a:hover {
    color: #ACCAF6;
}

.style-two .row.footer-bg {
    border-top: 1px solid rgba(255,255,255,0.10196078431372549);
}

.style-two .footer-bottom-menu ul li a {
    color: #a8a8b3;
    font-weight: 500;
}

.style-two .footer-bottom-content-copy p {
    color: #a8a8b3;
}

.style-two .footer-bottom-menu ul li a:hover {
    color: #ACCAF6;
}

/*
<!-- ============================================================== -->
<!-- dexon Breatcam Section Css -->
<!-- ============================================================== -->*/


.breatcam-section {
    background: url(../images/resource/inner-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 662px;
}

.style-two.breatcam-section {
    background: url(../images/resource/breadcam-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 407px;
}
.breatcam-content {
    margin-top: 80px;
}
.breatcam-content h1 {
    font-size: 50px;
    line-height: 42px;
}

.breatcam-content h4 span {
    font-size: 14px;
    padding: 10px 25px;
    background: #ACCAF6;
    display: inline-block;
    border-radius: 4px;
    font-weight: 500;
    color: #101210;
    font-family: 'Kumbh Sans';
    text-transform: uppercase;
    margin: 0 0 15px;
}

span.breatcam-title {
    padding: 0 10px !important;
    background: transparent !important;
}

span.geterthean {
    background: transparent !important;
    padding: 0 8px 0 0 !important;
}

.breatcam-content p {
    width: 42%;
    margin: auto;
    padding: 22px 0 0;
}

.inner-shape {
    position: absolute;
    left: -122px;
    top: 0;
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    display: block;
}

.inner-shape2 {
    position: absolute;
    right: 95px;
    top: -13px;
    animation: dance2 4s alternate infinite;
}

.inner-shape3 {
    position: absolute;
    right: -18rem;
    top: -14rem;
    animation: dance2 4s alternate infinite;
}

.style-two .inner-shape {
    left: -99px;
    top: 30px;
}

.style-two .inner-shape3 {
    right: -17rem;
    top: -8rem;
}

.style-two .inner-shape2 {
    top: 45px;
}


/*
<!-- ============================================================== -->
<!-- Dexon Brand Section Css -->
<!-- ============================================================== -->*/

.brand-section {
    background: #ffffff; /* Main blue color */
    padding: 40px 0 40px;
    color: #ffffff; /* White text color */
}

.row.brand-bg {
    text-align: center;
    border-top: 1px solid rgba(16,18,16,0.10196078431372549);
    padding-top: 118px;
    margin-top: 85px;
}

.brand-thumb {
    display: inline-block;
}

marquee span {
    font-size: 24px;
    font-weight: 500;
    font-family: 'clash display';
    padding-right: 112px;
    color: #173862;
    text-transform: uppercase;
    opacity: .3;
}


/*
<!-- ============================================================== -->
<!-- Dexon Why Choose Section Css -->
<!-- ============================================================== -->*/

.why-choose-us {
    background: url(../images/resource/why-chs.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 110px 0 90px;
    
}

.single-choose-us-box {
    text-align: center;
    margin-bottom: 30px;
    padding: 40px 32px 25px;
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.050980392156862744);
    border-radius: 10px;
}

.single-choose-us-box::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #101010;
    z-index: -1;
    transition: .5s;
}

.single-choose-us-box::after {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: #101010;
    z-index: -1;
    transition: .5s;
}

.choose-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 4px 40px 40px 40px;
    background-color: #a8ff9c;
    display: inline-block;
    transition: .5s;
}

.upper .choose-icon {
    border-radius: 50%;
    background-color: #ACCAF6;
}

.upper2 .choose-icon {
    background-color: #7becfe;
    border-radius: 40px 4px 40px 40px;
}

.choose-content h3 {
    font-size: 24px;
    color: #fff;
    font-weight: 500;
    padding: 19px 0 20px;
}

.single-choose-us-box:hover .choose-icon {
    border-radius: 50%;
}

.single-choose-us-box:hover:before {
    transform: rotateX(90deg);
}

.single-choose-us-box:hover:after {
    transform: rotateY(90deg);
}

/*Why Choose Style Two
=========================*/

.style-three.about-section .single-choose-us-box {
    background: #ffde5d;
    border-radius: 10px;
}

.style-three.about-section .single-choose-us-box::before {
    background: #ffff;
    border-radius: 10px;
}

.style-three.about-section .single-choose-us-box::after {
    background: #ffff;
    border-radius: 10px;
}

.style-three.about-section .choose-content h3 {
    color: #101210;
}

.style-three.about-section .choose-icon img {
    transition: .5s;
    filter: brightness(0) invert(0);
}

.style-three.about-section .upper .choose-icon {
    border-radius: 4px 40px 40px 40px;
    background-color: #101210;
}

.style-three.about-section .choose-icon {
    width: 76px;
    height: 76px;
    line-height: 76px;
}

.style-three.about-section .upper .choose-icon img {
    transition: .5s;
    filter: brightness(1) invert(0);
}

.style-three.about-section .upper3 .choose-icon {
    width: 76px;
    height: 76px;
    line-height: 76px;
    background: #ffde5d;
}

.style-three.about-section .single-choose-us-box:hover .choose-icon {
    border-radius: 50%;
}

.style-three.about-section .upper3.single-choose-us-box:hover .choose-icon {
    border-radius: 50%;
    background: #fff;
}

/* Why Choose us Style Two 
=============================*/

.style-two.why-choose-us {
    background: #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 110px 0 108px;
    position: relative; /* So the carousel fits within this section */
    padding: 50px 0; /* Add some padding for aesthetics */
}


.industries-carousel-wrapper {
    overflow: hidden; /* Ensures images don't overflow outside the container */
    position: relative;
    width: 100%; /* Make the width flexible to the container */
}

.industries-carousel {
    display: flex;
    animation: scroll-horizontal 20s linear infinite; /* Infinite horizontal scroll */
}

.industries-carousel .brand-thumb {
    flex-shrink: 0; /* Prevent the images from shrinking */
    width: 200px; /* Adjust the width of each brand image */
    margin-right: 20px; /* Space between images */
    display: inline-block; /* Make sure the images are inline */
}

.industries-carousel img {
    width: 100%;
    height: auto;
    display: block;
    border: none; /* Remove any border or outline */
    border-radius: 10px; /* Add a subtle border radius to the images */
}

/* Keyframes for infinite horizontal scroll */
@keyframes scroll-horizontal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}


.single-choose-us-box2 {
    margin-bottom: 30px;
}

.choose-thumb {
    position: relative;
    z-index: 1;
}

.choose-thumb img {
    width: 100%;
    border-radius: 10px;
}

.choose-button {
    position: absolute;
    left: 30px;
    bottom: -25px;
    width: 63%;
}

.choose-button a {
    padding: 24px 35px;
    font-size: 20px;
    font-weight: 500;
    color: #101010;
    border-radius: 5px;
    background-color: #ACCAF6;
    display: block;
    transition: .5s;
}

.single-choose-us-box2:hover .choose-button a  {
    background: #ffde5d;
}

.style-two.why-choose-us .row.brand-bg {
    margin-top: 110px;
}



/*
<--  dexon Faq section Css -->
===============================================*/

.faq-section {
    background: #013565;
    padding: 86px 0 85px;
}

/*accordion*/

.col-lg-6.col-md-6.faq-pd {
    padding: 0 30px 0 0;
}

.tab_container {
    overflow: hidden;
    padding: 20px 0 0;
}

h2.accordion-title {
    font-size: 30px;
    padding: 0 0 37px;
}

.accordion li {
    list-style: none;
    padding: 2px 0px 15px;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-family: Clash Display;
    font-weight: 500;
    font-size: 22px;
    color: #101210!important;
    border-bottom: 1px solid rgba(19,17,37,0.15);
    padding: 27px 20px 20px 0px;
    z-index: 1;
}

.accordion li p {
    display: none;
    color: #30373e;
    font-size: 16px;
    padding: 0px 0px 20px 0px;
    margin: 0;
    border-bottom: 1px solid rgba(19,17,37,0.15);
}

.accordion li a i {
    float: right;
    transform: rotate(-90deg);
    transition: .5s;
    font-size: 20px;
}

.accordion a.active:after {
  transform: rotate(0deg);
  -webkit-transition: all 0.2s ease-in-out;
  background: #013565;
  opacity: 1;
}

a.active i {
    transform: rotate(0deg) !important;
}

.accordion a.active {
    border-bottom: 0;
    padding: 25px 20px 15px 0px;
    color: #013565 !important;
}



/*
<!-- ============================================================== -->
<!-- dexon Pricing Section Css -->
<!-- ============================================================== -->*/


.row.pricing-bg {
    padding: 80px 0 0;
    position: relative;
    z-index: 1;
}

/*top section*/

.claint-suport {
    padding: 28px 0 0;
}

.claint-suport img {
    display: inline-block;
}

.cliant-text {
    display: inline-block;
    padding-left: 5px;
}

.cliant-text span {
    color: #101010;
}

/*End top section */

.pricing-single-box {
    padding: 35px 40px 50px;
    background: #ffde5d;
    border-top: 5px solid rgba(16,18,16,0.10196078431372549);
    border-radius: 5px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

h4.price-top-title {
    font-size: 18px;
    font-weight: 500;
}

.pricing {
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
    padding: 0px 0 22px;
}

h2.price-title {
    display: inline-block;
    font-size: 40px;
    font-weight: 500;
    color: #101010;
    margin: 8px 0 0;
}

span.price-mon {
    display: inline-block;
    color: #101210;
}

/*pricing boody*/

.pricing-boody span {
    color: #101210;
    padding: 23px 0 12px;
    display: inline-block;
}

.pricing-boody ul li {
    list-style: none;
    display: block;
    padding: 0 0 16px 0;
    color: #101210;
}

.pricing-boody ul li i {
    color: #7b7b7b;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    transition: .5s;
    display: inline-block;
    margin-right: 5px;
}

.price-btn a {
    padding: 7px 23px 14px;
    font-weight: 500;
    color: #101210;
    border: 1px solid #101210;
    display: inline-block;
    border-radius: 5px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.price-btn a i {
    font-size: 30px;
    position: relative;
    top: 5px;
    transform: rotate(-45deg);
    display: inline-block;
}
.price-btn a:hover {
    border: 1px solid #101210;
    background:#101210 ;
    color: #fff;
}
.pricing-single-box.upper .price-btn a i {
    transition: .5s;
}
.pricing-single-box.upper .price-btn a:hover {
    border: 1px solid #ffde5d;
    background:#ffde5d ;
    color: #101210;
}
.pricing-single-box.upper .price-btn a:hover i{
    color: #101210;
}
/* Upper box
===============*/

.pricing-single-box.upper {
    background: #101210;
    border-top: 5px solid #ffde5d;
}

.upper h4.price-top-title {
    color: #fff;
}

.upper .pricing {
    border-bottom: 1px solid rgba(255,255,255,0.14901960784313725);
}

.upper h2.price-title {
    color: #fff;
}

.upper span.price-mon {
    color: #fff;
}

.upper .pricing-boody span {
    color: #fff;
}

.upper .pricing-boody ul li {
    color: #888988;
}

.upper .pricing-boody ul li i {
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.upper .price-btn a {
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
}

.upper .price-btn a i {
    color: #ffde5d;
}

.prc-tp-btn {
    font-size: 14px;
    float: right;
    width: 96px;
    height: 28px;
    border-radius: 14px;
    background-color: #ffde5d;
    text-align: center;
    color: #101010;
    display: inline-block;
    margin-top: -15px;
}

.prc-tp-btn i {
    font-size: 13px;
    padding-right: 2px;
    display: inline-block;
}

.upper2.pricing-single-box {
    background: #94f787;
    border-top: 5px solid rgba(16,18,16,0.10196078431372549);
}

.prc-thumb {
    position: absolute;
    right: 5rem;
    bottom: 16rem;
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    display: block;
}

/*
<!-- ============================================================== -->
<!-- Jean Contact Section  Css -->
<!-- ============================================================== -->*/

.contact-us {
    background: url(../images/resource/contact-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 120px 0 120px;
}

.contact-us .dexon-section-title p {
    padding: 12px 0 16px;
}

.contact-thumb {
    margin-right: 14px;
    
}

.contact-thumb img {
    border-radius: 10px;
    width: 100%;
}

.contact-form-box3 {
    background: #fff;
    padding: 40px 40px 40px;
    border-radius: 5px;
}

.contact-form-box3 .form-box input {
    border: 1px solid rgba(20, 20, 156, 0.1);
}

.contact-form-box3 .form-box textarea {
    border: 1px solid rgba(16,18,16,0.1);
    height: 130px;
}

/*Contact info*/

.contact-info {
    padding: 40px 40px 40px;
    align-items: center;
    display: flex;
    position: relative;
    z-index: 1;
    border-radius: 5px;
    overflow: hidden;
}

.contact-info::before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(255,255,255,0.10196078431372549);
    z-index: -1;
    transition: .5s;
    transform: skew(-90deg) translateY(100%);
    border-radius: 5px;
}

.contact-info:hover:before {
    transform: skew(0deg) translateY(0);
}


.contact-icon {
    float: left;
    margin-right: 20px;
}

.contact-icon i {
    font-size: 25px;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 35px;
    background-color: #ffde5d;
    display: inline-block;
    color: #101010;
}

.contact-icon {
    float: left;
    margin-right: 25px;
}

.contact-title h5 {
    font-size: 20px;
    color: #ffff;
    font-weight: 500;
    margin-top: 10px;
}

.contact-title span {
    color: #ffde5d;
}

.upper .contact-icon i {
    background-color: #a9ff9c;
}

.upper .contact-title span {
    color: #a9ff9c;
}

.upper2 .contact-icon i {
    background-color: #7becfe;
}

.upper2 .contact-title span {
    color: #7becfe;
}

.style-two.call-to-action .call-shape3 {
    left: 0;
    text-align: right;
    right: -4rem;
    top: -33px;
}


/*
<!-- ============================================================== -->
<!-- dexon Shop Section  Css -->
<!-- ============================================================== -->*/


.shop-section {
    padding: 120px 0 120px;
}


/* Shop Form*/

p.form-text {
    display: inline-block;
    font-size: 16px;
    color: #101210;
    margin: 15px 0 0;
}

.form_box {
    padding: 0 0 30px;
}

.form_box select {
    width: 49%;
    height: 56px;
    padding-left: 15px;
    background: #f6f6f6;
    border-radius: 4px;
    font-size: 16px;
    color: #101010;
    border: 0;
    transition: .5s;
}

.upper.widget_search form {
    margin-bottom: 30px;
    position: relative;
}

.upper.widget_search input {
    width: 100%;
    color: #101010;
    background: #f6f6f6;
    border: 0;
    padding: 0 20px 0;
    height: 56px;
    border-radius: 4px;
    background-color: #ffffff;
    border: 1px solid rgba(19,17,37,0.1);
}

.upper.widget_search input::placeholder {
    color: #101010;
}

/*Shop Right*/

.widget-check-box {
    padding: 45px 40px 35px;
    background: #f6f6f6;
    border-radius: 5px;
}


.categories-title h4 {
    font-size: 20px;
    font-weight: 500;
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
    padding: 0px 0 15px;
    margin: 0 0 23px;
}


/*Price Range
===========================*/


.wrapper-box {
    margin-bottom: 75px;
}

.upp.categories-title h4 {
    border: 0;
    margin-bottom: 8px;
}

.slider-labels {
    margin-top: 32px;
}

.text-right.caption {
    display: inline-block;
}

.caption {
    display: inline-block;
}

.caption strong {
    width: 64px;
    height: 34px;
    line-height: 35px;
    background: #ffde5d;
    display: inline-block;
    text-align: center;
    font-size: 14px;
    color: #101010;
    font-weight: 500;
    border-radius: 3px;
    margin-right: 10px;
}

span#slider-range-value1, span#slider-range-value2 {
    color: #101010;
    font-size: 15px;
}

.text-right.caption span {
    color: #101010;
}


.noUi-target {
  position: relative;
  direction: ltr;
}

.noUi-base {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.noUi-origin {
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
}

.noUi-handle {
  position: relative;
  z-index: 1;
}

.noUi-stacking .noUi-handle {
  z-index: 10;
}

.noUi-state-tap .noUi-origin {
  -webkit-transition: left 0.3s, top 0.3s;
  transition: left 0.3s, top 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

/* Painting and performance;
 */

.noUi-base,
.noUi-handle {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/* Slider size and handle placement;
 */

.noUi-horizontal {
  height: 3px;
}

.noUi-horizontal .noUi-handle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: -7px;
    top: -7px;
    background-color: #ffde5d;
    border: 3px solid #ffff;
}

.noUi-background {
  background: #ececec;
}

.noUi-connect {
  background: #ffde5d;
  -webkit-transition: background 450ms;
  transition: background 450ms;
}

.noUi-origin {
  border-radius: 2px;
}

.noUi-target {
  border-radius: 2px;
}


/* Handles and cursors;
 ========================*/

.noUi-draggable {
  cursor: w-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: n-resize;
}

.noUi-handle {
  cursor: default;
  -webkit-box-sizing: content-box !important;
  -moz-box-sizing: content-box !important;
  box-sizing: content-box !important;
}

.noUi-handle:active {
    border: 8px solid rgba(255, 222, 93, 0.38);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    left: -14px;
    top: -14px;
}

/* Product Items
==================*/

.product-items ul li {
    display: block;
    list-style: none;
    color: #101210;
    padding: 0 0 16px;
    transition: .5s;
}

.product-items ul li:hover {
    color: #ffde5d;
}

/* Product 
======================*/


.products-collection {
    margin-bottom: 25px;
}

.product-thumb {
    float: left;
    padding-right: 20px;
}

.products-title h6 {
    font-size: 16px;
    font-weight: 500;
}

.product-icon-list ul {
    line-height: 20px;
}

.product-icon-list ul li {
    list-style: none;
    display: inline-block;
    color: #f9ac08;
    letter-spacing: 3px;
    font-size: 13px;
    padding: 4px 0 5px;
}

.powered-person span {
    font-size: 14px;
    color: #e9ba04;
}


/*Shop Left 
======================*/

.row.products {
    padding-right: 32px;
}

.single-products-box {
    text-align: center;
    margin-bottom: 30px;
}

.products-thumb {
    position: relative;
    z-index: 1;
}

.products-thumb:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: rgba(255,222,95,0.45);
    opacity: .8;
    transition: .5s;
    border-radius: 4px 4px 0 0;
}

.products-thumb img {
    width: 100%;
    transition: .5s;
    border-radius: 4px 4px 0 0;
}

.product-sale {
    position: absolute;
    top: 20px;
    left: 20px;
}

.product-thumb-icon a {
    font-size: 20px;
    width: 46px;
    height: 46px;
    line-height: 47px;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    color: #101010;
    transition: .7s;
    display: inline-block;
    position: relative;
    bottom: 40%;
    z-index: 1;
    overflow: hidden;
}

.product-thumb-icon a:before {
    position: absolute;
    content: "";
    z-index: -1;
    right: 0;
    height: 100%;
    width: 0;
    border-radius: 50%;
    background: #ffde5d;
    transition: .6s;
}

.product-thumb-icon a:nth-child(1) {
    position: absolute;
    left: 0;
    opacity: 0;
}

.product-thumb-icon a:nth-child(2) {
    position: absolute;
    right: 0;
    opacity: 0;
}

.product-content {
    padding: 25px 0 40px;
    border-radius: 5px;
    filter: drop-shadow(0px 10px 25px rgba(219,219,219,0.3));
    background-color: #ffffff;
}

ul.product-rating li {
    list-style: none;
    display: inline-block;
    color: #f9ac08;
    letter-spacing: .3em;
    font-size: 15px;
}

.product-title h2 {
    font-size: 20px;
    font-weight: 500;
    color: #101210;
}

.product-price p {
    font-family: "Clash Display";
    font-weight: 500;
    padding: 14px 0 0px;
    font-size: 18px;
    margin-bottom: 12px;
}

.product-price p span {
    color: #7b7b7b;
    text-decoration: line-through;
    margin-left: 5px;
    font-size: 18px;
}

.shop-btn a {
    font-size: 14px;
    padding: 8px 20px;
    background-color: rgba(243,243,243,0);
    border: 1px solid rgba(19,17,37,0.1);
    display: inline-block;
    border-radius: 4px;
    color: #101010;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

.shop-btn a:before {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #ffde5d;
    border-radius: 4px;
    transform: scale(0.0, 1);
    transition: .5s;
}

.shop-btn a i {
    display: inline-block;
    margin-right: 4px;
}

.shop-btn a:hover:before {
    transform: scale(1);
}

.product-thumb-icon a:hover {
    color: #fff;
}

.product-thumb-icon a:hover:before {
    left: 0;
    width: 100%;
}

.single-products-box:hover .products-thumb:before{
    height: 100%;
    top: 0;
}

.single-products-box:hover .product-thumb-icon a:nth-child(1) {
    opacity: 1;
    left: 150px;
}

.single-products-box:hover .product-thumb-icon a:nth-child(2) {
    opacity: 1;
    right: 150px;
}

/*
Shop style two
=====================*/

.shops-section {
    padding: 120px 0 90px;
}
.shops-section.two {
    padding: 115px 0 60px;
}
.single-products-box2 {
    display: flex;
    margin-bottom: 35px;
}

.single-products-box2 .products-thumb img {
    width: inherit;
    transition: .5s;
    border-radius: 4px;
    margin-right: 30px;
}

.single-products-box2 .product-content2 {
    text-align: left;
}

.single-products-box2 .product-title h2 {
    font-size: 24px;
    line-height: 15px;
}

.single-products-box2 .product-price p {
    margin-bottom: 5px;
}

p.description {
    padding: 12px 0 4px;
}

.product-thumb-icon2 a {
    font-size: 14px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 30px;
    background-color: #101010;
    color: #ffff;
    transition: .5s;
    margin-right: 6px;
    position: relative;
    z-index: 1;
    display: inline-block;
}

.product-thumb-icon2 a:after {
    position: absolute;
    content: "";
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background: #ffde5d;
    transform: scale(0);
    transition: .5s;
}

.product-thumb-icon2 a:hover:after {
    transform: scale(1);
}

/*Tab style
======================*/

.shops-section .tab {
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: subpixel-antialiased;
    text-align: right;
    padding: 5px 0 0;
}

.shops-section .tabs {
    display: inline;
}

.shops-section  .tabs li.current:before {
    position: inherit;
}

.shops-section .tabs li a {
    font-size: 35px;
    width: 52px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    color: #fff;
    background: #101010 !important;
    display: inline-block;
    margin-right: 0;
    margin-left: 10px;
    padding: 0;
}

.shops-section li.current a {
    color: #fff !important;
    background: #ffde5d !important;
}

/*widget
==============*/

.widget {
    display: inline-block;
}

.widget select {
    padding: 15px 13px;
    width: 85%;
    display: inline-block;
    position: relative;
    top: -6px;
    color: #6A6E49;
}



/*pagination
==================*/

.pagination-menu {
    padding-top: 30px;
}

.pagination-menu ul {
    display: inline-block;
}

.pagination-menu ul li {
    display: inline-block;
    list-style: none;
    margin-right: 8px;
}

.pagination-menu ul li a {
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid rgba(19,17,37,0.1);
    background: #F5F5F5;
    display: inline-block;
    color: #101010;
    font-size: 20px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.pagination-menu ul li a:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #ffde5d;
    border-radius: 4px;
    transform: scale(0);
    transition: .5s;
    z-index: -1;
}

.pagination-menu ul li a:hover:before {
    transform: scale(1);
}

.pagination-menu ul li a:hover {
    color: #fff;
}

/*
<!-- ============================================================== -->
<!-- dexon Shop Details  Css -->
<!-- ============================================================== -->*/

.shop-detials {
    padding: 120px 0 115px;
}

.tabs-bg {
    background: #f6f6f6;
    padding: 60px 55px 30px;
    margin-bottom: 60px;
}

.style-three.tab {
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    border-radius: 10px;
    margin-right: 15px;
}

.style-three .tabs_item img {
    border: 20px solid #fff;
    border-radius: 5px;
}

.style-three .tabs li a {
    background: inherit;
    color: #fff;
    font-weight: 600;
    display: inline-block;
    outline: none;
    transition: all 0.5s ease-in-out;
    margin-right: 20px;
    border-radius: 5px;
}

.style-three .tabs li a img {
    border-radius: 5px;
}

.style-three .tabs li.current:before {
    background: transparent;
}

.style-three li.current a {
    border: 1px solid #ffde5d;
}

/*Shop dtls Right
============================*/

.shop-dtls-info {
    padding-left: 30px;
}

.category-title h2 {
    font-size: 30px;
    font-weight: 500;
    padding: 0 0 17px;
}

.category-icon-list ul li {
    list-style: none;
    display: inline-block;
    color: #f9ac08;
    letter-spacing: .4em;
}

li.category-text {
    letter-spacing: 0 !important;
    color: #7b7b7b!important;
    padding-left: 6px;
}

.category-price h1 {
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: #101210;
    padding: 7px 0 25px;
}

.category-description p {
    padding: 25px 30px 25px;
    background: #fff;
    border-radius: 5px;
    margin: 0;
}

.category-color p {
    color: #101210;
    font-weight: 500;
    font-size: 16px;
    padding: 3px 0 3px;
}

.category-color span {
    color: #67686C;
    padding-left: 15px;
    position: relative;
}

.category-color span:before {
    position: absolute;
    content: ":";
    left: 4px;
    top: -3px;
}

.cloth-tag ul li {
    display: inline-block;
    list-style: none;
    margin-right: 5px;
    color: #101010;
}

.cloth-tag ul li a {
    padding: 6px 20px;
    background: #fff;
    font-size: 14px;
    border-radius: 3px;
}

/* --- Quantity button 
================================*/

.category-count-button {
    display: inline-flex;
    padding: 32px 0 22px;
}

.quantity-with_btn {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    vertical-align: middle;
}

.quantity .cart-plus-minus {
    position: relative;
    width: 160px;
    text-align: left;
    height: 54px;
    overflow: hidden;
    border-radius: 5px;
}

.quantity .cart-plus-minus > .ctnbutton {
    cursor: pointer;
    position: absolute;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    width: 38px;
    -webkit-box-align: center;
    align-items: center;
    vertical-align: middle;
    color: #fff;
    -webkit-transition: .5s;
    background: #ffde5d;
}

.quantity .cart-plus-minus > .cart-plus-minus-box {
    border: 0;
    height: 45px;
    text-align: center;
    width: 160px;
    font-size: 16px;
    font-weight: 500;
    color: #101010;
    background-color: #fff !important;
    background: linear-gradient(90deg, #ffde5d 50%, transparent 0) repeat-x, linear-gradient(90deg, #ffde5d 50%, transparent 0) repeat-x, linear-gradient(0deg, #ffde5d 50%, transparent 0) repeat-y, linear-gradient(0deg, #ffde5d 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
}

.quantity .cart-plus-minus > .ctnbutton.dec {
    top: 41%;
    left: 0%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-box;
    display: flex;
    -webkit-justify-content: center;
    height: 81%;
    border-radius: 0 30px 30px 0;
}

.quantity .cart-plus-minus > .ctnbutton.inc {
    top: 41%;
    right: 0%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    height: 80%;
    border-radius: 30px 0 0 30px;
}

@-webkit-keyframes linearGradientMove {
  100% {
    background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
  }
}

@keyframes linearGradientMove {
  100% {
    background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
  }
}

/*categories button
=========================*/

.category-button {
    display: inline-block;
    padding-left: 20px;
}

.category-button a {
    padding: 10px 25px;
    font-size: 16px;
    font-weight: 500;
    background: #ffde5d;
    border-radius: 4px;
    color: #101010;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.category-button a:before {
    position: absolute;
    z-index: -1;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    background: #101010;
    border-radius: 4px;
    transition: .5s;
}

.category-button a i {
    padding-left: 10px;
    font-size: 16px;
}

.category-button a:hover {
    color: #fff;
}

.category-button a:hover:before {
    left: 0;
    width: 100%;
}

/*shop tab style
=====================*/

ul.categpries-items li {
    display: block;
    list-style: none;
    color: #101010;
    padding: 10px 15px;
    background: #ffde5d;
    border-radius: 4px;
    font-weight: 500;
    margin-top: 20px;
}

/*Tab Items
=======================*/

.tab-boxs {
    padding: 40px 50px 50px;
    background: #f6f6f6;
    border-radius: 5px;
}

.tab {
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.tabs {
    display: table;
    position: relative;
    overflow: hidden;
    margin: 0;
    width: 100%;
}

.tabs li {
    line-height: 34px;
    position: relative;
    display: inline-block;
}

.tabs_item {
    display: none;
    padding: 30px 0;

}

.tabs_item:first-child {
    display: block;
}

.appoinment-tab .tabs li a {
    font-size: 16px;
    color: #101210;
    font-weight: 500;
    display: inline-block;
    outline: none;
    padding: 9px 29px;
    transition: all 0.5s ease-in-out;
    margin-right: 10px;
    border-radius: 5px;
}

.appoinment-tab li.current a {
    background: rgba(255,222,93,0.30196078431372547);
}



h2.tab-title {
    font-size: 28px;
    font-weight: 500;
    padding: 0 0 32px;
}


/*post comment box
===================*/ 

.post-comment-thumb {
    float: left;
    margin-right: 20px;
    margin-top: 20px;
}

.post-content {
    overflow: hidden;
    background: #fff;
    padding: 28px 30px 10px;
    border-radius: 5px;
    margin-bottom: 20px;
}

/*comment icon list*/

ul.comment-icon-list {
    float: right;
}

ul.comment-icon-list li {
    list-style: none;
    display: inline-block;
    color: #ff9d34;
    letter-spacing: .2em;
    font-size: 14px;
}

/*post title*/

h4.post-title {
    font-size: 18px;
    font-weight: 500;
    margin-top: 0;
    padding: 0px 0 20px;
}

h4.post-title span {
    color: #67686C;
    padding-right: 5px;
    font-family: 'Kumbh Sans';
    font-weight: 300;
    font-size: 16px;
}

.post-title span:before {
    position: absolute;
    content: "";
    left: 6px;
    top: 9px;
    height: 1px;
    width: 15px;
    background: #0D0E14;
}

.product-details-respond {
    padding: 65px 0 0;
}

.sidebar-title h2 {
    font-size: 22px;
    font-weight: 500;
    line-height: 26px;
}


.sidebar-description p {
    margin: 6px 0 25px;
}

/*sidebar rating list*/

.sidebar-rating-list {
    background: #ffde5d;
    padding: 32px 30px 35px;
    border-radius: 5px;
    margin-bottom: 35px;
}

p.sidebar-text {
    color: #101010;
    margin-bottom: 8px;
}

.sidebar-rating-list ul {
    display:block;
}

.sidebar-rating-list ul li {
    list-style: none;
    display: inline-block;
    color: #101010;
    letter-spacing: .4em;
    font-size: 18px;
}

/*from box*/

h6.form-title {
    font-size: 16px;
    font-weight: 500;
    padding: 0 0 16px;
    margin: 0;
}

.product-item-title h2 {
    font-size: 28px;
    font-weight: 500;
    line-height: 42px;
    padding: 50px 0 30px;
}






/*
<!-- ============================================================== -->
<!-- dexon Start Blogs Section -->
<!-- ============================================================== -->*/

.blogs-section {
    padding: 118px 0 118px;
}

.row.blogs-pr {
    padding-right: 10px;
}

.row.blogs-pr {
    padding-right: 10px;
}

.single-blog-box {
    margin-bottom: 30px;
}

.blog-thumb img {
    width: 100%;
}

.blogs-section .blog-content {
    padding: 15px 30px 25px;
    transition: .5s;
    background: #fff;
    border-radius: 0 0 5px 5px;
    border: 1px solid rgba(19,17,37,0.1);
    border-top: 0;
}


.blogs-section h2.blog-title a {
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    display: inline-block;
}

.style-two.blogs-section h2.blog-title a {
    font-size: 22px;
    font-weight: 700;
}

p.blog-desc {
    padding: 10px 0 5px;
    color: black;
}

.blog-btn a {
    color: #e9ba04;
    text-decoration: underline;
}

.blogs-section h2.blog-title a:hover{
    color: #ffde5d;
}

/*blog Post
================*/

.blogs-section .widget-sidebar-box {
    padding: 35px 40px 50px;
    background: #b0b9c4ad;
    margin-bottom: 30px;
    border-radius: 5px;
}

.rpost-title h4 {
    margin-top: 2px;
}

.blogs-section h4.sidebar-title {
    padding: 0 0 30px;
    font-size: 20px;
    font-weight: 500;
}

.blogs-section h4.sidebar-title.upp {
    padding: 0 0 20px;
}

.widget-recent-post {
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
    padding: 0 0 25px;
    margin-bottom: 25px;
}

.rpost-title span {
    font-size: 15px;
    padding: 6px 0 0;
    display: inline-block;
}

.widget-recent-post.upper {
    border-bottom: 0;
    margin-bottom: 0;
    padding: 0;
}

.rpost-thumb {
    margin-right: 20px;
}

.rpost-content h4 a {
    font-size: 17px;
    font-weight: 500;
    line-height: 22px;
    color: #101010;
    display: inline-block;
    transition: .5s;
}
.rpost-content h4 a:hover{
    color: #ffde5d;
}

ul.sidebar-menu li {
    display: block;
    list-style: none;
    padding: 0 0 11px;
}

li.sidbr-mb {
    padding: 0 !important;
}

ul.sidebar-menu li a {
    color: #7b7b7b;
    transition: .5s;
}

ul.sidebar-menu li a i {
    font-size: 13px;
    display: inline-block;
}

ul.sidebar-menu li a:hover {
    color: #101210;
}


/* Blog tag
==================*/

.tag-item ul li {
    display: inline-block;
    list-style: none;
}

li.item1 {
    padding: 15px 0 0 !important;
}

.tag-item a {
    font-size: 14px;
    background: #ffff;
    padding: 3px 14px;
    display: inline-block;
    margin: 0px 6px 15px 0;
    font-weight: 400;
    color: #101010;
    transition: .5s;
    border-radius: 3px;
    position: relative;
    z-index: 1;
}

.tag-item a:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #ffde5d;
    border-radius: 3px;
    z-index: -1;
    transform: scale(0);
    transition: .5s;
}

.tag-item a:hover:before {
   transform: scale(1); 
}

a.item {
    margin: 0;
}

/*Blog Details
=================================*/

.meta-blog {
    padding: 30px 0 28px;
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
}

.meta-blog a {
    font-size: 15px;
    padding: 8px 20px;
    background: #f6f6f6;
    margin-right: 10px;
    border-radius: 3px;
}

.meta-blog a i {
    font-size: 14px;
    color: #e9ba04;
    display: inline-block;
    margin-right: 5px;
}


p.blog-desc2 {
    padding: 15px 0 0px;
    color: #050505;
}

.blogs-section h2.blog-title2 a {
    font-size: 30px;
    font-weight: 700;
    display: inline-block;
    padding: 10px 0 2px;
}


/*Blog Social Share
=======================*/

.blogs-social-share {
    padding: 24px 0px 25px;
    margin: 40px 0 40px;
    border-top: 1px solid rgba(16,18,16,0.10196078431372549);
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
}

span.social-text {
    font-size: 17px;
    font-weight: 500;
    color: #101210;
}

ul.social-share {
    float: right;
}

ul.social-share li {
    display: inline-block;
    list-style: none;
}

ul.social-share li a {
    height: 32px;
    width: 32px;
    line-height: 32px;
    background: #f6f6f6;
    text-align: center;
    display: inline-block;
    border-radius: 3px;
    font-size: 14px;
    color: #545654;
    margin-right: 7px;
    position: relative;
    z-index: 1;
}

ul.social-share li a:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #ffde5d;
    border-radius: 3px;
    z-index: -1;
    transform: scale(0);
    transition: .5s;
}

ul.social-share li a:hover:before {
    transform: scale(1);
}

ul.social-share li a:hover {
    color: #101010;
}

/*Post Comment
=================*/

.blog-post-comment2 {
    padding: 38px 40px 55px;
    background: #f6f6f6;
    border-radius: 5px;
}

.reply-author p span {
    color: #e9ba04;
}

.blog-post-comment2 .post-comment-thumb {
    float: inherit;
    margin-right: 10px;
    margin-top: 0;
    display: inline-block;
}

.blog-post-comment2 .post-comment {
    background: #fff;
    padding: 30px 30px 0;
    border-radius: 5px;
}

.authority {
    display: inline-block;
}

.blog-post-comment2 .post-content {
    padding: 24px 0px 10px;
    margin-top: 17px;
    border-top: 1px solid rgba(16,18,16,0.10196078431372549);
}

/*Contact Form
======================*/

.contact-form-box2 {
    padding: 26px 30px 50px;
    border-radius: 5px;
    border: 1px solid rgba(16,18,16,0.1);
    margin-top: 60px;
}

.contact-form-box2 .sidebar-description p {
    margin: 6px 0 35px;
}

.form-box input {
    height: 54px;
    background-color: #fff;
    border: 0;
    transition: .5s;
    padding: 0px 25px;
    display: block;
    width: 100%;
    color: #616161;
    margin-bottom: 30px;
    outline: 0;
    border-radius: 4px;
}

.form-box textarea {
    height: 180px;
    width: 100%;
    padding: 15px 22px 0px;
    background: #ffffff;
    border: 0;
    border-radius: 5px;
    color: #0D0E14;
}

.contact-form button {
    padding: 11px 30px;
    color: #101010;
    display: inline-block;
    margin-top: 25px;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    background: #ffde5d;
    transition: 0.5s;
    font-weight: 500;
}

.contact-form button i {
    padding-left: 6px;
    position: relative;
    top: 2px;
}

.contact-form button:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: 5px;
    background: #fff;
    z-index: -1;
    transition: 0.5s;
    transform: scale(0.0, 1);
    opacity: 0;
}

.contact-form button:hover:before {
    transform: scale(1);
    opacity: 1;
}

.contact-form-box2 .form-box textarea::placeholder {
    color: #101010;
}

.contact-form-box2 .form-box input::placeholder {
    color: #101010;
}


/*
<!-- ============================================================== -->
<!-- dexon Start Cart Section -->
<!-- ============================================================== -->*/

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

.cart-empty p {
    padding: 18px 25px;
    position: relative;
    background-color: #F6F7F9;
    border-bottom: 2px solid #050505;
    display: inline-block;
    width: 100%;
    color: #050505;
}

.cart-empty p i {
    color: #050505;
    padding-right: 10px;
}

.cart-section a.dexon-button {
    margin-top: 10px;
    display: inline-block;
}


@keyframes ripple {

    0%,
    35% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }

    50% {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0.8;
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(2);
        -moz-transform: scale(2);
        -ms-transform: scale(2);
        -o-transform: scale(2);
        transform: scale(2);
    }
}


@keyframes movebounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }

    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}


@keyframes moveleftbounce {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    50% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}



/*--==============================================->
  <!-- dexon Animation Dance -->
 ==================================================-*/
/**/
.dance3 {
    -webkit-animation: dance3 8s alternate infinite;
    animation: dance3 8s alternate infinite;
}

@keyframes dance3 {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

.dance {
    -webkit-animation: dance 2s alternate infinite;
    animation: dance 2s alternate infinite;
}

@keyframes dance {
    0% {
        -webkit-transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1.2);
    }
}

.dance2 {
    -webkit-animation: dance2 4s alternate infinite;
    animation: dance2 4s alternate infinite;
}

@keyframes dance2 {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
    }

    50% {
        -webkit-transform: translate3d(25px, -25px, 0);
    }

    100% {
        -webkit-transform: translate3d(0, -25px, 25px);
    }
}

.watermark-animate {
    -webkit-animation: watermark-animate 8s infinite;
    animation: watermark-animate 8s infinite;
    animation-direction: alternate-reverse;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes watermark-animate {
    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}



/*rotateme animation*/

.rotateme {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes rotateme {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}






/*----------------
==============   Start dexon shop Nav Sidebar button
------------------*/

/*nav button*/

.nav-btn.navSidebar-button {
    display: inline-block;
    float: left;
    padding: 10px 0 0;
}

.nav-btn.navSidebar-button a i {
    padding-right: 10px;
    font-size: 20px;
}

.xs-sidebar-group .xs-overlay {
    left: 100%;
    top: 0;
    position: fixed;
    z-index: 101;
    height: 100%;
    opacity: 0;
    width: 100%;
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in 0.8s;
    -o-transition: all 0.4s ease-in 0.8s;
    transition: all 0.4s ease-in 0.8s;
}

.xs-sidebar-group .widget-heading {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 0;
}

.xs-sidebar-widget {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 360px;
    z-index: 999999;
    overflow: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s;
    visibility: hidden;
    opacity: 0;
}

.xs-sidebar-group.isActive .xs-overlay {
    opacity: 0.4;
    visibility: visible;
    -webkit-transition: all 0.8s ease-out 0s;
    -o-transition: all 0.8s ease-out 0s;
    transition: all 0.8s ease-out 0s;
    left: 0;
}

.xs-sidebar-group.isActive .xs-sidebar-widget {
    opacity: 1;
    visibility: visible;
    left: 0;
    -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
    transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s;
}

.sidebar-textwidget {
    padding: 40px 32px;
}

.close-side-widget i {
    color: #101010;
    font-size: 28px;
    display: block;
}

.sidebar-widget-container {
    position: relative;
    top: 150px;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-in 0.3s;
    -o-transition: all 0.3s ease-in 0.3s;
    transition: all 0.3s ease-in 0.3s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.xs-sidebar-group.isActive .sidebar-widget-container {
    top: 0px;
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 1s ease-out 1.2s;
    -o-transition: all 1s ease-out 1.2s;
    transition: all 1s ease-out 1.2s;
    -webkit-backface-visibility: hidden;
  
    backface-visibility: hidden;
}

.xs-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    z-index: 0;
}

.xs-bg-black {
    background-color: #101010;xr
}


/* 
Mobile Logo */

.mobile-visible {
    display: none; /* Initially hidden */
    opacity: 0; /* Set opacity to 0 for the fade-in effect */
    transition: opacity 4s ease-in-out; /* Smooth transition */
}

@media (max-width: 767px) {
    .mobile-visible {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
        opacity: 1;
        animation: fadeInPulse 5s ease-in-out;
    }
}

@keyframes fadeInPulse {
    0% {
        opacity: 0;
        transform: scale(0.8); /* Starts slightly smaller */
    }
    50% {
        opacity: 1;
        transform: scale(1.12); /* Grows larger */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* Settles back to normal size */
    }
}

/*html css*/
.nav-logo {
    padding: 0 0 40px;
}

.sidebar-info-contents .widget-search {
    padding: 0 0 15px;
}

.sidebar-info-contents .widget {
    display: block;
} 

.sidebar-info-contents h3.widget-title {
    font-size: 25px;
    padding: 8px 0 20px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e9e9e9;
    font-style: italic;
}

.sidebar-info-contents h3.widget-title {
    font-size: 25px;
    padding: 15px 0 15px;
}

.widget form {
    position: relative;
}

.widget input {
    border-radius: 4px;
    padding-left: 20px;
    height: 56px;
    width: 100%;
    color: #fff;
    border: 1px solid #e9e9e9;
}

button.icon {
    border: 0;
    font-size: 18px;
    color: #fff;
    padding: 1px 15px;
    position: absolute;
    right: 0;
    top: 0;
    height: 56px;
    width: 60px;
    background: #ffde5d;
    border-radius: 0 4px 4px 0;
}

.widget input::placeholder {
    color: #101010;
}

ul.list-style-one li {
    display: block;
    list-style: none;
    color: #fff;
    padding: 16px 0 0;
    overflow: hidden;
}

ul.list-style-one li span {
    font-size: 16px;
    font-weight: 600;
    color: #101010;
    float: right;
    display: inline-block;
    padding: 0 5px;
}

ul.list-style-one li a {
    transition: .5s;
    color: #101010;
}

ul.list-style-one li a i {
    background: red;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    display: inline-block;
    border-radius: 30px;
    color: #fff;
    margin-right: 5px;
}

a.white-bg i {
    background: #e9e9e9 !important;
}

a.yellow-bg i {
    background: #eeee22 !important;
}

a.green-bg i {
    background: #9BC45C !important;
}

/*Tag
=======*/

.sidebar-tag-menu {
    padding: 12px 0 0;
}

.sidebar-tag-menu ul li {
    display: inline-block;
    list-style: none;
    margin-right: 6px;
    color: #101010;
    padding: 0 0 12px;
}

/*social icon*/

ul.social-icon {
    padding: 20px 0 0;
}

ul.social-icon li {
    display: inline-block;
    list-style: none;
    margin: 0 10px 0 0;
}

ul.social-icon li a {
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 36px;
    text-align: center;
    background: #fff;
    color: #101010;
    transition: .5s;
    font-size: 18px;
    border-radius: 3px;
}

ul.social-icon li a:hover {
    background: #ffde5d;
    color: #fff;
}

ul.list-style-one li a:hover span {
    background: #ffde5d;
    border-radius: 30px;
    color: #fff;
} 

ul.list-style-one li a:hover {
    color: #ffde5d;
}





/*===========================
<-- dexon Loader Css -->
=============================*/
.loader-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transition: 0.8s 1s ease;
    z-index: 999;
}

.loader {
    position: relative;
    display: block;
    z-index: 201;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    transition: all 1s 1s ease;
    border: 3px solid transparent;
    border-top-color: #ACCAF6;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}


@media (max-width: 768px) {
    .loader-logo {
        position: absolute;
        display: block;
        z-index: 202;
        top: 35%; /* Adjusted for mobile top positioning */
        left: 35%; /* Adjusted for mobile centering */
        width: 100px;
        height: 100px;
        margin: 0;
        transform: translate(-50%, -50%); /* Centering with respect to mobile screen */
        transition: all 0.8s ease;
        animation: scaleUpFadeOut 1.5s ease forwards; /* Speed up animation */
    }

    @keyframes scaleUpFadeOut {
        0% {
            transform: translate(-50%, -50%) scale(0.09); /* Start smaller */
            opacity: 1; /* Fully visible */
        }
        70% {
            transform: translate(-50%, -50%) scale(0.4); /* Scale up */
            opacity: 1; /* Still fully visible */
        }
        100% {
            transform: translate(-50%, -50%) scale(1); /* Stay scaled */
            opacity: 0; /* Fade out */
        }
    }
}

@media (min-width: 769px) {
    .loader-logo {
        position: absolute;
        display: block;
        z-index: 202;
        top: 50%;
        left: 50%;
        width: 150px; /* Adjust size for desktop */
        height: 150px;
        margin: 0;
        transform: translate(-50%, -50%); /* Centering for desktop */
        transition: all 0.8s ease;
        animation: scaleUpFadeOut 1.5s ease forwards;
    }

    @keyframes scaleUpFadeOut {
        0% {
            transform: translate(-50%, -50%) scale(0.2); /* Start smaller */
            opacity: 1; /* Fully visible */
        }
        70% {
            transform: translate(-50%, -50%) scale(1.4); /* Scale up */
            opacity: 1; /* Still fully visible */
        }
        100% {
            transform: translate(-50%, -50%) scale(1.4); /* Stay scaled */
            opacity: 0; /* Fade out */
        }
    }
}



.loader:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-left-color: #013565;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.loader:after {
    position: absolute;
    content: '';
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-right-color: #fff;
    -webkit-animation: spin 2.5s linear infinite;
    -moz-animation: spin 2.5s linear infinite;
    -o-animation: spin 2.5s linear infinite;
    animation: spin 2.5s linear infinite;
}

/*/ Here comes the Magic /*/

/* Keyframes for scaling up faster and fading out quicker */
@keyframes scaleUpFadeOut {
    0% {
        transform: translate(-50%, -50%) scale(0.1); /* Start smaller */
        opacity: 1; /* Fully visible */
    }
    70% {
        transform: translate(-50%, -50%) scale(2.3); /* Scale up faster */
        opacity: 1; /* Still visible */
    }
    100% {
        transform: translate(-50%, -50%) scale(3.4); /* Hold final scale */
        opacity: 0; /* Fully invisible */
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.loader-wrapper .loder-section {
    position: fixed;
    top: 0;
    width: 50%;
    height: 100%;
    background: #ffffff;
    z-index: 2;
}

.loader-wrapper .loder-section.left-section {
    left: 0;
    transition: 1s 1.4s ease;
}

.loader-wrapper .loder-section.right-section {
    right: 0;
    transition: 1s 1.4s ease;
}

/*/ When page loaded /*/

.loaded .loder-section.left-section {
    left: -100%;
}

.loaded .loder-section.right-section {
    right: -100%;
}

.loaded .loader-wrapper {
    visibility: hidden;
}

.loaded .loader {
    top: -100%;
    opacity: 0;
}


/*
<!-- ============================================================== -->
<!--Scrollup Button Section -->
<!-- ============================================================== -->*/

/*------back-to-top------------*/

.prgoress_indicator {
    position: fixed;
    right: 50px;
    bottom: 20px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 1px #01356577;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #ACCAF6;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
  color: #2871ff;
}

.prgoress_indicator:hover ::before {
  opacity: 1;
}

.prgoress_indicator svg path {
  fill: none;
}

.prgoress_indicator svg.progress-circle path {
    stroke: #ACCAF6;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}