:root {
    --clr-1: 13, 217, 217;
    --clr-2: 27, 153, 199;
    --dark-clr: 26, 37, 59;
    --light-clr: 255, 255, 255;
    --blk-clr: 0, 0, 0;
}

.banner .author img,
.cta-left,
.cta-right,
.leftside,
.logo,
.nav-icons {
    object-fit: contain;
}

* {
    box-sizing: border-box;
}

a,
a.active,
a:active,
a:focus,
a:hover {
    text-decoration: none;
    cursor: pointer;
}

*,
:after,
:before,
ul.c-list li:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
html,
select {
    scrollbar-color: rgba(var(--clr-1), 1) transparent;
}

body,
html {
    scroll-behavior: smooth;
}

body,
select {
    scrollbar-width: 8px;
}

html,
select {
    scrollbar-width: thin;
}

/* Scrollbar base */
::-webkit-scrollbar {
    width: 8px;
}

/* Hide arrows/buttons */
::-webkit-scrollbar-button {
    width: 0;
    height: 0;
    display: none;
}

/* Scrollbar thumb */
::-webkit-scrollbar-thumb {
    background-image: linear-gradient(rgba(20, 20, 40, 1), rgba(0, 255, 255, 1));
    border-radius: 10px;
}

/* Optional: Track style */
::-webkit-scrollbar-track {
    background: transparent;
}

body::-webkit-scrollbar {
    display: none;
}

::-moz-selection {
    color: rgba(var(--light-clr), 1);
    background: rgba(var(--clr-2), 1);
}

::selection {
    color: rgba(var(--light-clr), 1);
    background: rgba(var(--clr-2), 1);
}

html {
    /* scroll-snap-type: y mandatory; */
}

body {
    margin: 0;
    right: 0;
    -webkit-transition: margin-left .3s ease-in-out;
    transition: margin-left .3s ease-in-out;
    /* -webkit-overflow-scrolling: touch; */
    font-family: "Outfit", sans-serif !important;
    line-height: 1.5;
    color: rgba(var(--light-clr), 1);
    background: rgba(var(--dark-clr), 1);
    overflow-x: hidden;
    font-size: 20px;
    font-weight: 300;
    
}

footer,
section {
    overflow-x: hidden;
    overflow-y: clip;
}

#text,
.drop-down-cont,
.gallery,
.service .image {
    overflow: hidden;
}

:after,
:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

a {
    outline: 0;
    color: inherit;
}

a.active,
a:active,
a:focus,
a:hover {
    color: rgba(var(--clr-1), 1) !important;
    outline: 0 !important;
}

audio,
img,
video {
    max-width: 100%;
    height: auto;
}

.fw-700,
b,
strong {
    font-weight: 700;
}

.heading,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-style: normal;
    font-family: "Josefin Sans", sans-serif;
    line-height: 1.2;
    transition: .8s;
    text-transform: capitalize;
}

.active-btn {
    color: rgba(var(--clr-1), 1);
    padding: 6px 12px;
    border-radius: 30px;
}

.f-140 {
    font-size: 140px;
}

.f-100 {
    font-size: 100px;
}

.f-80 {
    font-size: 80px;
}

.f-50 {
    font-size: 50px;
}

.f-60 {
    font-size: 60px;
}

.f-40 {
    font-size: 40px;
}

.f-36 {
    font-size: 36px;
}

.f-30 {
    font-size: 30px;
}

.f-26 {
    font-size: 26px;
}

.f-24 {
    font-size: 24px;
}

.f-22 {
    font-size: 22px;
}

.f-20 {
    font-size: 20px;
}

.f-18 {
    font-size: 18px;
}

.f-16 {
    font-size: 16px;
}

.font-2 {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
}

.font-3 {
    font-family: "Cinzel", serif;
    font-optical-sizing: auto;
}

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

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

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

.clr-dark {
    color: rgba(var(--blk-clr));
}

.clr-1,
.drop-down:hover .a {
    color: rgba(var(--clr-1), 1);
}

.clr-2 {
    color: rgba(var(--clr-2), 1);
}

/* .clr-l,
.service:hover .clr-2 {
    color: rgba(var(--light-color), 1) !important
} */

.bg-1,
.bg-d .btn,
.bg-d button,
.c-list li:before,
.nav-bar .icon,
.process-step:nth-child(odd),
.top-bar {
    background: rgba(var(--clr-1), 1);
}

.bg-2,
.process-step:nth-child(2n) {
    background: rgba(var(--clr-2), 1);
}

.bg-l {
    background: rgba(var(--light-color), 1);
    border-radius: 50px;
}

.bg-d {
    background: linear-gradient(309deg, #1C7DCB -10%, #18CFC0 110%);
}

.bg-1-l {
    background: rgba(var(--clr-1), .12);
}

.bg-light {
    background: #eee !important;
}

.form-control,
button,
input,
select,
select input {
    background: rgba(var(--dark-color), 1);
    transition-duration: .8s;
}

.btn,
button {
    font-family: "Josefin Sans", sans-serif !important;
    font-weight: 600;
    color: rgba(var(--light-color), 1);
    text-transform: uppercase;
    padding: 3px 3px 3px 34px !important;
    border-radius: 30px !important;
    font-size: inherit;
    border: 1px solid rgba(var(--clr-1), 1);
    transition: 0.8s;
}

.btn-2 {
    font-family: "Josefin Sans", sans-serif !important;
    font-weight: 600;
    background: #465289;
    color: rgba(var(--light-clr)) !important;
    padding: 16px 30px;
    border-radius: 60px;
    transition: 0.8s;
}

.btn-2:hover,
.btn-3:hover {
    background: rgba(var(--clr-1), 1);
    color: rgba(var(--light-clr), 1) !important;
}

.btn-3 {
    padding: 11px 30px !important;
}

.btn-cir {
    padding: 0 !important;
}

.btn.active,
.btn:hover,
button.active,
button:hover {
    background: rgba(var(--clr-1), 1) !important;
    color: rgba(var(--light-clr), 1) !important;
}

.btn:hover .btn-icon {
    rotate: 35deg;
    transition: 0.8s;
    background: rgba(var(--blk-clr), 1);
}

.btn-icon {
    background: rgba(var(--clr-1), 1);
    border-radius: 60px;
    height: 48px;
    width: 48px;
    display: inline-block;
    padding: 10px;
}

.bg-2 .btn,
.bg-2 .btn.active,
.bg-2 .btn:hover,
.bg-2 .icon,
.bg-2 button,
.bg-2 button.active,
.bg-2 button:hover {
    background: rgba(var(--clr-1), 1) !important;
    border-color: rgba(var(--light-color), 1) !important;
}

.bg-2 .btn.active,
.bg-2 .btn:hover,
.bg-2 button.active,
.bg-2 button:hover {
    border-radius: 0 10px !important;
}

.form-control,
input,
select,
select input {
    color: #6e6e6e;
    border: none;
    padding: 18px 20px !important;
    box-shadow: unset !important;
    height: auto !important;
    border-radius: 0px !important;
    overflow: hidden;
    border-bottom: 1px solid #707070;
    /* margin-top: 30px; */
}

.bg {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.form-control:focus,
input:focus {
    outline: 0;
    background: rgba(var(--light-color), .5);
    color: rgba(var(--dark-color), 1) !important;
    border: 1px solid rgba(var(--clr-1), 1);
    box-shadow: none;
}

.bg-d select option,
.c-list li:before,
.icon,
.service:hover {
    color: rgba(var(--light-color), 1);
}

.form-control::placeholder,
input::placeholder {
    color: rgba(var(--light-color), 1);
    opacity: 1
}

input.phone,
input[name=phone] {
    /* padding-left: 75px !important */
}

.iti {
    display: block !important;
    width: 100% !important;
}

.icona:hover .icon,
.iti__country-list {
    background: rgba(var(--dark-color), 1) !important;
    border-color: rgba(var(--clr-2), 1) !important;
}

.iti input:focus .iti__selected-dial-code {
    color: rgba(var(--dark-color), 1) !important;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: rgba(var(--clr-3), .8);
    border-radius: 25px 0 0 25px;
}

.bg-d .form-control,
.bg-d input,
.bg-d select,
.text-white .form-control,
.text-white input,
.text-white select {
    background: rgba(var(--light-color), .5);
    color: rgba(var(--dark-color), 1) !important;
}

.bg-d .form-control:focus,
.bg-d input:focus {
    background: rgba(var(--clr-2), 1) !important;
    border: 1px solid rgba(var(--clr-2), 1);
}

.bg-d .form-control::placeholder,
.bg-d input::placeholder {
    color: rgba(var(--dark-color), 1);
    opacity: 1;
}

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

label.h {
    z-index: -999999999;
}

input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
    font-size: 20px;
}

.slick-dots li button,
.slick-next,
.slick-next:focus,
.slick-next:hover,
.slick-prev,
.slick-prev:focus,
.slick-prev:hover {
    background: 0 0 !important;
}

.icon,
.process .box:before {
    background: rgba(var(--clr-1), 1);
}


.icon {
    height: 40px;
    width: 40px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(var(--clr-2), 1);
}

.nav-bar .icon {
    border-color: rgba(var(--light-color), 1);
}

.platforms .slider img {
    height: 36px;
    width: 80%;
    object-fit: contain;
    object-position: center;
}


.publishing.platforms img {
    height: 80px;
}

#text {
    animation-delay: 0s;
    animation-duration: 2s;
    animation-name: text-a;
    animation-iteration-count: infinite;
}

button.btn-close {
    position: absolute;
    right: 0;
    padding: 10px !important;
    top: -5px;
    opacity: 1;
    background: #fff;
    z-index: 99999999999;
}

.cls-btn {
    position: absolute;
    top: -10px;
    right: 10px;
}

@supports (-moz-appearance: none) {
    select {
        -moz-appearance: none !important;
        background: url(data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==) right center no-repeat !important;
        background-position: calc(100% - 5px) center !important;
    }
}

/* global :end */
.btn-alg {
    top: 2px;
    position: relative;
}

.drop-down-cont {
    box-shadow: 0 0 36px rgba(var(--dark-color), .3);
    top: 100%;
    width: 330px;
    transform: translateX(-50%) translateY(10px);
    border-radius: 20px 5px;
    max-height: 0;
    transition: max-height .8s ease-out;
    z-index: 99;
}

.drop-down-cont {
    position: absolute;
    right: 50%;
    left: 50%;
    overflow: hidden;
    background: #4f4b89;
}

.drop-down:hover .drop-down-cont {
    max-height: 100vh;
}

header {
    padding-top: 15px;
    position: fixed;
    width: 100%;
    z-index: 999999;
}

.banner-img {
    height: 1370px;
    background-position: center;
    background-size: cover;
}

.about-side {
    float: right;
    margin: -100px -120px 0px 0;
    height: 460px;
    width: 480px;
}

.about-side img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.services {
    clip-path: polygon(100% 0%, 0% 0%, 0.00% 98.79%, 2.22% 99.12%, 4.44% 99.38%, 6.67% 99.56%, 8.89% 99.66%, 11.11% 99.68%, 13.33% 99.61%, 15.56% 99.45%, 17.78% 99.22%, 20.00% 98.92%, 22.22% 98.55%, 24.44% 98.13%, 26.67% 97.67%, 28.89% 97.18%, 31.11% 96.67%, 33.33% 96.16%, 35.56% 95.67%, 37.78% 95.20%, 40.00% 94.78%, 42.22% 94.40%, 44.44% 94.09%, 46.67% 93.85%, 48.89% 93.69%, 51.11% 93.61%, 53.33% 93.61%, 55.56% 93.70%, 57.78% 93.88%, 60.00% 94.13%, 62.22% 94.45%, 64.44% 94.83%, 66.67% 95.26%, 68.89% 95.73%, 71.11% 96.23%, 73.33% 96.74%, 75.56% 97.24%, 77.78% 97.73%, 80.00% 98.19%, 82.22% 98.60%, 84.44% 98.96%, 86.67% 99.26%, 88.89% 99.48%, 91.11% 99.62%, 93.33% 99.68%, 95.56% 99.65%, 97.78% 99.54%, 100.00% 99.35%);
    background: rgba(var(--light-clr));
    height: 1300px;
}

.gradient-text {
    font-size: 140px;
    color: #1c7ccb;
    background: linear-gradient(180deg, #1C7DCB 27%, #18CFC0 54%, #ffffff 71%, #F5F5F5 0%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: -75px;
    letter-spacing: 20px;
}

.clipped-mask {
    clip-path: polygon(0% 7%, 6% 7%, 6% 0%, 100% 0, 100% 100%, 0 100%);
    height: 420px;
    width: 100%;
    max-height: 385px;
    background: no-repeat center / cover;

}

.overlay-ser {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    width: 100%;
    height: 0;
    cursor: pointer;
    background: linear-gradient(315deg, #1c7dcbe0, #18cfc0c7);
    transition: height 0.8s ease;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
}

.ser-1:hover .overlay-ser,
.ser-2:hover .overlay-ser {
    height: 100%;

}

.ser-1:hover .ser-head,
.ser-2:hover .ser-head {
    display: none;
}

.ser-2 {
    height: 420px;
    width: 100%;
    background: linear-gradient(315deg, #1c7ccb, #18cfc0);
    max-height: 385px
}

.clipped-mask-2 {
    clip-path: polygon(0 0, 94% 0, 94% 6%, 100% 6%, 100% 100%, 0 100%);
}

.clipped-mask-3 {
    clip-path: polygon(0 0, 100% 0%, 100% 0, 100% 100%, 7% 100%, 7% 93%, 0% 93%);

}

.no-mask {
    clip-path: none;
}

.clipped-mask-4 {
    clip-path: polygon(0 0, 100% 0, 100% 94%, 93% 94%, 93% 100%, 0 100%);
}

.footer,
.footer-form {
    background: #111111;
}

.list-side {
    padding-top: 68px;
}

.border-top {
    border-top: var(--bs-border-width) var(--bs-border-style) #323232 !important;
}

.accordion-item {
    border: 1px solid rgba(var(--clr-1), 1);
    background: transparent;
    color: inherit;
    margin: 0 0 14px 0;
    border-radius: 5px;
}

.accordion-button {
    border-radius: 5px !important;
    background: inherit;
    color: inherit;
    padding: 20px 20px !important;
    font-size: 20px;
    border: 1px solid rgba(var(--clr-1), 1);
    text-transform: capitalize;
}

.accordion-button:not(.collapsed) {
    color: inherit !important;
    background-color: inherit;
    box-shadow: none;
}

.accordion-button::after {
    background-image: url(../img/icons/plus.svg);
    transition: 0.4s;
}

.accordion-button:not(.collapsed)::after {
    background-image: url(../img/icons/minus.svg);
    transform: rotate(0);
    margin-bottom: -15px;
    transition: 0.4s;
}

.adustment {
    display: flex;
    align-items: end;
    float: inline-end;
    justify-content: end;
}

.testi-bg {
    height: 710px;
    background: center / cover no-repeat;
    background-attachment: fixed;
}

.slider-item {
    background: #E4F8FF;
    height: 312px;
    width: 312px;
    padding: 20px 27px 10px;
    border-radius: 10px;
    margin: 0 17px;
}

.qoma-img {
    margin-bottom: -10px;
}

.testi-text {
    width: 400px;
    padding: 0 100px 0 0px;
}

.port-img {
    margin-top: 24px;
}

.portfolio {
    background: #1C2840 url(../img/portfolio/bg.png) no-repeat;
    height: 1250px;
    padding-top: 110px;
    background-position: 190px 110px;
    background-size: 1690px;
}

.avhievement::before {
    content: url(../img/home/ach-bg.png);
    position: absolute;
    right: -160px;
    top: 24%;
    z-index: -1;
}

.ach-mask {
    clip-path: polygon(81% 0, 100% 14%, 100% 100%, 75% 100%, 19% 100%, 0 86%, 0 0);
    height: 590px;
}

.ach-mask img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.number-bg {
    background: #000;
    padding: 60px 30px;
}

.gradient-text-2 {
    font-size: 140px;
    letter-spacing: 14px;
    background: linear-gradient(180deg, #1e223b 39%, #F26E22 85%, #F26E22 0%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.1;
    margin-top: -80px;
    position: relative;
    z-index: -1;
}

.gradient-text-3 {
    font-size: 140px;
    letter-spacing: 14px;
    background: linear-gradient(180deg, #105974, #1A253B 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: -1;
}

section.process-2 {
    background-image: url(../img/services/circle-left.png), url(../img/services/circle-right.png);
    background-repeat: no-repeat;
    background-position-y: top, bottom;
    background-position-x: left, right;
    background-attachment: fixed;
}

.process2-item {
    background: rgb(255 255 255 / 1%);
    backdrop-filter: blur(10px) brightness(1.3);
    -webkit-backdrop-filter: blur(8px) brightness(1.5);
    margin-top: 20px;
    padding: 40px 24px 0px 24px;
    border-radius: 20px;
}

.process2-cta {
    padding: 65px 0;
    background: no-repeat;
}

.process-2-text {
    margin-top: -100px;
}

.solution-bg {
    height: auto;
    background: center / cover no-repeat;
}

.sol-bg1 {
    background: linear-gradient(130deg, #1C7DCB -20%, #18CFC0 100%);
}

.sol-bg2 {
    background: linear-gradient(130deg, #18CFC0 -20%, #1C7DCB 100%);
}

.sol-item {
    border-radius: 5px;
    margin-top: 12px;
}

.genres {
    height: 114vh;
    padding: 120px 0px 0px 0px
}

.padding-gen {
    padding: 0 0 0 157px;
}

.gen-item.slick-slide.slick-current.slick-active {
    height: 879px;
}

.genre-slider-nav.slick-initialized.slick-slider {
    top: -660px;
    left: 550px;
}

.gen-item img {
    height: 100%;
}

.gen-nav.slick-slide {
    height: 370px;
}

.gen-nav.slick-slide img {
    height: 100%;
}

.gen-item-img {
    height: 90%;
}

.gen-text-pad {
    padding: 10px 0 0 190px;
}

.cta-bg::before {
    content: "";
    background-image: url('../img/home/cta-bg.svg');
    position: absolute;
    z-index: -1;
    height: 300px;
    width: 100%;
    background-repeat: no-repeat;
}

.cta-bg {
    height: 300px;
}

.pro-item-bg {
    clip-path: polygon(0% 8.5%, 1.5% 8%, 1.5% 0%, 98.5% 0%, 98.5% 8.5%, 100% 8.5%, 100% 92.5%, 98.5% 92.5%, 98.5% 100%, 1.5% 100%, 1.5% 92%, 0% 92%);
    background: rgb(255 255 255 / 15%);
    backdrop-filter: blur(8px) brightness(1.5);
    -webkit-backdrop-filter: blur(8px) brightness(1.5);
    margin-top: 20px;
}

/* .process-sec{
    clip-path: polygon(100% 100%, 0% 100% , 0.00% 6.38%, 2.22% 6.76%, 4.44% 7.06%, 6.67% 7.27%, 8.89% 7.38%, 11.11% 7.40%, 13.33% 7.32%, 15.56% 7.15%, 17.78% 6.88%, 20.00% 6.53%, 22.22% 6.10%, 24.44% 5.62%, 26.67% 5.08%, 28.89% 4.51%, 31.11% 3.93%, 33.33% 3.34%, 35.56% 2.77%, 37.78% 2.23%, 40.00% 1.73%, 42.22% 1.30%, 44.44% 0.94%, 46.67% 0.66%, 48.89% 0.47%, 51.11% 0.38%, 53.33% 0.39%, 55.56% 0.49%, 57.78% 0.69%, 60.00% 0.98%, 62.22% 1.35%, 64.44% 1.79%, 66.67% 2.29%, 68.89% 2.84%, 71.11% 3.41%, 73.33% 4.00%, 75.56% 4.58%, 77.78% 5.15%, 80.00% 5.68%, 82.22% 6.16%, 84.44% 6.58%, 86.67% 6.92%, 88.89% 7.17%, 91.11% 7.34%, 93.33% 7.41%, 95.56% 7.37%, 97.78% 7.25%, 100.00% 7.02%);

} */
.process-bg {
    background: center / cover no-repeat;
}

.hvr-btn {
    transition: all .7s ease-out;
    opacity: 0;
    transform: translateY(90px);
}

.service-provide:hover .hvr-btn {
    transition: all .7s ease-out;
    opacity: 1;
    transform: translateY(0px);
}

.service-provide:hover .s-count {
    transition: transform .7s ease-out;
    transform: translateX(20px);
}

.s-count {
    transition: transform .7s ease-out;
}

.process-sec a:hover {
    color: #fff !important;
}

.elememt::before {
    content: url(../img/home/probg-1.svg);
    position: absolute;
    right: -100px;
    top: 80px;
}

.elememt-2::before {
    content: "";
    position: absolute;
    left: 90px;
    bottom: 40px;
    background-image: url(../img/home/probg-2.svg);
    height: 16%;
    width: 16%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.footer-form .form-control {
    margin-top: 30px;
}

.banner-inner {
    padding: 120px 0px 0 0;
    background: bottom / cover no-repeat;
    height: 100vh;
}

/* contact css */
.contact-banner,
.about-banner {
    height: auto;
    padding: 250px 0px 210px 0;
    background: top / cover no-repeat;
}

.brief-bg {
    border-radius: 80px 0 0 80px;
    background: center / cover no-repeat fixed;
}

.who-bg {
    background: center / cover no-repeat fixed #F3F3F3;
}

.contact-form .form-control {
    background: #1B99C7;
    border-radius: 35px !important;
    color: #D1D1D1;
    padding: 15px 22px !important;
    font-size: 18px;
}

.brief-border {
    border-bottom: 1px solid #1B99C7;
}

.about-img img {
    border-radius: 20px;
}

.why-num {
    display: inline-block;
    background: #1B99C7;
    border-radius: 60px;
    height: 88px;
    width: 88px;
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
}

.why-num h3 {
    margin: 0 !important;
    line-height: 3px;
    padding-top: 3px;
}

.bor::after {
    content: "";
    height: 100%;
    background: antiquewhite;
    width: 1px;
    position: absolute;
    left: 50%;
    top: 0;
}

.why-choose::after {
    content: "";
    background: url(../img/about/before.png) center / cover no-repeat;
    top: 4%;
    position: absolute;
    height: 260px;
    width: 290px;
    left: 2%;
}

.cta-2 {
    background: center / cover no-repeat fixed;
}

.nav-link {
    border: 1px solid #0DD9D9;
    color: #fff;
    padding: 15px 20px 10px 20px !important;
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
}

.about-service::before {
    content: "";
    background-image: url(../img/services/circle-1.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 40%;
    height: 1842px;
    width: 612px;
    right: 0;
    z-index: -1;
}

.types-bg {
    background: #404B61;
    clip-path: polygon(0% 5%, 3% 5%, 3% 0%, 97% 0%, 97% 5%, 100% 5%, 100% 95%, 97% 95%, 97% 100%, 3% 100%, 3% 95%, 0% 95%);
    padding: 50px 40px 50px 70px;
}

.publishing-types .nav-link {
    font-size: 24px;
    margin-top: 15px;
}

.publishing-types {
    background-image: url(../img/services/types-bg-1.png), url(../img/services/types-bg-2.png);
    background-repeat: no-repeat;
    background-position-y: top, bottom;
    background-position-x: left, right;
}

.case-content {
    background: #1A253B;
    border: 1px solid #0DD9D9;
}

.book-cases {
    background-image: url(../img/services/case-bg1.png), url(../img/services/case-bg2.png);
    background-repeat: no-repeat;
    background-position-y: top, top;
    background-position-x: left, right;
    /* background-attachment: fixed; */
}

.key-points p {
    margin-top: 10px;
}

.process2-item p {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-width: none;
    height: 176px;
}

.scroll {
    background-color: #1A253B;
    padding: .5rem 0px !important;
    transition: .4s;
    filter: drop-shadow(0px 4px 36px #ffffff2f);
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width:1600px) {
    body {
        font-size: 18px;
    }

    .gen-nav.slick-slide {
        height: 320px;
    }

    .elememt-2::before {
        left: 0px;
    }

    .f-80 {
        font-size: 60px;
    }

    .banner-img {
        height: 1230px;
    }

    .clipped-mask,
    .ser-2 {
        max-height: 355px;
    }

    .gen-item.slick-slide.slick-current.slick-active {
        height: 829px;
    }

    .genres {
        height: 144vh;
        padding: 120px 0px 0px 0px;
    }

    .gen-text-pad {
        padding: 10px 0 0 180px;
    }

    .gradient-text {
        font-size: 120px;
    }

    .f-50 {
        font-size: 46px;
    }

    .f-18 {
        font-size: 16px;
    }

    .f-30 {
        font-size: 24px;
    }

    .f-60 {
        font-size: 48px;
    }

    .process2-item p {
        height: 176px;
        text-wrap-style: balance;
    }

    .f-40 {
        font-size: 36px;
    }

    .btn-3 {
        padding: 13px 30px !important;
    }
}

@media (max-width:1367px) {
    body {
        font-size: 18px;
    }

    .banner-img {
        height: 1060px;
    }

    .clipped-mask,
    .ser-2 {
        max-height: 355px;
    }

    .f-18 {
        font-size: 16px;
    }

    .cta-bg::before {
        left: -80px;
        width: 1300px;
    }

    .f-140 {
        font-size: 110px;
    }

    .padding-gen {
        padding: 0 0 0 107px;
    }

    .gen-nav.slick-slide {
        height: 310px;
    }

    .ach-mask {
        height: 530px;
    }

    .btn,
    button {
        font-size: 16px !important;
    }

    .btn-icon {
        height: 45px;
        width: 45px;
        /* padding: 7px; */
    }

    .f-50 {
        font-size: 38px;
    }

    .about-side {
        float: right;
        margin: -70px -150px 0px 0;
        height: 360px;
        width: 430px;
    }

    .portfolio {
        background-position: 10px 130px;
        height: 1100px;
        background-size: 1440px;
    }

    .gen-item.slick-slide.slick-current.slick-active {
        height: 688px;
    }

    .gen-text-pad {
        padding: 10px 0 0 150px;
    }

    .genre-slider-nav.slick-initialized.slick-slider {
        top: -540px;
        left: 440px;
    }

    .solution-bg {
        height: 120vh;
    }

    .f-24 {
        font-size: 21px;
    }

    .f-40 {
        font-size: 34px;
    }

    .avhievement::before {
        right: -230px;
        top: 37%;
    }

}

@media (max-width:1280px) {
    .cta-bg::before {
        left: -20px;
        width: 1200px;
        background-size: contain;
        top: 10px;
    }

    .f-80 {
        font-size: 50px;
    }

    .f-36 {
        font-size: 30px;
    }

    .ach-mask {
        height: 410px;
    }

    .number-bg {
        padding: 30px 25px;
    }

    .gradient-text-2 {
        margin-top: -30px;
        font-size: 110px;
    }

    .portfolio {
        height: auto;
    }
}

@media (max-width:1199px) {
    .cta-bg::before {
        left: -80px;
        width: 1150px;
        top: 13px;
    }

    .process2-item p {
        height: 156px;
    }
}

@media screen and (max-width: 986px) {
    .process2-item p {
        height: 106px;
    }

    .f-80 {
        font-size: 44px;
    }
}

@media screen and (max-width: 720px) {
    .nav-bar.active {
        transform: translateX(0);
    }
        .nav-bar {
        background: rgba(var(--clr-2), 1);
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transform: translateX(200%);
        z-index: 99999999;
        transition: .8s;
        padding-left: 20px;
        padding-right: 20px;
        color: rgba(var(--light-color), 1);
        overflow-y: scroll;
        padding-top: 30px;
    }

    .drop-down-cont {
        height: auto !important;
        max-height: unset !important;
        background: 0 0;
        padding: 0 0 0 10px;
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        transform: translate(0);
        border-radius: unset;
        width: auto;
        box-shadow: none;
    }

    .nav-list li {
        padding-bottom: 10px;
    }

    .banner-inner {
        padding: 150px 0px 40px 0;
        height: auto;
    }
}

@media screen and (max-width: 576px) {
    .banner-image{
        padding: 20px 0 0 14px;
    }
    .publishing-types {
        background-image: url(../img/services/types-bg-2.png);
        background-repeat: no-repeat;
        background-position: bottom;
    }
    .types-bg{
        clip-path: polygon(0% 3%, 3% 3%, 3% 0%, 97% 0%, 97% 3%, 100% 3%, 100% 97%, 97% 97%, 97% 100%, 3% 100%, 3% 97%, 0% 97%);
        margin-top: 30px;
        padding: 50px 30px 43px 30px;
    }
    .drop-down-cont{
        top: 10px;
    }
    .list-side {
    padding-top: 40px;
    }
    .solution-bg {
        height: 170vh;
    }
    .f-20 {
        font-size: 17px;
    }
    .portfolio {
        height: auto;
        padding: 60px 0;
    }
    .pro-item-bg {
        clip-path: polygon(0% 6%, 4.5% 6%, 4.5% 0%, 95.5% 0%, 95.5% 6%, 100% 6%, 100% 94%, 95% 94%, 95% 100%, 4.5% 100%, 4.5% 94%, 0% 94%);
    }    
    .ach-mask {
        height: 400px;
    }

    .avhievement::before {
        right: -130px;
        top: 25%;
    }

    .number-bg {
        background: #000000ab;
    }

    .f-100 {
        font-size: 62px;
    }

    .f-30 {
        font-size: 26px;
    }

    .gradient-text {
        margin-bottom: -45px;
        letter-spacing: 10px;
        font-size: 70px;
    }

    .services {
        height: auto;
    }

    .f-80 {
        font-size: 44px;
    }

    body {
        font-size: 16px;
    }

    .btn-icon {
        height: 35px;
        width: 35px;
        padding: 7px 10px 10px 11px;
    }

    .btn,
    button {
        font-size: 14px !important;
    }

    .banner-img {
        height: 1070px;
        padding-top: 80px !important;
    }

    .about-side {
        margin: -50px -150px 0px 0;
    }

    .services {
        clip-path: polygon(100% 0%, 0% 0%, 0.00% 98.87%, 2.00% 98.89%, 4.00% 98.92%, 6.00% 98.94%, 8.00% 98.95%, 10.00% 98.97%, 12.00% 98.98%, 14.00% 98.99%, 16.00% 99.00%, 18.00% 99.00%, 20.00% 99.00%, 22.00% 98.99%, 24.00% 98.99%, 26.00% 98.98%, 28.00% 98.96%, 30.00% 98.95%, 32.00% 98.93%, 34.00% 98.90%, 36.00% 98.88%, 38.00% 98.85%, 40.00% 98.83%, 42.00% 98.80%, 44.00% 98.77%, 46.00% 98.74%, 48.00% 98.71%, 50.00% 98.68%, 52.00% 98.65%, 54.00% 98.62%, 56.00% 98.60%, 58.00% 98.57%, 60.00% 98.55%, 62.00% 98.53%, 64.00% 98.51%, 66.00% 98.50%, 68.00% 98.49%, 70.00% 98.48%, 72.00% 98.47%, 74.00% 98.47%, 76.00% 98.47%, 78.00% 98.48%, 80.00% 98.49%, 82.00% 98.50%, 84.00% 98.51%, 86.00% 98.53%, 88.00% 98.55%, 90.00% 98.57%, 92.00% 98.60%, 94.00% 98.62%, 96.00% 98.65%, 98.00% 98.68%, 100.00% 98.71%);
    }

    .f-36 {
        font-size: 24px;
    }

    .f-22 {
        font-size: 18px;
    }

    .f-60 {
        font-size: 30px;
    }

    .cta-bg::before {
        display: none;
    }

    .btn-3 {
        padding: 7px 30px !important;
    }

    .cta-bg {
        height: auto;
    }

    .genres {
        padding: 40px 0px 0px 0px;
    }

    .padding-gen {
        padding: 0 0 0 80px;
    }

    .gen-item-img {
        height: auto;
    }

    .genre-slider-nav.slick-initialized.slick-slider {
        top: -140px;
        left: -30px;
    }

    .gen-nav.slick-slide {
        height: 140px;
    }

    .gen-text-pad {
        padding: 10px 0 0 90px;
    }

    .f-50 {
        font-size: 30px;
    }

    .f-18 {
        font-size: 16px;
    }

    .f-24 {
        font-size: 22px;
    }

    .form-control,
    input,
    select,
    select input {
        margin-top: 0px;
    }

    .adustment {
        display: block;
        align-items: unset;
        float: unset;
    }

    .testi-bg {
        padding: 50px 0;
        height: auto;
        background-position: right;
    }

    .contact-banner,
    .about-banner {
        padding: 144px 0px;
    }

    .brief-bg {
        border-radius: 60px 0 0 60px;
    }

    .contact-form .form-control {
        border-radius: 30px !important;
    }

    .f-40 {
        font-size: 30px;
    }

    .process2-cta {
        padding: 72px 10px 20px 10px;
        background: no-repeat;
        height: 280px;
        background-size: cover;
    }

    .process2-item p {
        height: auto;
    }

    .process-2-text {
        margin-top: -68px;
    }

    .f-140 {
        font-size: 72px;
    }

    .gradient-text-3 {
        letter-spacing: 6px;
    }
    .genres {
        height: 96vh;
    }
    .bor::after{
        display: none;
    }
    .why-choose::after{
        top: 9%;
        position: absolute;
        height: 150px;
        width: 160px;
        left: 50%;
    }
}

@media screen and (max-width: 430px) {
    .process2-cta {
        padding: 32px 10px 20px 10px;
    }
}