/*-----------------------------------------------------------------------------------

  Theme Name: Redox - Creative Agency and Portfolio HTML Template
  Author: ravextheme
  Support: https://support.rrdevs.net/
  Description: Redox - Creative Agency and Portfolio HTML Template
  Version: 1.0.4

-----------------------------------------------------------------------------------

/************ TABLE OF CONTENTS ***************
variable css
typography css
animation css
global css
theme css
Preloader css
scroll css
button css
button animation css
menu css
modal css
cursor css
digital agency page css
design agency page css
creative agency page css
marketing agency page css
startup agency page css
portfolio agency page css
portfolio page css
parallax carousal page css
portfolio showcase page css
portfolio showcase 2 page css
404 page css
about page css
blog details page css
blog page css
contact page css
faq page css
service details page css
sercices page css
team details page css
work details page css
work page css

/*----------------------------------------*/


/* variable css  */


/*----------------------------------------*/

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
:root {
    --primary: #111111;
    --secondary: #555555;
    --border: rgba(17, 17, 17, 0.1);
    --bg: #111111;
    --theme: #FF6A3A;
    --black: #111111;
    --black-2: #999999;
    --white: #FFFFFF;
    --white-2: #999999;
    --action: #FF6A3A;
}


/*----------------------------------------*/


/* typography css  */


/*----------------------------------------*/


/* dm sans  */


/* instrument sans  */


/* Thunder  */

@font-face {
    font-family: "Thunder";
    src: url("../fonts/Thunder-BoldLC.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "Thunder";
    src: url("../fonts/Thunder-SemiBoldLC.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Thunder";
    src: url("../fonts/Thunder-LC.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Thunder";
    src: url("../fonts/Thunder-MediumLC.ttf");
    font-weight: 500;
}


/* Sequel Sans  */

@font-face {
    font-family: "Sequel Sans Roman Body";
    src: url("../fonts/Sequel Sans Roman Body.otf");
    font-weight: 310;
}

@font-face {
    font-family: "Sequel Sans Medium Body";
    src: url("../fonts/Sequel Sans Medium Body.otf");
    font-weight: 315;
}


/* times now  */

@font-face {
    font-family: "TimesNow-SemiLightItalic";
    src: url("../fonts/TimesNow-SemiLightItalic.ttf");
    font-weight: 400;
}


/* bdo grotesk  */

@font-face {
    font-family: "BDOGrotesk-Regular";
    src: url("../fonts/BDOGrotesk-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "BDOGrotesk-Regular";
    src: url("../fonts/BDOGrotesk-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "BDOGrotesk-Regular";
    src: url("../fonts/BDOGrotesk-DemiBold.ttf");
    font-weight: 600;
}


/* tartufffo trial */

@font-face {
    font-family: "Tartuffo_Trial";
    src: url("../fonts/Tartuffo_Trial-Thin.otf");
    font-weight: 100;
}

@font-face {
    font-family: "Tartuffo_Trial";
    src: url("../fonts/Tartuffo_Trial-LightItalic.otf");
    font-weight: 300;
}

@font-face {
    font-family: "Tartuffo_Trial";
    src: url("../fonts/Tartuffo_Trial-Light.otf");
    font-weight: 300;
}

@font-face {
    font-family: "tartuffo-font-family-family";
    src: url("../fonts/Tartuffo_Trial-MediumItalic.otf");
    font-weight: 500;
}

:root {
    --font_dmsans: "DM Sans", sans-serif;
    --font_instrumentsans: "Instrument Sans", sans-serif;
    --font_thunder: "Thunder";
    --font_sequelsansromanbody: "Sequel Sans Roman Body";
    --font_sequelsansmediumbody: "Sequel Sans Medium Body";
    --font_timesnow: "TimesNow-SemiLightItalic";
    --font_bdogrotesk: "BDOGrotesk-Regular";
    --font_tartuffo: "tartuffo-font-family";
    --font_tartuffotrial: "Tartuffo_Trial";
    --font_awesome: "Font Awesome 6 Free";
}

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font_dmsans);
    line-height: 1;
}

html {
    scroll-behavior: smooth;
}

h1,
h2,
h3,
h4 {
    padding: 0;
    margin: 0;
    color: var(--primary);
    line-height: 1.22;
    font-family: var(--font_instrumentsans);
    font-weight: 500;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
    transition: all 0.3s;
    color: inherit;
}

a:hover {
    color: var(--primary);
}

button {
    background-color: transparent;
    border: 0;
}

p {
    padding: 0;
    margin: 0;
    font-weight: 400;
    font-size: 22px;
    line-height: 30px;
    color: var(--secondary);
}

@media only screen and (max-width: 1399px) {
    p {
        font-size: 20px;
        line-height: 28px;
    }
}

strong {
    font-weight: 500;
}


img {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
}

@media only screen and (max-width: 767px) {
    br {
        display: none;
    }
}

main {
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 32px;
}

h4 {
    font-size: 24px;
}


/*----------------------------------------*/


/* animation css */


/*----------------------------------------*/

@keyframes t-Bubble {
    0% {
        scale: 1;
    }
    50% {
        scale: 1.5;
    }
    100% {
        scale: 1;
    }
}

@keyframes t-Zoom {
    0% {
        scale: 1;
    }
    50% {
        scale: 0.5;
    }
    100% {
        scale: 1;
    }
}

@keyframes t-Zoom_2 {
    0% {
        scale: 1;
    }
    50% {
        scale: 0.9;
    }
    100% {
        scale: 1;
    }
}

@keyframes t-SlideBottom {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(50px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes t-reveal {
    to {
        opacity: 1;
        filter: blur(0px);
    }
}

@keyframes t-fadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes t-spinner {
    to {
        transform: rotateZ(360deg);
    }
}

@keyframes t-characters {
    0%,
    75%,
    100% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    25%,
    50% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

@keyframes t-sheen {
    50% {
        transform: translateY(-20px);
        color: var(--primary);
    }
}

@keyframes t-slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes slideFadeIn {
    from {
        opacity: 0;
        transform: translateY(-130px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*----------------------------------------*/


/* global css */


/*----------------------------------------*/

.rr-container-1405 {
    max-width: 1405px;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #d6d6d6;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

@-webkit-keyframes textRotation {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes textRotation {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.fix {
    overflow: hidden;
}

.container {
    --bs-gutter-x: 30px;
}

.section-subtitle {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    display: inline-block;
    text-transform: uppercase;
    color: var(--primary);
}

.section-title {
    font-size: 100px;
}

@media only screen and (max-width: 1919px) {
    .section-title {
        font-size: 80px;
    }
}

@media only screen and (max-width: 1399px) {
    .section-title {
        font-size: 60px;
    }
}

@media only screen and (max-width: 1199px) {
    .section-title {
        font-size: 50px;
    }
}

@media only screen and (max-width: 991px) {
    .section-title {
        font-size: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .section-title {
        font-size: 35px;
    }
}


/* inverted text style  */

.offcanvas-overlay {
    position: fixed;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 900;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
}

.side-info-close {
    font-size: 18px;
    padding: 0;
    transition: all 0.3s linear;
    background-color: var(--white);
    color: var(--black);
    width: 40px;
    height: 40px;
    border: 1px solid var(--black);
    border-radius: 50%;
    line-height: 38px;
}

.side-info-close:hover {
    transform: rotate(90deg);
}

.side-info {
    background: var(--white) none repeat scroll 0 0;
    padding: 40px 45px;
    position: fixed;
    right: 0;
    top: 0;
    width: 500px;
    height: 100%;
    -webkit-transform: translateX(calc(100% + 80px));
    -moz-transform: translateX(calc(100% + 80px));
    -ms-transform: translateX(calc(100% + 80px));
    -o-transform: translateX(calc(100% + 80px));
    transform: translateX(calc(100% + 80px));
    -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
    -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
    transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
    z-index: 9999;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

.side-info ::-webkit-scrollbar {
    display: none;
}

@media (max-width: 575px) {
    .side-info {
        width: 100%;
        padding: 30px 30px;
    }
}

.offset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offset-logo {
    width: 120px;
}

@media (max-width: 575px) {
    .offset-logo {
        width: 100px;
    }
}

.offset-logo img {
    max-width: 120px;
}

.offset-button {
    margin-top: 40px;
}

@media (min-width: 576px) {
    .offset-button {
        display: none;
    }
}


/* mean menu customize */
.mobile-menu {
    margin-top: 40px;

    .mean-bar {
        padding: 0;
        background: none;
        max-height: auto;
        overflow-y: scroll;

        &::-webkit-scrollbar {
            width: 0;
        }
    }

    &.mean-container  {
        .mean-nav {
            background: none;
            margin-top: 0;

            > ul {
                padding: 0;
                margin: 0;
                width: 100%;
                list-style-type: none;
                display: block !important;

                > li:last-child > a {
                    border-bottom: 1px solid var(--border);
                }

                li a {
                    width: 100%;
                    padding: 15px 0;
                    padding-inline-start: 0px;
                    font-weight: 500;
                    font-size: 18px;
                    line-height: 1;
                    color: var(--primary);
                    text-transform: capitalize;
                    border-top: 1px solid var(--border);
                    display: flex;
                    gap: 8px;
                    justify-content: flex-start;
                    align-items: center;
                    outline: none;
                    transform: translateY(var(--y)) translateZ(0);
                    transition: transform 0.4s ease, box-shadow 0.4s ease;
                    box-sizing: border-box;
                    opacity: 1;

                    &:hover {
                        color: var(--secondary);
                    }

                    @media only screen and (max-width: 767px) {
                        font-size: 20px;
                    }
                }
            }
        } 
    }
}

/* body style  */


/* page title style  */


/*----------------------------------------*/


/* theme css  */


/*----------------------------------------*/

html {
    --container-max-widths: 1320px;
}

@media only screen and (max-width: 1399px) {
    html {
        --container-max-widths: 1140px;
    }
}

@media only screen and (max-width: 1199px) {
    html {
        --container-max-widths: 960px;
    }
}

@media only screen and (max-width: 991px) {
    html {
        --container-max-widths: 720px;
    }
}

@media only screen and (max-width: 767px) {
    html {
        --container-max-widths: 540px;
    }
}

body {
    background-color: #F8F8F8;
    color: var(--secondary);
}

.body-wrapper {
    background-color: var(--white);
}

header {
    margin-bottom: -1px;
    z-index: 100;
}

section {
    margin-bottom: -1px;
}

.swiper {
    direction: ltr;
}


/* Preloader css */


/* scroll css */


/*----------------------------------------*/


/* button css  */


/*----------------------------------------*/

.rr-btn {
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 5;
    padding: 26px 42px;
    background-color: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
    border-radius: 100px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    text-transform: capitalize;
    letter-spacing: -0.02em;
}

@media only screen and (max-width: 1199px) {
    .rr-btn {
        padding: 18px 29px;
    }
}

.rr-btn:hover::before,
.rr-btn:focus::before {
    height: 100%;
}

.rr-btn:hover .btn-wrap .text-one,
.rr-btn:focus .btn-wrap .text-one {
    transform: translateY(-150%);
}

.rr-btn:hover .btn-wrap .text-two,
.rr-btn:focus .btn-wrap .text-two {
    top: 50%;
    transform: translateY(-50%);
    color: var(--black);
}

.rr-btn:after {
    display: block;
    clear: both;
    content: "";
}

.rr-btn::before {
    background-color: var(--white);
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    position: absolute;
    transition: all 0.5s;
}

.rr-btn .btn-wrap {
    z-index: 1;
    overflow: hidden;
    position: relative;
    display: inline-block;
    border: none;
}

.rr-btn .btn-wrap .text-one,
.rr-btn .btn-wrap .text-two {
    display: flex;
    align-items: center;
}

.rr-btn .btn-wrap .text-one {
    position: relative;
    display: block;
    color: var(--white);
    transition: all 0.5s;
}

.rr-btn .btn-wrap .text-two {
    position: absolute;
    top: 100%;
    display: block;
    color: var(--white);
    transition: all 0.5s;
}


/* button animation css */

@keyframes mask_animation {
    from {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
    to {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
}

@keyframes mask_animation_2 {
    from {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }
    to {
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}


/*----------------------------------------*/


/* menu css  */


/*----------------------------------------*/

.main-menu>ul {
    display: flex;
}

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

.main-menu>ul>li:hover>ul {
    opacity: 1;
    pointer-events: all;
    inset-inline-start: 0;
}

.main-menu li {
    position: relative;
}

.main-menu li a {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
    color: var(--primary);
    padding: 37px 15px;
    text-transform: capitalize;
}


/* mean menu customize */


/*----------------------------------------*/


/* modal css  */


/*----------------------------------------*/


/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */


/* cursor css  */


/* digital agency page css */


/* hero area style  */


/* about area style  */


/* work area style  */


/* service area style  */

.services-wrapper-1 .service-box {
    border-top: 1px solid var(--border);
    padding-top: 30px;
    padding-bottom: 30px;
    display: grid;
    gap: 20px 30px;
    grid-template-columns: 1fr 410px 545px;
    align-items: flex-start;
}

@media only screen and (max-width: 1199px) {
    .services-wrapper-1 .service-box {
        grid-template-columns: 1fr 310px 445px;
    }
}

@media only screen and (max-width: 991px) {
    .services-wrapper-1 .service-box {
        grid-template-columns: 1fr 220px 360px;
    }
}

@media only screen and (max-width: 767px) {
    .services-wrapper-1 .service-box {
        grid-template-columns: 1fr 380px;
    }
}

@media (max-width: 575px) {
    .services-wrapper-1 .service-box {
        grid-template-columns: 1fr;
    }
}

.services-wrapper-1 .service-box .count .number {
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: var(--primary);
    display: inline-block;
}

@media only screen and (max-width: 1199px) {
    .services-wrapper-1 .service-box .count .number {
        font-size: 25px;
    }
}

@media only screen and (max-width: 991px) {
    .services-wrapper-1 .service-box .count .number {
        font-size: 20px;
    }
}

.services-wrapper-1 .service-box .content .title {
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: var(--primary);
}

@media only screen and (max-width: 991px) {
    .services-wrapper-1 .service-box .content .title {
        font-size: 24px;
    }
}

.services-wrapper-1 .service-box .content .title a:hover {
    color: var(--secondary);
}

.services-wrapper-1 .service-box .service-list {
    margin-top: 22px;
}

.services-wrapper-1 .service-box .service-list li {
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    color: var(--primary);
}

.services-wrapper-1 .service-box .service-list li a:hover {
    color: var(--secondary);
}

.services-wrapper-1 .service-box .thumb {
    border-radius: 20px;
    overflow: hidden;
    text-align: right;
}

@media only screen and (max-width: 991px) {
    .services-wrapper-1 .service-box .thumb {
        border-radius: 10px;
    }
}

@media only screen and (max-width: 767px) {
    .services-wrapper-1 .service-box .thumb {
        grid-column: span 2;
    }
}

@media (max-width: 575px) {
    .services-wrapper-1 .service-box .thumb {
        grid-column: auto;
    }
}

.services-wrapper-1 .service-box .thumb img {
    width: 35%;
    object-fit: cover;
    height: 265px;
    border-radius: 20px;
}

@media only screen and (max-width: 991px) {
    .services-wrapper-1 .service-box .thumb img {
        width: 100%;
        border-radius: 10px;
    }
}


/* funfact area style  */


/* client area style  */


/* cta area style  */


/* productivity area style  */


/* text slider area style  */


/* design agency page css */


/* award area 2 style  */


/* capabilities area style  */


/* client area 4 style  */

@keyframes marquee-081a87f6 {
    to {
        transform: translate(-50%);
    }
}


/* about area 3 style  */


/* award area 2 style  */


/* service area 4 style  */


/* creative agency page css */


/* hero area 2 style  */


/* about area 2 style  */


/* work area 2 style  */


/* service area style  */


/* testimonial area style  */


/* client area 2 style  */


/* circular shape area style  */


/* award area style  */


/* cta area 2 style  */


/* marketing agency page css */


/* hero area 3 style  */


/* service area 3 style  */


/* work area 3 style  */


/* approach area style  */


/* funfact area 2 style  */


/* client area 3 style  */


/* blog area style  */

.blog-area .section-title {
    max-width: 710px;
}

.blog-area .blogs-wrapper-box {
    margin-top: 86px;
}

@media only screen and (max-width: 1919px) {
    .blog-area .blogs-wrapper-box {
        margin-top: 56px;
    }
}

@media only screen and (max-width: 1199px) {
    .blog-area .blogs-wrapper-box {
        margin-top: 36px;
    }
}

.blog-area .blogs-wrapper {
    display: grid;
    gap: 76px 60px;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}

@media only screen and (max-width: 1919px) {
    .blog-area .blogs-wrapper {
        gap: 46px 40px;
    }
}

@media only screen and (max-width: 1199px) {
    .blog-area .blogs-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .blog-area .blogs-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}

.blog-area .blog {
    position: relative;
}

.blog-area .blog:hover .thumb img {
    transform: scale(1.1);
}

.blog-area .blog:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--border);
    top: 0;
    left: -30px;
}

@media only screen and (max-width: 1919px) {
    .blog-area .blog:before {
        left: -20px;
    }
}

.blog-area .blog .thumb {
    overflow: hidden;
}

.blog-area .blog .thumb img {
    width: 100%;
    transition: all 0.5s;
}

.blog-area .blog .content {
    margin-top: 24px;
}

@media only screen and (max-width: 1199px) {
    .blog-area .blog .content {
        margin-top: 14px;
    }
}

.blog-area .blog .title {
    font-size: 36px;
    font-weight: 310;
    line-height: 1;
    letter-spacing: -0.07em;
    display: inline;
}

@media only screen and (max-width: 1919px) {
    .blog-area .blog .title {
        font-size: 24px;
    }
}

@media only screen and (max-width: 1399px) {
    .blog-area .blog .title {
        font-size: 22px;
    }
}

@media only screen and (max-width: 1199px) {
    .blog-area .blog .title {
        font-size: 20px;
    }
}

.blog-area .blog .meta {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 14px;
}

@media only screen and (max-width: 1199px) {
    .blog-area .blog .meta {
        margin-top: 9px;
    }
}

.blog-area .blog .meta span {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--secondary);
}

.blog-area .blog .meta .name span {
    font-weight: 500;
    color: var(--primary);
}


/* cta area 3 style  */


/* startup agency page css */

.body-startup-agency {
    background-color: #FFFFFF;
}

@media (min-width: 1650px) {
    .body-startup-agency .container.large {
        max-width: 1650px;
    }
}

.body-startup-agency .section-subtitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
    text-transform: unset;
    display: inline-block;
    color: var(--primary);
    padding-bottom: 10px;
    position: relative;
}

.body-startup-agency .section-subtitle svg {
    position: absolute;
    bottom: 0;
    width: 100% !important;
    left: 0;
    height: 7px;
}

@-webkit-keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 195.8011322021px;
        stroke-dasharray: 195.8011322021px;
    }
    20% {
        stroke-dashoffset: 391.6022644043px;
        stroke-dasharray: 195.8011322021px;
    }
    100% {
        stroke-dashoffset: 391.6022644043px;
        stroke-dasharray: 195.8011322021px;
    }
}

@keyframes animate-svg-stroke-1 {
    0% {
        stroke-dashoffset: 195.8011322021px;
        stroke-dasharray: 195.8011322021px;
    }
    20% {
        stroke-dashoffset: 391.6022644043px;
        stroke-dasharray: 195.8011322021px;
    }
    100% {
        stroke-dashoffset: 391.6022644043px;
        stroke-dasharray: 195.8011322021px;
    }
}

.body-startup-agency .header-area-5 .side-toggle {
    background-color: rgb(243, 243, 243);
}


/* hero area style  */

.hero-area-5 .section-content-wrapper {
    margin-top: 16px;
    display: grid;
    gap: 40px 110px;
    grid-template-columns: 715px 1fr;
}

@media only screen and (max-width: 1919px) {
    .hero-area-5 .section-content-wrapper {
        gap: 40px 80px;
        grid-template-columns: 515px 1fr;
    }
}

@media only screen and (max-width: 1399px) {
    .hero-area-5 .section-content-wrapper {
        gap: 40px 60px;
        grid-template-columns: 425px 1fr;
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-5 .section-content-wrapper {
        grid-template-columns: 455px 1fr;
        margin-top: 26px;
    }
}

@media only screen and (max-width: 991px) {
    .hero-area-5 .section-content-wrapper {
        grid-template-columns: 1fr;
    }
}

.hero-area-5 .hero-video {
    margin-top: 14px;
    border-radius: 15px;
    overflow: hidden;
}

.hero-area-5 .section-title {
    font-size: 80px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.05em;
    max-width: 575px;
}

@media only screen and (max-width: 1919px) {
    .hero-area-5 .section-title {
        font-size: 70px;
        max-width: 505px;
    }
}

@media only screen and (max-width: 1399px) {
    .hero-area-5 .section-title {
        font-size: 60px;
        max-width: 455px;
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-5 .section-title {
        font-size: 50px;
        max-width: 375px;
    }
}

@media only screen and (max-width: 991px) {
    .hero-area-5 .section-title {
        font-size: 40px;
    }
}

@media only screen and (max-width: 767px) {
    .hero-area-5 .section-title {
        font-size: 35px;
    }
}

.hero-area-5 .section-content .text {
    font-size: 20px;
    font-weight: 400;
    line-height: 26px;
}

.hero-area-5 .section-content .text-btn-wrapper {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 43px;
    display: grid;
    grid-template-columns: 330px 1fr;
}

@media only screen and (max-width: 1199px) {
    .hero-area-5 .section-content .text-btn-wrapper {
        grid-template-columns: 1fr;
    }
}

.hero-area-5 .section-content .text-wrapper {
    margin-top: 62px;
    margin-bottom: 62px;
}

@media only screen and (max-width: 1919px) {
    .hero-area-5 .section-content .text-wrapper {
        margin-top: 42px;
        margin-bottom: 42px;
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-5 .section-content .text-wrapper {
        margin-top: 32px;
        margin-bottom: 32px;
    }
}

.hero-area-5 .section-content .btn-wrapper {
    border-left: 1px solid var(--border);
    margin-left: 74px;
    padding-left: 28px;
    padding-top: 90px;
    padding-bottom: 68px;
}

@media only screen and (max-width: 1919px) {
    .hero-area-5 .section-content .btn-wrapper {
        margin-left: 44px;
        padding-top: 70px;
        padding-bottom: 48px;
    }
}

@media only screen and (max-width: 1199px) {
    .hero-area-5 .section-content .btn-wrapper {
        margin-left: 0;
        padding-top: 0;
        padding-bottom: 38px;
        border-left: 0;
        padding-left: 0;
    }
}


/* work area 4 style  */


/* marquee text area style  */


/* about area 4 style  */


/* service area 5 style  */


/* cta area 4 style  */


/* reveal animation style  */


/* portfolio agency page css */


/* work area 4 style  */


/* portfolio page css */


/* parallax carousal page css */


/* portfolio showcase page css */


/* work area 5 style  */


/* portfolio showcase 2 page css */


/* hero area 7 style  */


/* work area 7 style  */


/* capabilities area 2 style  */


/* award area 3 style  */


/* cta area 5 style  */


/* 404 page css */


/* about page css */


/* approach area about page style  */


/* info area style  */


/* client area page about style  */


/* media area page about style  */


/* award area page about style  */


/* team area about page style  */


/* blog details page css */


/* blog area 3 style  */


/* blog page css */

.blog-area-2 .section-header {
    border-top: 1px solid var(--border);
    padding-top: 37px;
}

@media only screen and (max-width: 991px) {
    .blog-area-2 .section-header {
        padding-top: 7px;
    }
}

.blog-area-2 .section-title-wrapper {
    display: grid;
    gap: 15px 60px;
    grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
    .blog-area-2 .section-title-wrapper {
        grid-template-columns: 1fr 1000px;
    }
}

@media only screen and (max-width: 1399px) {
    .blog-area-2 .section-title-wrapper {
        grid-template-columns: 1fr 850px;
    }
}

@media only screen and (max-width: 1199px) {
    .blog-area-2 .section-title-wrapper {
        grid-template-columns: 1fr 750px;
    }
}

@media only screen and (max-width: 991px) {
    .blog-area-2 .section-title-wrapper {
        grid-template-columns: 1fr;
    }
}

.blog-area-2 .subtitle-wrapper {
    margin-top: 8px;
}

.blog-area-2 .section-title {
    max-width: 800px;
}

@media only screen and (max-width: 1919px) {
    .blog-area-2 .section-title {
        max-width: 700px;
    }
}

@media only screen and (max-width: 1399px) {
    .blog-area-2 .section-title {
        max-width: 640px;
    }
}

.blog-area-2 .blogs-wrapper-box {
    margin-top: 94px;
}

@media only screen and (max-width: 1919px) {
    .blog-area-2 .blogs-wrapper-box {
        margin-top: 64px;
    }
}

@media only screen and (max-width: 991px) {
    .blog-area-2 .blogs-wrapper-box {
        margin-top: 44px;
    }
}

.blog-area-2 .blogs-wrapper {
    display: grid;
    gap: 76px 60px;
    grid-template-columns: repeat(6, 1fr);
    overflow: hidden;
}

@media only screen and (max-width: 1919px) {
    .blog-area-2 .blogs-wrapper {
        gap: 46px 40px;
    }
}

@media only screen and (max-width: 991px) {
    .blog-area-2 .blogs-wrapper {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .blog-area-2 .blogs-wrapper {
        grid-template-columns: repeat(1, 1fr);
    }
}

.blog-area-2 .blogs-wrapper>* {
    grid-column: span 2;
}

@media only screen and (max-width: 991px) {
    .blog-area-2 .blogs-wrapper>* {
        grid-column: auto;
    }
}

.blog-area-2 .blogs-wrapper>*:nth-child(4),
.blog-area-2 .blogs-wrapper>*:nth-child(5) {
    grid-column: span 3;
}

@media only screen and (max-width: 991px) {
    .blog-area-2 .blogs-wrapper>*:nth-child(4),
    .blog-area-2 .blogs-wrapper>*:nth-child(5) {
        grid-column: auto;
    }
}

.blog-area-2 .blogs-wrapper>*:nth-child(4) .content,
.blog-area-2 .blogs-wrapper>*:nth-child(5) .content {
    padding-right: 130px;
}

@media only screen and (max-width: 1919px) {
    .blog-area-2 .blogs-wrapper>*:nth-child(4) .content,
    .blog-area-2 .blogs-wrapper>*:nth-child(5) .content {
        padding-right: 100px;
    }
}

@media only screen and (max-width: 1199px) {
    .blog-area-2 .blogs-wrapper>*:nth-child(4) .content,
    .blog-area-2 .blogs-wrapper>*:nth-child(5) .content {
        padding-right: 80px;
    }
}

@media only screen and (max-width: 991px) {
    .blog-area-2 .blogs-wrapper>*:nth-child(4) .content,
    .blog-area-2 .blogs-wrapper>*:nth-child(5) .content {
        padding-right: 0;
    }
}

.blog-area-2 .blogs-wrapper>* .content {
    padding-right: 90px;
}

@media only screen and (max-width: 1919px) {
    .blog-area-2 .blogs-wrapper>* .content {
        padding-right: 70px;
    }
}

@media only screen and (max-width: 1199px) {
    .blog-area-2 .blogs-wrapper>* .content {
        padding-right: 0;
    }
}

.blog-area-2 .blog {
    position: relative;
}

.blog-area-2 .blog:hover .thumb img {
    transform: scale(1.1);
}

.blog-area-2 .blog:before {
    position: absolute;
    content: "";
    width: 1px;
    height: 100%;
    background-color: var(--border);
    top: 0;
    left: -30px;
}

@media only screen and (max-width: 1919px) {
    .blog-area-2 .blog:before {
        left: -20px;
    }
}

.blog-area-2 .blog .thumb {
    overflow: hidden;
}

.blog-area-2 .blog .thumb img {
    width: 100%;
    transition: all 0.5s;
}

.blog-area-2 .blog .content {
    margin-top: 24px;
}

@media only screen and (max-width: 1199px) {
    .blog-area-2 .blog .content {
        margin-top: 14px;
    }
}

.blog-area-2 .blog .title {
    font-size: 36px;
    font-weight: 310;
    line-height: 1;
    letter-spacing: -0.07em;
    display: inline;
}

@media only screen and (max-width: 1919px) {
    .blog-area-2 .blog .title {
        font-size: 30px;
    }
}

@media only screen and (max-width: 1399px) {
    .blog-area-2 .blog .title {
        font-size: 24px;
    }
}

@media only screen and (max-width: 1199px) {
    .blog-area-2 .blog .title {
        font-size: 20px;
    }
}

.blog-area-2 .blog .meta {
    display: flex;
    gap: 5px;
    align-items: center;
    margin-top: 14px;
}

@media only screen and (max-width: 1199px) {
    .blog-area-2 .blog .meta {
        margin-top: 9px;
    }
}

.blog-area-2 .blog .meta span {
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: var(--secondary);
}

.blog-area-2 .blog .meta .name span {
    font-weight: 500;
    color: var(--primary);
}


/* contact page css */


/* Loading effect */


/* faq page css */


/* service details page css */


/* approach area service details style  */


/* feature area style  */


/* value area style  */


/* faq area style  */

.faq-area .section-header {
    margin-top: 50px;
    border-top: 1px solid var(--border);
    padding-top: 37px;
}

@media only screen and (max-width: 991px) {
    .faq-area .section-header {
        margin-top: 10px;
        padding-top: 7px;
    }
}

.faq-area .section-title-wrapper {
    display: grid;
    gap: 15px 60px;
    grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
    .faq-area .section-title-wrapper {
        grid-template-columns: 1fr 1000px;
    }
}

@media only screen and (max-width: 1399px) {
    .faq-area .section-title-wrapper {
        grid-template-columns: 1fr 850px;
    }
}

@media only screen and (max-width: 1199px) {
    .faq-area .section-title-wrapper {
        grid-template-columns: 1fr 750px;
    }
}

@media only screen and (max-width: 991px) {
    .faq-area .section-title-wrapper {
        grid-template-columns: 1fr;
    }
}

.faq-area .subtitle-wrapper {
    margin-top: 8px;
}

.faq-area .section-title {
    max-width: 1005px;
}

@media only screen and (max-width: 1919px) {
    .faq-area .section-title {
        max-width: 905px;
    }
}

@media only screen and (max-width: 1399px) {
    .faq-area .section-title {
        max-width: 705px;
    }
}

.faq-area .accordion-wrapper {
    max-width: 1235px;
    margin-left: auto;
    margin-top: 93px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 1919px) {
    .faq-area .accordion-wrapper {
        margin-top: 63px;
        max-width: 1000px;
    }
}

@media only screen and (max-width: 1399px) {
    .faq-area .accordion-wrapper {
        margin-top: 43px;
        max-width: 850px;
    }
}

@media only screen and (max-width: 1199px) {
    .faq-area .accordion-wrapper {
        max-width: 750px;
    }
}

.faq-area .accordion {
    border-top: 1px solid var(--border);
    counter-reset: accordion;
}

.faq-area .accordion-button {
    font-size: 30px;
    font-weight: 310;
    line-height: 1.16;
    letter-spacing: -0.07em;
    color: var(--primary);
    padding: 30px 0 33px;
    border-radius: 0 !important;
    background-color: transparent;
    outline: 0;
    box-shadow: none;
}

@media only screen and (max-width: 1919px) {
    .faq-area .accordion-button {
        padding: 20px 0 23px;
        font-size: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .faq-area .accordion-button {
        font-size: 20px;
    }
}

.faq-area .accordion-button::after {
    content: "+";
    font-family: var(--font_awesome);
    background-image: none;
    width: auto;
    height: auto;
}

.faq-area .accordion-button:not(.collapsed) {
    pointer-events: none;
}

.faq-area .accordion-button:not(.collapsed)::after {
    content: "-";
}

.faq-area .accordion-item {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    position: relative;
    padding-left: 130px;
    transition: all 0.5s;
}

@media only screen and (max-width: 991px) {
    .faq-area .accordion-item {
        padding-left: 80px;
    }
}

@media only screen and (max-width: 767px) {
    .faq-area .accordion-item {
        padding-left: 50px;
    }
}

.faq-area .accordion-item:before {
    counter-increment: accordion;
    content: counter(accordion, decimal-leading-zero);
    font-family: var(--font_sequelsansromanbody);
    font-size: 30px;
    font-weight: 310;
    line-height: 1.16;
    letter-spacing: -0.07em;
    color: var(--primary);
    position: absolute;
    top: 30px;
    left: 0;
    transition: all 0.5s;
}

@media only screen and (max-width: 1919px) {
    .faq-area .accordion-item:before {
        top: 20px;
        font-size: 24px;
    }
}

@media only screen and (max-width: 767px) {
    .faq-area .accordion-item:before {
        font-size: 20px;
    }
}

.faq-area .accordion-body {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: var(--secondary);
    padding: 4px 0 43px;
    border: none;
}


/* sercices page css */

.service-area-service-page .section-header {
    border-top: 1px solid var(--border);
    padding-top: 37px;
}

@media only screen and (max-width: 991px) {
    .service-area-service-page .section-header {
        padding-top: 7px;
    }
}

.service-area-service-page .section-title-wrapper {
    display: grid;
    gap: 15px 60px;
    grid-template-columns: 1fr 1235px;
}

@media only screen and (max-width: 1919px) {
    .service-area-service-page .section-title-wrapper {
        grid-template-columns: 1fr 1000px;
    }
}

@media only screen and (max-width: 1399px) {
    .service-area-service-page .section-title-wrapper {
        grid-template-columns: 1fr 850px;
    }
}

@media only screen and (max-width: 1199px) {
    .service-area-service-page .section-title-wrapper {
        grid-template-columns: 1fr 750px;
    }
}

@media only screen and (max-width: 991px) {
    .service-area-service-page .section-title-wrapper {
        grid-template-columns: 1fr;
    }
}

.service-area-service-page .subtitle-wrapper {
    margin-top: 8px;
}

.service-area-service-page .section-title {
    max-width: 800px;
}

@media only screen and (max-width: 1919px) {
    .service-area-service-page .section-title {
        max-width: 700px;
    }
}

@media only screen and (max-width: 1399px) {
    .service-area-service-page .section-title {
        max-width: 500px;
    }
}

.service-area-service-page .services-wrapper-box {
    margin-top: 94px;
}

@media only screen and (max-width: 1919px) {
    .service-area-service-page .services-wrapper-box {
        margin-top: 64px;
    }
}

@media only screen and (max-width: 991px) {
    .service-area-service-page .services-wrapper-box {
        margin-top: 44px;
    }
}


/* client area service-page style  */


/* team details page css */

.team-details-area .section-content-wrapper {
    margin-top: 17px;
    display: grid;
    gap: 40px 60px;
    grid-template-columns: 590px 600px;
    justify-content: space-between;
}

@media only screen and (max-width: 1399px) {
    .team-details-area .section-content-wrapper {
        grid-template-columns: 1fr 500px;
    }
}

@media only screen and (max-width: 1199px) {
    .team-details-area .section-content-wrapper {
        grid-template-columns: 1fr 430px;
    }
}

@media only screen and (max-width: 991px) {
    .team-details-area .section-content-wrapper {
        grid-template-columns: 1fr;
    }
}

.team-details-area .team-thumb {
    margin-top: 13px;
    order: 2;
}

@media only screen and (max-width: 991px) {
    .team-details-area .team-thumb {
        order: unset;
        max-width: 500px;
    }
}

.team-details-area .team-thumb img {
    width: 100%;
}

.team-details-area .section-subtitle {
    font-family: var(--font_sequelsansromanbody);
    font-size: 30px;
    font-weight: 310;
    line-height: 0.93;
    letter-spacing: -0.07em;
    color: var(--primary);
    text-transform: unset;
}

@media only screen and (max-width: 1399px) {
    .team-details-area .section-subtitle {
        font-size: 24px;
    }
}

@media only screen and (max-width: 991px) {
    .team-details-area .section-subtitle {
        font-size: 22px;
    }
}

.team-details-area .subtitle-wrapper {
    margin-top: 29px;
}

@media only screen and (max-width: 1399px) {
    .team-details-area .subtitle-wrapper {
        margin-top: 19px;
    }
}

.team-details-area .section-content .text-wrapper {
    margin-top: 51px;
}

@media only screen and (max-width: 1399px) {
    .team-details-area .section-content .text-wrapper {
        margin-top: 41px;
    }
}

@media only screen and (max-width: 991px) {
    .team-details-area .section-content .text-wrapper {
        margin-top: 31px;
    }
}

.team-details-area .section-content .text {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.team-details-area .section-content .text:not(:first-child) {
    margin-top: 28px;
}

.team-details-area .social-links {
    margin-top: 53px;
    border-top: 1px dashed #878482;
    display: grid;
}

@media only screen and (max-width: 1399px) {
    .team-details-area .social-links {
        margin-top: 43px;
    }
}

@media only screen and (max-width: 991px) {
    .team-details-area .social-links {
        margin-top: 33px;
    }
}

.team-details-area .social-links a {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: var(--primary);
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #878482;
    padding: 11px 0;
    transition: all 0.5s;
}

.team-details-area .social-links a:hover {
    background-color: #F7F7FA;
    padding-left: 20px;
}

.team-details-area .social-links a:before {
    content: "+";
    margin-right: 6px;
}


/* team area team page style  */


/* cta area team page style  */

.cta-area-team-page .section-content {
    margin-top: 32px;
    text-align: center;
}

.cta-area-team-page .section-content .btn-wrapper {
    margin-top: 45px;
    margin-bottom: 1px;
}

@media only screen and (max-width: 1199px) {
    .cta-area-team-page .section-content .btn-wrapper {
        margin-top: 35px;
    }
}

.cta-area-team-page .section-title {
    max-width: 920px;
    margin-inline: auto;
}

@media (min-width: 1200px) {
    .cta-area-team-page .section-title {
        font-size: 50px;
        line-height: 50px;
    }
}


/* team list area style  */

.team-list-area .team-box {
    border-bottom: 1px solid #E1E1E1;
    padding-top: 20px;
    padding-bottom: 20px;
    display: grid;
    gap: 15px 25px;
    grid-template-columns: 100px 1fr 960px auto;
    align-items: center;
    justify-content: space-between;
    transition: all 0.5s;
}

@media only screen and (max-width: 1919px) {
    .team-list-area .team-box {
        grid-template-columns: 100px 1fr 560px auto;
    }
}

@media only screen and (max-width: 1199px) {
    .team-list-area .team-box {
        grid-template-columns: 100px 1fr 310px auto;
    }
}

@media only screen and (max-width: 991px) {
    .team-list-area .team-box {
        grid-template-columns: 80px 1fr 210px auto;
    }
}

@media only screen and (max-width: 767px) {
    .team-list-area .team-box {
        grid-template-columns: 1fr 1fr auto;
    }
}

.team-list-area .team-box:hover {
    background-color: #FAFAFA;
}

.team-list-area .team-box:hover .thumb {
    transform: translateX(20px);
}

.team-list-area .team-box:hover .name {
    transform: translateX(20px);
}

.team-list-area .team-box:hover .t-btn-normal {
    transform: translateX(-20px);
}

.team-list-area .team-box .thumb {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.5s;
}

@media only screen and (max-width: 991px) {
    .team-list-area .team-box .thumb {
        width: 80px;
        height: 80px;
    }
}

@media only screen and (max-width: 767px) {
    .team-list-area .team-box .thumb {
        grid-column: span 3;
    }
}

.team-list-area .team-box .thumb img {
    width: 100%;
}

.team-list-area .team-box .name {
    font-size: 30px;
    font-weight: 310;
    line-height: 1;
    letter-spacing: -0.07em;
    transition: all 0.5s;
}

@media only screen and (max-width: 1399px) {
    .team-list-area .team-box .name {
        font-size: 24px;
    }
}

.team-list-area .team-box .post {
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    display: inline-block;
}

.team-list-area .team-wrapper-box {
    margin-top: 90px;
}

@media only screen and (max-width: 1399px) {
    .team-list-area .team-wrapper-box {
        margin-top: 70px;
    }
}

.team-list-area .team-wrapper {
    border-top: 1px solid #E1E1E1;
}


/* team area style  */


/* work details page css */

.work-details-area .section-header {
    margin-top: 17px;
}

.work-details-area .section-title-wrapper {
    display: grid;
    gap: 20px 29px;
    grid-template-columns: 315px 1fr;
}

@media only screen and (max-width: 1919px) {
    .work-details-area .section-title-wrapper {
        grid-template-columns: 245px 1fr;
    }
}

@media only screen and (max-width: 1399px) {
    .work-details-area .section-title-wrapper {
        grid-template-columns: 195px 1fr;
    }
}

@media only screen and (max-width: 1199px) {
    .work-details-area .section-title-wrapper {
        align-items: center;
    }
}

@media only screen and (max-width: 767px) {
    .work-details-area .section-title-wrapper {
        grid-template-columns: 1fr;
    }
}

.work-details-area .meta-wrapper {
    margin-top: 51px;
    display: grid;
    gap: 30px 60px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-bottom: 95px;
}

@media only screen and (max-width: 1919px) {
    .work-details-area .meta-wrapper {
        margin-top: 41px;
        margin-bottom: 65px;
    }
}

@media only screen and (max-width: 1199px) {
    .work-details-area .meta-wrapper {
        gap: 30px 40px;
        margin-top: 31px;
        margin-bottom: 45px;
    }
}

@media only screen and (max-width: 991px) {
    .work-details-area .meta-wrapper {
        grid-template-columns: 1fr 1fr;
    }
}

.work-details-area .meta-item {
    border-top: 1px solid var(--border);
    padding-top: 14px;
}

.work-details-area .meta-item .title {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
}

.work-details-area .meta-item .text {
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
    color: var(--primary);
    margin-top: 4px;
}

.work-details-area .section-info {
    margin-top: 59px;
    margin-bottom: 93px;
    display: grid;
    gap: 20px 60px;
    grid-template-columns: 1fr 825px;
}

@media only screen and (max-width: 1919px) {
    .work-details-area .section-info {
        margin-top: 49px;
        margin-bottom: 63px;
    }
}

@media only screen and (max-width: 1399px) {
    .work-details-area .section-info {
        grid-template-columns: 1fr 650px;
    }
}

@media only screen and (max-width: 1199px) {
    .work-details-area .section-info {
        grid-template-columns: 1fr 550px;
        margin-top: 29px;
        margin-bottom: 43px;
    }
}

@media only screen and (max-width: 991px) {
    .work-details-area .section-info {
        grid-template-columns: 1fr;
    }
}

.work-details-area .section-info .title {
    font-size: 50px;
    font-weight: 310;
    line-height: 1;
    letter-spacing: -0.07em;
    max-width: 440px;
}

@media only screen and (max-width: 1919px) {
    .work-details-area .section-info .title {
        font-size: 38px;
        max-width: 340px;
    }
}

@media (max-width: 575px) {
    .work-details-area .section-info .title {
        font-size: 28px;
    }
}

.work-details-area .section-info .content {
    margin-top: 2px;
}

.work-details-area .section-info .text {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}


/* work page css */


/* header area style  */


/* header area 2 style  */


/* header area 3 style  */


/* header area 4 style  */


/* header area 5 style  */

.header-area-5 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.header-area-5__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    border-bottom: 1px solid var(--border);
}

@media only screen and (max-width: 1199px) {
    .header-area-5__inner {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.header-area-5__inner>*:nth-child(1) {
    margin-inline-end: auto;
}

.header-area-5 .header__logo img {
    max-width: 120px;
}

.header-area-5 .main-menu li a {
    padding: 31px 15px;
}

.header-area-5 .main-menu>ul>li:last-child>a {
    padding-right: 0;
}

.header-area-5 .side-toggle {
    width: 40px;
    height: 40px;
    background-color: #F1E8E1;
    border-radius: 50%;
}

.header-area-5 .side-toggle i {
    font-size: 22px;
}


/* header area 6 style  */


/* header area 8 style  */


/* header area 8 style  */


/* footer area style  */


/* footer area 2 style  */


/* footer area 3 style  */


/* footer area 4 style  */


/* footer area inner page style  */

.footer-area-inner-page .footer-top-inner {
    padding-top: 50px;
    border-top: 1px solid var(--border);
    padding-bottom: 50px;
    margin-top: 50px;
    display: grid;
    gap: 30px 60px;
    grid-template-columns: 1fr 660px;
}

@media only screen and (max-width: 1919px) {
    .footer-area-inner-page .footer-top-inner {
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: 30px;
    }
}

@media only screen and (max-width: 1399px) {
    .footer-area-inner-page .footer-top-inner {
        grid-template-columns: 1fr 580px;
    }
}

@media only screen and (max-width: 1199px) {
    .footer-area-inner-page .footer-top-inner {
        grid-template-columns: 1fr 470px;
    }
}

@media only screen and (max-width: 991px) {
    .footer-area-inner-page .footer-top-inner {
        grid-template-columns: 1fr 430px;
    }
}

@media only screen and (max-width: 767px) {
    .footer-area-inner-page .footer-top-inner {
        grid-template-columns: 1fr;
    }
}

.footer-area-inner-page .footer-top-inner .info-text .text {
    max-width: 510px;
    font-size: 30px;
    line-height: 1.26;
    color: var(--primary);
}

@media only screen and (max-width: 1919px) {
    .footer-area-inner-page .footer-top-inner .info-text .text {
        font-size: 22px;
    }
}

@media only screen and (max-width: 1199px) {
    .footer-area-inner-page .footer-top-inner .info-text .text {
        font-size: 18px;
    }
}

.footer-area-inner-page .footer-top-inner .info-link a {
    font-size: 30px;
    line-height: 1.5;
    color: var(--black-2);
    position: relative;
}

@media only screen and (max-width: 1919px) {
    .footer-area-inner-page .footer-top-inner .info-link a {
        font-size: 22px;
    }
}

.footer-area-inner-page .footer-top-inner .info-link a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transition: all 0.3s;
    background-color: currentColor;
}

.footer-area-inner-page .footer-top-inner .info-link a:hover {
    color: var(--primary);
}

.footer-area-inner-page .footer-top-inner .info-link a:hover::before {
    width: 0;
}

.footer-area-inner-page .footer-logo {
    margin-top: 8px;
    max-width: 657px;
}

@media only screen and (max-width: 1919px) {
    .footer-area-inner-page .footer-logo {
        max-width: 257px;
    }
}

@media only screen and (max-width: 1199px) {
    .footer-area-inner-page .footer-logo {
        max-width: 207px;
    }
}

@media only screen and (max-width: 991px) {
    .footer-area-inner-page .footer-logo {
        max-width: 147px;
    }
}


/* digital agency classic page css */

:root {
    --rr-ff-grotesk: "BDO Grotesk", sans-serif;
    --rr-ff-body: "Inter", sans-serif;
    --rr-common-white: #FFFFFF;
    --rr-theme-primary: #222222;
    --rr-heading-primary: #222222;
    --rr-heading-secondary: #222020;
    --rr-theme-primary: #151515;
    --rr-text-body: rgba(34, 34, 34, 0.6);
    --rr-fw-medium: 500;
}


/* banner Style 1 */


/* brand */


/* award area style  */


/* h1 blog style  */


/* footer area style  */


/* digital web agency page css */


/* oswald  */


/* background */


/* flaticon font  */

@font-face {
    font-family: "busico";
    src: url("../fonts/busico.eot");
    src: url("../fonts/busico.eot?#iefix") format("embedded-opentype"), url("../fonts/busico.woff2") format("woff2"), url("../fonts/busico.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

[class^=icon-]:before,
[class*=" icon-"]:before {
    font-family: "busico";
    font-style: normal;
    font-weight: normal;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: 0.2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* hero area style  */


/* about area style  */


/* service area style  */


/* skill area style  */


/* team area style  */


/* portfolio area style  */


/* testimonial area style  */


/* fun fact area style  */


/* faq area style  */


/* cta area style  */


/* news area style  */


/* footer area style  */


/* digital agency modern page css */

@font-face {
    font-family: "Beatrice Trial";
    src: url("../fonts/BeatriceTRIAL-Regular.ttf");
    font-weight: 400;
}

@font-face {
    font-family: "Beatrice Trial";
    src: url("../fonts/BeatriceTRIAL-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "Beatrice Trial";
    src: url("../fonts/BeatriceTRIAL-Semibold.ttf");
    font-weight: 600;
}

@font-face {
    font-family: "Beatrice Trial";
    src: url("../fonts/BeatriceTRIAL-Bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "Beatrice Trial";
    src: url("../fonts/BeatriceTRIAL-Extrabold.ttf");
    font-weight: 800;
}

:root {
    --rr-ff-heading1: "Beatrice Trial", sans-serif;
    --rr-background-section-3-bg: #121212;
    --rr-text-primary-2: #121212;
    --rr-text-primary: #151515;
    --rr-theme-primary-2: #ECFF70;
}

@keyframes upDown {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes upDown-top {
    0% {
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes leftRight {
    0% {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
    }
    100% {
        -webkit-transform: translateX(-15px);
        -moz-transform: translateX(-15px);
        -ms-transform: translateX(-15px);
        -o-transform: translateX(-15px);
        transform: translateX(-15px);
    }
}


/* award section 3 style  */


/* web development page css */

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

:root {
    --rr-ff-body: "Plus Jakarta Sans", sans-serif;
    --rr-ff-heading: "Plus Jakarta Sans", serif;
    --rr-ff-p: "Plus Jakarta Sans", sans-serif;
    --rr-fw-normal: normal;
    --rr-fw-thin: 100;
    --rr-fw-elight: 200;
    --rr-fw-light: 300;
    --rr-fw-regular: 400;
    --rr-fw-medium: 500;
    --rr-fw-sbold: 600;
    --rr-fw-bold: 700;
    --rr-fw-ebold: 800;
    --rr-fw-black: 900;
    --rr-fs-body: 16px;
    --rr-fs-p: 16px;
    --rr-fs-h1: 60px;
    --rr-fs-h2: 48px;
    --rr-fs-h3: 24px;
    --rr-fs-h4: 20px;
    --rr-fs-h5: 16px;
    --rr-fs-h6: 14px;
    --rr-color-common-white: #ffffff;
    --rr-color-common-black: #000000;
    --rr-color-common-dark: #232323;
    --rr-color-heading-primary: #11151C;
    --rr-color-text-body: #B0B2B7;
    --rr-color-text-body-light: #74787C;
    --rr-color-theme-primary: #3F5AF3;
    --rr-color-theme-secondary: #ffc226;
    --rr-color-bg-1: #11151C;
    --rr-color-grey-1: #F8F8F8;
    --rr-color-grey-2: #2D343E;
    --rr-color-grey-light: #F2F3F4;
    --rr-color-border-1: #1E2228;
    --rr-color-border-light: #E4E4E4;
}

@-webkit-keyframes hero-anim-2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}

@keyframes hero-anim-2 {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}


/**----------------------------------------
START: About CSS
----------------------------------------*/


/**----------------------------------------
START: Counter CSS
----------------------------------------*/


/**----------------------------------------
START: Team CSS
----------------------------------------*/


/**----------------------------------------
    START: Pricing CSS
----------------------------------------*/


/**----------------------------------------
    START: Appointment CSS
----------------------------------------*/


/* !END: Appointment CSS */


/**----------------------------------------
START: Testi CSS
----------------------------------------*/


/**----------------------------------------
START: Blog CSS
----------------------------------------*/


/**----------------------------------------
START: Footer CSS
----------------------------------------*/


/* web design page css */


/**----------------------------------------
START: Process CSS
----------------------------------------*/


/**----------------------------------------
START: About CSS
----------------------------------------*/


/**----------------------------------------
START: Service CSS
----------------------------------------*/


/**----------------------------------------
START: Faq CSS
----------------------------------------*/


/**----------------------------------------
START: Testi CSS
----------------------------------------*/


/**----------------------------------------
START: Project CSS
----------------------------------------*/


/**----------------------------------------
START: Sponsor CSS
----------------------------------------*/


/**----------------------------------------
START: Footer CSS
----------------------------------------*/


/* modern agency 2 page css */


/* Case Study CSS */


/* Grow CSS */


/* Brand CSS */


/* it solution page css */

.rr-container-1405 {
    max-width: 1405px;
}

@-webkit-keyframes wobble-vertical {
    16.65% {
        transform: translateY(8px);
    }
    33.3% {
        transform: translateY(-6px);
    }
    49.95% {
        transform: translateY(4px);
    }
    66.6% {
        transform: translateY(-2px);
    }
    83.25% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes wobble-vertical {
    16.65% {
        transform: translateY(8px);
    }
    33.3% {
        transform: translateY(-6px);
    }
    49.95% {
        transform: translateY(4px);
    }
    66.6% {
        transform: translateY(-2px);
    }
    83.25% {
        transform: translateY(1px);
    }
    100% {
        transform: translateY(0);
    }
}


/* Fade Effect */

@keyframes asFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes asFadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
    }
}

@keyframes asFadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
    }
}

@keyframes asFadeInTop {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
    }
}

@keyframes asFadeInBottom {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
    }
}


/* Theme Slider CSS */


/* hero area style  */


/* footer area style  */