/* -------------------------------------------
Table of Index
--------------
1. Base css 
2. Header css
3. Home Banner css
4. About Me css
5. Services css
6. Resume css
7. Testimonial css
8. Partners css
9. Blogs css
10. Contact css
11. Portfolio css
12. Counter css
13. Footer css
14. Inner page Hero css
15. Preloader
----------------------------------------------- */
/* 1. Base css */
* {
    margin: 0;
    padding: 0;
}

html,
body {
    font-family: 'Jost', sans-serif;
    box-sizing: border-box;
}

:root {
    --orange-color: #FF6B00;
    --black-color: #101010;
    --secondary-black-color: #606060;
    --light-color: #FFF5EF;
}

h1,
.h1 {
    font-size: 84px;
    margin: 0;
    line-height: 1.2em;
    font-weight: 700;
    font-family: 'Jost', sans-serif;
}

.h1-small {
    font-size: 72px;
    margin: 0;
    line-height: 1.2em;
    font-weight: 700;
    font-family: 'Jost', sans-serif;
}

.h1-home-4 {
    font-size: 84px;
    margin: 0;
    line-height: 1.2em;
    font-weight: 700;
    font-family: 'Jost', sans-serif;
}

.h1-home-2 {
    font-size: 70px;
}

h2,
.h2 {
    font-size: 50px;
    margin: 0;
    font-weight: 700;
}

.h2-secondary {
    font-size: 42px;
}

h3,
.h3 {
    font-size: 26px;
    margin: 0;
}

h4,
.h4 {
    font-size: 26px;
    margin: 0;
}

h5,
.h5 {
    font-size: 20px;
    margin: 0;
}

h6,
.h6 {
    font-size: 16px;
    margin: 0;
}

p,
.p {
    font-size: 20px;
    margin: 0;
}

a {
    color: var(--black-color);
    font-family: 'Jost', sans-serif;
    text-decoration: none;
    margin: 0;
    transition: all .3s;
}

a:focus {
    outline: 0px solid;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: var(--orange-color);
}

a>h2,
a>h3,
a>h4,
a>h5,
a>h6,
a>p,
a span {
    transition: all .3s;
}

a:hover h2,
a:hover h3,
a:hover h4,
a:hover h5,
a:hover h6,
a:hover p,
a:hover span {
    color: var(--orange-color);
}

button {
    outline: 0px solid;
    text-decoration: none;
}

button:focus {
    outline: 0px solid;
    text-decoration: none;
}

.outline-0 {
    outline: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

textarea {
    border-style: none;
    border-color: Transparent;
    overflow: auto;
}

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

.secondary-black {
    color: var(--secondary-black-color);
}

.orange-color {
    color: var(--orange-color);
}

.pages-section-top {
    padding-top: 65px;
}

.pages-section-top-xl {
    padding-top: 130px;
}

.pages-section-bottom {
    padding-bottom: 65px;
}

.pages-section-bottom-xl {
    padding-bottom: 130px;
}

.divider-style-one {
    margin: 30px 0px;
    border-top: none;
    height: 1px;
    background-color: #FFE2D1;
    opacity: 1;
}


.orange-btn {
    color: #fff;
    padding: 10px 32px;
    background-color: var(--orange-color);
    border-radius: 6px;
    font-size: 24px;
    font-weight: 500;
    text-transform: capitalize;
    border: 1px solid transparent;
    transition: all .3s;
}

.light-bg {
    background-color: #FFF3EA;
}

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

.img-zoom {
    overflow: hidden;
    width: fit-content;
}

.img-zoom img {
    transition: all .4s;
}

.img-zoom:hover img {
    transform: scale(1.1);
}

.btn_effect {
    position: relative;
    overflow: hidden;
}

.btn_effect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--black-color);
    visibility: hidden;
    transition: all 1s ease;
}

.btn_effect::before {
    content: '';
    position: absolute;
    top: 0;
    right: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--black-color);
    visibility: hidden;
    transition: all 1s ease;
}

.img-overlay {
    width: fit-content;
    position: relative;
}

.img-overlay-full {
    width: 100%;
    position: relative;
}

.img-overlay::after,
.img-overlay-full::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    display: block;
    z-index: 20;
    transition: all .5s;
    border-radius: 6px;
    opacity: 0;
}

.img-overlay-full::after {
    border-radius: 12px !important;
}

.img-overlay:hover::after,
.img-overlay-full:hover::after {
    opacity: 1;
}

.btn_effect:hover {
    color: #fff;
}

.btn_effect:hover::after {
    visibility: visible;
    transform: rotate(0deg);
    left: 0;
}

.btn_effect:hover::before {
    visibility: visible;
    transform: rotate(0deg);
    right: 0;
}

.section-heading-middle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.custom-container {
    padding-left: calc((100% - 1320px)/2);
    margin-left: 15px;
    padding-right: calc((100% - 1320px)/4);
}

/* scrollbar style */
::-webkit-scrollbar {
    width: 8px;
  }
  
  ::-webkit-scrollbar-track {
    background: var(--light-color); 
  }
   
  ::-webkit-scrollbar-thumb {
    background: var(--orange-color); 
    border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-black-color); 
  }

/* animation keyframes and classes */
.delay-one {
    animation-delay: -.3s !important;
}

.delay-two {
    animation-delay: -.7s !important;
}

.delay-100 {
    animation-delay: .1s;
}

.delay-200 {
    animation-delay: .2s;
}


@keyframes floatUpDown {
    0% {
        transform: translateY(-10px)
    }

    50% {
        transform: translateY(10px)
    }

    100% {
        transform: translateY(-10px)
    }
}

.floating-particle-one {
    animation: floatUpDown 3s infinite ease-in-out;
}

@keyframes MoveBg {
    0% {
        background-position: top;
    }

    25% {
        background-position: right;
    }

    50% {
        background-position: bottom;
    }

    75% {
        background-position: left;
    }
}

@keyframes fadeInOut {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.content-fade-in-out {
    animation-name: fadeInOut;
    animation-duration: 1.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

@keyframes rotate360 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rotate-360 {
    animation-name: rotate360;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes zoomInOutContent {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(.9);
    }
}

.zoom-in-out {
    animation-name: zoomInOutContent;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes bgFade {
    0% {
        background-size: 0;
    }

    50% {
        background-size: contain;
    }
}

.bg-fade {
    animation-name: bgFade;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes contentFadeInOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.content-fade-in-out {
    animation-name: contentFadeInOut;
    animation-duration: 2s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

@keyframes BgMove3D {
    0% {
        transform: translate3d(0px, 0px, 0px);
    }
    50% {
        transform: translate3d(-30px, -30px, -30px);
    }
    
    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

.bg-move-3d {
    animation-name: BgMove3D;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* font-family */
.font-urbanist {
    font-family: 'Urbanist', sans-serif;
}

/* font-weight */
.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.fw-800 {
    font-weight: 800;
}

.fw-900 {
    font-weight: 900;
}

/* z-index */
.z-index-5 {
    z-index: 5;
}

.z-index-10 {
    z-index: 10;
}

.z-index-15 {
    z-index: 15;
}

.z-index-20 {
    z-index: 20;
}

.z-index-25 {
    z-index: 25;
}

/* line height */
.line-height-primary {
    line-height: 1em;
}

.line-height-1 {
    line-height: 1.1em;
}

.line-height-2 {
    line-height: 1.2em;
}

.line-height-3 {
    line-height: 1.3em;
}

.line-height-4 {
    line-height: 1.4em;
}

.line-height-5 {
    line-height: 1.5em;
}

.line-height-6 {
    line-height: 1.6em;
}

.line-height-7 {
    line-height: 1.7em;
}

.line-height-8 {
    line-height: 1.8em;
}

.line-height-9 {
    line-height: 1.9em;
}

.line-height-10 {
    line-height: 2em;
}

/* Basic margin padding */
.m-0 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.p-0 {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
}

/* Margin top */
.mt-0 {
    margin-top: 0
}

.mt-10 {
    margin-top: 10px
}

.mt-15 {
    margin-top: 15px
}

.mt-20 {
    margin-top: 20px
}

.mt-25 {
    margin-top: 25px
}

.mt-30 {
    margin-top: 30px
}

.mt-35 {
    margin-top: 35px
}

.mt-40 {
    margin-top: 40px
}

.mt-50 {
    margin-top: 50px
}

.mt-55 {
    margin-top: 55px
}

.mt-60 {
    margin-top: 60px
}

.mt-70 {
    margin-top: 70px
}

.mt-80 {
    margin-top: 80px
}

.mt-85 {
    margin-top: 85px
}

.mt-90 {
    margin-top: 90px
}

.mt-100 {
    margin-top: 100px
}

.mt-110 {
    margin-top: 110px
}

.mt-120 {
    margin-top: 120px
}

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

.mt-140 {
    margin-top: 140px
}

.mt-150 {
    margin-top: 150px
}

/* Margin right */
.mr-0 {
    margin-right: 0px
}

.mr-10 {
    margin-right: 10px
}

.mr-15 {
    margin-right: 15px
}

.mr-20 {
    margin-right: 20px
}

.mr-30 {
    margin-right: 30px
}

.mr-35 {
    margin-right: 35px
}

.mr-40 {
    margin-right: 40px
}

.mr-50 {
    margin-right: 50px
}

.mr-60 {
    margin-right: 60px
}

.mr-70 {
    margin-right: 70px
}

.mr-80 {
    margin-right: 80px
}

.mr-90 {
    margin-right: 90px
}

.mr-100 {
    margin-right: 100px
}

.mr-110 {
    margin-right: 110px
}

.mr-120 {
    margin-right: 120px
}

.mr-130 {
    margin-right: 130px
}

.mr-140 {
    margin-right: 140px
}

.mr-150 {
    margin-right: 150px
}

/* Margin bottom */
.mb-0 {
    margin-bottom: 0
}

.mb-10 {
    margin-bottom: 10px
}

.mb-15 {
    margin-bottom: 15px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-30 {
    margin-bottom: 30px
}

.mb-35 {
    margin-bottom: 35px
}

.mb-40 {
    margin-bottom: 40px
}

.mb-45 {
    margin-bottom: 45px
}

.mb-50 {
    margin-bottom: 50px
}

.mb-60 {
    margin-bottom: 60px
}

.mb-70 {
    margin-bottom: 70px
}

.mb-80 {
    margin-bottom: 80px
}

.mb-90 {
    margin-bottom: 90px
}

.mb-100 {
    margin-bottom: 100px
}

.mb-110 {
    margin-bottom: 110px
}

.mb-120 {
    margin-bottom: 120px
}

.mb-130 {
    margin-bottom: 130px
}

.mb-140 {
    margin-bottom: 140px
}

.mb-150 {
    margin-bottom: 150px
}

/* Margin left */
.ml-0 {
    margin-left: 0
}

.ml-10 {
    margin-left: 10px
}

.ml-15 {
    margin-left: 15px
}

.ml-20 {
    margin-left: 20px
}

.ml-30 {
    margin-left: 30px
}

.ml-40 {
    margin-left: 40px
}

.ml-50 {
    margin-left: 50px
}

.ml-60 {
    margin-left: 60px
}

.ml-70 {
    margin-left: 70px
}

.ml-80 {
    margin-left: 80px
}

.ml-90 {
    margin-left: 90px
}

.ml-95 {
    margin-left: 95px
}

.ml-100 {
    margin-left: 100px
}

.ml-110 {
    margin-left: 110px
}

.ml-120 {
    margin-left: 120px
}

.ml-130 {
    margin-left: 130px
}

.ml-140 {
    margin-left: 140px
}

.ml-150 {
    margin-left: 150px
}

/* Padding top */
.pt-0 {
    padding-top: 0
}

.pt-10 {
    padding-top: 10px
}

.pt-15 {
    padding-top: 15px
}

.pt-20 {
    padding-top: 20px
}

.pt-25 {
    padding-top: 25px
}

.pt-30 {
    padding-top: 30px
}

.pt-40 {
    padding-top: 40px
}

.pt-50 {
    padding-top: 50px
}

.pt-60 {
    padding-top: 60px
}

.pt-70 {
    padding-top: 70px
}

.pt-80 {
    padding-top: 80px
}

.pt-90 {
    padding-top: 90px
}

.pt-100 {
    padding-top: 100px
}

.pt-110 {
    padding-top: 110px
}

.pt-120 {
    padding-top: 120px
}

.pt-130 {
    padding-top: 130px
}

.pt-140 {
    padding-top: 140px
}

.pt-150 {
    padding-top: 150px
}

.pt-175 {
    padding-top: 175px
}

/* Padding right */
.pr-0 {
    padding-right: 0
}

.pr-10 {
    padding-right: 10px
}

.pr-15 {
    padding-right: 15px
}

.pr-20 {
    padding-right: 20px
}

.pr-25 {
    padding-right: 25px
}

.pr-30 {
    padding-right: 30px
}

.pr-40 {
    padding-right: 40px
}

.pr-50 {
    padding-right: 50px
}

.pr-60 {
    padding-right: 60px
}

.pr-70 {
    padding-right: 70px
}

.pr-80 {
    padding-right: 80px
}

.pr-90 {
    padding-right: 90px
}

.pr-100 {
    padding-right: 100px
}

.pr-110 {
    padding-right: 110px
}

.pr-120 {
    padding-right: 120px
}

.pr-130 {
    padding-right: 130px
}

.pr-140 {
    padding-right: 140px
}

.pr-150 {
    padding-right: 150px
}

.pr-200 {
    padding-right: 200px
}

/* Padding bottom */
.pb-0 {
    padding-bottom: 0
}

.pb-10 {
    padding-bottom: 10px
}

.pb-15 {
    padding-bottom: 15px
}

.pb-20 {
    padding-bottom: 20px
}

.pb-25 {
    padding-bottom: 25px
}

.pb-30 {
    padding-bottom: 30px
}

.pb-40 {
    padding-bottom: 40px
}

.pb-50 {
    padding-bottom: 50px
}

.pb-60 {
    padding-bottom: 60px
}

.pb-70 {
    padding-bottom: 70px
}

.pb-80 {
    padding-bottom: 80px
}

.pb-90 {
    padding-bottom: 90px
}

.pb-95 {
    padding-bottom: 95px
}

.pb-100 {
    padding-bottom: 100px
}

.pb-105 {
    padding-bottom: 105px
}

.pb-110 {
    padding-bottom: 110px
}

.pb-120 {
    padding-bottom: 120px
}

.pb-130 {
    padding-bottom: 130px
}

.pb-140 {
    padding-bottom: 140px
}

.pb-150 {
    padding-bottom: 150px
}

/* Padding left */
.pl-0 {
    padding-left: 0
}

.pl-10 {
    padding-left: 10px
}

.pl-15 {
    padding-left: 15px
}

.pl-20 {
    padding-left: 20px
}

.pl-25 {
    padding-left: 25px
}

.pl-30 {
    padding-left: 30px
}

.pl-40 {
    padding-left: 40px
}

.pl-50 {
    padding-left: 50px
}

.pl-60 {
    padding-left: 60px
}

.pl-70 {
    padding-left: 70px
}

.pl-80 {
    padding-left: 80px
}

.pl-90 {
    padding-left: 90px
}

.pl-100 {
    padding-left: 100px
}

.pl-110 {
    padding-left: 110px
}

.pl-120 {
    padding-left: 120px
}

.pl-130 {
    padding-left: 130px
}

.pl-140 {
    padding-left: 140px
}

.pl-150 {
    padding-left: 150px
}

.pl-200 {
    padding-left: 200px
}

/* 2. Header css */
header {
    z-index: 100;
}
.header {
    padding: 0px 0px;
}

.logo img {
    width: 135px;
}

.menu-link {
    color: var(--black-color);
    font-size: 22px;
    transition: all .3s;
    font-weight: 500;
}

.menu-link:hover {
    color: var(--orange-color);
}

.header-menu li {
    position: relative;
}

.submenu-container {
    background-color: var(--orange-color);
    position: absolute;
    top: 30px;
    left: 15px;
    width: fit-content;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

.submenu-link {
    color: #fff;
    padding: 5px 10px;
    display: inline-block;
    width: max-content;
}

.header-menu li:hover>ul {
    opacity: 1;
    visibility: visible;
}

.sidebar-header {
    position: fixed;
    top: 0;
    right: -50px;
    height: 100vh;
    left: 60px;
    width: fit-content;
}

.sidebar-menu-item {
    padding-bottom: 28px;
}

.sidebar-nav-menu .header-menu {
    padding-left: 15px;
    position: relative;
}

.sidebar-nav-menu .header-menu::before {
    content: '';
    position: absolute;
    left: 0;
    height: 95%;
    width: 1px;
    background-color: var(--black-color);
}

.sidebar-navigation {
    margin-top: 220px;
}

.sidebar-social-media {
    margin-top: 220px;
}

.sidebar-logo-img {
    width: 100px;
}

#onepage-nav li a.scroll {
    position: relative;
}

#onepage-nav li a.scroll::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 11px;
    border-radius: 5.5px;
    border: 1px solid var(--black-color);
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
}

#onepage-nav li a.scroll.active::before {
    background-color: var(--orange-color);
    border-color: var(--orange-color);
}

.main-menu ul li {
    display: inline-block;
    padding: 30px 0;
    position: relative;
}

.main-menu ul li a {
    font-weight: 400;
    position: relative;
}

.main-menu ul li ul {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: left;
    top: 100%;
    transition: all 0.3s ease 0s;
    visibility: hidden;
    width: 190px;
    z-index: 999;
}

.main-menu ul li ul li:first-child {
    border-top: none;
}

.main-menu ul li ul li {
    display: block;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    transition: all .3s ease 0s;
}

.main-menu ul li ul li a {
    display: block;
    padding: 10px 15px;
    text-transform: capitalize;
    color: var(--black-color);
}

.main-menu ul li ul li:hover a {
    color: var(--orange-color);
}

.main-menu ul li a {
    font-weight: 400;
    position: relative;
}

/* 3. Home Banner css */
.home-banner {
    background: linear-gradient(256.24deg, rgba(255, 195, 152, 0.2) 26.56%, rgba(255, 234, 190, 0.3) 100%);
}

.home-two-banner {
    background: var(--light-color);
    padding: 90px 0px 125px 0px;
}

.sub-heading p {
    margin-left: 10px;
}

.home-two-banner .sub-heading p {
    margin-left: 0px;
}

.home-three-banner {
    background: #FFF3EA;
    padding: 100px 0px 125px 0px;
}

.home-four-banner {
    background: #FFF3EA;
    padding: 125px 0px 0px 0px;
}

.home-four-banner-figma {
    bottom: 20px;
    right: -85px;
}

.home-four-banner-experience {
    top: 180px;
    right: -90px;
}

.home-four-banner-sketch {
    top: 320px;
    left: -20px;
}

.banner-three-badge {
    width: 210px;
    height: 210px;
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: -145px;
}

.sub-heading {
    margin-bottom: 10px;
}

.home-banner-shape {
    top: 65px;
    left: 80px;
    width: 75%;
}

.banner-particle-one {
    top: -60px;
    left: -80px;
    width: 70px;
    animation: floatUpDown 3s infinite ease-in-out;
}

.banner-particle-three {
    top: -40px;
    right: 0;
    width: 30px;
    animation: floatUpDown 3s infinite ease-in-out;
}

.banner-particle-two {
    width: 70px;
    bottom: -50px;
    left: 320px;
    animation: floatUpDown 3s infinite ease-in-out;
}

.home-four-banner-img-col {
    background: url(../img/homeBannerFourBg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.home-four-banner-spacer {
    height: 80px;
}

.home-four-banner-icon {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    background-color: var(--orange-color);
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
    transition: all .4s;
}

.home-four-banner-icon:hover {
    background-color: #fff;
    border-color: var(--orange-color);
}

.home-four-banner-icon:hover svg {
    color: var(--orange-color) !important;
}

.home-two-banner-circle {
    left: 3%;
    bottom: 0;
    width: 80%;
}

.sidebar-social-media .social-container a svg {
    transition: all .4s;
}

.sidebar-social-media .social-container a:hover svg {
    color: var(--orange-color) !important;
}

.ah-headline.clip span {
    padding: 0;
}

.animate-heading b {
    font-weight: 700;
}

/* 4. About Me css */
.about {
    padding: 130px 0px 65px 0px;
}

.about-resume-page {
    padding: 65px 0px;
}

.about-three {
    padding: 130px 0px 160px 0px;
}

.about-three-line-bg {
    height: 108%;
    width: 108%;
    left: -4%;
    top: -4%;
}

.about-two-img {
    width: 575px;
    height: 715px;
}

.about .progressbar {
    box-shadow: none;
    margin-bottom: 15px;
}

.about .percentCount {
    color: var(--secondary-black-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    margin-top: -43px;
}

.about-resume-page .progressbar {
    box-shadow: none;
    margin-bottom: 15px;
}

.about-resume-page .percentCount {
    color: var(--secondary-black-color);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    margin-top: -43px;
    float: right;
}

.about-three-img-container .about-three-img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.about-img-frame {
    width: 557px;
    height: 626px;
    background-color: var(--light-color);
    position: relative;
    margin-left: auto;
    border-radius: 10px;
}

.about-four-line-shape {
    left: 4%;
    top: 8.5%;
}

.about-info-box {
    padding: 35px 45px;
    background-color: var(--orange-color);
    width: fit-content;
    position: absolute;
    border-radius: 8px;
    bottom: -30px;
    left: -60px;
}

.about-info-box h3 {
    font-size: 26px;
}

.about-info-box ul {
    list-style-type: disc;
    margin-left: 25px;
}

.about-three-shape {
    left: -80px;
    bottom: 30px;
}

.about-four-shape {
    bottom: -30px;
    left: -40px;
}

.about-count-heading {
    font-size: 32px;

}

.home-two-about-bg-circle {
    position: absolute;
    bottom: -2%;
    left: 8%;
}

/* 5. Services css */
.services {
    padding: 65px 0px 130px 0px;
}

.services-archieve {
    padding: 65px 0px;
}

.service-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 24px;
}

.service-grid-item {
    padding: 50px 30px;
    border: 1px solid #FFE2D1;
    border-radius: 6px;
    transition: all .3s;
}

.service-two-grid .service-item-img {
    padding: 20px;
    background: #FFF5EF;
    border-radius: 6px;
    width: 80px;
}

.service-grid-item:hover {
    background-color: var(--light-color);
    border: 1px solid transparent;
}

.service-item-img {
    margin-bottom: 25px;
}

.service-item-heading {
    margin-bottom: 13px;
}

.service-slider-container .owl-carousel .owl-item {
    width: 540px;
}

.service-slider-container .owl-carousel .owl-item img {
    height: 520px;
}

.service-three {
    padding-bottom: 65px;
}

.service-three .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 55px;
}

.service-three .owl-theme .owl-dots .owl-dot span {
    background-color: var(--orange-color);
    opacity: .3;
    box-shadow: 0px 0px 0px 1px var(--orange-color);
}

.service-three .owl-theme .owl-dots .owl-dot.active span {
    background-color: var(--orange-color);
    opacity: 1;
    border: 3px solid #fff;
    border-radius: 50%;
}

.partner-four-grid-list-container .owl-theme .owl-stage {
    left: 110px;
}

.service-slide-top-img {
    top: 105px;
    z-index: 2;
    right: -120px;
}

.service-slide-bottom-img {
    bottom: 30px;
    z-index: 2;
    left: -60px;
}

.servcie-three-contents {
    padding-left: 230px;
}

.service-three-stroke-item-heading {
    font-size: 26px;
    font-weight: 400;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #6060605d;
    margin-right: 25px;
}

.service-three-item-heading {
    font-size: 22px;
    margin-bottom: 10px;
}

.servcie-three-contents .scroll.active .service-three-stroke-item-heading {
    -webkit-text-stroke-color: var(--orange-color)
}

.servcie-three-contents .scroll.active h5 {
    color: var(--orange-color);
}

/* 6. Resume css */
.resume {
    background-color: var(--light-color);
    padding: 130px 0px;
}

.resume-two {
    background-color: #fff;
}

.resume-three {
    padding: 0px 0px 130px 0px;
}

.resume-about {
    padding: 130px 0px;
}

.resume-archieve {
    padding: 65px 0px;
}

.resume-education,
.resume-skills {
    padding: 33px;
    border-radius: 6px;
}

.resume-first-item {
    padding-right: 78px;
}

.resume-second-item {
    padding-right: 39px;
    padding-left: 50px;
    position: relative;
}

.resume-third-item {
    padding-left: 78px;
}

.resume-second-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 1px;
    height: 90%;
    background-color: #D1D1D1;
}

.resume-second-item::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 1px;
    height: 90%;
    background-color: #D1D1D1;
}

.skill-name {
    overflow: hidden;
}

.skill-name::after {
    content: '';
    position: absolute;
    width: calc(100% - 55px);
    height: 1px;
    background-color: #D9D9D9;
    margin-left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.resume-topics {
    display: flex;
}

.resume-topic-one {
    top: 110px;
    margin-left: 23px;
}

.resume-topic-two {
    top: 350px;
    margin-left: 23px;
}

.resume-topic-three {
    bottom: 85px;
    margin-left: 23px;
}

.resume-topics::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 100%;
    background-color: #929292;
    display: inline-block;
}

.resume-topic-item::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: var(--orange-color);
    display: inline-block;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: -31px;
}

.resume-two .resume-content-right {
    padding-left: 45px;
}

.resume-two .resume-content-left {
    padding-right: 45px;
}

.resume-three-divider {
    margin-top: 12px;
    margin-bottom: 50px;
    height: 1px;
    background-color: var(--orange-color);
    opacity: 1;
    border: none;
}

.resume-style-three-item-experience {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.resume-four {
    background-color: #FFF3EA;
    padding: 130px 0px;
}

.resume-four-skill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px;
}

.resume-four-skill-title {
    border-width: 0px 3px 3px 1px;
    border-style: solid;
    border-color: rgba(255, 107, 0, 0.2);
    border-radius: 5px;
}

.resume-four-skill-icon-box {
    width: 105px;
    height: 105px;
    margin-bottom: -10px;
}

.education-experience-nav-tab {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.education-experience-container {
    padding: 10px;
    border: 1px solid var(--orange-color);
    border-radius: 5px;
}

.resume-nav-tab-item {
    background-color: #fff;
    padding: 12px 0px;
    width: 100%;
    flex-grow: 1;
    text-align: center;
    border-radius: 5px;
    font-size: 18px;
    color: var(--black-color);
    font-weight: 600;
    transition: all .3s;
}

.resume-nav-tab-item.nav-link.active {
    border: 0;
    background-color: var(--orange-color);
    color: #fff;
}

.resume-nav-tab-item:hover {
    background-color: var(--orange-color);
    color: #fff;
}

.resume-four-right {
    padding-left: 70px;
}

.resume-tab-img-container {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 1px solid var(--orange-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.resume-tab-item {
    border-radius: 6px;
}

.resume-tab-title {
    font-size: 28px;
}

.resume-tab-time {
    font-size: 22px;
}

.resume-tab-contents {
    margin-top: 100px;
}

/* 7. Testimonial css */
.testimonial {
    padding: 130px 0px 65px 0px;
}

.testimonial-black-bg {
    background-color: #070B10;
    padding: 130px 0px;
}

.bio-img {
    width: 75px;
    height: 75px;
    margin-right: 25px;
}

.testimonial .owl-carousel .owl-item img {
    width: auto;
}

.testimonial-card {
    padding: 40px 30px;
    border-radius: 6px;
    background-color: #FFFAF7;
}

.testimonial-card:hover {
    background-color: var(--light-color);
}

.testimonial-card-white {
    padding: 40px 30px;
    border-radius: 6px;
    background-color: #fff;
}

.testimonial .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 25px;
}

.testimonial .owl-theme .owl-dots .owl-dot span {
    background-color: var(--orange-color);
    opacity: .3;
    box-shadow: 0px 0px 0px 1px var(--orange-color);
}

.testimonial .owl-theme .owl-dots .owl-dot.active span {
    background-color: var(--orange-color);
    opacity: 1;
    border: 3px solid #fff;
    border-radius: 50%;
}

.testimonial-images {
    margin-top: 45px;
}

.testimonial-four-name {
    font-size: 22px;
    margin-top: 25px;
}

.testimonial-four-client-title {
    color: #878787;
    margin-top: 6px;
}

.testimonial-four-contents {
    padding: 0px 130px 0px 130px;
}

.testimonial-four .owl-theme .owl-nav.disabled+.owl-dots {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    right: -130px
}

.testimonial-four {
    padding-top: 130px;
}

.testimonial-four .owl-theme .owl-dots .owl-dot span {
    background-color: var(--orange-color);
    opacity: .3;
    box-shadow: 0px 0px 0px 1px var(--orange-color);
}

.testimonial-four .owl-theme .owl-dots .owl-dot.active span {
    background-color: var(--orange-color);
    opacity: 1;
    border: 3px solid #fff;
    border-radius: 50%;
}

/* 8. Partners css */
.partners {
    padding: 65px 0px;
}
.home-three-body .partners {
    padding: 130px 0px 65px 0px;
}

/* .partner-card {
    padding: 30px 60px;
    border: 1px solid #FFE2D1;
    border-radius: 6px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
} */

.partner-card img {
    transition: all .8s;
}

.partner-card:hover img {
    transform: scale(1.1);
}

.partner-grid-list-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    text-align: center;
}

.partner-list-container .owl-theme .owl-stage {
    left: 110px;
}

.partner-list-container-two .owl-theme .owl-stage {
    left: 110px;
}

.partner-logo-card {
    overflow: hidden;
}

.partner-logo-card:hover img {
    transform: scale(.8);
}

.partner-logo-card img {
    width: 67px;
    height: 83px;
    transition: all .4s;
}

.partners .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 50px;
}

.partners .owl-theme .owl-dots .owl-dot span {
    background-color: #D9D9D9;
    width: 12px;
    height: 4px;
    border-radius: 6px;
}

.partners .owl-theme .owl-dots .owl-dot.active span {
    background-color: var(--orange-color);
    opacity: 1;
}

.partners .owl-carousel .owl-nav button.owl-prev img {
    width: 30px;
}

.partners .owl-carousel .owl-nav button.owl-next img {
    width: 30px;
}

.partners .owl-carousel .owl-nav button.owl-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -1.5%;
    background-color: #fff;
}

.partners .owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -1.5%;
    background-color: #fff;
}

.partners .owl-carousel .owl-nav button.owl-prev:hover {
    background-color: #fff;
}

.partners .owl-carousel .owl-nav button.owl-next:hover {
    background-color: #fff;
}

.partners-four {
    padding: 130px 0px 65px 0px;
}

.partners-four .owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 57px;
}

.partners-four .owl-theme .owl-dots .owl-dot span {
    background-color: var(--orange-color);
    opacity: .3;
    box-shadow: 0px 0px 0px 1px var(--orange-color);
}

.partners-four .owl-theme .owl-dots .owl-dot.active span {
    background-color: var(--orange-color);
    opacity: 1;
    border: 3px solid #fff;
    border-radius: 50%;
}

.partners-four .owl-carousel .owl-item img {
    width: 67px;
    margin: auto;
}

.partner-logo-card-two {
    padding: 25px 70px;
    background: linear-gradient(90deg, rgba(255, 65, 108, 0.1) 0%, rgba(255, 75, 43, 0.1) 100%);
    border-radius: 5px;
    overflow: hidden;
}

.partner-logo-card-two img {
    transition: all .8s;
}

.partner-logo-card-two:hover img {
    transform: scale(1.1);
}

.partner-list-container-two .owl-carousel .owl-item img {
    width: 75%;
}

/* 9. Blogs css */
.blogs {
    padding: 65px 0px;
}

.single-blog-contents {
    padding: 130px 0px;
}

.blog-details-wrapper {
    padding: 0px 90px;
}

.single-blog-featured-img {
    border-radius: 6px;
}

.single-blog-meta-img {
    width: 13px;
}

.blog-content-body-quotation {
    padding: 65px 75px;
    background-color: var(--light-color);
    border-radius: 6px;
}

.single-blog-inner-img {
    border-radius: 6px;
}

.single-blog-body-list-item {
    margin-bottom: 38px;
}

.single-blog-likes-title {
    margin-right: 140px;
}

.likes-btn {
    border: 1px solid #FFE2D1;
    border-radius: 3px;
    padding: 8px 20px;
}

.likes-btn span {
    transition: all .4s;
}

.likes-btn:hover span {
    color: #fff !important;
}

.likes-btn:hover {
    border: 1px solid #FFE2D1;
}

.likes-btn svg {
    margin-right: 6px;
}

.likes-btn-two svg {
    margin-right: 6px;
}

.likes-btn-two span {
    transition: all .4s;
}

.likes-btn-two:hover span {
    color: var(--orange-color);
}

.reply-btn p {
    transition: all .4s;
}

.reply-btn:hover p {
    color: var(--orange-color);
}

.single-blog-comment-box {
    margin-top: 130px;
}

.single-blog-comment-input {
    padding: 20px 20px 140px 20px;
    border: 1px solid #FFE2D1;
    border-radius: 6px;
    line-height: 1.7;
}

.comment-divider {
    width: 100%;
    height: 1px;
    background-color: #FFE2D1;
    transform: rotate(0.29deg);
    margin: 30px 0px 50px 0px;
}

.single-blog-social-share {
    border: 1px solid #FFE2D1;
    border-radius: 6px;
}

.blogs-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
}

.blog-card-btn svg {
    transition: all .4s;
    font-size: 18px;
    color: var(--orange-color);
    opacity: .8;
}

.blog-card-btn:hover svg {
    margin-left: 10px;
}

.blog-arrow {
    width: 24px;
    height: 24px;
}

.card-four-title {
    font-size: 22px;
}

.blog-card-img {
    max-height: 300px;
    width: 424px;
    border-radius: 6px 6px 0px 0px;
}

.blog-card-two-img {
    width: 424px;
    height: 215px;
    border-radius: 10px;
}

.blog-card-three-img {
    width: 384px;
    height: 214px;
    border-radius: 10px;
}

.blogs-container-three-full .blog-card-three-img {
    width: 100%;
}

.blog-card-date {
    color: #6F6B80;
}

.blog-card-body {
    padding: 30px;
}

.blog-card {
    border: 1px solid #FFE2D1;
    border-radius: 6px;
}

.blog-two-card {
    border: none;
}

.blog-three-card {
    border: 1px solid rgba(255, 107, 0, 0.1);
    border-radius: 15px;
    padding: 20px;
}

.blog-card-two-body {
    padding: 0;
}

.blog-card-category {
    margin: 28px 0px 18px 0px;
    font-size: 14px;
}

.blog-time-container {
    margin: 28px 0px 18px 0px;
}

.blog-archieve {
    padding: 65px 0px 130px 0px;
}

.blog-pagination-container .pagination {
    gap: 8px;
}

.blog-pagination-container .pagination .page-item .page-link {
    width: 46px;
    height: 36px;
    text-align: center;
    border: 1px solid #FFE2D1;
    border-radius: 3px;
    line-height: 24px;
}

.blog-pagination-container .pagination .page-item .page-link:hover {
    background-color: var(--orange-color);
    border-color: var(--orange-color);
    color: #fff;
}

.blog-pagination-container .pagination .page-item .pagination-link {
    line-height: 44px;
    background-color: var(--light-color);
    width: 46px;
    height: 36px;
    text-align: center;
    border: 1px solid #FFE2D1;
    border-radius: 3px;
    display: inline-block;
}

.blog-pagination-container .pagination .page-item .pagination-link:hover {
    background-color: var(--orange-color);
    border: var(--orange-color);
}

.blog-pagination-container .pagination .page-item .pagination-link:hover svg {
    color: #fff !important;
}

.page-link-active {
    background-color: var(--orange-color);
    border-color: var(--orange-color);
    color: #fff;
}

.blog-details-thumb-icon {
    font-size: 15px;
}

.single-blog-social-items svg {
    transition: all .4s;
}

.single-blog-social-items svg:hover {
    transform: scale(1.3);
}

/* 10. Contact css */
.home-contact {
    padding: 65px 0px 130px 0px;
}

.home-four-contact {
    padding: 65px 0px 130px 0px;
}

.contact-page-form-section {
    padding: 65px 0px 130px 0px;
}

.home-contact-input {
    padding: 20px;
    border: 1px solid #FFE2D1;
    border-radius: 6px;
    line-height: 1.7;
}

.contact-page-input {
    padding: 11px 20px;
    border: 1px solid #FFE2D1;
    border-radius: 6px;
    line-height: 1.7;
}

.home-two-contact-input {
    padding: 12px;
    border: 1px solid #FFE2D1;
    border-radius: 6px;
    line-height: 1.7;
}

.home-four-textarea {
    height: 110px;
}

.home-four-contact-input {
    padding: 12px;
    border: 1px solid #ff6b0080;
    border-radius: 6px;
    line-height: 1.7;
}

.home-three-contact-input {
    padding: 12px;
    border: 1px solid var(--orange-color);
    border-radius: 6px;
    line-height: 1.7;
}

.home-contact-input ::placeholder,
.contact-page-input ::placeholder {
    color: var(--secondary-black-color);
    opacity: 1;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 107, 0, 0.2);
}

.home-two-contact-input ::placeholder {
    color: var(--secondary-black-color);
    opacity: 1;
}

.home-contact-input:-ms-input-placeholder,
.contact-page-input:-ms-input-placeholder {
    color: var(--secondary-black-color);
}

.home-two-contact-input:-ms-input-placeholder {
    color: var(--secondary-black-color);
}

.home-contact-input::-ms-input-placeholder,
.contact-page-input::-ms-input-placeholder {
    color: var(--secondary-black-color);
}

.home-two-contact-input::-ms-input-placeholder {
    color: var(--secondary-black-color);
}

.home-contact-icon-container {
    padding-left: 80px;
}

.home-two-contact-info-col {
    padding-right: 200px;
}

.contact-three {
    padding: 65px 0px;
}

.contact-three-img {
    width: 842px;
    height: 700px;
    border-radius: 8px;
}

.contact-three-form-container {
    padding: 45px 50px;
    width: 650px;
    background: #FFF3EA;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -80px;
}

.contact-cta {
    padding: 65px 0px 130px 0px;
}

.cta-container {
    background-image: url(../img/conactCtaBg.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 85px 30%;
    border-radius: 10px;
    animation-name: MoveBg;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.cta-container-two {
    padding: 0px 30%;
    background: linear-gradient(0deg, rgba(12, 12, 31, 0.7), rgba(12, 12, 31, 0.7));
    border-radius: 10px;
}

.contact-cta-btn {
    padding: 10px 32px;
    background-color: var(--orange-color);
    color: #fff;
    font-weight: 500;
    border-radius: 6px;
}

.contact-cta-btn:hover {
    background-color: var(--orange-color);
    color: #fff;
}

.contact-details-box-title {
    font-size: 38px;
}

.contact-details-box {
    border: 1px solid #ff6b0033;
    border-radius: 10px;
    width: fit-content;
    padding: 60px 75px;
}

.contact-map {
    margin-bottom: -7px;
}

.contact-map iframe {
    width: 100%;
}

.light-orange-bg-icon {
    width: 60px;
    height: 60px;
    background-color: var(--light-color);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-contact-icon-container .light-orange-bg-icon svg {
    font-size: 28px;
}

.orange-bg-icon {
    width: 42px;
    height: 42px;
    background-color: var(--orange-color);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .4s;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
}

.orange-bg-icon:hover {
    background-color: #fff;
    border-color: var(--orange-color);
}

.orange-bg-icon:hover svg {
    color: var(--orange-color) !important;
}

/* 11. Portfolio css  */
.portfolio {
    padding: 65px 0px;
}

.portfolio-two {
    padding: 130px 0px 0px 0px;
}
.portfolio-text-over-img-container a{
    z-index: 99;
}
.portfolio-archieve {
    padding: 130px 0px;
}

.portfolio-archieve-two {
    padding: 65px 0px 130px 0px;
}

.portfolio-three {
    padding-top: 65px;
}

.portfolio-three-carousel {
    padding: 0px 15px;
}

.portfolio-three-carousel .owl-theme .owl-stage {
    left: 150px;
}

.portfolio-text-over-img-container {
    bottom: 60px;
}

.portfolio-text-over-img span::after {
    content: '';
    position: absolute;
    bottom: -10px;
    height: 2px;
    width: 30%;
    background-color: var(--orange-color);
    left: 50%;
    transform: translateX(-50%);
}

.portfolio-three .owl-carousel .owl-nav button.owl-prev img {
    width: 30px;
}

.portfolio-three .owl-carousel .owl-nav button.owl-next img {
    width: 30px;
}

.portfolio-three .owl-carousel .owl-nav {
    position: absolute;
    top: -105px;
    right: 140px;
}

.portfolio-three .owl-carousel .owl-nav button.owl-prev {
    padding: 15px 20px !important;
    border-radius: 30px;
    border: 1px solid var(--orange-color);
    transition: all .3s;
}

.portfolio-three .owl-carousel .owl-nav button.owl-prev:hover {
    background-color: var(--orange-color);
}

.portfolio-three .owl-carousel .owl-nav button.owl-next {
    padding: 15px 20px !important;
    border-radius: 30px;
    border: 1px solid var(--orange-color);
    transition: all .3s;
}

.portfolio-three .owl-carousel .owl-nav button.owl-next:hover {
    background-color: var(--orange-color);
}

.portfolio-massonary-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 24px;
}

.portfolio-massonary-four-items:nth-child(2) {
    grid-column: 2/4
}

.portfolio-massonary-two-items:nth-child(1) {
    grid-column: 1/3
}

.portfolio-massonary-items:nth-child(8) {
    grid-column: 2/4
}

.portfolio-massonary-items {
    overflow: hidden;
}

.portfolio-massonary-items a {
    transition: all .4s;
}

.portfolio-massonary-items a:hover {
    color: #E8E2E2 !important;
}

.portfolio-massonary-items img {
    width: 100%;
    height: 340px;
}

.portfolio-massonary-two-items img {
    width: 100%;
    height: auto;
}

.portfolio-massonary-four-items img {
    width: 100%;
    height: auto;
}

.portfolio-massonary-four-items {
    padding: 20px;
    border: 1px solid rgba(255, 107, 0, 0.1);
    border-radius: 15px;
}

.portfolio-one-first-img {
    height: 335px !important;
}

.portfolio-card-overlay {
    height: 0%;
    display: flex;
    justify-content: center;
    background-color: #070b1093;
    visibility: hidden;
    transition: all .4s;
    border-radius: 5px;
}

.portfolio-card-overlay-contents {
    padding: 20px;
    background-color: var(--orange-color);
    margin: auto;
    width: 75%;
    bottom: -200px;
    border-radius: 6px;
    visibility: hidden;
    transition: all .4s;
}

.portfolio-card-overlay-contents a:hover {
    color: #fff;
}

.portfolio-massonary-items:hover .portfolio-card-overlay {
    height: 100%;
    visibility: visible;
}

.portfolio-massonary-items:hover .portfolio-card-overlay-contents {
    visibility: visible;
    bottom: 20px;
}

.portfolio-massonary-item-link {
    transition: all .3s;
}

.portfolio-massonary-item-link:hover {
    color: var(--orange-color);
}

.portfolio-details {
    padding: 65px 0px 130px 0px;
}

.service-details {
    padding: 65px 0px;
}

.control:hover {
    color: var(--black-color);
    position: relative;
}

.control:hover::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 30%;
    background-color: var(--orange-color);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.mixitup-control-active {
    color: var(--orange-color);
    font-weight: 600;
    position: relative;
}

.mixitup-control-active::after {
    content: '';
    position: absolute;
    height: 2px;
    width: 30%;
    background-color: var(--orange-color);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* 12. Counter css */
.home-counter {
    padding: 130px 0px;
}

.about-counter {
    padding: 65px 0px 130px 0px;
}

.counter-wrapper {
    padding: 55px 0px;
    background-color: #FFF3EA;
    border-radius: 8px;
}

.counter-heading {
    font-size: 50px;
}

.counter-item {
    padding: 0px 90px;
}

.counter-seperator {
    border-right: 1px solid #E7DCD4;
}

/* 13. Footer css */
.footer {
    background-color: var(--black-color);
}

.footer-two {
    background-color: var(--light-color);
}

.footer-top {
    padding: 130px 0px;
    border-bottom: 1px solid #515151;
}

.footer-divider {
    height: 1px;
    background-color: var(--secondary-black-color);
    opacity: .05;
}

.footer-two-top {
    padding: 95px 0px;
}

.footer-logo {
    margin-bottom: 36px;
}

.footer-col-link-container {
    list-style-type: none;
    margin-top: 57px;
}

.footerbottom-right a {
    transition: all .4s;
}

.footerbottom-right a:hover {
    color: var(--orange-color) !important;
}

.footer-col-link-container .footer-link-item a {
    transition: all .4s;
}

.footer-col-link-container .footer-link-item a:hover {
    color: var(--orange-color) !important;
}
.footer-col-link-container-two .footer-link-item a {
    transition: all .4s;
}

.footer-col-link-container-two .footer-link-item a:hover {
    color: var(--orange-color) !important;
}

.footer-link-item {
    margin-bottom: 20px;
}

.footer-social-container {
    list-style-type: none;
    margin-top: 63px;
}

.footer-social-item-2 {
    margin-right: 20px;
}

.footer-social-item {
    margin-right: 20px;
    width: 50px;
    height: 50px;
    background-color: #606060;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 3px solid transparent;
    border-right: 3px solid transparent;
    transition: all .4s;
}

.footer-social-item:hover {
    background-color: var(--orange-color);
    border-color: #606060;
}

.footer-social-item:hover {
    background-color: var(--orange-color);
    border-color: #606060;
}

.footer-bottom {
    padding: 35px 0px;
}

.footer-col-one-texts {
    padding-right: 95px;
}

.footer-contact-form {
    width: 550px;
}

.footer-form-input {
    padding: 15px 20px;
    background-color: transparent;
    border: 1px solid #6a6a6a;
    border-radius: 6px;
}

.footer-form-btn img {
    width: 20px;
}

.footer-form-btn {
    padding: 15px 20px;
    background-color: var(--orange-color);
    border-radius: 6px;
}

.footer-form-btn:hover {
    background-color: var(--orange-color);
}

.footer-col-link-container-two {
    list-style-type: none;
}

.footer-two-form ::placeholder {
    color: #6a6a6a;
    opacity: 1;
}

.footer-two-form :-ms-input-placeholder {
    color: #6a6a6a;
}
.footer-two-form ::-ms-input-placeholder {
    color: #6a6a6a;
}



/* 14. Inner page Hero css */
.inner-page-hero-area {
    padding: 210px 0px 120px 0px;
    background-image: url(../img/innerPageHeroBg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

/* 15. Preloader */
.loader-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99999;
}

.loader {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    font-size: 0;
    color: #00c9d0;
    display: inline-block;
    margin: -25px 0 0 -25px;
    text-indent: -9999em;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}
.lead{
  font-size:13px;
}
.loader div {
    background-color: #d9b06a;
    display: inline-block;
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    opacity: .5;
    border-radius: 50%;
    -webkit-animation: ballPulseDouble 2s ease-in-out infinite;
    animation: ballPulseDouble 2s ease-in-out infinite;
}

.loader div:last-child {
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}

@-webkit-keyframes ballPulseDouble {
    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes ballPulseDouble {
    0%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}













/* --- Fixed Header (Alternative) --- */

/* 1. Make the header fixed */
header.header {
    position: fixed; /* Use fixed instead of sticky */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

/* 2. Add space so the header doesn't cover the top of your page content */
.home-banner {
    padding-top: 100px; /* Adjust this value to match your header's height */
}

/* --- Self--Hosted Video Styling --- */
.card.blog-card {
    /* This adds the border. You can change the width (4px), style (solid), and color (#eee) */
    border: 4px solid #eee;
    
    /* Optional: This will give the corners a slight curve. Set to 0 for sharp corners. */
    border-radius: 12px;
    
    /* This is important to ensure the video corners also get rounded. */
    overflow: hidden; 
}

.video-wrapper {
    width: 100%;
    /* This sets the exact aspect ratio you requested (515 / 414) */
    aspect-ratio: 414 / 515;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    /* This ensures the video fills the container perfectly without stretching.
       It will crop the video slightly if the source file's aspect ratio is different. */
    object-fit: cover;
}


/* --- Contact Section Social Icons --- */
.social-icons-contact {
    margin-top: 5px;
}

.social-icons-contact a {
    font-size: 18px;
    color: #333; /* Dark Grey Color */
    margin-right: 20px;
    transition: color 0.3s ease;
}

.social-icons-contact a:hover {
    color: #ff7d2b; /* Theme Orange Color */
}

.social-icons-contact a:last-child {
    margin-right: 0;
}

/* --- Footer Developer Link --- */
.footer-dev-link {
    color: #fff; /* White color */
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-dev-link:hover {
    color: #ff7d2b; /* Theme Orange on hover */
}


/* --- Go to Top Button --- */
#goToTopBtn {
    position: fixed;
    bottom: 50px;
    right: 25px;
    z-index: 1000;
    background-color: #ff7d2b; /* Theme orange color */
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    
    /* --- Smooth Transition Properties --- */
    opacity: 0; /* Hidden by default */
    visibility: hidden; /* Not clickable when hidden */
    transform: translateY(20px); /* Start slightly lower */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0.4s;
}

#goToTopBtn.show {
    opacity: 1; /* Make it visible */
    visibility: visible; /* Make it clickable */
    transform: translateY(0); /* Move to final position */
}

#goToTopBtn:hover {
    background-color: #e66a1a; /* Darker orange for hover */
}

/* --- Personal Details Section --- */
.personal-details {
    padding: 100px 0; /* Adds spacing above and below the section */
}

.bg-light-gray {
    background-color: #f8f9fa; /* A very light gray to subtly separate the section */
}

.details-list {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden; /* To ensure the border-radius affects the items inside */
}

.detail-item {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on small screens */
    padding: 20px 25px;
    font-size: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.detail-item:last-child {
    border-bottom: none; /* Removes the line from the last item */
}

.detail-label {
    flex-basis: 150px; /* Fixed width for the label */
    font-weight: 600;
    color: #333;
}

.detail-value {
    flex: 1; /* Takes up the remaining space */
    color: #555;
}

/* Responsive adjustment for mobile */
@media (max-width: 576px) {
    .detail-item {
        flex-direction: column; /* Stack label and value vertically on small screens */
    }
    .detail-label {
        margin-bottom: 5px;
        flex-basis: auto; /* Reset fixed width */
    }
}


.home-contact{
    background-color: #f8f9fa;
}



/* --- Custom Telugu Font Styles --- */

/* 1. Default font for all body content */
/* This applies the Timmana font to all paragraphs, list items, links, etc. */
body, p, li, a, .form-control::placeholder, .form-control {
  font-family: 'Timmana', sans-serif;
  font-weight: 400; /* As per font specification */
}

/* 2. Font for all headings and important titles */
/* This overrides the body font and applies Suravaram to all titles. */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.menu-link, 
.btn, 
.counter,
.card-title,
.service-item-heading,
.resume-topic-item,
.detail-label {
  font-family: 'Suravaram', serif;
  font-weight: 400; /* As per font specification */
}



/* --- Creative Typographic Logo --- */

.logo-text {
    text-decoration: none;
    display: inline-block; /* Allows for better spacing */
    line-height: 1.2; /* Controls the spacing between the two lines */
}

.logo-text:hover {
    color: inherit; /* Prevents the default blue link color on hover */
}

.logo-main-name {
    font-family: 'Suravaram', serif;
    font-size: 24px; /* Adjust size as needed */
    font-weight: 600; /* Slightly bolder */
    color: #1a1a1a; /* A strong, near-black color */
    display: block; /* Puts the title on the next line */
    transition: color 0.3s ease;
}

.logo-sub-title {
    font-family: 'Timmana', sans-serif;
    font-size: 14px;
    color: #ff7d2b; /* Theme Orange Color */
    display: block;
    letter-spacing: 0.5px; /* Adds a bit of space between letters */
}

/* --- Footer Logo Specific Colors --- */
/* We target the logo when it's inside the footer to change its colors */

.footer .logo-text .logo-main-name {
    color: #ffffff; /* White color for the footer */
}

.footer .logo-text .logo-sub-title {
    color: #f0f0f0; /* A slightly off-white for the subtitle in the footer */
}


/* --- Responsive Adjustments for Mobile --- */
@media (max-width: 768px) {
    .logo-main-name {
        font-size: 20px; /* Make the name slightly smaller on mobile */
    }
    .logo-sub-title {
        font-size: 12px; /* Make the subtitle smaller on mobile */
    }
}


.mean-container a.meanmenu-reveal {
    width: 22px;
    height: 22px;
    padding: 24px 13px 11px;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    text-indent: -9999em;
    line-height: 22px;
    font-size: 1px;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
}

/* --- Custom Service Icon Styling --- */

.service-item-icon {
    font-size: 55px; /* Controls the size of the icon */
    color: #ff7d2b; /* Sets the color to the theme's orange */
    margin-bottom: 30px; /* Adds space between the icon and the title */
    display: inline-block; /* Ensures margin is applied correctly */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

/* Adds a nice little lift effect when you hover over the service box */
.service-grid-item:hover .service-item-icon {
    transform: translateY(-8px);
}


/* --- DEFINITIVE Gallery Fix (Layout & Styling) --- */

/* 1. Counteract the container's padding to fix the loop bug */
/* This pulls the carousel's container out to the edges. */
#gallery .partner-list-container {
    margin-left: -10px;
    margin-right: -10px;
}

/* 2. Style the card that holds the image */
#gallery .partner-card {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 3. Ensure the image is fully visible and not cropped */
#gallery .partner-card .partner-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 4. Add the hover effect */
#gallery .item a {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#gallery .item a:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* 5. Style the carousel navigation dots */
#gallery .owl-dots {
    margin-top: 30px !important;
}