body {
    overflow-x: hidden;
}

.section-padding {
    padding-top: 120px;
    padding-bottom: 120px;
}

.section-padding-top {
    padding-top: 120px;
}

.section-padding-bottom {
    padding-bottom: 120px;
}

.upper {
    text-transform: uppercase;
}

/* .full-wrapper {
    position: relative;
} */

.section-title {
    margin-bottom: 60px;
}

.section-title .title {
    font-size: 36px;
    margin-top: -5px;
}

.section-title .desc {
    font-size: 18px;
    font-weight: 600;
}

/* ---------------------
Button-Styles
----------------------- */
.mouse-dir {
    overflow: hidden;
    position: relative;
    -webkit-transition: 0.6s;
    -o-transition: 0.6s;
    transition: 0.6s;
    z-index: 4;
    margin-bottom: -8px;
    border-radius: 30px;
    -moz-transition: 0.6s;
    -ms-transition: 0.6s;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.mouse-dir .dir-part {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #ff885e;
    -webkit-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    -o-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: -1;
    -moz-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    -ms-transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}

.mouse-dir:hover .dir-part {
    width: 260%;
    height: 562.5px;
}

.button-dark {
    display: inline-block;
    width: 170px;
    height: 60px;
    background-color: #ff885e;
    text-align: center;
    line-height: 60px;
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
}

.button-dark:hover {
    color: #ff885e;
}

.button-primary.mouse-dir .dir-part,
.button-dark.mouse-dir .dir-part {
    background-color: #ffffff;
}

.button-orange,
.button-primary {
    display: inline-block;
    color: #ffffff;
    background-color: #ff885e;
    padding: 18px 40px;
    border: 1px solid #ff885e;
    font-size: 16px;
    font-weight: 600;
}

.button-primary:hover {
    color: #ff885e;
}

.load-more,
.button-primary-trans {
    display: inline-block;
    color: #ff885e;
    padding: 15px 40px;
    border: 1px solid #ff885e;
    font-size: 16px;
    font-weight: 600;
}

.button-primary-trans .icon {
    margin-right: 5px;
    display: inline-block;
}

.load-more:hover,
.button-primary-trans:hover {
    color: #ffffff;
}

.load-more {
    padding: 15px 38px;
}

.load-more i {
    margin-left: 5px;
    font-size: 14px;
}

.portfolio-area .load-more {
    margin-top: 30px;
}

.button-orange {
    padding: 15px 38px;
    border: 1px solid #ff885e;
    background-color: #ff885e;
}

.button-orange:hover {
    color: #ff885e;
}

.button-orange .dir-part {
    background-color: #ffffff;
}

/*------------------------
02. Mainmenu-Area
--------------------------*/
.main_menu {
    position: fixed;
    width: 100%;
    height: 80px;
    top: 0;
    left: 0;
    z-index: 999;
    border-bottom: 1px solid #eeeeee17;
    transition: all linear .3s;
}

.main_menu .navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.main_menu .navbar-nav li {
    display: inline-block;
    position: relative;
    /* margin-left: -5px; */
}

.main_menu .navbar-nav li {
    position: relative;
}

.main_menu .navbar-nav li a {
    position: relative;
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 0px !important;
    margin: 0px 20px;
    color: #190844;
    line-height: 80px;
    background: none;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.main_menu .navbar-nav li:last-child a {
    margin-right: 0;
}

.main_menu .navbar-nav li .active,
.main_menu .navbar-nav li:hover>a {
    color: #ff885e;
}

.menu_fix .navbar-nav li a {
    color: #190844;
}

.main_menu .menu_icon {
    display: flex;
    margin: 0;
    padding: 0;
}

.main_menu .menu_icon li {
    list-style: none;
}

.main_menu .menu_icon li a {
    color: #fff;
    margin-left: 20px;
    font-size: 16px;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.main_menu .menu_icon li a:hover {
    color: #ff885e;
}

.menu_fix .menu_icon li a {
    color: #190844;
}

.main_menu .sub_menu {
    position: absolute;
    width: 250px;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 25px;
    border-radius: 10px;
    transform: scaleY(0);
    transform-origin: top;
    transition: all linear .3s;
    -webkit-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    z-index: 999;
}

.main_menu .sub_menu>li>a {
    color: #190844;
    margin: 0;
    line-height: 0;
}

.main_menu .navbar-nav .nav-item:hover .sub_menu {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
}

/* -----------------------
/* Header-Area */
.header-area {
    position: relative;
    padding: 120px 0;
    background: linear-gradient(135deg, #f3f4f6, #ffffff); /* Soft gradient */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
}

/* Floating blur color animation */
.header-area .floating-bg {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.6;
    animation: floatUpDown 6s ease-in-out infinite alternate;
}

/* Floating blobs */
.floating-bg-1 {
    top: 10%;
    left: 15%;
    width: 200px;
    height: 200px;
    background: rgba(255, 105, 180, 0.5); /* Pink */
    animation-delay: 1s;
}

.floating-bg-2 {
    top: 60%;
    left: 10%;
    width: 180px;
    height: 180px;
    background: rgba(30, 144, 255, 0.5); /* Dodger Blue */
    animation-delay: 2s;
}

.floating-bg-3 {
    bottom: 20%;
    right: 15%;
    width: 250px;
    height: 250px;
    background: rgba(50, 205, 50, 0.5); /* Lime Green */
    animation-delay: 3s;
}

.floating-bg-4 {
    bottom: 50%;
    right: 5%;
    width: 160px;
    height: 160px;
    background: rgba(255, 165, 0, 0.5); /* Orange */
    animation-delay: 4s;
}

/* Floating animation */
@keyframes floatUpDown {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(20px); }
}



#particles-js {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    display: block;
}

#header-video {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

#header-video iframe {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.2, 1.2);
    height: 100%;
}

.header-content {
    position: relative;
    top: 20px;
    text-align: center;
}

.profile-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
    position: relative;
    border: 5px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    animation: glowEffect 3s infinite alternate ease-in-out;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
    cursor: pointer;
}

/* Tooltip Styling */
.profile-img-container {
    position: relative;
    display: inline-block;
}
.tooltip {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(40%, -50%);
    background: #ff885e; /* Custom tooltip color */
    color: #fff;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Tooltip Arrow */
.tooltip::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 10px;
    border-width: 6px;
    border-style: solid;
    border-color: #ff885e transparent transparent transparent;
}

/* Show Tooltip on Hover */
.profile-img-container:hover .tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(40%, -60%);
}



/* Glowing Ring Animation */
.profile-img::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    top: -10px;
    left: -10px;
    background: linear-gradient(45deg, #ff6b6b, #6b9eff, #6bff8e);
    opacity: 0.6;
    z-index: -1;
    transition: transform 0.3s ease-in-out ease-in-out !important;
    animation: rotateGlow 6s linear infinite;

}

/* Hover Effect - Rotate & Glow */
.profile-img:hover {
    transform: scale(1.1) rotate(5deg) !important; /* Slight tilt effect */
    box-shadow: 0 0 40px rgba(255, 105, 180, 0.5), 0 0 80px rgba(255, 0, 0, 0.4) !important;
}

/* Floating Animation */
@keyframes glowEffect {
    0% { transform: scale(1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); }
    100% { transform: scale(1.05); box-shadow: 0 0 30px rgba(0, 0, 0, 0.25); }
}

/* Rotating Glowing Ring */
@keyframes rotateGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



.header-text  .typer-title {
    color: #fdfdfd;
    font-weight: 600;
    font-size: 24px;
}

.header-text  .title {
    font-size: 42px;
    color: #222;
    font-weight: bold;
}

.header-text  .desc {
    font-size: 18px;
    line-height: 28px;
    color: #555;
    margin-bottom: 30px;
}
.play-buttons {
    position: absolute;
    right: 10px;
    bottom: 0px;
    z-index: 9;
}

.play-buttons button {
    border: none;
    background: none;
    color: #ffffff;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin: 15px 5px;
}

/* Social Links */
.social-links {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icon {
    font-size: 24px;
    color: #555;
    background: #fff;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
}

.social-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Platform-specific colors */
.social-icon.tiktok:hover { color: #000; }
.social-icon.youtube:hover { color: #ff0000; }


/* -----------------------
04. Service-Area
------------------------- */
.single-service .title {
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 25px;
    padding-left: 25px;
    position: relative;
}

.single-service .title:before {
    content: "";
    background: #ff885e;
    width: 15px;
    height: 3px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

/* --------------------
05. About-Area
---------------------- */
.about-image {
    background-color: #f3f7ff;
    overflow: hidden;
    text-align: center;
    margin-right: 70px;
    border-radius: 10px;
}

.about-text .title {
    font-size: 36px;
    margin-bottom: 15px;
}

.about-text .sub-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 30px;
}

.about-text .desc {
    margin-bottom: 50px;
}

/* --------------------
06. Portfolio-Area
---------------------- */
.filter-menu {
    list-style: none;
    margin: -15px 0 30px 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

.filter-menu li {
    display: inline-block;
    font-size: 15px;
    color: #ff885e;
    border: 1px solid #ff885e;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    padding: 10px 30px;
    cursor: pointer;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border-radius: 30px;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
}

.filter-menu li:hover,
.filter-menu li.active {
    background: #ff885e;
    color: #fff;
}

.portfolio-wrapper {
    margin-bottom: -30px;
}

.single-portfolio {
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-bottom: 30px;
    border-radius: 10px;
}

.single-portfolio img {
    width: 100%;
}

.single-portfolio .portfolio-content {
    position: absolute;
    left: 100%;
    top: 100%;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
    padding: 35px;
}

blockquote {
    border-left: 10px solid #ff885e;
    background-color: #f3f7ff;
    border-radius: 10px;
}

.single-portfolio .portfolio-content:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #6e3f2e;
    opacity: 0.7;
    z-index: -1;
}

.double .single-portfolio .portfolio-content {
    padding: 80px;
}

.single-portfolio .portfolio-content .icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #ffffff;
    font-size: 36px;
    margin-bottom: 20px;
}

.single-portfolio .portfolio-content .title {
    font-size: 24px;
    color: #ffffff;
    font-weight: 600;
}

.single-portfolio .portfolio-content .title a {
    color: #ffffff;
}

.single-portfolio .portfolio-content .desc {
    font-size: 16px;
    color: #fffefe;
    font-weight: 600;
}

/* ----------------------
07. Skill-Area
----------------------- */
.skills-area .single-image {
    padding-left: 70px;
}

.skills-area .single-image img {
    border: 1px solid #eee;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.skills {
    margin-bottom: -50px;
}

.bar_group {
    text-align: left;
    position: relative;
    margin-bottom: 50px;
}

.bar_group__bar.thick {
    width: 0%;
    height: 15px;
    background: #558bff;
    -webkit-transition: width 1s;
    -o-transition: width 1s;
    transition: width 1s;
    -moz-transition: width 1s;
    -ms-transition: width 1s;
}

.bar_group__bar.thick:before {
    display: block;
    content: '';
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 15px;
    background: #e3e7ea;
    z-index: -1;
    bottom: -10px;
    border-radius: 30px;
}

.b_label,
.bar_label_min,
.bar_label_max,
.b_tooltip span {
    color: #000a2d;
    font-size: inherit;
    font-weight: 600;
}

.b_label {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 2px;
}

.bar_group .bar_label_max,
.bar_group .bar_label_min {
    position: absolute;
    bottom: -10px;
    line-height: 15px;
}

.bar_group .bar_label_max {
    right: 20px;
}

.bar_group .bar_label_min {
    left: 20px;
}

.bar_group .b_tooltip {
    position: absolute;
    top: -5px;
    right: 0;
}

.bar_group .b_tooltip span {
    font-size: 16px;
    line-height: 26px;
    color: #282828;
    font-weight: 700;
}

.bar_group .b_tooltip span:after {
    content: "%";
    position: relative;
    top: 3px;
    display: inline-block;
    line-height: 36px;
}

.bar_group .elastic {
    background: #558bff;
    -webkit-transition-timing-function: cubic-bezier(0.5, 0.25, 0.375, 1.335);
    -o-transition-timing-function: cubic-bezier(0.5, 0.25, 0.375, 1.335);
    transition-timing-function: cubic-bezier(0.5, 0.25, 0.375, 1.335);
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

.bar_group .title {
    font-size: 16px;
    line-height: 26px;
    color: #282828;
    font-weight: 400;
    margin-bottom: 10px;
}

.bar_group .sub-title {
    font-size: 14px;
    color: #6e7c90;
}

.container .row .col-lg-6 .icon-container {
    position: relative;
    top: 100px;
    width: 100%;
    height: 300px; /* Adjust height as needed */
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .row .col-lg-6 .icon-container .icon {
    box-shadow: 5px 5px 5px rgba(100, 100, 111, 0.2);
    border-radius: 20%;
    position: absolute;
    cursor: pointer;
}

.container .row .col-lg-6 .icon-container .icons8-html { 
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI0OHB4IiBoZWlnaHQ9IjQ4cHgiPjxwYXRoIGZpbGw9IiNFNjUxMDAiIGQ9Ik00MSw1SDdsMywzNGwxNCw0bDE0LTRMNDEsNUw0MSw1eiIvPjxwYXRoIGZpbGw9IiNGRjZEMDAiIGQ9Ik0yNCA4TDI0IDM5LjkgMzUuMiAzNi43IDM3LjcgOHoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMjQsMjV2LTRoOC42bC0wLjcsMTEuNUwyNCwzNS4xdi00LjJsNC4xLTEuNGwwLjMtNC41SDI0eiBNMzIuOSwxN2wwLjMtNEgyNHY0SDMyLjl6Ii8+PHBhdGggZmlsbD0iI0VFRSIgZD0iTTI0LDMwLjl2NC4ybC03LjktMi42TDE1LjcsMjdoNGwwLjIsMi41TDI0LDMwLjl6IE0xOS4xLDE3SDI0di00aC05LjFsMC43LDEySDI0di00aC00LjZMMTkuMSwxN3oiLz48L3N2Zz4=') 50% 50% no-repeat;
    background-size: 100%; 
}

.container .row .col-lg-6 .icon-container .icons8-css { 
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiPjxwYXRoIGZpbGw9IiMwMjc3QkQiIGQ9Ik00MSw1SDdsMywzNGwxNCw0bDE0LTRMNDEsNUw0MSw1eiIvPjxwYXRoIGZpbGw9IiMwMzlCRTUiIGQ9Ik0yNCA4TDI0IDM5LjkgMzUuMiAzNi43IDM3LjcgOHoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMzMuMSAxM0wyNCAxMyAyNCAxNyAyOC45IDE3IDI4LjYgMjEgMjQgMjEgMjQgMjUgMjguNCAyNSAyOC4xIDI5LjUgMjQgMzAuOSAyNCAzNS4xIDMxLjkgMzIuNSAzMi42IDIxIDMyLjYgMjF6Ii8+PHBhdGggZmlsbD0iI0VFRSIgZD0iTTI0LDEzdjRoLTguOWwtMC4zLTRIMjR6IE0xOS40LDIxbDAuMiw0SDI0di00SDE5LjR6IE0xOS44LDI3aC00bDAuMyw1LjVsNy45LDIuNnYtNC4ybC00LjEtMS40TDE5LjgsMjd6Ii8+PC9zdmc+') 50% 50% no-repeat;
    background-size: 100%;
}

.container .row .col-lg-6 .icon-container .icons8-javascript { 
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDggNDgiIHdpZHRoPSI5NnB4IiBoZWlnaHQ9Ijk2cHgiPjxwYXRoIGZpbGw9IiNmZmQ2MDAiIGQ9Ik02LDQyVjZoMzZ2MzZINnoiLz48cGF0aCBmaWxsPSIjMDAwMDAxIiBkPSJNMjkuNTM4IDMyLjk0N2MuNjkyIDEuMTI0IDEuNDQ0IDIuMjAxIDMuMDM3IDIuMjAxIDEuMzM4IDAgMi4wNC0uNjY1IDIuMDQtMS41ODUgMC0xLjEwMS0uNzI2LTEuNDkyLTIuMTk4LTIuMTMzbC0uODA3LS4zNDRjLTIuMzI5LS45ODgtMy44NzgtMi4yMjYtMy44NzgtNC44NDEgMC0yLjQxIDEuODQ1LTQuMjQ0IDQuNzI4LTQuMjQ0IDIuMDUzIDAgMy41MjguNzExIDQuNTkyIDIuNTczbC0yLjUxNCAxLjYwN2MtLjU1My0uOTg4LTEuMTUxLTEuMzc3LTIuMDc4LTEuMzc3LS45NDYgMC0xLjU0NS41OTctMS41NDUgMS4zNzcgMCAuOTY0LjYgMS4zNTQgMS45ODUgMS45NTFsLjgwNy4zNDRDMzYuNDUyIDI5LjY0NSAzOCAzMC44MzkgMzggMzMuNTIzIDM4IDM2LjQxNSAzNS43MTYgMzggMzIuNjUgMzhjLTIuOTk5IDAtNC43MDItMS41MDUtNS42NS0zLjM2OEwyOS41MzggMzIuOTQ3ek0xNy45NTIgMzMuMDI5Yy41MDYuOTA2IDEuMjc1IDEuNjAzIDIuMzgxIDEuNjAzIDEuMDU4IDAgMS42NjctLjQxOCAxLjY2Ny0yLjA0M1YyMmgzLjMzM3YxMS4xMDFjMCAzLjM2Ny0xLjk1MyA0Ljg5OS00LjgwNSA0Ljg5OS0yLjU3NyAwLTQuNDM3LTEuNzQ2LTUuMTk1LTMuMzY4TDE3Ljk1MiAzMy4wMjl6Ii8+PC9zdmc+') 50% 50% no-repeat;
    background-size: 100%; 
}

.container .row .col-lg-6 .icon-container .icons8-react { 
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgNDAgNDAiIHdpZHRoPSI0MHB4IiBoZWlnaHQ9IjQwcHgiPjxwYXRoIGZpbGw9IiM0ZTdhYjUiIGQ9Ik0yMCwyOC45QzguNTk4LDI4LjksMCwyNS4xNywwLDIwczguNTk4LTksMjAtOXMyMCwzLjgzLDIwLDlTMzEuNDAyLDI4LjksMjAsMjguOXogTTIwLDEzLjkzMiBjLTkuNzI5LDAtMTcuMTI1LDMuMjY2LTE3LjEyNSw2LjEzMVMxMC4yNzEsMjYuMDY4LDIwLDI2LjA2OHMxNy4xMjUtMy4yNjYsMTcuMTI1LTYuMTMxUzI5LjcyOSwxMy45MzIsMjAsMTMuOTMyeiIvPjxwYXRoIGZpbGw9IiM0ZTdhYjUiIGQ9Ik0xMi40MDIsMzhDMTIuNDAxLDM4LDEyLjQwMiwzOCwxMi40MDIsMzhjLTAuOTMxLDAtMS43ODEtMC4yMTYtMi41MjgtMC42NDIgYy0xLjIyLTAuNjk3LTIuMDk1LTEuOTI4LTIuNTMyLTMuNTYyYy0xLjE0Ni00LjI4MiwwLjcwMy0xMS40ODIsNC43MTMtMTguMzQ0QzE2Ljc2LDcuNDA3LDIzLjAwNywyLjAwMywyNy41OTksMi4wMDMgYzAuOTMsMCwxLjc4LDAuMjE2LDIuNTI3LDAuNjQyYzEuMjE4LDAuNjk1LDIuMDk0LDEuOTI1LDIuNTMxLDMuNTU4YzEuMTQ3LDQuMjgyLTAuNzAzLDExLjQ4My00LjcxNSwxOC4zNDUgQzIzLjI0MSwzMi41OTQsMTYuOTk1LDM4LDEyLjQwMiwzOHogTTI3LjU5OSw1LjAwM2MtMi44ODgsMC04LjQwOSw0LjE5My0xMi45NTQsMTEuOTYzYy00LjEyMyw3LjA1Ni01LjMzMiwxMi45MDktNC40MDQsMTYuMDU0IGMwLjI1MSwwLjg0OSwwLjYwNSwxLjQzOCwxLjEyMSwxLjczMmMyLjM2MSwxLjM0OCw4LjgwOS0yLjg1LDEzLjk5MS0xMS43MTdjNC4xMjUtNy4wNTcsNS40Ni0xMi43ODUsNC40MDYtMTYuMDU1IGMtMC4yNzEtMC44NDEtMC42MDQtMS40MzUtMS4xMTktMS43MjhDMjguMzQ3LDUuMDg0LDI4LjAwNiw1LjAwMywyNy41OTksNS4wMDN6Ii8+PHBhdGggZmlsbD0iIzRlN2FiNSIgZD0iTTI3LjU5OSwzNy45OTdDMjcuNTk5LDM3Ljk5NywyNy41OTksMzcuOTk3LDI3LjU5OSwzNy45OTdjLTQuNTk3LTAuMDAxLTEwLjg0My01LjQwNS0xNS41NDQtMTMuNDQ5IGMtNC4wMS02Ljg2Mi01Ljg1OS0xNC4wNjMtNC43MTMtMTguMzQ0QzcuNzc5LDQuNTcsOC42NTQsMy4zMzksOS44NzMsMi42NDNDMTAuNjIxLDIuMjE2LDExLjQ3MSwyLDEyLjQsMiBjNC41OTUsMCwxMC44NCw1LjQwNiwxNS41NDIsMTMuNDUyYzQuMDExLDYuODYxLDUuODYsMTQuMDYyLDQuNzE0LDE4LjM0NWMtMC40MzgsMS42MzMtMS4zMTMsMi44NjMtMi41MywzLjU1OCBDMjkuMzc5LDM3Ljc4MSwyOC41MjgsMzcuOTk3LDI3LjU5OSwzNy45OTd6IE0xMi40LDVjLTAuNDA3LDAtMC43NDcsMC4wODItMS4wNCwwLjI0OGMtMC41MTUsMC4yOTQtMC44NzQsMC44ODEtMS4xMiwxLjczMiBjLTAuOTI4LDMuMjA4LDAuMjgxLDguOTk5LDQuNDA0LDE2LjA1NWM0LjU0MSw3Ljc2OSwxMC4wNjMsMTEuOTYyLDEyLjk1NCwxMS45NjJsMCwwYzAuNDA4LDAsMC43NDgtMC4wODIsMS4wNDEtMC4yNDkgYzAuNTE0LTAuMjkyLDAuODgzLTAuODc2LDEuMTE4LTEuNzI4YzAuODY3LTMuMTQ2LTAuMjgxLTktNC40MDUtMTYuMDU1QzIwLjgxMSw5LjE5NCwxNS4yOSw1LDEyLjQsNXoiLz48cGF0aCBmaWxsPSIjOGJiN2YwIiBkPSJNMjMuNSwyMGMwLDEuOTM1LTEuNTY1LDMuNS0zLjUsMy41cy0zLjUtMS41NjUtMy41LTMuNXMxLjU2NS0zLjUsMy41LTMuNVMyMy41LDE4LjA2NSwyMy41LDIweiIvPjxwYXRoIGZpbGw9IiM0ZTdhYjUiIGQ9Ik0yMCwyNGMtMi4yMDYsMC00LTEuNzk0LTQtNHMxLjc5NC00LDQtNHM0LDEuNzk0LDQsNFMyMi4yMDYsMjQsMjAsMjR6IE0yMCwxN2MtMS42NTQsMC0zLDEuMzQ2LTMsMyBzMS4zNDYsMywzLDNzMy0xLjM0NiwzLTNTMjEuNjU0LDE3LDIwLDE3eiIvPjxwYXRoIGZpbGw9IiM4YmI3ZjAiIGQ9Ik0yMCwyOC4wNjhDOS4zNDYsMjguMDY4LDEsMjQuNTI0LDEsMjBzOC4zNDYtOC4wNjgsMTktOC4wNjhTMzksMTUuNDc2LDM5LDIwIFMzMC42NTQsMjguMDY4LDIwLDI4LjA2OHogTTIwLDEyLjkzMmMtOS43NTcsMC0xOCwzLjIzNy0xOCw3LjA2OHM4LjI0Myw3LjA2OCwxOCw3LjA2OFMzOCwyMy44MzIsMzgsMjBTMjkuNzU3LDEyLjkzMiwyMCwxMi45MzJ6Ii8+PHBhdGggZmlsbD0iIzhiYjdmMCIgZD0iTTEyLjQwMiwzN0MxMi40MDEsMzcsMTIuNDAyLDM3LDEyLjQwMiwzN2MtMC43NTUsMC0xLjQzOC0wLjE3Mi0yLjAzMy0wLjUxMSBjLTAuOTk2LTAuNTY5LTEuNjg5LTEuNTYyLTIuMDYyLTIuOTUyYy0xLjA4MS00LjAzNywwLjcyOS0xMC45MzgsNC42MS0xNy41ODFDMTcuMzc5LDguMzMsMjMuNDE2LDMuMDAzLDI3LjU5OSwzLjAwMyBjMC43NTQsMCwxLjQzOCwwLjE3MiwyLjAzMiwwLjUxMWMwLjk5NSwwLjU2OCwxLjY4OCwxLjU2LDIuMDYxLDIuOTQ4YzEuMDgxLDQuMDM3LTAuNzI5LDEwLjkzOC00LjYxMiwxNy41ODIgQzIyLjYyMSwzMS42NzIsMTYuNTg2LDM3LDEyLjQwMiwzN3ogTTI3LjU5OSw0LjAwM2MtMy43ODQsMC05LjU5NSw1LjIzOS0xMy44MTcsMTIuNDU4Yy0zLjY5NSw2LjMyNS01LjUwNywxMy4wODMtNC41MDgsMTYuODE4IGMwLjMwMSwxLjEyMywwLjgzNiwxLjkxLDEuNTkyLDIuMzQyQzExLjMwNywzNS44NzIsMTEuODIzLDM2LDEyLjQwMSwzNmMzLjc4NSwwLDkuNTk1LTUuMjQsMTMuODE0LTEyLjQ2MSBjMy42OTctNi4zMjYsNS41MS0xMy4wODUsNC41MDktMTYuODE4Yy0wLjMtMS4xMjEtMC44MzUtMS45MDgtMS41OS0yLjMzOEMyOC42OTMsNC4xMzEsMjguMTc3LDQuMDAzLDI3LjU5OSw0LjAwM3oiLz48Zz48cGF0aCBmaWxsPSIjOGJiN2YwIiBkPSJNMjcuNTk5LDM2Ljk5N0MyNy41OTksMzYuOTk3LDI3LjU5OSwzNi45OTcsMjcuNTk5LDM2Ljk5N2MtNC4xODctMC4wMDEtMTAuMjI0LTUuMzI3LTE0LjY4MS0xMi45NTMgQzkuMDM2LDE3LjQwMSw3LjIyNywxMC41LDguMzA4LDYuNDYzYzAuMzcyLTEuMzksMS4wNjUtMi4zODMsMi4wNjItMi45NTJDMTAuOTY0LDMuMTcyLDExLjY0NywzLDEyLjQsMyBjNC4xODUsMCwxMC4yMjEsNS4zMjgsMTQuNjc5LDEyLjk1NmMzLjg4Myw2LjY0Miw1LjY5MiwxMy41NDMsNC42MSwxNy41ODJjLTAuMzcxLDEuMzg5LTEuMDY0LDIuMzgxLTIuMDU5LDIuOTQ4IEMyOS4wMzYsMzYuODI1LDI4LjM1MywzNi45OTcsMjcuNTk5LDM2Ljk5N3ogTTEyLjQsNGMtMC41NzcsMC0xLjA5NCwwLjEyOC0xLjUzNSwwLjM3OWMtMC43NTYsMC40MzItMS4yOTEsMS4yMTktMS41OTIsMi4zNDIgYy0wLjk5OSwzLjczNCwwLjgxMywxMC40OTMsNC41MDgsMTYuODE4QzE4LDMwLjc1NywyMy44MTIsMzUuOTk2LDI3LjU5OSwzNS45OTdsMCwwYzAuNTc4LDAsMS4wOTUtMC4xMjgsMS41MzYtMC4zOCBjMC43NTQtMC40MywxLjI4OS0xLjIxNywxLjU4OS0yLjMzOGMxLTMuNzM1LTAuODEyLTEwLjQ5NC00LjUwOC0xNi44MThDMjEuOTk2LDkuMjQxLDE2LjE4Nyw0LDEyLjQsNHoiLz48L2c+PC9zdmc+') 50% 50% no-repeat;
    background-size: 100%; 
}
.container .row .col-lg-6 .icon-container .icons8-php { 
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgODAgODAiIHdpZHRoPSI4MHB4IiBoZWlnaHQ9IjgwcHgiPjxwYXRoIGZpbGw9IiNkY2Q1ZjIiIGQ9Ik00MCw2MS41QzE4LjIyLDYxLjUsMC41LDUxLjg1NSwwLjUsNDBTMTguMjIsMTguNSw0MCwxOC41Uzc5LjUsMjguMTQ1LDc5LjUsNDBTNjEuNzgsNjEuNSw0MCw2MS41eiIvPjxwYXRoIGZpbGw9IiM4Yjc1YTEiIGQ9Ik00MCwxOWMyMS41MDUsMCwzOSw5LjQyMSwzOSwyMVM2MS41MDUsNjEsNDAsNjFTMSw1MS41NzksMSw0MFMxOC40OTUsMTksNDAsMTkgTTQwLDE4IEMxNy45MDksMTgsMCwyNy44NSwwLDQwczE3LjkwOSwyMiw0MCwyMnM0MC05Ljg1LDQwLTIyUzYyLjA5MSwxOCw0MCwxOEw0MCwxOHoiLz48cGF0aCBmaWxsPSIjMzY0MDRkIiBkPSJNMjUuMTEyIDM0YzEuNzI1IDAgMy4yMTQuNjIyIDQuMDg0IDEuNzA2Ljc0OS45MzQuOTgxIDIuMTcxLjY2OCAzLjU3N0MyOS4wMjMgNDMuMDc0IDI3LjM5NSA0NCAyMS41NyA0NGgtNC4xNGwxLjc1LTEwSDI1LjExMk0yNS4xMTIgMzJIMTcuNUwxNCA1MmgybDEuMDU2LTZoNC41MTVjNS44NjMgMCA5LjA1My0uOTA1IDEwLjI0Ni02LjI4NEMzMi44NDIgMzUuMDk2IDI5LjQzNiAzMiAyNS4xMTIgMzJMMjUuMTEyIDMyek02MS4xMTIgMzRjMS43MjUgMCAzLjIxNC42MjIgNC4wODQgMS43MDYuNzQ5LjkzNC45ODEgMi4xNzEuNjY4IDMuNTc3QzY1LjAyMyA0My4wNzQgNjMuMzk1IDQ0IDU3LjU3IDQ0aC00LjE0bDEuNzUtMTBINjEuMTEyTTYxLjExMiAzMkg1My41TDUwIDUyaDJsMS4wNTYtNmg0LjUxNWM1Ljg2MyAwIDkuMDUzLS45MDUgMTAuMjQ2LTYuMjg0QzY4Ljg0MiAzNS4wOTYgNjUuNDM2IDMyIDYxLjExMiAzMkw2MS4xMTIgMzJ6Ii8+PGc+PHBhdGggZmlsbD0iIzM2NDA0ZCIgZD0iTTQ5LjA3MiwzMy4yMTJDNDguMTkzLDMyLjM0OCw0Ni42NDQsMzIsNDQuMzM0LDMyaC01LjUzOEw0MCwyNmgtMi4xTDM0LDQ2aDEuOTlsMi4zODgtMTJoMC40MTkgaDUuNTM4YzIuMzM4LDAsMy4wOTQsMC40LDMuMzM1LDAuNjM3YzAuMzQzLDAuMzM4LDAuNDI0LDEuMjI2LDAuMjE3LDIuMzYzbC0xLjc2Nyw5aDIuMTA2bDEuNjI2LTguNjMgQzUwLjE5OSwzNS40NjIsNDkuOTM2LDM0LjA2Miw0OS4wNzIsMzMuMjEyeiIvPjwvZz48L3N2Zz4=') 50% 50% no-repeat;
    background-size: 100%;
}
.container .row .col-lg-6 .icon-container .icons8-django { 
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiPjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjMiIHg9IjE2IiB5PSIzIi8+PHBhdGggZD0iTTE5LDE2LjcwMmMwLDEtMC4yMzUsNC4yOTQtMy4xNDEsNS4yOTRMMTMsMjAuNzAyYzIuMDc4LTAuOTA2LDMtMi40ODQsMy00QzE2LDE0LjYwOCwxNiw4LDE2LDhoMyBDMTksOCwxOSwxNC40NTIsMTksMTYuNzAyeiIvPjxwYXRoIGQ9Ik05Ljk3LDE2LjUzM2MtMy4xMTUsMC0zLjU4LTIuMjE0LTMuNTgtMy41MzNjMC0yLjMxMywxLjM3Mi0zLjc1LDMuNTgtMy43NSBjMC4zNTcsMCwwLjc2OCwwLjA1NCwxLjI1NCwwLjE2NkwxMiw5LjU5M3Y2LjU5N2wtMC43NzYsMC4xNzhDMTAuNzM5LDE2LjQ3OSwxMC4zMjksMTYuNTMzLDkuOTcsMTYuNTMzeiIgb3BhY2l0eT0iLjMiLz48cGF0aCBkPSJNMTEsM3Y1LjE1OUMxMC42NTMsOC4wMTgsOS45MDQsOCw5LjUzNSw4QzYuNzU5LDgsNC4xOSw5LjMwNiw0LjE5LDEzYzAsNC40MiwzLjQ4LDUsNS44MSw1YzAuOTIsMCwzLTAuMDksNC0wLjM4VjNIMTF6IE05Ljk3LDE1LjUzM2MtMS4zMSwwLTIuNTgtMC40MTMtMi41OC0yLjUzM3MxLjI3LTIuNDUsMi41OC0yLjQ1YzAuMzIsMCwwLjY4LDAuMDYsMS4wMywwLjE0djQuNzAzIEMxMC42NSwxNS40NzMsMTAuMjksMTUuNTMzLDkuOTcsMTUuNTMzeiIvPjwvc3ZnPg==') 50% 50% no-repeat;
    background-size: 100%; 
}
.container .row .col-lg-6 .icon-container .icons8-git { 
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('../images/python.png') 50% 50% no-repeat;
    background-size: 100%; 
}
.container .row .col-lg-6 .icon-container .icons8-github { 
    display: inline-block;
    width: 48px;
    height: 48px;
    background: url('../images/c.png') 50% 50% no-repeat;
    background-size: 100%; 
}

/* Positioning the icons randomly */
.icon-1 { top: 10%; left: 20%; animation: floatUp3 4s ease-in-out infinite; }
.icon-2 { top: 30%; left: 70%; animation: floatDown4 5s ease-in-out infinite; }
.icon-3 { top: 60%; left: 15%; animation: floatLeft4 6s ease-in-out infinite; }
.icon-4 { top: 50%; left: 50%; animation: floatRight4 5s ease-in-out infinite; }
.icon-5 { top: 20%; left: 40%; animation: floatDiagonalUp4 7s ease-in-out infinite; }
.icon-6 { top: 70%; left: 65%; animation: floatDiagonalDown4 6s ease-in-out infinite; }
.icon-5 { top: 20%; left: 40%; animation: floatDiagonalUp4 7s ease-in-out infinite; }
.icon-7 { top: 80%; left: 20%; animation: floatDiagonalDown4 8s ease-in-out infinite; }
.icon-8 { top: 63%; left: 39%; animation: floatDiagonalDown4 8s ease-in-out infinite; }

/* Animations for smooth movement */
@keyframes floatUp3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes floatDown4 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(20px); }
}

@keyframes floatLeft4 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-20px); }
}

@keyframes floatRight4 {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}

@keyframes floatDiagonalUp4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-15px, -15px); }
}

@keyframes floatDiagonalDown4 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(15px, 15px); }
}

/* ----------------------
08. Experience-Area
----------------------- */
.experience-area .single-image {
    padding-right: 70px;
}

.experience-area .single-image img {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
}

.experience-text .title {
    font-size: 36px;
    line-height: 46px;
}

.experience-text .desc {
    margin-bottom: 50px;
}

.icon-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 15px;
}

.icon-info .icon {
    width: 50px;
    height: 50px;
    background-color: #ff885e;
    font-size: 20px;
    line-height: 50px;
    text-align: center;
    margin-right: 15px;
    color: #ffffff;
    border-radius: 50%;
}

.icon-info h6 {
    margin-bottom: 0px;
    font-size: 16px;
}

.icon-info h6 a {
    color: #190844;
}

.icon-info h6 a:hover {
    text-decoration: underline;
    color: rgb(255, 136, 94);
}

/* ----------------------
09. Testimonial-Area
----------------------- */
.testimonial-slider {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.testimonial-slider .slick-list {
    margin-left: -15px;
    margin-right: -15px;
}

.testimonial-slider .single-testimonial {
    background-color: #f3f7ff;
    padding: 50px;
    margin: 0 15px;
    /* border: 1px solid #eee; */
    position: relative;
    z-index: 1;
    border-radius: 10px;
}

.testimonial-slider .single-testimonial .quote {
    background-color: #ff885e;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    float: left;
    margin-right: 25px;
    border-radius: 50%;
}

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

.testimonial-slider .single-testimonial .content p:before,
.testimonial-slider .single-testimonial .content p:after {
    content: '"';
    display: inline-block;
}

.testimonial-slider .single-testimonial .title {
    font-size: 22px;
    margin-bottom: 10px;
}

.testimonial-slider .single-testimonial .position {
    font-size: 14px;
    font-weight: 400;
}

/* ---------------------------
10. Contact-Form-Area
--------------------------- */
.contact-form {
    margin-top: 8px;
}

.input-box {
    padding: 24px 30px;
    width: 100%;
    background-color: #ffffff;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    border: 1px solid #e3e7ea;
    outline: none;
    color: #282828;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
}

.input-box:focus {
    -webkit-box-shadow: 16px 16px 32px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 16px 16px 32px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #ff885e;
}

.contact-form .input-box {
    margin-bottom: 30px;
    line-height: 26px;
    border-radius: 5px;
    resize: none;
}

.contact-form .form-double:after {
    clear: both;
    display: block;
    content: "";
}

.contact-form .form-double .form-box {
    width: calc(50% - 15px);
    float: left;
    margin-right: 30px;
}

.contact-form .form-double .form-box.left {
    margin-right: 0;
}

.form-box {
    position: relative;
    line-height: 0px;
}

.form-box button {
    line-height: 26px;
}

.form-box .icon {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 100px;
    color: #e3e7ea;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
}

.contact-form ::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #282828;
}

.contact-form ::-moz-placeholder {
    /* Firefox 19+ */
    color: #282828;
}

.contact-form :-ms-input-placeholder {
    /* IE 10+ */
    color: #282828;
}

.contact-form :-moz-placeholder {
    /* Firefox 18- */
    color: #282828;
}

/* ----------------------
11. Blog-Area
------------------------ */
.blog-slider .slick-list {
    margin-left: -15px;
    margin-right: -15px;
}

.blog-slider .single-blog {
    margin-right: 15px;
    margin-left: 15px;
    margin-top: 10px;
    background: #f3f7ff;
    border-radius: 10px;
}

.single-blog {
    background: #f3f7ff;
    margin: 25px 0px 0px 0px;
}

.single-blog .title {
    font-size: 25px;
    line-height: 38px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.single-blog .title a {
    color: #190844;
    padding: 10px 0px;
}

.single-blog .title a:hover {
    color: #ff885e;
}

.single-blog .blog-image {
    margin-bottom: 26px;
    border-radius: 10px;
    overflow: hidden;
}

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

.single-blog .button-primary-trans i {
    margin-left: 5px;
}

.blog-lists {
    margin-bottom: -40px;
}

.blog-lists .single-blog {
    margin-bottom: 50px;
}

.full-width .single-blog .blog-content {
    width: calc(100% - 100px);
    margin: auto;
}

.blog-meta {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 50px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    background-color: #fff0eb;
    padding: 25px 40px 5px 40px;
    border-radius: 10px;
}

.blog-meta .single-meta {
    margin-right: 50px;
    margin-bottom: 10px;
}

.blog-meta .single-meta:last-child {
    margin-right: 0px;
}

.blog-meta .single-meta .meta-title {
    margin-bottom: 5px;
    font-size: 15px;
    letter-spacing: 2px;
}

.blog-meta .single-meta .meta-value {
    font-size: 16px;
    color: #282828;
}

.blog-meta .single-meta .meta-value a {
    color: #282828;
}

/* .blog-meta .single-meta .meta-value:before {
    content: ".";
    color: #ff885e;
    margin-right: 5px;
} */

/*------------------------
6. Navigation-&-Pagination
-------------------------*/
.navigation,
.pagination {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    margin-top: 80px;
}

.nav-links {
    width: 100%;
}

.pagination .page-numbers {
    background: #558bff;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 5px;
    line-height: 50px;
    position: relative;
    z-index: 1;
    color: #141414;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
    color: #ffffff;
}

.pagination .page-numbers:after {
    content: "";
    background-color: #f9f9f9;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}

.pagination .page-numbers.current:after,
.pagination .page-numbers:hover:after {
    opacity: 0;
}

/* ---------------------
Footer-Area
--------------------- */
.footer-area {
    padding-top: 90px;
    /* padding-bottom: 30px; */
    background-color: #190844;
}

.footer-widgets {
    margin-bottom: 60px;
    color: #ffffff;
}

.footer-widgets ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.footer-widgets ul li {
    margin: 8px 0;
}

.footer-widgets a {
    color: #ffffff;
}

.footer-bottom {
    background-color: #ff885e;
    /* margin-left: 5px; */
    /* margin-right: 5px; */
    padding: 25px 15px;
    font-size: 16px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

.footer-widgets .footer-logo {
    margin-bottom: 30px;
}

.footer-widgets .widget-title {
    color: #ffffff;
    font-size: 24px;
    margin-bottom: 25px;
}

/* .footer-widgets .widget-title:before {
    content: ".";
} */

/*----------------------
11. Preloader-CSS
 ---------------------*/
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 999999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    pointer-events: none;
}

.preloader img {
    width: 300px;
}

/* ------------------------
12. ScrollUpButton
-------------------------- */
#scrollUp {
    position: fixed;
    right: 2%;
    top: 100%;
    width: 28px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    border: 2px solid #ff885e;
    color: #ff885e;
    text-align: center;
    background-color: #ffffff;
    border-radius: 100px;
    z-index: 999;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
}

#scrollUp:hover {
    background-color: #ff885e;
    color: #ffffff;
}

#scrollUp.active {
    top: calc(100% - 110px)
}

#scrollUp i {
    -webkit-animation: mymove 1s ease-in 0s infinite alternate;
    animation: mymove 1s ease-in 0s infinite alternate;
    display: inline-block;
    position: relative;
}

@-webkit-keyframes mymove {
    from {
        top: -5px;
    }

    to {
        top: 5px;
    }
}

@keyframes mymove {
    from {
        top: -5px;
    }

    to {
        top: 5px;
    }
}

/* ------------------------
13. Portfolio-Page
-------------------------- */
.site-header {
    background-image: url('../images/site-header.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    position: relative;
    z-index: 1;
    padding-top: 220px;
    padding-bottom: 120px;
    overflow: hidden;
}

.site-header .title {
    color: #ffffff;
    font-size: 76px;
}

.site-header .breadcrumbs ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-align: right;
}

.site-header .breadcrumbs ul li {
    display: inline-block;
    font-size: 24px;
    color: #ffffff;
}

.site-header .breadcrumbs ul li:after {
    content: "-";
    margin: 0 30px;
}

.site-header .breadcrumbs ul li:last-child:after {
    display: none;
    margin-right: 0px;
}

.site-header .breadcrumbs ul li a {
    color: #ffffff;
}

.quote-box {
    text-align: center;
    padding: 100px 30px;
    background-color: #fff0eb;
    border-radius: 10px;
}

.quote-content .title {
    font-size: 36px;
}

.quote-content .desc {
    font-weight: 600;
    margin-bottom: 50px;
}

/* -------------------------
14. Portfolio-Details
-------------------------- */

.blog-details .head-title,
.portfolio-details .head-title {
    font-size: 45px;
    margin-bottom: 50px;
}

.image-block {
    /* width: calc(100% + 160px); */
    /* max-width: 98vw; */
    position: relative;
    /* left: 50%; */
    /* transform: translateX(-50%); */
    margin-bottom: 50px;
    border-radius: 10px;
    overflow: hidden;
}

.portfolio-details .portflio-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background-color: #fff0eb;
    flex-wrap: wrap;
    padding: 25px 40px;
    margin-bottom: 50px;
    border-radius: 10px;
}

.portfolio-details .portflio-info .single-info {
    margin-right: 30px;
    padding: 15px 0;
}

.portfolio-details .portflio-info .single-info:last-child {
    margin-right: 0px;
}

.portfolio-details .portflio-info .single-info .title {
    font-size: 16px;
    margin-bottom: 5px;
}

/* portfolio button more details design */

.buttonn {
    position: relative;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    padding-block: 0.3rem;
    padding-inline: 1rem;
    background-color: #ff885e;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffff;
    gap: 8px;
    margin-top: 10px;
    font-weight: bold;
    border: 2px solid #ffffff4d;
    outline: none;
    overflow: hidden;
    font-size: 13px;
    cursor: pointer;
    width: auto; /* Auto width for flexibility */
    min-width: 100px; /* Ensures it doesn’t shrink too much */
    max-width: 200px; /* Prevents it from being too wide */
}

.iconn {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease-in-out;
}

.buttonn:hover {
    transform: scale(1.05);
    border-color: #fff9;
}

.buttonn:hover .iconn {
    transform: translate(3px);
}

.buttonn:hover::before {
    animation: shine 1.5s ease-out infinite;
}

.buttonn::before {
    content: "";
    position: absolute;
    width: 80px;
    height: 100%;
    background-image: linear-gradient(
      120deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, 0.8),
      rgba(255, 255, 255, 0) 70%
    );
    top: 0;
    left: -80px;
    opacity: 0.6;
}

@keyframes shine {
    0% {
      left: -80px;
    }
    60% {
      left: 100%;
    }
    to {
      left: 100%;
    }
}

/* Tablets (max-width: 768px) */
@media (max-width: 768px) {
    .buttonn {
        font-size: 12px;
        padding-block: 0.25rem;
        padding-inline: 0.8rem;
        min-width: 90px;
        max-width: 180px;
    }

    .iconn {
        width: 18px;
        height: 18px;
    }
}

/* Small phones (max-width: 480px) */
@media (max-width: 480px) {
    .buttonn {
        font-size: 11px;
        padding-block: 0.2rem;
        padding-inline: 0.6rem;
        min-width: 80px;
        max-width: 160px;
    }

    .iconn {
        width: 16px;
        height: 16px;
    }
}

/* Extra small screens (max-width: 320px) */
@media (max-width: 320px) {
    .buttonn {
        font-size: 10px;  /* Even smaller text */
        padding-block: 0.15rem;
        padding-inline: 0.5rem;
        min-width: 70px;
        max-width: 140px;
    }

    .iconn {
        width: 14px;
        height: 14px;
    }
}


  

/* .portfolio-details .portflio-info .single-info .title:before {
    content: ".";
    color: #ff885e;
    margin-right: 5px;
} */

.description .gallery {
    list-style: none;
    margin: 30px 0px 0px 0px;
    padding: 0px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.description .gallery li {
    margin-bottom: 30px;
    width: 49%;
    border-radius: 10px;
    overflow: hidden;
}

.description .gallery li:nth-child(n + 3) {
    width: 100%;
}

.portfolio-details .description .dots-list {
    list-style: none;
    padding: 10px 0 0 0;
    margin: 0px 0 30px 0;
}

.description .dots-list li {
    margin: 10px 0px;
}

.description .dots-list li:before {
    color: #ff885e;
    font-family: 'Font Awesome 5 Pro';
    content: "\f00c";
    font-weight: 900;
    margin-right: 10px;
    font-size: 16px;
}

.single-navigation {
    padding: 15px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: #f3f7ff;
    margin-top: 60px;
    border-radius: 10px;
}

.single-navigation .nav-link {
    display: flex;
    align-items: center;
    max-width: 50%;
}

.single-navigation .nav-link .icon {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background-color: #ff885e;
    margin: 15px;
    font-size: 22px;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    border-radius: 50%;
    -o-transition: 0.3s;
}

.single-navigation .nav-link:hover .icon {
    background-color: #ff885e;
    color: #ffffff;
}

.single-navigation .nav-link .text {
    font-size: 22px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: #282828;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.swiper-slide {
    overflow: hidden;
    color: #fff;
}

.swiper-container {
    width: 100%;
    left: 0;
    top: 0;
}

.slide-inner {
    width: 100%;
    padding-top: 320px;
    padding-bottom: 210px;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 40px);
    display: flex;
    align-items: center;
}

.main_menu.menu_fix {
    background: #fff;
    border-color: #eeeeeeb5;
}

.main_menu.menu_fix .nav li a {
    color: #3a3a3a;
}

.main_menu.menu_fix ul li>a i.plus:before,
.main_menu.menu_fix ul li>a i.plus:after {
    background-color: #3a3a3a !important;
}

.main_menu.menu_fix .social-buttons a {
    color: #292929;
}

.single-service {
    padding: 25px;
    background: #f3f7ff;
    border-radius: 10px;
}

.header-text a.button-dark.mouse-dir {
    background: #ff885e;
}

.about-image img {
    width: 100% !important;
}

.slick-dots li button {
    background-color: #ff885e;
    border-radius: 50%;
    margin: 5px 2px 0 2px;
}

.blog-content {
    padding: 30px;
    padding-top: 0;
}

.blog-content a {
    padding: 10px 25px;
}

.navbar-brand {
    max-width: 190px;
    padding: 0;
    margin: 0;
}

.footer-widgets .footer-logo {
    max-width: 190px;
}

.copyright {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.copyright p {
    margin: 0;
}

.copyright p span {
    color: #190844;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
}

.footer-widgets .text-box ul li a {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #ff885e1f;
    margin-right: 7px;
    border-radius: 50%;
    transition: all linear .3s;
    -webkit-transition: all linear .3s;
    -moz-transition: all linear .3s;
    -ms-transition: all linear .3s;
    -o-transition: all linear .3s;
}

.footer-widgets .text-box ul li a:hover {
    background: #ff895e
}


/* Floating AI Button */
.ai-float-btn {
    position: fixed;        /* 🔑 stays on screen */
    bottom: 30px;
    right: 30px;

    width: 60px;
    height: 60px;
    border-radius: 50%;

    background: #ff885e;
    color: #fff;
    font-size: 26px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);

    z-index: 99999;         /* higher than navbar & header blobs */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ai-float-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 35px rgba(0,0,0,0.3);
}

/* AI Chat Box */
.ai-chat-box {
    position: fixed;
    bottom: 110px;
    right: 30px;

    width: 320px;
    height: 420px;

    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.3);

    display: none;
    flex-direction: column;

    z-index: 99998;
    overflow: hidden;
}

/* Header */
.ai-chat-header {
    background: #ff885e;
    color: #fff;
    padding: 14px 16px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-chat {
    cursor: pointer;
    font-size: 18px;
}

/* Body */
/* Body */
.ai-chat-body {
    padding: 14px;
    flex: 1;
    overflow-y: auto;
    font-size: 14px;

    display: flex;              /* ✅ REQUIRED */
    flex-direction: column;    /* ✅ REQUIRED */
}


/* Messages */
.ai-message {
    max-width: 85%;
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 12px;
    line-height: 1.4;


}


.ai-message.ai {
    background: #f3f4f6;
    color: #333;
    align-self: flex-start;
}

.ai-message.user {
    background: #ff885e;
    color: #fff;
    align-self: flex-end;
}

/* Footer */
/* Footer */
.ai-chat-footer {
    padding: 12px;
    border-top: 1px solid #eee;
    background: #fff;
}

/* Input wrapper */
.ai-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;

    background: #f3f4f6;
    border-radius: 999px;
    padding: 6px 8px;
}

/* Input field */
.ai-input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 14px;
    outline: none;
    color: #333;
}

.ai-input-wrapper input::placeholder {
    color: #999;
}

/* Send button */
.ai-input-wrapper button {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;

    background: #ff885e;
    color: #fff;
    font-size: 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
}

.ai-input-wrapper button:hover {
    background: #ff6f3d;
    transform: scale(1.08);
}

.ai-input-wrapper button:active {
    transform: scale(0.95);
}

.ai-message a {
    color: #ff885e;
    text-decoration: underline;
    font-weight: 500;
}

.ai-message a:hover {
    text-decoration: none;
}