:root {
    --primary-color: #ffde59;
    --secondary-color: #38b6ff;

    --base-color: #000000;
    --white: #ffffff;
    --black: #000000;

    --light-grey: #EDEDED;

    --padding-sm: 0.7rem;
    --padding-md: 1rem;
    --padding-lg: 1.5rem;

    --base-font-size: 1rem;

    --fw-bold: 700;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-light: 200;
    --fw-semi-bold: 600;

    --primary-font: 'Montserrat', sans-serif;
    --secondary-font: 'Poppins', sans-serif;


    --xl: 3.7rem;
    --lg: 2.7rem;
    --md: 2rem;
    --sm: 1.6rem;
    --xs: 1.2rem;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--primary-font);
    line-height: 1.3;
}

.no-scroll {
    overflow: hidden !important;
}

.container {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    padding: 0 5%;
    /* overflow: hidden; */
}

.text-white {
    color: var(--white);
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-black{
    color: #000 !important;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.dattani{
    max-width: 150px !important;
    max-height: 150px !important;
}

section {
    padding: 3rem 0;
    position: relative;
    /* overflow-x: hidden; */
}

ul {
    list-style: none;
}

/* Section Title CSS Start */
.section-title {
    margin-bottom: 2rem;
}

.section-title h3 {
    font-size: 1.4rem;
    font-weight: var(--fw-light);
}

.section-title h3 mark {
    background-color: transparent;
    font-weight: var(--fw-bold);
}

/* Section Title CSS End */

a {
    text-decoration: none;
    color: var(--base-color);
    font-family: var(--primary-font);
}

picture {
    display: block;
}

img {
    vertical-align: middle;
}

/* Utilities CSS Start */

.zi--1 {
    z-index: -1;
}

.bd-top-1 {
    border-top: 1px solid;
}

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

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

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

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

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

.d-flex {
    display: flex !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.gap-2 {
    gap: 1rem !important;
}

.w-100 {
    width: 100% !important;
}

.pb-5 {
    padding-bottom: 5rem !important;
}

.pt-1 {
    padding-top: 0.5rem !important;
}

.pt-10rm {
    padding-top: 10rem !important;
}

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

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

.text-uppercase {
    text-transform: uppercase !important;
}

.fw-bold {
    font-weight: var(--fw-bold) !important;
}


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

.fw-medium {
    font-weight: var(--fw-medium) !important;
}

.text-xl {
    font-size: var(--xl);
}

.text-lg {
    font-size: var(--lg);
}

.text-md {
    font-size: var(--md);
}

.text-sm {
    font-size: var(--sm);
}

.text-xs {
    font-size: var(--xs);
}

.lh-1 {
    line-height: 1;
}

.lh-1-8 {
    line-height: 1.8 !important;
}

.lh-1-4 {
    line-height: 1.5 !important;
}

.fw-regular {
    font-weight: var(--fw-regular) !important;
}

.mb-4 {
    margin-bottom: 3rem;
}

.mb-3 {
    margin-bottom: 2rem;
}

.mb-2 {
    margin-bottom: 1rem;
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.overflow-inherit {
    overflow: inherit !important;
}

.overflow-x-hidden {
    overflow-x: hidden !important;
}

.u-none {
    user-select: none !important;
}

.point-none {
    pointer-events: none !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.d-none {
    display: none !important;
}

.d-inline-block {
    display: inline-block !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.justify-space-around {
    justify-content: space-around !important;
}

.justify-space-evenly {
    justify-content: space-evenly !important;
}

.justify-content-center {
    justify-content: center !important;
}

.gap-v-2rem {
    gap: 2rem 0 !important;
}

.gap-h-8rem {
    gap: 0 8rem !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.r--0 {
    right: 0 !important;
}

.r--5 {
    right: -5% !important;
}

.t--45 {
    top: -45% !important;
}

.t--28 {
    top: -28% !important;
}

.t--24 {
    top: -24% !important;
}

.t--20 {
    top: -20% !important;
}

.t-18 {
    top: -18% !important;
}

.t-0 {
    top: 0 !important;
}

.t--12 {
    top: -12rem !important;
}

.l-0 {
    left: 0 !important;
}

.b-0 {
    bottom: 0 !important;
}

.r-0 {
    right: 0 !important;
}

.h-100 {
    height: 100% !important;
}

.min-h-200 {
    min-height: 200px !important;
}

.obj-ft-cover {
    object-fit: cover !important;
}

.p-xs {
    padding: var(--xs) !important;
}

.absolute-center {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.absolute-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
}

.overlay-gradinet-black {
    background-image: linear-gradient(to top, black, transparent);
}

.inset-0 {
    inset: 0;
}

.bg-white-d-3 {
    background-color: rgba(255, 255, 255, 0.4);
}

.bg-black-d-8 {
    background-color: rgba(0, 0, 0, 0.8);
}

.text-nowrap {
    white-space: nowrap !important;
}

.pr-0 {
    padding-right: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.mt-6rem {
    margin-top: 6rem !important;
}

.my-md {
    margin-top: var(--md);
    margin-bottom: var(--md);
}

.aspect-ratio-6-5 {
    aspect-ratio: 6/5 !important;
}

.py-lg {
    padding-top: var(--lg) !important;
    padding-bottom: var(--lg) !important;
}

.py-1 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.px-2 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.px-3 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.px-4 {
    padding-left: 2rem;
    padding-right: 2rem;
}

.mx-1 {
    margin-left: 0.5rem !important;
    margin-right: 0.5rem !important;
}

.mx-2 {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
}

.mx-3 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important;
}

.mx-4 {
    margin-left: 2rem !important;
    margin-right: 2rem !important;
}

.mr-2 {
    margin-right: 1rem;
}

.br-1 {
    border-radius: 0.5rem;
}

.br-2 {
    border-radius: 1rem;
}

.br-3 {
    border-radius: 2rem;
}

.br-4 {
    border-radius: 3rem;
}

.d-block {
    display: block;
}

.shadow {
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
}

.shadow-sm {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.shadow-lg {
    box-shadow: 0 9px 14px rgba(0, 0, 0, 0.2);
}

[class*=col-] {
    padding: 0 0.5rem;
}

.col-12 {
    width: 100%;
}

.col-6 {
    width: 50%;
}

.pt-10rem {
    padding-top: 10rem;
}

.pt-5rem {
    padding-top: 5rem;
}

.py-2 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.bd-left-0 {

    border-left: 0 !important;
}

.bd-bottom-0 {
    border-bottom: 0 !important;
}

/* Utilities CSS End */

/* background Shapes Start */
.bg-shape {
    background-image: url(../images/backgrounds-bg-brand-1.png);
    position: absolute;
    inset: 0;
    background-size: cover;
    z-index: -1;
    top: -4rem;
}

.bg-shape-home-center {
    background-image: url(../images/backgrounds-bg-featured.png);
    position: absolute;
    inset: 0;
    background-size: cover;
    z-index: -1;
    top: -10rem;
}


/* background Shapes end */

/* Button CSS Start */

.btn {
    display: inline-block;
    position: relative;
    font-size: var(--base-font-size);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    font-family: var(--primary-font);
    padding: var(--padding-sm) var(--padding-md);
    transition: 0.3s ease-in;
    border: 0;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--base-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
	border-radius: 50px !important;
}

.btn-primary::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 50%;
    left: 20;
    bottom: -10px;
    background-color: var(--primary-color);
    transition: 0.3s ease-in;
}

.btn-primary i {
    margin-left: 10px;
    font-size: 1.2rem;
}

.btn-primary:hover {
    background-color: var(--secondary-color);
    color: var(--white);
}

.btn-primary:hover:before {
    background-color: var(--secondary-color);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 50%;
    left: 0;
    bottom: -10px;
    background-color: var(--secondary-color);
    transition: 0.3s ease-in;
}

.btn-secondary i {
    margin-left: 10px;
    font-size: 1.2rem;
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
    color: var(--white);
}

.btn-secondary:hover:before {
    background-color: var(--secondary-color);
}

/* Btn White */
.btn-white {
    background-color: var(--white);
    color: var(--base-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.btn-white:hover{
    background-color: var(--secondary-color);
    color: var(--white);
}
.btn-white::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 50%;
    left: 0;
    bottom: -10px;
    background-color: var(--white);
    transition: 0.3s ease-in;
}

.btn-white i {
    margin-left: 1rem;
    font-size: 1.2rem;
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
    color: var(--white);
}

.btn-secondary:hover:before {
    background-color: var(--secondary-color);
}

/* Header CSS Start */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.header.is-scrolled {
    background-color: var(--white);
    box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.2);
}

.navbar-wrapper {
    position: relative;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-sm);
}

.main-nav {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: end;
}

.main-nav .menu-login {
    margin-right: 0.5rem;
    font-size: 0.8rem;
    padding: 10px;
}

.main-nav .menu-login:hover,
.main-nav .menu-login:focus {
    transform: translateX(0);
}

.main-navigation {
    position: absolute;
    top: 0;
    right: 0%;
    background: linear-gradient(to bottom, var(--secondary-color), var(--primary-color));
    transition: clip-path ease-in-out 700ms;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    overflow-y: auto;
}

.main-navigation::-webkit-scrollbar {
    display: none;
}

.main-navigation[data-state="opened"] {
    animation: clipPathCircleOpen 750ms ease-in-out forwards;
    display: block;
}

.main-navigation[data-state="closing"] {
    animation: clipPathCircleClose 750ms ease-in-out forwards;
}

.main-navigation[data-state="closed"] {
    display: none;
}

@keyframes clipPathCircleOpen {
    0% {
        clip-path: circle(0% at top right);
    }

    100% {
        clip-path: circle(250% at top right);
    }
}

@keyframes clipPathCircleClose {
    0% {
        clip-path: circle(250% at top right);
    }

    100% {
        clip-path: circle(0% at top right);
    }
}


.navbar {
    list-style: none;
    padding-top: 4rem;
    margin: 0;
    height: 100vh;
}


.navbar .nav-item .nav-link {
    display: block;
    padding: var(--padding-md) var(--padding-lg);
    text-transform: capitalize;
    text-decoration: none;
    transition: 100ms ease-in;
    font-weight: var(--fw-medium);
    cursor: pointer;
}

.navbar:not(.submenu) .nav-item.has-submenu.active .nav-link {
    background-color: var(--black, #000000);
    color: var(--white, #ffffff);
}

.navbar:not(.submenu) .navitem .nav-link {
    color: var(--base-color);
}

.has-submenu.active .submenu {
    display: block;
}

.submenu {
    display: none;
    background-color: var(--black, #000000);
    padding-left: var(--padding-md);
}

.submenu .nav-item .nav-link {
    color: var(--white);
}

.submenu.show {
    display: block;
}

.main-nav a:hover,
.main-nav a:focus {
    transform: translateX(10px);
}

.main-nav--icon {
    display: inline-block;
    font-size: 1.5em;
    margin-right: 1em;
    width: 1.1em;
    text-align: right;
    color: rgba(255, 255, 255, 0.4);
}

.menu-toggle {
    height: 45px;
    width: 45px;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    display: none;
}


.hamburger,
.hamburger::before,
.hamburger::after {
    content: "";
    display: block;
    background-color: var(--base-color);
    height: 2px;
    width: 2em;
    border-radius: 3px;
    transition: all ease-in-out 500ms;
}

.hamburger {
    width: 1.25em;
}

.hamburger::before {
    transform: translateY(-8px);
}

.hamburger::after {
    transform: translateY(6px);
}

[aria-expanded="true"] .hamburger {
    transform: rotate(45deg);
    width: 2em;
}

[aria-expanded="true"] .hamburger::before {
    opacity: 0;
}

[aria-expanded="true"] .hamburger::after {
    transform: translateY(-3px) rotate(-90deg);
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Header CSS End */

/* Fixed Social Icons CSS Start */
.social-fixed-icons-left {
    position: fixed;
    bottom: 2rem;
    z-index: 99;
    padding: 10px;
    border-radius: 0 0.5rem;
    display: none;
}

.social-fixed-icons-left ul li {
    list-style: none;
}

.social-fixed-icons-left ul li a {
    list-style: none;
    height: 20px;
    width: 20px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    padding: 10px 0;
}

.main-page section:last-child {
    padding-bottom: 150px;
}

/* Hero Section CSS Start */
.hero {

    --font-size-lg: 2.7rem;
    --font-size-sm: 0.9rem;
    --margin-bottom: 1rem;

    background-size: 60%;
    background-position: top right;
    background-image: url("../images/main-bg.png");
    background-repeat: no-repeat;
    padding: 10rem 0 0;
}

.hero-content {
    text-align: center;
    margin-bottom: 2rem;
}

.hero-title {
    font-family: var(--secondary-font);
    font-weight: var(--fw-light);
    font-size: var(--font-size-lg);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: var(--margin-bottom);
    line-height: 1;
}
.hero-title span{ 
    font-weight: bold; 
    color: var(--secondary-color);
    background: -webkit-linear-gradient(45deg, var(--primary-color), var(--secondary-color) 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: var(--base-font-size);
    line-height: 1.6;
    margin-bottom: var(--margin-bottom);
}

/* Services Section CSS Start */

.services-wrapper .slick-list {
    z-index: 1;
}

.services-wrapper .slick-dots {
    z-index: 1;
    bottom: -50px;
}

.services-wrapper .slick-dots li {
    height: 30px;
    width: 30px;
    border: 2px solid transparent;
    border-radius: 50%;
    padding: 4px;
}

.services-wrapper .slick-dots li button {
    background-color: var(--secondary-color);
    padding: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: #C1C1C1;
}

.services-wrapper .slick-dots li button:before {
    display: none;
}

.services-wrapper .slick-dots li.slick-active {
    background-color: var(--white);
    border-color: var(--secondary-color);
}

.services-wrapper .slick-dots li.slick-active button {
    background-color: var(--secondary-color);
}

.service-header {
    margin-bottom: 2rem;
}

.service-subtitle {
    font-weight: var(--fw-light);
    font-size: 1.05rem;
}

.service-title {
    text-transform: uppercase;
    font-weight: var(--fw-light);
    font-size: 2.3rem;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.service-footer picture {
    position: relative;
    z-index: 1;
}

.service-footer picture img {
    margin: 0 auto;
}

/* Slick Slider CSS Start */
.slick-arrow {
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid;
    padding: 4px;
    transform: none;
    z-index: 2;
}

.slick-arrow:before {
    background: #000;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-family: 'Font Awesome 5 Free';
}

.slick-arrow.slick-next::before {
    content: '\f061';
}

.slick-arrow.slick-prev::before {
    content: '\f060';
}

/* Slick Slider CSS End */

/* Featured Projects Slider */
.fet--projects-wrapper .slick-arrow {
    border-color: var(--base-color);
    top: -100;
    transform: none;
}

.fet--projects-wrapper .slick-arrow.slick-next {
    right: 0;
}

.fet--projects-wrapper .slick-arrow.slick-prev {
    right: 45px;
    left: auto;
}

.fet--projects-wrapper .slick-arrow:before {
    background: #000;
}

.fet--projects-wrapper .slick-list {
    padding: 0 !important;
}

.fet--projects-wrapper .slick-list .slick-track {
    margin: 0 !important;
}

.fet-project--single {
    margin-right: 0rem;
}
.fet-project--single:nth-child(odd){ padding-top: 120px;}

.fet--project-header {
    display: block;
}

.fet--project-header picture {
    margin-bottom: 2.5rem;
    position: relative;
}

.fet--project-header picture:before {
    content: '';
    position: absolute;
    height: 15px;
    width: 90%;
    background-color: rgba(0, 0, 0, 0.7);
    filter: blur(11px);
    bottom: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 30px;
    user-select: none;
    pointer-events: none;

}
 
.fet-project--single img {
    border-radius: 1rem;
    height: 450px;
    object-fit: cover;
}

.project-subtitle,
.project-title {
    text-transform: uppercase;
    font-weight: var(--fw-medium);
}

.project-subtitle {
    font-size: 1.05rem;
    margin-bottom: 0.7rem;
    display: inline-block;
}

.project-title {
    font-size: 1.5rem;
    letter-spacing: 1px;
    margin: 0;
}

.fet--project-header picture img {
    border-radius: 1rem;
    height: 450px; object-fit: cover;
}


/* Clients Section CSS Start */
.our-clients{ background: url(../fonts/images-coma.svg) center top no-repeat;}
.our-clients--left .client-img {
    position: relative;
    margin: 0 0.5rem 0; margin-top:230px;
    height: 130px;
}
.our-clients--left .client-img  span{     position: absolute;
    z-index: 99;
    transform: rotate(-90deg);
    left: -130px; top:90px; font-weight: bold; font-size: 28px; color:#FDE6DC; display: none;}
.our-clients--left .slick-current { height:360px; margin-top: 0px;}
.our-clients--left .slick-current span{ display: block;}
.our-clients--left .client-img:before {
    position: absolute;
    content: '';
    inset: 0;
    z-index: 1;
    /* background-color: var(--secondary-color);  */
    opacity: 0.4;
    border-radius: 0.5rem;
    user-select: none;
    pointer-events: none;
    z-index: 2;
    transition: 0.2s all;
}

.our-clients--left .client-img img {
    position: relative;
    border-radius: 0.5rem;
    z-index: 1;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.our-clients--left .client-img.slick-current::before {
    inset: 97% 5% -5px 5%;
    background-color: var(--base-color);
    border-radius: 50px;
    opacity: 0.6;
    filter: blur(10px);
    z-index: -1;
}

.our-clients--right .slick-arrow {
    top: 99%;
    border-color: #868686;
}

.our-clients--right .slick-arrow:before {
    color: var(--secondary-color);
    border: 1px solid #868686;
    background-color: transparent;
}

.our-clients--right .slick-arrow.slick-next {
    left: 70px;
}

.our-clients--right .slick-arrow.slick-prev {
    left: 0;
}

.our-clients--right .slick-arrow:hover,
.our-clients--right .slick-arrow:focus {
    border-color: var(--secondary-color);
}

.our-clients--right .slick-arrow:hover:before,
.our-clients--right .slick-arrow:focus:before {
    background-color: var(--secondary-color);
    color: var(--white);
    border-color: var(--secondary-color);
}

.our-clients--right .client-name {
    font-size: 0.9rem;
    letter-spacing: 1px;
    line-height: 2;
    font-weight: 600;
}

.our-clients--right .designation {
    margin-bottom: 1rem;
    line-height: 1;
    font-weight: var(--fw-light);
}

.our-clients--right .proj-desc p {
    font-weight: var(--fw-bold);
    line-height: 1.5;
    margin-bottom: 1rem;
}


/* Achievements CSS Start */
.achievements {
    background-image: url(../images/bg-achievements.png);
    background-size: cover;
    padding: 4rem 0 0;
    background-repeat: no-repeat;
    overflow: hidden;
}

.achievement-wrapper-left {
    margin-bottom: 1rem;
}

.achievement-wrapper-right {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    text-align: center;
    align-items: center;
}

.achievement-card {
    /* background-color: var(--secondary-color); */
    padding: var(--padding-lg) var(--padding-md);
    border-radius: 0.5rem;
    font-family: var(--secondary-font);
    position: relative;
    background: var(--primary-color);
}

.achievement-card:before,
.achievement-card:after {
    content: '';
    position: absolute;
    user-select: none;
    pointer-events: none;
}

.achievement-card:before {
    height: 5px;
    width: 90%;
    border-radius: 30px;
    background: #000;
    left: 50%;
    transform: translateX(-50%);
    bottom: -4px;
    filter: blur(8px);
    z-index: -2;

}

.achievement-card:after {
    position: absolute;
    content: '';
    inset: 0;
    background-color: var(--secondary-color);
    border-radius: 0.5rem;
    z-index: -1;
}

.achievement-number {
    font-size: var(--lg);
    line-height: 54px;
}

/* Clients Logo CSS Start */

.clients-logo-wrapper {
    margin-top: 0rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.client-logo-single {
    /*background-color: var(--white);*/
    /*background-image: linear-gradient(#fff 30%, #ffde59 90%);*/
    padding: var(--padding-lg);
    border-radius: 0rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    position: relative;
}

.client-logo-single.client-lohgo-single-last {
    background:url(../fonts/images-bg-shap-logo.svg) left top no-repeat var(--secondary-color);
    text-align: center;
    font-weight: var(--fw-bold);
    background-size: cover;
    color: var(--white);
}

.client-logo-single.client-lohgo-single-last:before {
    position: absolute;
    content: '';
    height: 20px;
    width: 90%;
    bottom: -10px;
    left: 50%;
    background-color: var(--secondary-color);
    border-radius: 50px;
    filter: blur(20px);
    transform: translateX(-50%);
    user-select: none;
    pointer-events: none;
}

.client-logo-single img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    max-width: 100px;
    max-height: 110px;
}

/* Page CSS Start */
.page-content {
    scroll-padding: 80px 0 0 0;
}


/* Input Elements CSS Start */
.form-control {
    display: block;
    padding: 1rem 2rem;
    font-size: var(--base-font-size);
    border: 0;
    width: 100%;
    font-family: var(--primary-font);

}

.form-control:is(:focus, :active) {
    outline: 1px solid var(--secondary-color);
    box-shadow: none;
    border: 0;
}


/* Email Marketing Page */
.email-marketing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    text-align: center;
}

.email-marketing-grid>article {
    border-left: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    padding: 1rem;
}

/* Footer CSS Start */
.main-footer {
    position: relative;
    margin-top: -90px;
}

.cpy-rght-bar {
    text-align: center;
    padding: 1rem 0;
    color: var(--black);
    font-weight: var(--fw-medium);
}

.cpy-rght-bar p:first-child {
    margin-bottom: 1rem;
}

.cpy-rght-bar a {
    color: var(--black);
}

.back-to-top {
    position: fixed;
    height: 35px;
    width: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 2rem;
    bottom: 2rem;
    background-color: var(--secondary-color);
    border-radius: 50%;
    padding: 5px;
    opacity: 0;
    transition: 200ms ease-in;
    border: 1px solid var(--white);
    box-shadow: 0 0 0 8px var(--secondary-color);
    z-index: 9;
}

.back-to-top.show {
    opacity: 1;
}


.bg-shp-tr {
    background-image: url(../images/backgrounds-bg-common-tp-rt.png);
    background-size: 50%;
    background-position: right top;
    background-repeat: no-repeat;
}

.bg-btm-common {
    background-image: url(../images/backgrounds-bg-brand-btm.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-shape-sm-center {
    background-image: url(../images/seo-bg-shape-sm-center.png);
}

.bg-shape-inf-mark {
    background-image: url(../images/influencer-marketing-bg-influ-mark.png);
}


.w-v-offer-grid-content {
    position: relative;
    top: -68px;
    max-width: 90%;
    margin: auto;
}

/* Slick Slider Dots Styles Start */
.dots-style-1 {
    display: flex;
    align-items: center;
    margin-top: 0rem;
    position: relative;
    line-height: 1;
    bottom: 50px;
}

.dots-style-1 li {
    border: 2px solid transparent;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    padding: 3px;
    position: relative;
}

.dots-style-1 li button {
    border-radius: 50%;
    background-color: var(--white);
    content: '';
    opacity: 1;
    height: 100%;
    width: 100%;
}

.dots-style-1 li button::before {
    display: none;
}

.dots-style-1 li.slick-active {
    border: 2px solid var(--primary-color);
}

.dots-style-1 li.slick-active button {
    background-color: var(--primary-color);
    opacity: 1;
}

/* Slick Slider Dots Styles End */

/* List Styles */

.list-style-default {
    list-style: disc;
    padding-inline-start: 1.5rem;
}

.list-style-1 li {
    line-height: 2;
    padding-inline-start: 2rem;
    position: relative;
}

.list-style-1 li:before {
    position: absolute;
    content: '';
    height: 18px;
    width: 18px;
    top: 7px;
    left: 0;
    background-image: url('../images/arrow-right.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    user-select: none;
    pointer-events: none;
}



.inf-mark-stats-box {
    flex-basis: 300px;
}


/* Aside CSS Start */
.aside-sticky-top {
    position: sticky;
    top: 5rem;
}

.aside-sticky-top aside {
    height: calc(100vh - 100px);
}

.tc-navigation {
    height: 100%;
    overflow-y: scroll;
}

.tc-navigation::-webkit-scrollbar {
    width: 5px;
}

.tc-navigation::-webkit-scrollbar-track {
    background: transparent;
}

.tc-navigation::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 20px;
}

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

.content-wrapper>article,
.content-wrapper>footer {
    scroll-padding: 80px 0 0 0;
}

.look-loop {
    padding: 30px 20px;
    min-height: 190px;
}

.ax-left {
    font-size: var(--md);
    padding-right: 70px !important;
}

.ax-loop {
    display: flex;
}

.axad-main {
    align-items: baseline;
    display: flex;
}

.ax-check {
    margin-right: 20px;
}

.ax-content h4 {
    font-size: var(--xs);
    padding-bottom: 5px;
}



.ax-content p {
    font-size: 1rem;
}

.marketing-sec .ax-content {
    padding-right: 50px;
}

.marketing-sec h4 {
    font-size: 1.5rem;
}

.list-style-2 li::before {
    background-image: url(../fonts/paid-marketing-uniqe-check.svg);
}

/* Media Queries Start */

.blog-list {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
}

.search {
    background: #F2F2F2;
    border-radius: 12px;
    font-size: 1.125rem;
    padding: 0 20px 0 55px;
    border: none;
    width: 32%;
    height: 50px;
    line-height: 50px;
}

.search-btn {
    background: none;
    border: none;
    position: absolute;
    left: 15px;
    top: 13px;
    z-index: 9;
    cursor: pointer;
}

.search:focus {
    outline: none;
}

.loader span {
    display: block;
}

.blog-slider .slick-dots li.slick-active {
    border-color: #ffffff;
    background-color: var(--primary-color);
}

<!-- .blog-dots .slick-active button {
    background: var(--primary-color) !important;
} -->

.blog-slider .slick-dots {
    top: auto !important;
    bottom: 10px !important;
}

.services-wrapper .slick-dots li.slick-active button {
    background-color: var(--primary-color);
}

.blog-slider .slick-dots li {
    width: 20px;
    height: 20px;
    padding: 0px;
}

.article-list-item span {
    display: block;
    padding-bottom: 8px;
}

.btn-over {
    margin: -250px 0 0 0;
    position: absolute;
    display: block;
    width: 100%;
    z-index: 9;
    left: 0;
}

.v-foot {
    margin-top: -250px;
}

.rate-box {
    flex-basis: 260px;
}

.rate-box h2 span {
    font-size: 3rem;
}

.publisher-logo-wrapper {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-template-columns: repeat(3, 1fr);
    display: grid;
    gap: 20px;
}

.publisher-logo-single {
    max-width: auto;
    min-height: auto;
    background-color: var(--white);
    padding: var(--padding-lg);
    border-radius: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    position: relative;

}

.publisher-logo-single img {
    max-width: 210px;
    max-height: 180px;
}

.target-list li {
    line-height: 36px;
    font-size: var(--xs);
}

ul.social-list {
    list-style: none;
    text-align: center;
}

ul.social-list li {
    display: inline-block;
    margin: 0 8px;
    width: 12.5%;
    padding:10px 0;
}

ul.social-list li a {
    display: block;
    padding: 20px 0;
}

ul.social-list li a span {
    display: block;
    text-align: center;
    padding-top: 10px;
}

.d-service-loop p {
    display: none;
}

.d-service-loop:hover p {
    display: block;
}

.social-reach .half-md {
    padding: 0px;
}

.social-reach .so-reach-left {
    padding-left: 15%;
}

ul.frame-list {
    list-style: none;
    padding: 0px;
}

ul.frame-list li {
    width: 48%;
    display: inline-block;
    padding: 12px 0 12px 40px;
    position: relative;
    font-size: var(--xs);
}

ul.frame-list li::before {
    position: absolute;
    left: 0px;
    top: 0px;
    content: "";
    background: url(../fonts/brandawareness-check.svg) left 7px no-repeat;
    width: 40px;
    height: 40px;
    background-size: 30px;
}

.main-box {
    padding-top: 100px;
    display: flex;
}

.main-box::before {
    position: absolute;
    top: 0px;
    left: 15.5%;
    width: 71%;
    content: "";
    border-top: solid 2px #000000;
}

.box-loop::before {
    position: absolute;
    top: 0px;
    content: "";
    background: url(../fonts/brandawareness-dot.svg) center top no-repeat;
    height: 80px;
    width: 20px;
}

.box-loop p {
    font-size: 1rem;
    padding-top: 10px;
}

.top-box {
    margin-bottom: 0px;
}

.blog-detail-section .col-md-9 {
    width: 67%;
    padding-right: 20px;
}

.blog-detail-section .col-md-3 {
    width: 33%;
}

ul.breadcrumbs {
    list-style: none;
    margin: 0px 0 25px 0;
    padding: 0px;
}

ul.breadcrumbs li {
    display: inline-block;
    font-size: 14px;
}

ul.breadcrumbs li a:hover {
    color: var(--secondary-color);
}

.blog-content figure {
    margin-bottom: 30px;
}

.blog-content p {
    font-size: 1.125rem;
    line-height: 30px;
    padding-bottom: 25px;
}

.blog-content h3 {
    font-size: 1.5rem;
    padding: 30px 0 10px 0;
}

.blog-content h4 {
    font-size: 1.125rem;
    line-height: 30px;
    padding: 15px 0 5px 0;
}

.blog-detail-section .search {
    width: 100%;
}

.categorie {
    padding: 18px;
    border: solid 1px #BFBFBF;
    border-radius: 8px;
}

.categorie h4 {
    border-bottom: solid 1px #D3D3D3;
    padding-bottom: 15px;
}

.categorie ul {
    margin-top: 10px;
}

.categorie ul li {
    line-height: 36px;
}

.categorie ul li a:hover {
    color: var(--secondary-color);
}

.p-tag ul li {
    display: inline-block;
    margin: 0 5px 10px 0;
}

.p-tag ul li a {
    display: inline-block;
    border: solid 1px var(--secondary-color);
    color: var(--secondary-color);
    padding: 0 15px;
    font-size: 14px;
}

.p-tag ul li a:hover {
    background: var(--secondary-color);
    color: var(--white);
}

.post-loop {
    display: flex;
    padding: 12px 0;
}

.post-pic {
    margin-right: 15px;
}

.post-content p {
    padding-bottom: 5px;
    font-size: 1.125rem;
}

.post-content span {
    color: #868686;
    font-size: 14px;
}

.post-content p a {
    color: var(--base-color);
}

.post-content p a:hover {
    color: var(--secondary-color);
}

/* .blog-d span{ background-color: #000; padding:5px 15px; border-radius:5px;} */
.blog-d span {
    background-color: #000;
    padding: 5px 15px;
    border-radius: 5px;
}
.know-more{ background:#ffffff; color: var(--secondary-color); margin-top: 50px;}

.case-study h1 span{ color: var(--secondary-color); font-weight: 700;}

.case-study-sec h2{ color: var(--white);  font-weight: bold;}
.case-study-sec h2 span{ display: block; font-weight: normal; font-size:24px; text-transform: capitalize;}

.study-slide{ background:url(../fonts/case-study-case-slide-bg.svg) var(--white) center top no-repeat; background-size: cover; border-radius: 12px; text-align: center; box-shadow:6px 6px 20px rgba(0, 0, 0, 0.1); padding:40px 0; margin:-400px 0 0 0; position: relative; z-index: 99; overflow: visible;}

.case-study-slide .slick-slide img{width: 100%;}
.case-study-slide .slick-slide { margin:0 10px;}
.case-study-slide .slick-slide span{ padding-top:15px; display: block;}
.case-study-slide .slick-slide{
    
    align-items: center;
    justify-content: center;
    transition: all 200ms linear;
    transform: scale(0.8);
  }
  .case-study-slide .slick-current {
    transform: scale(1.0);
   
  }

  .case-detail figure{ margin-top: 20px;}
.case-detail figure img{ width: 100%; border-radius: 8px;}
.case-study-list a{ display: inline-block;}
.case-study-list a img{height:250px; object-fit: cover;}
#flip {
   
    text-align: center; position: relative;
   
  }
  

  #panel { position: absolute; top: 30px; width: 230px; left: -130px;
    padding: 15px 20px; border-radius: 8px; box-shadow:0 3px 3px rgba(0, 0, 0, 0.2); background: #ffffff;
    display: none;
  }
  #panel ul{ list-style: none; margin: 0px; padding:0px;}
  #panel ul li{ margin: 0px; padding:0px;}
  #panel ul li a{ display:block; text-align: left; padding:8px 0;  font-size:15px;}
  #panel ul li a:hover{ color: #F05C24; transform: translateX(0px);}
 
  #panel .menu-login{margin: 0px; padding: 0px;}

@media (min-width: 425px) {
    .section-title h3 {
        font-size: 2rem;
    }

}


ul.social-list li span{ display: block; padding: 10px 0 0 0;}

.caption {
    position: relative;
    overflow: hidden;

    /* Only the -webkit- prefix is required these days */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.caption::before {
    content: ' ';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: transparent;
    transition: background .35s ease-out;
}

.caption:hover::before {
    background: rgba(0, 0, 0, .5);
}

.caption__media {
    display: block;
    min-width: 100%;
    max-width: 100%;
    height: auto;
}

.caption__overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    color: white;

    -webkit-transform: translateY(100%);
    transform: translateY(100%);

    transition: -webkit-transform .35s ease-out;
    transition: transform .35s ease-out;
}

.caption:hover .caption__overlay {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.caption__overlay__title {
    -webkit-transform: translateY(-webkit-calc(-100% - 35px));
    transform: translateY(calc(-100% - 35px));
    padding-bottom: 5px;
    font-weight: bold;
    color: var(--primary-color);
    transition: -webkit-transform .35s ease-out;
    transition: transform .35s ease-out;
}

.caption:hover .caption__overlay__title {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
.blog-pic picture img {
    width: 100%;
    border-radius: 16px;
}

.blog-pic picture {
    padding-right: 40px;
}

.post-pic{
    width:130px;
}

.cat-color{
    color: var(--secondary-color);
}
#more-posts .auto-load {
    outline: none;
    background: none;
    border: none;
}

@media (min-width: 576px) {

    .col-sm-6 {
        width: 50%;
        padding: 0 0.5rem;
    }

    .d-sm-grid {
        display: grid;
    }

    .grid-sm-vw-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-sm-gp-1 {
        grid-gap: 0.5rem 1rem;
    }

    .services-wrapper .slick-dots {
        bottom: auto;
        top: 100px;
        text-align: right;
    }

    .fet-project--single {
        margin: 0 0.5rem;
    }

    .section-title h3 {
        font-size: 2.5rem;
    }

    .achievements {
        margin: 0;
    }

    .achievement-wrapper-right {
        grid-template-columns: repeat(2, 1fr);
    }

    .bg-shape {
        top: -10rem
    }

    .bg-shape-home-center {
        top: -18rem;
    }

    .wd-sm-50 {
        width: 50%;
    }

}


@media (min-width: 768px) {

    /* Utilities Classes */
    .text-md-xl {
        font-size: var(--xl);
    }

    .d-flex-sm {
        display: flex !important;
    }

    .bd-r-2-md {
        border-right: 2px solid #ADADAD;
    }

    .social-fixed-icons-left {
        display: block;
    }

    .fet--projects-wrapper .slick-list {
        clip-path: inset(-100vw -100vw -100vw 0);
        overflow: inherit;
        /* padding: 0 10% 0 0 !important; */
    }

    .fet--projects-wrapper .slick-arrow {
        top: -79px;
    }

    .slick-arrow {
        height: 50px;
        width: 50px;
    }

    .fet--projects-wrapper .slick-arrow.slick-prev {
        right: 60px;
    }

    .clients-logo-wrapper {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .client-logo-single {
        min-height: 200px;
        max-width: 200px;
    }

    .client-logo-single img {
        max-width: 110px;
        max-height: 110px;
    }

    .client-logo-single:hover{
        border: solid 1px #38b6ff42;
        background: #38b6ff14;
    }

    .cm-services-slider .slick-list {
        clip-path: inset(-100vw -100vw -100vw 0);
        overflow: inherit;
        /* padding: 0 10% 0 0 !important; */
    }

    .main-footer {
        margin-top: -80px;
    }

    .cpy-rght-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cpy-rght-bar p:first-child {
        margin: 0;
    }

    .cpy-rght-bar p:last-child a {
        padding: var(--padding-sm);
        padding-left: 5px;
        display: inline-block;
    }

    .cpy-rght-bar p a {
        position: relative;
    }

    .cpy-rght-bar p a.terms::after {
        position: absolute;
        right: 0px;
        content: "|";
        top: 3px;
        font-size: 25px;
        font-weight: 100;
    }

}

@media (min-width: 991px) {
    .container {
        max-width: 1200px;
        padding: 0 2rem;
    }

    .py-md-lg {
        padding-top: var(--lg);
        padding-bottom: var(--lg);
    }

    [class*=col-] {
        padding: 0 0.5rem;
    }

    .col-md-3 {
        width: 25%;

    }

    .col-md-4 {
        width: 33.33%;

    }

    .col-md-9 {
        width: 75%;
    }

    .col-md-40 {
        width: 40% !important;
    }

    .col-md-60 {
        width: 60% !important;
    }

    .d-md-block {
        display: block !important;
    }

    .mb-md-0 {
        margin-bottom: 0 !important;
    }

    .mr-md-2 {
        margin-right: 1rem !important;
    }

    .pt-md-6rem {
        padding-top: 6rem !important;
    }

    .pt-md-10rem {
        padding-top: 10rem !important;
    }

    .pt-md-3rem {
        padding-top: 3rem !important;
    }

    .bg-s-contain-md {
        background-size: contain !important;
    }

    .text-md-md {
        font-size: var(--md) !important;
    }

    .text-md-lg {
        font-size: var(--lg) !important;
    }

    .text-md-sm {
        font-size: var(--sm) !important;
    }

    .position-absolute-md {
        position: absolute !important;
    }

    .ml-md-3rem {
        margin-left: 3rem !important;
    }

    .ml-md-5rem {
        margin-left: 5rem !important;
    }

    .mb-md-4 {
        margin-bottom: 4rem !important;
    }

    .mb-md--12rem {
        margin-bottom: -12rem;
    }

    .mb-md--2rem {
        margin-bottom: -2rem !important;
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse !important;
    }

    .text-md-left {
        text-align: left !important;
    }

    .text-md-vertical {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        white-space: nowrap;
        -webkit-writing-mode: vertical-rl;
        writing-mode: vertical-rl;
        text-align: right;
        margin-right: 2rem;
    }

    .menu-toggle[aria-expanded="true"] {
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .menu-toggle[aria-expanded="true"] .hamburger,
    .menu-toggle[aria-expanded="true"] .hamburger:before,
    .menu-toggle[aria-expanded="true"] .hamburger:after {
        background-color: var(--white);
    }

    .has-submenu>.nav-link {
        max-width: 50%;
    }

    .navbar {
        padding-top: 6rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .navbar:not(.submenu) .nav-item:hover .nav-link {
        background-color: var(--base-color, #000);
        color: var(--white, #fff);
    }

    .has-submenu:hover .submenu {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .navbar .nav-item .nav-link {
        padding: var(--padding-md) 0 var(--padding-md) 6rem;
        font-size: 1.6rem;
    }

    .submenu {
        right: 0;
        position: absolute;
        height: 100vh;
        padding: 5rem 0;
        width: 100%;
        top: 0;
        max-width: 50%;
    }

    .hero {
        --font-size-lg: 3.7rem;
        background-size: contain;
    }

    .hero-wrapper {
        display: flex;
        align-items: center;
    }

    .hero-content {
        text-align: left;
        margin-bottom: 0;
        width: 45%;
    }

    .hero-wrapper picture {
        width: 55%;
    }

    .our-clients-wrapper-inner {
        display: flex;
    }

    .our-clients--left {
        width: 60%;
        margin-right: 2rem;
    }

    .our-clients--right {
        width: 40%;
        height: fit-content;
    }

    .bg-shape-home-center {
        top: -22rem;
    }

    .achievements-wrapper {
        display: flex;
        align-items: center;
        min-height: 900px;
        padding-top: 25rem;
    }

    .achievement-wrapper-left {
        max-width: 500px;
    }

    .achievement-wrapper-left .section-title h3,
    .achievement-wrapper-left .section-title mark,
    .achievement-para {
        color: var(--white);
    }

    .achievement-para {
        line-height: 1.4;
    }

    .achievement-wrapper-right {
       /* width: calc(100% - 400px + 3rem);*/
        width: 50%;
        padding-left: 3rem;
        max-width: 500px;
        margin-left: auto;
        display: block !important;
    }

    .achievement-card {
        display: flex;
        flex-direction: column;
        min-height: 218px;
        justify-content: center;
    }

    .clients-logo-wrapper {
        grid-template-columns: repeat(5, 1fr);
    }



    /* Brand CSS Start */

    .half-md {
        width: 50% !important;
        padding: 0 0.5rem;
    }

    .flex-wrapper-md {
        display: flex;
        align-items: center;
    }

    .bm-mod-dy-img {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%) !important;
    }

    .bm-mod-dy-img img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .bg-shape {
        top: -18rem
    }

    .w-v-offer-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
    }

    .w-v-offer-grid-img,
    .w-v-offer-grid-content {
        grid-row: 1/2;
    }

    .w-v-offer-grid-img {
        grid-column: 1/5;
    }

    .w-v-offer-grid-content {
        max-width: 100%;
        grid-column: -3/-1;
        align-self: center;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        top: 0;
    }

    .dots-style-1 {
        bottom: -15px;
    }


}

@media only screen and (min-width:797px) and (max-width:1024px) {
    .rate-box {
        flex-basis: 200px;
    }

    ul.social-list li a span {
        font-size: 13px;
    }

    .social-reach .so-reach-left {
        padding-left: 5%;
    }
}

@media only screen and (min-width:768px) and (max-width:979px) {

    .search {
        width: 48%;
    }

    .marketing-sec .half-md {
        width: 50%;
    }

    .marketing-sec .ax-check img {
        width: 60px;
    }

    .marketing-sec .ax-content {
        padding-right: 30px;
    }

    .blog-slider h2 {
        padding-top: 20px;
    }

    .video-section {
        display: none;
    }

    .v-foot {
        margin: 0px;
    }

    .publisher-logo-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

    }

    ul.social-list li {
        width: 21.5%;
    }

    ul.social-list li a span {
        font-size: 14px;
    }

    .social-reach .so-reach-left {
        padding-left: 5%;
    }

    .blog-detail-section .col-md-9 {
        width: 100%;
    }

    .blog-detail-section .col-md-3 {
        width: 100%;
    }
    .axad-main{ display: block;}

}

@media only screen and (min-width: 320px) and (max-width: 767px) {

    .look-loop {
        min-height: auto;
    }

    .axad-main {
        display: block;
    }

    .ax-left {
        padding-right: 15px !important;
        font-size: 1.4rem;
    }

    .marketing-sec .ax-content {
        padding-right: 15px;
        padding-bottom: 30px;
    }

    .marketing-sec .ax-check img {
        width: 50px;
    }

    .marketing-sec {
        margin-bottom: 0px !important;
    }

    .search {
        width: 100%;
    }

    .blog-slider h2 {
        font-size: 1.5rem;
        padding-top: 20px;
    }

    .blog-slider .slick-dots {
        text-align: left;
    }

    .video-section {
        display: none;
    }

    .v-foot {
        margin: 0px;
    }

    .publisher-logo-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

    }

    .publisher-logo-single {
        padding: 15px;
    }

    .publisher-logo-single img {
        max-height: 100px;
        max-width: 100px;
    }

    ul.social-list li {
        width: 44%;
    }
    ul.social-list li span{display: block;}

    ul.social-list li a span {
        font-size: 14px;
    }

    .social-reach .so-reach-left {
        padding: 0 3%;
    }

    .main-box {
        display: block;
        padding: 0px;
    }

    .main-box::before {
        display: none;
    }

    .box-loop::before {
        display: none;
    }

    .top-box img {
        display: none;
    }

    ul.frame-list li {
        width: 100%;
        padding: 6px 0 12px 40px;
    }

    .blog-detail-section .col-md-9 {
        width: 100%;
    }

    .blog-detail-section .col-md-3 {
        width: 100%;
    }

    .post-loop .post-pic {
        width: 35%;
    }

    .post-loop .post-content {
        width: 65%;
    }

    .post-loop .post-pic img {
        width: 100%;
    }

    /* .hero-brand p br{display:none;}
    .hero-brand h1 br{display:none;}
    h2 br{display:none;} */

    .hero-brand p br {
        display: none;
    }

    .hero-brand h1 br {
        display: none;
    }

    h2 br {
        display: none;
    }
    .email-marketing-grid>article{ border:none;}
    .email-marketing-grid figure img{ width: 60px;}
    .opportunities-box img{width: 60px;}
    .fet-project--single:nth-child(odd){ padding-top: 0px;}
    .fet--project-header picture img{ height: 350px;} 
    .slick-initialized .slick-slide{ padding-top: 25px;}
    .fet--projects-wrapper .slick-arrow{ top:-40px; }
    .know-more{ margin-top:30px;}
    .main-nav a strong{ display: none;}
    .main-nav a i{ font-size: 20px;}
    .main-nav a i.fa-chevron-down{ display: none;}
}

@media only screen and (min-width: 425px) and (max-width: 767px) {
    ul.social-list li {
        width: 27%;
    }

    ul.social-list li a span {
        font-size: 14px;
    }
}