/*
! tailwindcss v3.2.1 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

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

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

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

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

html,body {
  font-family: Poppins, sans-serif;
}

html {
  scroll-behavior: smooth;
}

.container {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::-webkit-backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 475px) {
  .container {
    max-width: 475px;
  }
}

@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1600px) {
  .container {
    max-width: 1600px;
  }
}

/* -----------------------------------header starts---------------------------------- */

@media (min-width: 1024px) {
  .burger-icon {
    display: none;
  }
}

.burger-icon img {
  width: 100%;
  max-width: 25px;
}

@media (min-width: 640px) {
  .burger-icon img {
    max-width: 30px;
  }
}

.logo-main {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .logo-main {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

.header-main {
  position: sticky;
  top: 0px;
  z-index: 30;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.nav-menu ul {
  display: flex;
  align-items: center;
}

.nav-menu,.start-project {
  display: none;
}

@media (min-width: 1024px) {
  .nav-menu,.start-project {
    display: block;
  }
}

.nav-menu ul li a,.mobile-nav ul li a {
  display: block;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  line-height: 26px;
}

@media (min-width: 1280px) {
  .nav-menu ul li a,.mobile-nav ul li a {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 28px;
  }
}

@media (min-width: 1600px) {
  .nav-menu ul li a,.mobile-nav ul li a {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px;
  }
}

.nav-menu ul li ul li a,.mobile-nav ul li ul li a {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 1280px) {
  .nav-menu ul li ul li a,.mobile-nav ul li ul li a {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 1600px) {
  .nav-menu ul li ul li a,.mobile-nav ul li ul li a {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.nav-menu ul li ul li,.mobile-nav ul li ul li {
  padding-bottom: 0.25rem;
}

.nav-menu ul li a:hover, .mobile-nav ul li a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.header-main .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

@media (min-width: 1600px) {
  .header-main .container {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}

.start-project a,.mobile-start-project a {
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  border-radius: 25px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(49 61 90 / var(--tw-border-opacity));
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-right: 10px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  line-height: 26px;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

@media (min-width: 1280px) {
  .start-project a,.mobile-start-project a {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 28px;
  }
}

@media (min-width: 1600px) {
  .start-project a,.mobile-start-project a {
    padding-right: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px;
  }
}

.start-project a:hover, .mobile-start-project a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
  filter: drop-shadow(-5px 10px 30px rgba(0, 0, 0, 0.25));
}

.start-project a span,.mobile-start-project a span {
  margin-right: 6px;
  display: flex;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
}

@media (min-width: 1280px) {
  .start-project a span,.mobile-start-project a span {
    height: 32px;
    width: 32px;
  }
}

@media (min-width: 1600px) {
  .start-project a span,.mobile-start-project a span {
    height: 34px;
    width: 34px;
  }
}

.start-project a:hover span,.mobile-start-project a:hover span {
  --tw-bg-opacity: 1;
  background-color: rgb(78 172 145 / var(--tw-bg-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.start-project a span img,.mobile-start-project a span img {
  height: auto;
  width: 100%;
  max-width: 16px;
}

@media (min-width: 1280px) {
  .start-project a span img,.mobile-start-project a span img {
    max-width: 18px;
  }
}

@media (min-width: 1600px) {
  .start-project a span img,.mobile-start-project a span img {
    max-width: 20px;
  }
}

.nav-logo {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
}

@media (min-width: 1024px) {
  .nav-logo {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
}

@media (min-width: 1600px) {
  .nav-logo {
    gap: 0.75rem;
  }
}

.logo-image a img {
  width: 100%;
}

@media (min-width: 1280px) {
  .logo-image a img {
    max-width: 47px;
  }
}

@media (min-width: 1600px) {
  .logo-image a img {
    max-width: 50px;
  }
}

.mobile-nav-menu {
  position: fixed;
  top: 0px;
  right: 0px;
  display: none;
  height: 100%;
  width: 100%;
  max-width: 300px;
  overflow-y: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 1024px) {
  .mobile-nav-menu {
    display: none;
  }
}

.mobile-nav-menu.show-menu {
  display: block;
}

@media (min-width: 1024px) {
  .mobile-nav-menu.show-menu {
    display: none;
  }
}

.mobile-start-project {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.cross-icon {
  display: flex;
  justify-content: flex-end;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.cross-icon a {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

ul li.active a {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

ul li.active ul li a {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

ul.nav-drop {
  z-index: 10;
  margin-left: 0.75rem;
  display: none;
  width: 221px;
  min-width: 100px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 10px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 1024px) {
  ul.nav-drop {
    position: absolute;
    left: 50%;
    margin-left: 0px;
    width: 225px;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    box-shadow: -5px 20px 30px rgba(0, 0, 0, 0.25);
  }
}

@media (min-width: 1280px) {
  ul.nav-drop {
    width: 245px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (min-width: 1600px) {
  ul.nav-drop {
    width: 280px;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
}

.nav-hover {
  position: relative;
}

.nav-hover:hover ul.nav-drop {
  display: flex;
}

ul.nav-drop li a {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

ul.nav-drop li {
  margin-top: 2px;
  margin-bottom: 2px;
}

li.nav-hover a {
  width: 100%;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

li.nav-hover:after {
  position: absolute;
  top: 10px;
  right: 30px;
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-content: ">";
  content: var(--tw-content);
}

@media (min-width: 1024px) {
  li.nav-hover:after {
    position: relative;
    --tw-content: ;
    content: var(--tw-content);
  }
}

li.nav-hover {
  position: relative;
}

nav.mobile-nav ul li {
  border-bottom-width: 1px;
  border-color: rgb(0 0 0 / 30%);
}

nav.mobile-nav ul li:last-child {
  border-style: none;
}

nav.mobile-nav ul li ul li {
  border-style: none;
}

li.nav-hover ul li a {
  display: flex;
  align-items: center;
  gap: 10px;
}

ul.nav-drop.blog-drop {
  width: 120px;
}

@media (min-width: 1280px) {
  ul.nav-drop.blog-drop {
    width: 130px;
  }
}

@media (min-width: 1600px) {
  ul.nav-drop.blog-drop {
    width: 147px;
  }
}

ul.nav-drop.service-drop {
  width: 245px;
}

@media (min-width: 1280px) {
  ul.nav-drop.service-drop {
    width: 265px;
  }
}

@media (min-width: 1600px) {
  ul.nav-drop.service-drop {
    width: 302px;
  }
}

ul.nav-drop.market-drop {
  width: 290px;
}

@media (min-width: 1280px) {
  ul.nav-drop.market-drop {
    width: 316px;
  }
}

@media (min-width: 1600px) {
  ul.nav-drop.market-drop {
    width: 348px;
  }
}

.hover-vector-light {
  position: absolute;
  bottom: 0.25rem;
  right: 0.25rem;
  z-index: -10;
}

.hover-vector-red {
  position: absolute;
  top: 1.25rem;
  left: 7px;
  z-index: -10;
}

.hover-vector-green {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  z-index: -10;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.service-drop .hover-vector-light {
  position: absolute;
  left: 0.5rem;
  bottom: 2rem;
  z-index: -10;
}

.hover-vector-blue {
  position: absolute;
  right: 1rem;
  top: 10px;
  z-index: -10;
}

.market-drop .hover-vector-red {
  position: absolute;
  left: 0.25rem;
  top: 4rem;
  z-index: -10;
}

.hover-vector-yellow {
  position: absolute;
  bottom: 0.75rem;
  right: 2rem;
  z-index: -10;
}

/* -----------------------------------header ends------------------------------------ */

/* ------------------------------------footer starts--------------------------------- */

.main-footer .container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .main-footer .container {
    max-width: 950px;
  }
}

@media (min-width: 1280px) {
  .main-footer .container {
    max-width: 1120px;
  }
}

@media (min-width: 1600px) {
  .main-footer .container {
    max-width: 1330px;
  }
}

.main-footer {
  border-bottom-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(50 61 91 / var(--tw-border-opacity));
  padding-top: 1.25rem;
}

@media (min-width: 768px) {
  .main-footer {
    padding-top: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .main-footer {
    padding-top: 2rem;
  }
}

@media (min-width: 1280px) {
  .main-footer {
    border-bottom-width: 6px;
    padding-top: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .main-footer {
    border-bottom-width: 8px;
    padding-top: 50px;
  }
}

footer.main-footer .container .office-address .address-footer h3 {
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 1280px) {
  footer.main-footer .container .office-address .address-footer h3 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 23px;
  }
}

@media (min-width: 1600px) {
  footer.main-footer .container .office-address .address-footer h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 25px;
  }
}

footer.main-footer .container .office-address .address-footer p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  line-height: 21px;
}

@media (min-width: 1280px) {
  footer.main-footer .container .office-address .address-footer p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 23px;
  }
}

@media (min-width: 1600px) {
  footer.main-footer .container .office-address .address-footer p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 25px;
  }
}

footer.main-footer .container .office-address {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 0.75rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
  footer.main-footer .container .office-address {
    padding-bottom: 2rem;
  }
}

@media (min-width: 768px) {
  footer.main-footer .container .office-address {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1024px) {
  footer.main-footer .container .office-address {
    padding-bottom: 50px;
  }
}

@media (min-width: 1280px) {
  footer.main-footer .container .office-address {
    padding-bottom: 70px;
  }
}

@media (min-width: 1600px) {
  footer.main-footer .container .office-address {
    padding-bottom: 90px;
  }
}

footer.main-footer .container .office-address .address-footer {
  width: 100%;
  max-width: 475px;
}

@media (min-width: 768px) {
  footer.main-footer .container .office-address .address-footer {
    max-width: 230px;
  }
}

@media (min-width: 1024px) {
  footer.main-footer .container .office-address .address-footer {
    max-width: 278px;
  }
}

@media (min-width: 1280px) {
  footer.main-footer .container .office-address .address-footer {
    max-width: 313px;
  }
}

@media (min-width: 1600px) {
  footer.main-footer .container .office-address .address-footer {
    max-width: 364px;
  }
}

@media (min-width: 1024px) {
  footer.main-footer .container .office-address .address-footer:last-child {
    max-width: 345px;
  }
}

@media (min-width: 1280px) {
  footer.main-footer .container .office-address .address-footer:last-child {
    max-width: 388px;
  }
}

@media (min-width: 1600px) {
  footer.main-footer .container .office-address .address-footer:last-child {
    max-width: 434px;
  }
}

.footer-menu .footer-nav {
  display: flex;
  align-items: flex-start;
  gap: 100px;
}

@media (min-width: 1280px) {
  .footer-menu .footer-nav {
    gap: 170px;
  }
}

@media (min-width: 1600px) {
  .footer-menu .footer-nav {
    gap: 220px;
  }
}

.footer-nav ul li a {
  display: block;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 1280px) {
  .footer-nav ul li a {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 23px;
  }
}

@media (min-width: 1600px) {
  .footer-nav ul li a {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 25px;
  }
}

.footer-nav ul li a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

.footer-menu .to-top a {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-style: italic;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 1280px) {
  .footer-menu .to-top a {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 23px;
  }
}

@media (min-width: 1600px) {
  .footer-menu .to-top a {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 25px;
  }
}

.footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  row-gap: 0.5rem;
  padding-bottom: 0.75rem;
}

.footer-social-links ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

@media (min-width: 768px) {
  .footer-social-links ul {
    justify-content: flex-end;
  }
}

.footer-social {
  position: relative;
  padding-bottom: 0.75rem;
}

@media (min-width: 1024px) {
  .footer-social {
    padding-bottom: 1rem;
  }
}

@media (min-width: 1280px) {
  .footer-social {
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .footer-social {
    padding-bottom: 26.29px;
  }
}

.footer-logo {
  width: 100%;
  padding-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .footer-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    padding-bottom: 0px;
  }
}

.copyright p {
  z-index: 20;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 21px;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 1280px) {
  .copyright p {
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 23px;
  }
}

@media (min-width: 1600px) {
  .copyright p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 25px;
  }
}

.copyright p a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

.copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .copyright {
    justify-content: space-between;
  }
}

@media (min-width: 1280px) {
  .copyright {
    padding-bottom: 1rem;
  }
}

@media (min-width: 1600px) {
  .copyright {
    padding-bottom: 1.25rem;
  }
}

.footer-logo img {
  height: auto;
  width: 100%;
  max-width: 150px;
}

@media (min-width: 1024px) {
  .footer-logo img {
    max-width: 170px;
  }
}

@media (min-width: 1280px) {
  .footer-logo img {
    max-width: 200px;
  }
}

@media (min-width: 1600px) {
  .footer-logo img {
    max-width: 228px;
  }
}

.footer-logo a {
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.footer-social-links ul li a img {
  height: auto;
  width: 100%;
  max-width: 20px;
}

@media (min-width: 1280px) {
  .footer-social-links ul li a img {
    max-width: 22px;
  }
}

@media (min-width: 1600px) {
  .footer-social-links ul li a img {
    max-width: 24px;
  }
}

/* -------------------------------------footer ends---------------------------------- */

/* -------------------------------------index.html------------------------------------ */

/* message from ceo starts */

.message-sec-divider {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 768px) {
  .message-sec-divider {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .message-sec-divider {
    padding-left: 22px;
    padding-right: 22px;
  }
}

@media (min-width: 1280px) {
  .message-sec-divider {
    align-items: flex-start;
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (min-width: 1600px) {
  .message-sec-divider {
    padding-left: 34.41px;
    padding-right: 34.41px;
  }
}

.ceo-message {
  position: relative;
  margin-top: -63px;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 1024px) {
  .ceo-message {
    padding-top: 25px;
    padding-bottom: 25px;
  }
}

@media (min-width: 1280px) {
  .ceo-message {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

@media (min-width: 1600px) {
  .ceo-message {
    padding-top: 37px;
    padding-bottom: 37px;
  }
}

.message-sec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .message-sec {
    gap: 1rem;
  }
}

@media (min-width: 768px) {
  .message-sec {
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .message-sec {
    flex-direction: row;
    gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .message-sec {
    gap: 2rem;
  }
}

@media (min-width: 1600px) {
  .message-sec {
    gap: 2.5rem;
  }
}

.name-des h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .name-des h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .name-des h3 {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .name-des h3 {
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .name-des h3 {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.name-des h4 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .name-des h4 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .name-des h4 {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .name-des h4 {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .name-des h4 {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.name-des {
  text-align: center;
}

@media (min-width: 1024px) {
  .name-des {
    text-align: start;
  }
}

.message-content h3 {
  padding-bottom: 1rem;
  padding-top: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .message-content h3 {
    padding-bottom: 18px;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .message-content h3 {
    padding-bottom: 22px;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .message-content h3 {
    padding-bottom: 28px;
    padding-top: 0.75rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .message-content h3 {
    padding-bottom: 34.63px;
    padding-top: 15px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.message-content p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .message-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .message-content p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 26px;
  }
}

@media (min-width: 1280px) {
  .message-content p {
    font-size: 22px;
    line-height: 28px;
  }
}

@media (min-width: 1600px) {
  .message-content p {
    font-size: 25px;
    line-height: 30px;
  }
}

.message-content {
  position: relative;
  width: 100%;
  max-width: 730px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
}

@media (min-width: 1280px) {
  .message-content {
    padding-left: 65px;
  }
}

@media (min-width: 1600px) {
  .message-content {
    padding-right: 14px;
  }
}

.quote-left {
  position: absolute;
  left: -30px;
  top: 40px;
}

@media (min-width: 640px) {
  .quote-left {
    top: 30px;
  }
}

@media (min-width: 768px) {
  .quote-left {
    left: -61px;
  }
}

@media (min-width: 1024px) {
  .quote-left {
    left: -46px;
    top: 43.48px;
  }
}

@media (min-width: 1280px) {
  .quote-left {
    left: 0px;
    top: 52.48px;
  }
}

.quote-right {
  position: absolute;
  bottom: -10px;
  right: -24px;
}

@media (min-width: 640px) {
  .quote-right {
    bottom: -15px;
    right: -15px;
  }
}

@media (min-width: 1024px) {
  .quote-right {
    bottom: -20px;
    right: 0px;
  }
}

@media (min-width: 1280px) {
  .quote-right {
    bottom: -30px;
    right: -22px;
  }
}

@media (min-width: 1600px) {
  .quote-right {
    bottom: -45px;
    right: 0px;
  }
}

.message-sec img {
  width: 100%;
  max-width: 160px;
}

@media (min-width: 1280px) {
  .message-sec img {
    max-width: 190px;
  }
}

@media (min-width: 1600px) {
  .message-sec img {
    max-width: 235.84px;
  }
}

.quote-left img {
  height: auto;
  width: 100%;
  max-width: 50px;
}

@media (min-width: 640px) {
  .quote-left img {
    max-width: 60px;
  }
}

@media (min-width: 1280px) {
  .quote-left img {
    max-width: 75px;
  }
}

@media (min-width: 1600px) {
  .quote-left img {
    max-width: 97.7px;
  }
}

.quote-right img {
  height: auto;
  width: 100%;
  max-width: 40px;
}

@media (min-width: 640px) {
  .quote-right img {
    max-width: 50px;
  }
}

@media (min-width: 1280px) {
  .quote-right img {
    max-width: 60px;
  }
}

@media (min-width: 1600px) {
  .quote-right img {
    max-width: 75.17px;
  }
}

.to-top {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

@media (min-width: 475px) {
  .to-top {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }
}

/* message from ceo ends */

/* newsletter starts */

.newsletter-slider {
  position: relative;
  overflow-x: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(61 135 214 / var(--tw-bg-opacity));
  background-size: cover;
  background-position: right;
  background-repeat: no-repeat;
  padding-bottom: 116px;
  padding-top: 47.35px;
}

@media (min-width: 768px) {
  .newsletter-slider {
    background-size: contain;
  }
}

section.newsletter-slider:after {
  left: 55%;
  top: 0px;
  height: 100%;
  width: 100%;
  background-color: rgb(0 0 0 / 20%);
  --tw-content: "";
  content: var(--tw-content);
}

@media (min-width: 768px) {
  section.newsletter-slider:after {
    position: absolute;
  }
}

.newsletter-slider .newsletter-slider-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .newsletter-slider .newsletter-slider-divider {
    flex-direction: row;
  }
}

.newsletter-slider-section {
  width: 100%;
}

@media (min-width: 768px) {
  .newsletter-slider-section {
    max-width: calc(100% / 2 + 10%);
  }
}

.newsletter-slider-section2 {
  width: 100%;
}

@media (min-width: 768px) {
  .newsletter-slider-section2 {
    max-width: calc(100% / 2 - 10%);
  }
}

.newsletter-slider-section h5 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 400px;
  padding-left: 36px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .newsletter-slider-section h5 {
    padding-left: 0px;
  }
}

@media (min-width: 768px) {
  .newsletter-slider-section h5 {
    padding-left: 30px;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .newsletter-slider-section h5 {
    max-width: 430px;
    padding-left: 0px;
    font-size: 22px;
    line-height: 42px;
  }
}

@media (min-width: 1280px) {
  .newsletter-slider-section h5 {
    max-width: 495px;
    font-size: 26px;
    line-height: 45px;
  }
}

@media (min-width: 1600px) {
  .newsletter-slider-section h5 {
    max-width: 611px;
    font-size: 1.875rem;
    line-height: 2.25rem;
    line-height: 47px;
  }
}

.newsletter-slider-section h4 {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .newsletter-slider-section h4 {
    left: 10%;
  }
}

@media (min-width: 768px) {
  .newsletter-slider-section h4 {
    left: 0px;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .newsletter-slider-section h4 {
    top: -10px;
    left: 28px;
    font-size: 2.25rem;
    line-height: 2.5rem;
    line-height: 65px;
  }
}

@media (min-width: 1280px) {
  .newsletter-slider-section h4 {
    left: 70px;
    font-size: 42px;
    line-height: 70px;
  }
}

@media (min-width: 1600px) {
  .newsletter-slider-section h4 {
    left: 90px;
    top: -12px;
    font-size: 50px;
    line-height: 75px;
  }
}

.newsletter-slider-head {
  position: relative;
}

.background-year-count {
  position: absolute;
  top: 6.23px;
  left: 1.25rem;
}

@media (min-width: 640px) {
  .background-year-count {
    left: 1.5rem;
  }
}

@media (min-width: 768px) {
  .background-year-count {
    left: 2rem;
  }
}

@media (min-width: 1024px) {
  .background-year-count {
    left: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .background-year-count {
    left: 45px;
  }
}

@media (min-width: 1600px) {
  .background-year-count {
    left: 53px;
  }
}

.newsletter-request-head {
  position: relative;
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .newsletter-request-head {
    padding-top: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .newsletter-request-head {
    padding-top: 50px;
  }
}

@media (min-width: 1280px) {
  .newsletter-request-head {
    padding-top: 60px;
  }
}

@media (min-width: 1600px) {
  .newsletter-request-head {
    padding-top: 80px;
  }
}

.arrow-round {
  position: absolute;
  bottom: -1.5rem;
  left: 128px;
}

@media (min-width: 768px) {
  .arrow-round {
    left: 38%;
  }
}

.arrow-round img {
  height: auto;
  width: 100%;
  max-width: 150px;
}

@media (min-width: 640px) {
  .arrow-round img {
    max-width: 180px;
  }
}

@media (min-width: 768px) {
  .arrow-round img {
    max-width: 200px;
  }
}

@media (min-width: 1024px) {
  .arrow-round img {
    max-width: 220px;
  }
}

@media (min-width: 1280px) {
  .arrow-round img {
    max-width: 270px;
  }
}

@media (min-width: 1600px) {
  .arrow-round img {
    max-width: 325.77px;
  }
}

.newsletter-request-head h3 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .newsletter-request-head h3 {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  .newsletter-request-head h3 {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 1280px) {
  .newsletter-request-head h3 {
    font-size: 4.5rem;
    line-height: 1;
    line-height: 60px;
    letter-spacing: 3px;
  }
}

@media (min-width: 1600px) {
  .newsletter-request-head h3 {
    font-size: 90px;
    line-height: 72px;
    letter-spacing: 4px;
  }
}

.email-subscriber {
  margin-top: 2rem;
  display: flex;
  width: 100%;
  max-width: 640px;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 0.5rem;
  border-radius: 50px;
}

@media (min-width: 640px) {
  .email-subscriber {
    margin-top: 2.25rem;
  }
}

@media (min-width: 768px) {
  .email-subscriber {
    margin-top: 2.5rem;
    max-width: 400px;
    flex-direction: row;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }
}

@media (min-width: 1024px) {
  .email-subscriber {
    margin-top: 50px;
    max-width: 528px;
    align-items: center;
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

@media (min-width: 1280px) {
  .email-subscriber {
    margin-top: 60px;
    margin-left: 1.5rem;
    max-width: 622px;
  }
}

@media (min-width: 1600px) {
  .email-subscriber {
    margin-top: 75px;
    margin-left: 2.5rem;
    max-width: 799px;
  }
}

.email-subscriber input[type="email"] {
  width: 100%;
  border-radius: 50px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .email-subscriber input[type="email"] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .email-subscriber input[type="email"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .email-subscriber input[type="email"] {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .email-subscriber input[type="email"] {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.email-subscriber button {
  margin-right: 0.5rem;
  border-radius: 50px;
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .email-subscriber button {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .email-subscriber button {
    padding-left: 50px;
    padding-right: 50px;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 25px;
  }
}

@media (min-width: 1280px) {
  .email-subscriber button {
    padding-left: 55px;
    padding-right: 55px;
    font-size: 22px;
    line-height: 30px;
  }
}

@media (min-width: 1600px) {
  .email-subscriber button {
    margin-right: 0.75rem;
    padding-left: 64.24px;
    padding-right: 64.24px;
    font-size: 25px;
    line-height: 37.5px;
  }
}

.email-subscriber button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.newsletter-slider-section2 .mySwiperTestimonial .swiper-wrapper .swiper-slide p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .newsletter-slider-section2 .mySwiperTestimonial .swiper-wrapper .swiper-slide p {
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .newsletter-slider-section2 .mySwiperTestimonial .swiper-wrapper .swiper-slide p {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .newsletter-slider-section2 .mySwiperTestimonial .swiper-wrapper .swiper-slide p {
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}

.swiper.mySwiperTestimonial {
  margin-left: auto;
  width: 100%;
  max-width: 593.9px;
}

.swiper.mySwiperTestimonial .swiper-wrapper .swiper-slide h4 {
  padding-top: 15px;
  text-align: right;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  line-height: 30px;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .swiper.mySwiperTestimonial .swiper-wrapper .swiper-slide h4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .swiper.mySwiperTestimonial .swiper-wrapper .swiper-slide h4 {
    font-size: 22px;
  }
}

@media (min-width: 1600px) {
  .swiper.mySwiperTestimonial .swiper-wrapper .swiper-slide h4 {
    font-size: 25px;
  }
}

.newsletter-arrow {
  display: flex;
  flex-direction: row-reverse;
  gap: 0.75rem;
  padding-top: 0.75rem;
}

.background-year-count img {
  height: auto;
  width: 100%;
  max-width: 150px;
}

@media (min-width: 768px) {
  .background-year-count img {
    max-width: 160px;
  }
}

@media (min-width: 1024px) {
  .background-year-count img {
    max-width: 180px;
  }
}

@media (min-width: 1280px) {
  .background-year-count img {
    max-width: 200px;
  }
}

@media (min-width: 1600px) {
  .background-year-count img {
    max-width: 237.85px;
  }
}

/* newsletter ends */

/* home banner starts */

.home-banner {
  position: relative;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(218 238 255 / var(--tw-bg-opacity));
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
  .home-banner {
    padding-top: 11rem;
    padding-bottom: 11rem;
  }
}

@media (min-width: 1024px) {
  .home-banner {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }
}

@media (min-width: 1280px) {
  .home-banner {
    padding-top: 14rem;
    padding-bottom: 14rem;
  }
}

@media (min-width: 1600px) {
  .home-banner {
    padding-bottom: 220px;
    padding-top: 15rem;
  }
}

@media (min-width: 768px) {
  .home-banner-divider {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-banner-sec1 h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .home-banner-sec1 h1 {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  .home-banner-sec1 h1 {
    font-size: 4.5rem;
    line-height: 1;
    line-height: 110px;
    letter-spacing: -4px;
  }
}

@media (min-width: 1280px) {
  .home-banner-sec1 h1 {
    font-size: 82px;
    line-height: 130px;
    letter-spacing: -5px;
  }
}

@media (min-width: 1600px) {
  .home-banner-sec1 h1 {
    font-size: 100px;
    line-height: 150px;
    letter-spacing: -6px;
  }
}

.home-banner-sec1 p {
  width: 100%;
  max-width: 400px;
  padding-bottom: 1.25rem;
  padding-top: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  letter-spacing: 1px;
}

@media (min-width: 640px) {
  .home-banner-sec1 p {
    padding-bottom: 1.75rem;
  }
}

@media (min-width: 768px) {
  .home-banner-sec1 p {
    padding-bottom: 2rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .home-banner-sec1 p {
    max-width: 400px;
    padding-bottom: 2.5rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .home-banner-sec1 p {
    max-width: 480px;
    padding-bottom: 50px;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .home-banner-sec1 p {
    max-width: 553px;
    padding-bottom: 66.58px;
    font-size: 25px;
    line-height: 2.5rem;
    letter-spacing: 2px;
  }
}

.home-banner-sec1 a {
  z-index: 30;
  display: block;
  max-width: 170px;
  border-radius: 50px;
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-weight: 800;
  line-height: 36px;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
  filter: drop-shadow(-5px 10px 20px rgba(0, 0, 0, 0.25));
}

@media (min-width: 1024px) {
  .home-banner-sec1 a {
    margin-top: -24px;
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .home-banner-sec1 a {
    margin-top: -32px;
    max-width: 190px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 22px;
  }
}

@media (min-width: 1600px) {
  .home-banner-sec1 a {
    margin-top: -40px;
    max-width: 211.48px;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 24px;
  }
}

.home-banner-sec1 a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.name-banner-image {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 10;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 1024px) {
  .name-banner-image {
    left: 18px;
  }
}

@media (min-width: 1280px) {
  .name-banner-image {
    left: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .name-banner-image {
    left: 22px;
  }
}

.ogrelogic-yellow-circle {
  position: absolute;
  left: 20%;
  bottom: -16%;
  margin-left: auto;
  margin-right: auto;
  width: 650px;
}

@media (min-width: 475px) {
  .ogrelogic-yellow-circle {
    width: 800px;
  }
}

@media (min-width: 640px) {
  .ogrelogic-yellow-circle {
    bottom: 2%;
    left: 45%;
    width: 100%;
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .ogrelogic-yellow-circle {
    left: 40%;
    bottom: -18%;
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .ogrelogic-yellow-circle {
    bottom: -32%;
    left: 42%;
  }
}

@media (min-width: 1280px) {
  .ogrelogic-yellow-circle {
    bottom: -42%;
  }
}

.ogrelogic-yellow-circle img {
  width: 100%;
}

.iso-image-2,.iso-image-3 {
  position: absolute;
  top: 0px;
  width: 100%;
}

.mobile-clip-image {
  position: relative;
  top: 0px;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .mobile-clip-image {
    position: absolute;
    top: 60px;
    max-width: 380px;
  }
}

@media (min-width: 1024px) {
  .mobile-clip-image {
    right: 76px;
    max-width: 540px;
  }
}

@media (min-width: 1280px) {
  .mobile-clip-image {
    top: -62px;
    max-width: 680px;
  }
}

@media (min-width: 1600px) {
  .mobile-clip-image {
    max-width: 815px;
  }
}

.mobile-clip-image img {
  height: auto;
  width: 100%;
}

@media (min-width: 1280px) {
  .mobile-clip-image img {
    max-width: 1600px;
  }
}

@media (min-width: 1600px) {
  .mobile-clip-image img {
    max-width: 1870px;
  }
}

.white-clipart {
  position: relative;
  margin-top: -50px;
}

@media (min-width: 768px) {
  .white-clipart {
    margin-top: -98px;
  }
}

@media (min-width: 1024px) {
  .white-clipart {
    margin-top: -120px;
  }
}

@media (min-width: 1280px) {
  .white-clipart {
    margin-top: -160px;
  }
}

@media (min-width: 1600px) {
  .white-clipart {
    margin-top: -185px;
  }
}

.white-clipart img {
  height: 50px;
  width: 100%;
}

@media (min-width: 768px) {
  .white-clipart img {
    height: auto;
  }
}

.name-banner-image img {
  height: auto;
  width: 100%;
  max-width: 720px;
}

@media (min-width: 768px) {
  .name-banner-image img {
    max-width: 550px;
  }
}

@media (min-width: 1280px) {
  .name-banner-image img {
    max-width: 910px;
  }
}

@media (min-width: 1600px) {
  .name-banner-image img {
    max-width: 1113.5px;
  }
}

.online-review-images {
  display: flex;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  gap: 0.75rem;
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(49 61 90 / var(--tw-border-opacity));
  padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .online-review-images {
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) {
  .online-review-images {
    gap: 0px;
  }
}

@media (min-width: 1024px) {
  .online-review-images {
    gap: 2.25rem;
  }
}

@media (min-width: 1280px) {
  .online-review-images {
    gap: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .online-review-images {
    gap: 45px;
    border-bottom-width: 3px;
  }
}

.online-review-images a {
  margin-left: auto;
  margin-right: auto;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

.online-review-images a img {
  margin-left: auto;
  margin-right: auto;
  width: 70%;
}

@media (min-width: 1024px) {
  .online-review-images a img {
    width: 80%;
  }
}

@media (min-width: 1280px) {
  .online-review-images a img {
    width: 90%;
  }
}

@media (min-width: 1600px) {
  .online-review-images a img {
    width: 100%;
  }
}

.online-reviews {
  position: relative;
  padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .online-reviews {
    margin-top: -50px;
  }
}

@media (min-width: 1280px) {
  .online-reviews {
    margin-top: -100px;
  }
}

@media (min-width: 1600px) {
  .online-reviews {
    margin-top: -163px;
  }
}

/* home banner ends */

/* what we do starts */

.what-we-do-home {
  position: relative;
  overflow-y: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .what-we-do-home {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 768px) {
  .what-we-do-home {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 1024px) {
  .what-we-do-home {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1280px) {
  .what-we-do-home {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

@media (min-width: 1600px) {
  .what-we-do-home {
    padding-top: 8rem;
    padding-bottom: 160px;
  }
}

.green-vector-image {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.green-vector-image img {
  height: auto;
  width: 100%;
  max-width: 544px;
}

@media (min-width: 1024px) {
  .green-vector-image img {
    max-width: 648px;
  }
}

@media (min-width: 1280px) {
  .green-vector-image img {
    max-width: 735px;
  }
}

@media (min-width: 1600px) {
  .green-vector-image img {
    max-width: 860px;
  }
}

.mySwiperWhatWeDo .swiper-wrapper .swiper-slide:hover {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(218 238 255 / var(--tw-bg-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.mySwiperWhatWeDo .swiper-wrapper .swiper-slide:hover a {
  letter-spacing: 1px;
  transition-duration: 500ms;
  transition-timing-function: linear;
}

@media (min-width: 1600px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide:hover a {
    letter-spacing: 2px;
  }
}

.what-we-do-home .container h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .what-we-do-home .container h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .what-we-do-home .container h3 {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1280px) {
  .what-we-do-home .container h3 {
    font-size: 26px;
    line-height: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .what-we-do-home .container h3 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    line-height: 45px;
  }
}

.what-we-do-home .container p {
  width: 100%;
  max-width: 280px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 475px) {
  .what-we-do-home .container p {
    max-width: 332px;
  }
}

@media (min-width: 640px) {
  .what-we-do-home .container p {
    max-width: 535px;
  }
}

@media (min-width: 768px) {
  .what-we-do-home .container p {
    max-width: 585px;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .what-we-do-home .container p {
    max-width: 652px;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px;
  }
}

@media (min-width: 1280px) {
  .what-we-do-home .container p {
    max-width: 727px;
    font-size: 22px;
    line-height: 32px;
  }
}

@media (min-width: 1600px) {
  .what-we-do-home .container p {
    max-width: 814px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 25px;
    line-height: 35px;
  }
}

.mySwiperWhatWeDo .swiper-wrapper .swiper-slide {
  width: 278.97px;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.25rem;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

@media (min-width: 475px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 13px;
    padding-bottom: 17px;
  }
}

.mySwiperWhatWeDo .swiper-wrapper .swiper-slide h4 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide h4 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide h4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide h4 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide h4 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.mySwiperWhatWeDo .swiper-wrapper .swiper-slide img {
  width: 100%;
  max-width: 32px;
}

@media (min-width: 1024px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide img {
    max-width: 38px;
  }
}

@media (min-width: 1280px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide img {
    max-width: 42px;
  }
}

@media (min-width: 1600px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide img {
    max-width: 50px;
  }
}

.mySwiperWhatWeDo .swiper-wrapper .swiper-slide a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(25 118 210 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide a {
    line-height: 22px;
  }
}

@media (min-width: 1280px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide a {
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 25px;
  }
}

@media (min-width: 1600px) {
  .mySwiperWhatWeDo .swiper-wrapper .swiper-slide a {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 27px;
  }
}

.swiper.mySwiperWhatWeDo {
  padding-top: 1.5rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .swiper.mySwiperWhatWeDo {
    padding-top: 2rem;
  }
}

@media (min-width: 768px) {
  .swiper.mySwiperWhatWeDo {
    padding-top: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .swiper.mySwiperWhatWeDo {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1280px) {
  .swiper.mySwiperWhatWeDo {
    padding-top: 50px;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .swiper.mySwiperWhatWeDo {
    padding-top: 60px;
    padding-bottom: 1.5rem;
  }
}

section.what-we-do-home {
  overflow-x: hidden;
}

@media (min-width: 640px) {
  section.what-we-do-home .container .slide-right {
    --tw-translate-x: 100px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 768px) {
  section.what-we-do-home .container .slide-right {
    --tw-translate-x: 160px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 1024px) {
  section.what-we-do-home .container .slide-right {
    --tw-translate-x: 190px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 1280px) {
  section.what-we-do-home .container .slide-right {
    --tw-translate-x: 215px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 1600px) {
  section.what-we-do-home .container .slide-right {
    --tw-translate-x: 250px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

section.what-we-do-home .container {
  position: relative;
}

.what-we-do-arrow {
  position: absolute;
  right: 10px;
  top: 165px;
  display: flex;
  flex-direction: row-reverse;
  gap: 0.75rem;
}

@media (min-width: 475px) {
  .what-we-do-arrow {
    top: 146px;
  }
}

@media (min-width: 640px) {
  .what-we-do-arrow {
    right: 0px;
    top: 100px;
  }
}

@media (min-width: 768px) {
  .what-we-do-arrow {
    top: 110px;
  }
}

@media (min-width: 1600px) {
  .what-we-do-arrow {
    top: 130px;
  }
}

/* what we do ends */

/* industries we serve */

.industries-we-serve .container h3 {
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .industries-we-serve .container h3 {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .industries-we-serve .container h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .industries-we-serve .container h3 {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .industries-we-serve .container h3 {
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .industries-we-serve .container h3 {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.industries-we-serve .container p {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1146.26px;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  letter-spacing: 1px;
}

@media (min-width: 640px) {
  .industries-we-serve .container p {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .industries-we-serve .container p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .industries-we-serve .container p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .industries-we-serve .container p {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .industries-we-serve .container p {
    font-size: 25px;
    line-height: 2.5rem;
    letter-spacing: 2px;
  }
}

.industries-slider {
  background-repeat: no-repeat;
  padding-top: 2.5rem;
  padding-bottom: 120px;
  background-position-x: center;
}

@media (min-width: 640px) {
  .industries-slider {
    background-size: cover;
    padding-bottom: 180px;
  }
}

@media (min-width: 1024px) {
  .industries-slider {
    padding-bottom: 250px;
  }
}

@media (min-width: 1280px) {
  .industries-slider {
    padding-top: 90px;
  }
}

@media (min-width: 1600px) {
  .industries-slider {
    padding-top: 117px;
    padding-bottom: 307px;
  }
}

@media (min-width: 640px) {
  .industries-we-serve {
    margin-top: -2rem;
  }
}

@media (min-width: 768px) {
  .industries-we-serve {
    margin-top: -2.25rem;
  }
}

@media (min-width: 1024px) {
  .industries-we-serve {
    margin-top: -2.5rem;
  }
}

@media (min-width: 1280px) {
  .industries-we-serve {
    margin-top: -50px;
  }
}

@media (min-width: 1600px) {
  .industries-we-serve {
    margin-top: -60px;
  }
}

.industries-about h4 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .industries-about h4 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .industries-about h4 {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .industries-about h4 {
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .industries-about h4 {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.industries-we-serve .container .industries-about p {
  margin-left: 0px;
  width: 100%;
  max-width: 312px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  letter-spacing: 0em;
}

@media (min-width: 768px) {
  .industries-we-serve .container .industries-about p {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1024px) {
  .industries-we-serve .container .industries-about p {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 24px;
  }
}

@media (min-width: 1280px) {
  .industries-we-serve .container .industries-about p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 26px;
  }
}

@media (min-width: 1600px) {
  .industries-we-serve .container .industries-about p {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    font-size: 22px;
    line-height: 28px;
  }
}

.industries-image {
  width: 100%;
  max-width: 230px;
}

@media (min-width: 1280px) {
  .industries-image {
    max-width: 270px;
  }
}

@media (min-width: 1600px) {
  .industries-image {
    max-width: 301px;
  }
}

.industries-image img {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1280px) {
  .industries-image img {
    width: 100%;
  }
}

@media (min-width: 1600px) {
  .industries-image img {
    width: auto;
  }
}

.industries-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 640px) {
  .industries-desc {
    flex-direction: row;
    justify-content: space-around;
  }
}

@media (min-width: 1024px) {
  .industries-desc {
    gap: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .industries-desc {
    gap: 50px;
  }
}

@media (min-width: 1600px) {
  .industries-desc {
    gap: 74px;
  }
}

.mySwiperIndustries .swiper-wrapper .swiper-slide {
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .mySwiperIndustries .swiper-wrapper .swiper-slide {
    gap: 60px;
  }
}

.industries-slider .container .swiper.mySwiperIndustries {
  position: relative;
  width: 100%;
  max-width: 1500px;
}

@media (min-width: 1024px) {
  .industries-slider .container .swiper.mySwiperIndustries {
    padding-top: 50px;
  }
}

.industries-arrow {
  position: absolute;
  top: 50%;
  z-index: 20;
  display: flex;
  width: 100%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  flex-direction: row-reverse;
  justify-content: space-between;
}

@media (min-width: 1280px) {
  .industries-arrow {
    top: 55%;
  }
}

/* industries we serve ends */

/* explorer work */

.explore-divider {
  align-items: center;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  .explore-divider {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.explore-divider-section2 h3 {
  padding-bottom: 1.25rem;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .explore-divider-section2 h3 {
    padding-bottom: 1.5rem;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .explore-divider-section2 h3 {
    padding-bottom: 2rem;
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .explore-divider-section2 h3 {
    padding-bottom: 2.25rem;
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .explore-divider-section2 h3 {
    padding-bottom: 2.5rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .explore-divider-section2 h3 {
    padding-bottom: 49.43px;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.explore-divider-section2 p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .explore-divider-section2 p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .explore-divider-section2 p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .explore-divider-section2 p {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .explore-divider-section2 p {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.explore-divider-section2 p a {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(61 135 214 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(61 135 214 / var(--tw-text-opacity));
}

.explore-divider-section2 p a:hover {
  --tw-border-opacity: 1;
  border-color: rgb(253 197 38 / var(--tw-border-opacity));
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

.explorer-section-sizer {
  width: 100%;
  max-width: 659.95px;
  padding-top: 1.25rem;
}

@media (min-width: 640px) {
  .explorer-section-sizer {
    padding-bottom: 0px;
  }
}

@media (min-width: 768px) {
  .explorer-section-sizer {
    padding-left: 2rem;
  }
}

@media (min-width: 1024px) {
  .explorer-section-sizer {
    margin-left: auto;
    margin-right: auto;
    max-width: 470px;
    padding-left: 0px;
  }
}

@media (min-width: 1280px) {
  .explorer-section-sizer {
    max-width: 569px;
  }
}

@media (min-width: 1600px) {
  .explorer-section-sizer {
    margin-left: 140px;
    max-width: 659.95px;
  }
}

.explore-works {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 475px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .explore-works {
    margin-top: -70px;
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .explore-works {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .explore-works {
    margin-top: -40px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

@media (min-width: 1280px) {
  .explore-works {
    margin-top: -20px;
  }
}

@media (min-width: 1600px) {
  .explore-works {
    margin-top: 0px;
    padding-top: 70.45px;
    padding-bottom: 70.45px;
  }
}

.explore-arrows {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
}

@media (min-width: 640px) {
  .explore-arrows {
    margin-top: 2rem;
  }
}

@media (min-width: 768px) {
  .explore-arrows {
    margin-top: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .explore-arrows {
    margin-top: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .explore-arrows {
    margin-top: 50px;
  }
}

@media (min-width: 1600px) {
  .explore-arrows {
    margin-top: 64.49px;
  }
}

.explore-vector {
  position: absolute;
  top: 0px;
  right: 0.75rem;
  z-index: -10;
  display: none;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

@media (min-width: 768px) {
  .explore-vector {
    display: block;
  }
}

@media (min-width: 1024px) {
  .explore-vector {
    top: -100px;
    right: 50px;
  }
}

@media (min-width: 1280px) {
  .explore-vector {
    top: -5rem;
  }
}

@media (min-width: 1600px) {
  .explore-vector {
    right: 88px;
  }
}

.explore-vector img {
  height: auto;
  width: 100%;
  max-width: 250px;
}

@media (min-width: 1024px) {
  .explore-vector img {
    max-width: 270px;
  }
}

@media (min-width: 1280px) {
  .explore-vector img {
    max-width: 300px;
  }
}

@media (min-width: 1600px) {
  .explore-vector img {
    width: 100%;
    max-width: 367px;
  }
}

.explore-arrows img {
  width: 100%;
  max-width: 40px;
}

@media (min-width: 1280px) {
  .explore-arrows img {
    max-width: 50px;
  }
}

@media (min-width: 1600px) {
  .explore-arrows img {
    max-width: 60px;
  }
}

/* explorer work ends */

/* Digital Innovation starts */

.digital-innovation .container h3 {
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .digital-innovation .container h3 {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .digital-innovation .container h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .digital-innovation .container h3 {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .digital-innovation .container h3 {
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .digital-innovation .container h3 {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.digital-innovation .container p {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 708px;
  padding-top: 1.5rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  letter-spacing: 1px;
}

@media (min-width: 640px) {
  .digital-innovation .container p {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .digital-innovation .container p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .digital-innovation .container p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .digital-innovation .container p {
    max-width: 920px;
    font-size: 22px;
    line-height: 2.25rem;
    letter-spacing: 2px;
  }
}

@media (min-width: 1600px) {
  .digital-innovation .container p {
    max-width: 1012.88px;
    font-size: 25px;
    line-height: 2.5rem;
    letter-spacing: 3px;
  }
}

.innovative-tags ul li {
  margin-bottom: 1.25rem;
  font-size: 25px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .innovative-tags ul li {
    font-size: 28px;
  }
}

@media (min-width: 1024px) {
  .innovative-tags ul li {
    font-size: 32px;
  }
}

@media (min-width: 1280px) {
  .innovative-tags ul li {
    font-size: 38px;
    line-height: 60px;
  }
}

@media (min-width: 1600px) {
  .innovative-tags ul li {
    font-size: 45px;
    line-height: 70px;
  }
}

.innovation-data img {
  width: 100%;
  max-width: 40px;
}

@media (min-width: 1024px) {
  .innovation-data img {
    max-width: 45px;
  }
}

@media (min-width: 1280px) {
  .innovation-data img {
    max-width: 50px;
  }
}

@media (min-width: 1600px) {
  .innovation-data img {
    max-width: 60px;
  }
}

.digital-innovation-divider {
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .digital-innovation-divider {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 5rem;
  }
}

@media (min-width: 768px) {
  .digital-innovation-divider {
    padding-bottom: 120px;
  }
}

@media (min-width: 1024px) {
  .digital-innovation-divider {
    padding-top: 120px;
    padding-bottom: 160px;
  }
}

@media (min-width: 1280px) {
  .digital-innovation-divider {
    padding-bottom: 200px;
  }
}

@media (min-width: 1600px) {
  .digital-innovation-divider {
    padding-top: 193px;
    padding-bottom: 255px;
  }
}

.innovation-data-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 768px) {
  .innovation-data-content {
    gap: 22px;
  }
}

@media (min-width: 1024px) {
  .innovation-data-content {
    gap: 28px;
  }
}

@media (min-width: 1280px) {
  .innovation-data-content {
    gap: 25px;
  }
}

@media (min-width: 1600px) {
  .innovation-data-content {
    gap: 30px;
  }
}

.digital-innovation .container .innovation-data p {
  margin-left: 0px;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
  padding-top: 0px;
  text-align: left;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 300;
  letter-spacing: 0em;
}

@media (min-width: 768px) {
  .digital-innovation .container .innovation-data p {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .digital-innovation .container .innovation-data p {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .digital-innovation .container .innovation-data p {
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .digital-innovation .container .innovation-data p {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.innovation-data {
  margin-left: auto;
  display: grid;
  width: 100%;
  max-width: 710px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  row-gap: 1.25rem;
}

@media (min-width: 640px) {
  .innovation-data {
    -moz-column-gap: 0.25rem;
         column-gap: 0.25rem;
  }
}

@media (min-width: 768px) {
  .innovation-data {
    gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .innovation-data {
    gap: 3rem;
  }
}

@media (min-width: 1280px) {
  .innovation-data {
    gap: 4rem;
  }
}

@media (min-width: 1600px) {
  .innovation-data {
    gap: 5rem;
  }
}

.hide {
  display: none;
}

.innovate-tab {
  position: relative;
  max-width: -webkit-fit-content;
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.innovate-tab:hover:after {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 0.25rem;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
  --tw-content: "";
  content: var(--tw-content);
}

.innovate-tab:hover {
  cursor: pointer;
}

.innovate-tab.innovate-tab-active {
  position: relative;
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

.innovate-tab.innovate-tab-active:after {
  position: absolute;
  bottom: 0px;
  left: 0px;
  height: 0.25rem;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
  --tw-content: "";
  content: var(--tw-content);
}

.innovation-tabs {
  padding-left: 1rem;
}

@media (min-width: 640px) {
  .innovation-tabs {
    padding-left: 1.25rem;
  }
}

@media (min-width: 768px) {
  .innovation-tabs {
    padding-left: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .innovation-tabs {
    padding-left: 2rem;
  }
}

@media (min-width: 1280px) {
  .innovation-tabs {
    padding-left: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .innovation-tabs {
    padding-left: 48px;
  }
}

.innovation-vector {
  position: absolute;
  bottom: 10px;
  right: 2.25rem;
  z-index: -10;
}

.digital-innovation {
  position: relative;
  overflow-y: hidden;
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .digital-innovation {
    padding-top: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .digital-innovation {
    padding-top: 3rem;
  }
}

@media (min-width: 1280px) {
  .digital-innovation {
    padding-top: 4rem;
  }
}

@media (min-width: 1600px) {
  .digital-innovation {
    padding-top: 5rem;
  }
}

.innovation-vector img {
  width: 100%;
  max-width: 500px;
}

@media (min-width: 768px) {
  .innovation-vector img {
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  .innovation-vector img {
    max-width: 750px;
  }
}

@media (min-width: 1280px) {
  .innovation-vector img {
    max-width: 850px;
  }
}

@media (min-width: 1600px) {
  .innovation-vector img {
    max-width: 1048px;
  }
}

.innovation-vector-yellow {
  position: absolute;
  top: 30px;
  left: 1.25rem;
  z-index: -10;
}

@media (min-width: 640px) {
  .innovation-vector-yellow {
    left: 1.5rem;
  }
}

@media (min-width: 768px) {
  .innovation-vector-yellow {
    left: 2rem;
  }
}

@media (min-width: 1024px) {
  .innovation-vector-yellow {
    left: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .innovation-vector-yellow {
    left: 50px;
  }
}

@media (min-width: 1600px) {
  .innovation-vector-yellow {
    left: 57.99px;
  }
}

.innovation-vector-yellow img {
  width: 100%;
  max-width: 180px;
}

@media (min-width: 768px) {
  .innovation-vector-yellow img {
    max-width: 210px;
  }
}

@media (min-width: 1024px) {
  .innovation-vector-yellow img {
    max-width: 230px;
  }
}

@media (min-width: 1280px) {
  .innovation-vector-yellow img {
    max-width: 250px;
  }
}

@media (min-width: 1600px) {
  .innovation-vector-yellow img {
    max-width: 286px;
  }
}

.innovative-data-icons {
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .innovative-data-icons {
    margin-top: 0px;
  }
}

/* Digital Innovation Ends */

/* satisfied customers */

.satisfied-head-bg {
  position: absolute;
  top: 0px;
  z-index: -10;
}

@media (min-width: 1280px) {
  .satisfied-head-bg {
    top: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .satisfied-head-bg {
    top: 0px;
  }
}

.satisfied-customers {
  position: relative;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .satisfied-customers {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 768px) {
  .satisfied-customers {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .satisfied-customers {
    padding-top: 57px;
    padding-bottom: 57px;
  }
}

@media (min-width: 1280px) {
  .satisfied-customers {
    padding-top: 67px;
    padding-bottom: 67px;
  }
}

@media (min-width: 1600px) {
  .satisfied-customers {
    padding-top: 76px;
    padding-bottom: 76px;
  }
}

.satisfied-head-bg img {
  height: 180px;
  width: 100%;
}

@media (min-width: 640px) {
  .satisfied-head-bg img {
    height: 220px;
  }
}

@media (min-width: 768px) {
  .satisfied-head-bg img {
    height: 260px;
  }
}

@media (min-width: 1024px) {
  .satisfied-head-bg img {
    height: 320px;
  }
}

@media (min-width: 1280px) {
  .satisfied-head-bg img {
    height: auto;
  }
}

.satisfied-customers .container h3 {
  padding-bottom: 3rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .satisfied-customers .container h3 {
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 768px) {
  .satisfied-customers .container h3 {
    padding-bottom: 5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .satisfied-customers .container h3 {
    padding-bottom: 110px;
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .satisfied-customers .container h3 {
    padding-bottom: 130px;
    font-size: 42px;
    line-height: 45px;
  }
}

@media (min-width: 1600px) {
  .satisfied-customers .container h3 {
    padding-bottom: 150.9px;
    font-size: 50px;
    line-height: 50px;
  }
}

.swiper.mySwiperCustomers .swiper-wrapper .swiper-slide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  row-gap: 1.25rem;
}

@media (min-width: 768px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide {
    gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide {
    -moz-column-gap: 37px;
         column-gap: 37px;
    row-gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide {
    -moz-column-gap: 57px;
         column-gap: 57px;
    row-gap: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide {
    -moz-column-gap: 80px;
         column-gap: 80px;
    row-gap: 2rem;
  }
}

@media (min-width: 1024px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:first-child {
    margin-left: 10rem;
  }
}

@media (min-width: 1280px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:first-child {
    margin-left: 14rem;
  }
}

@media (min-width: 1600px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:first-child {
    margin-left: 16rem;
  }
}

@media (min-width: 1024px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:nth-child(4) {
    margin-right: 10rem;
  }
}

@media (min-width: 1280px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:nth-child(4) {
    margin-right: 14rem;
  }
}

@media (min-width: 1600px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:nth-child(4) {
    margin-right: 16rem;
  }
}

@media (min-width: 1024px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:nth-child(5) {
    margin-left: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:nth-child(5) {
    margin-left: 2rem;
  }
}

@media (min-width: 1600px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:nth-child(5) {
    margin-left: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:nth-child(10) {
    margin-right: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:nth-child(10) {
    margin-right: 2rem;
  }
}

@media (min-width: 1600px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img:nth-child(10) {
    margin-right: 2.5rem;
  }
}

.swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img {
  width: 100%;
  max-width: 80px;
}

@media (min-width: 640px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img {
    max-width: 110px;
  }
}

@media (min-width: 1280px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img {
    max-width: 130px;
  }
}

@media (min-width: 1600px) {
  .swiper.mySwiperCustomers .swiper-wrapper .swiper-slide img {
    max-width: 150px;
  }
}

/* satisfied customers ends */

/* video testimonial starts*/

.video-testimonial {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .video-testimonial {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .video-testimonial {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .video-testimonial {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .video-testimonial {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .video-testimonial {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.video-testimonial .container h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 20px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .video-testimonial .container h3 {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .video-testimonial .container h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1024px) {
  .video-testimonial .container h3 {
    padding-bottom: 1rem;
    font-size: 1.875rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .video-testimonial .container h3 {
    padding-bottom: 1.25rem;
    font-size: 34px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .video-testimonial .container h3 {
    padding-bottom: 1.5rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.video-testimonial .container p {
  margin-left: auto;
  margin-right: auto;
  max-width: 740px;
  padding-bottom: 2rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 640px) {
  .video-testimonial .container p {
    padding-bottom: 2.5rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .video-testimonial .container p {
    padding-bottom: 3.5rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .video-testimonial .container p {
    padding-bottom: 4rem;
    font-size: 22px;
  }
}

@media (min-width: 1280px) {
  .video-testimonial .container p {
    max-width: 845px;
    padding-bottom: 5rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1600px) {
  .video-testimonial .container p {
    max-width: 1030px;
    padding-bottom: 6rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.video-testimonial .container .video-back {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.video-testimonial .container .swiper-slide img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 180px;
}

@media (min-width: 640px) {
  .video-testimonial .container .swiper-slide img {
    max-width: 200px;
  }
}

@media (min-width: 768px) {
  .video-testimonial .container .swiper-slide img {
    max-width: 220px;
  }
}

@media (min-width: 1024px) {
  .video-testimonial .container .swiper-slide img {
    max-width: 230px;
  }
}

@media (min-width: 1280px) {
  .video-testimonial .container .swiper-slide img {
    max-width: 240px;
  }
}

@media (min-width: 1600px) {
  .video-testimonial .container .swiper-slide img {
    max-width: 286px;
  }
}

.video-testimonial .container .swiper-slide {
  opacity: 0;
}

@media (min-width: 475px) {
  .video-testimonial .container .swiper-slide.swiper-slide-prev,.video-testimonial .container .swiper-slide.swiper-slide-next {
    opacity: 1;
  }
}

.video-testimonial .container .swiper-slide.swiper-slide-active {
  opacity: 1;
}

.video-testimonial {
  overflow-x: hidden;
}

.video-testimonial .container .swiper-slide {
  position: relative;
}

.video-testimonial .container .swiper-slide .video-play-icon {
  position: absolute;
  bottom: 7%;
  right: 12%;
  display: none;
}

.video-testimonial .container .swiper-slide.swiper-slide-active .video-play-icon {
  display: block;
}

.video-testimonial .container .swiper-slide .video-play-icon img {
  width: 100%;
  max-width: 35px;
  mix-blend-mode: difference;
}

@media (min-width: 1024px) {
  .video-testimonial .container .swiper-slide .video-play-icon img {
    max-width: 40px;
  }
}

@media (min-width: 1280px) {
  .video-testimonial .container .swiper-slide .video-play-icon img {
    max-width: 45px;
  }
}

@media (min-width: 1600px) {
  .video-testimonial .container .swiper-slide .video-play-icon img {
    max-width: 50px;
  }
}

.video-slide-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 180px;
  cursor: pointer;
}

@media (min-width: 640px) {
  .video-slide-content {
    max-width: 200px;
  }
}

@media (min-width: 768px) {
  .video-slide-content {
    max-width: 220px;
  }
}

@media (min-width: 1024px) {
  .video-slide-content {
    max-width: 230px;
  }
}

@media (min-width: 1280px) {
  .video-slide-content {
    max-width: 240px;
  }
}

@media (min-width: 1600px) {
  .video-slide-content {
    max-width: 286px;
  }
}

/* video testimonial ends*/

/* ------------------------------------index.html ends --------------------------------*/

/* --------------------------------------conatct------------------------------ */

.contact-modal-box {
  position: relative;
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.contact-address-content .office-address h3 {
  padding-bottom: 0.5rem;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .contact-address-content .office-address h3 {
    min-height: 74px;
  }
}

@media (min-width: 768px) {
  .contact-address-content .office-address h3 {
    min-height: -webkit-max-content;
    min-height: -moz-max-content;
    min-height: max-content;
    font-size: 25px;
  }
}

@media (min-width: 1024px) {
  .contact-address-content .office-address h3 {
    padding-bottom: 0.75rem;
    font-size: 27px;
    line-height: 30px;
  }
}

@media (min-width: 1280px) {
  .contact-address-content .office-address h3 {
    padding-bottom: 1rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
    line-height: 35px;
  }
}

@media (min-width: 1600px) {
  .contact-address-content .office-address h3 {
    min-height: 110px;
    padding-bottom: 1.25rem;
    font-size: 35px;
    line-height: 40px;
  }
}

.contact-address-content .office-address p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}

@media (min-width: 768px) {
  .contact-address-content .office-address p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .contact-address-content .office-address p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px;
  }
}

@media (min-width: 1280px) {
  .contact-address-content .office-address p {
    font-size: 22px;
    line-height: 32px;
  }
}

@media (min-width: 1600px) {
  .contact-address-content .office-address p {
    font-size: 25px;
    line-height: 30px;
  }
}

.contact-address-content .office-address h4 a {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .contact-address-content .office-address h4 a {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .contact-address-content .office-address h4 a {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .contact-address-content .office-address h4 a {
    font-size: 25px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .contact-address-content .office-address h4 a {
    font-size: 28px;
    line-height: 2.5rem;
  }
}

.contact-address-content .office-address h4 a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.contact-modal-divider {
  display: flex;
  height: 100%;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
}

@media (min-width: 768px) {
  .contact-modal-divider {
    flex-direction: row;
  }
}

.contact-address-content {
  z-index: 10;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 0.5rem;
}

@media (min-width: 640px) {
  .contact-address-content {
    justify-content: space-around;
    row-gap: 0.75rem;
  }
}

@media (min-width: 768px) {
  .contact-address-content {
    max-width: calc(100% / 2 + 26px);
    row-gap: 1rem;
    padding-top: 50px;
  }
}

@media (min-width: 1024px) {
  .contact-address-content {
    max-width: calc(100% / 2);
    justify-content: space-between;
    row-gap: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .contact-address-content {
    max-width: calc(100% / 2 + 5%);
    justify-content: flex-start;
    row-gap: 1.5rem;
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}

@media (min-width: 1600px) {
  .contact-address-content {
    max-width: calc(100% / 2 + 10%);
    row-gap: 2rem;
  }
}

.contact-address-content .office-address {
  z-index: 10;
  margin-bottom: 0.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .contact-address-content .office-address {
    max-width: 253px;
  }
}

@media (min-width: 768px) {
  .contact-address-content .office-address {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .contact-address-content .office-address {
    margin-bottom: 0.75rem;
  }
}

@media (min-width: 1280px) {
  .contact-address-content .office-address {
    margin-bottom: 1rem;
    max-width: 322px;
  }
}

@media (min-width: 1600px) {
  .contact-address-content .office-address {
    margin-bottom: 1.25rem;
    max-width: 375px;
  }
}

.contact-modal-social a {
  display: flex;
  height: 40px;
  width: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(50 61 91 / var(--tw-border-opacity));
}

@media (min-width: 1280px) {
  .contact-modal-social a {
    height: 50px;
    width: 50px;
  }
}

@media (min-width: 1600px) {
  .contact-modal-social a {
    height: 60px;
    width: 60px;
  }
}

.contact-modal-social {
  margin-top: 2rem;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .contact-modal-social {
    margin-top: 2.5rem;
    margin-left: 168px;
  }
}

@media (min-width: 768px) {
  .contact-modal-social {
    margin-top: 3rem;
    margin-left: 118px;
  }
}

@media (min-width: 1024px) {
  .contact-modal-social {
    margin-top: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .contact-modal-social {
    margin-top: 4rem;
    margin-left: 90px;
    gap: 0.75rem;
  }
}

@media (min-width: 1600px) {
  .contact-modal-social {
    margin-top: 5rem;
    gap: 1rem;
    padding-left: 122px;
  }
}

.contact-modal-form {
  margin-top: 0px;
  margin-bottom: 1.25rem;
  width: 100%;
  padding: 0.75rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 475px) {
  .contact-modal-form {
    padding: 2.5rem;
  }
}

@media (min-width: 640px) {
  .contact-modal-form {
    padding: 3rem;
  }
}

@media (min-width: 768px) {
  .contact-modal-form {
    margin-bottom: 0px;
    margin-top: 1.25rem;
    max-width: calc(100% / 2 - 26px);
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  .contact-modal-form {
    margin-top: 0px;
    max-width: calc(100% / 2);
    padding: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .contact-modal-form {
    max-width: calc(100% / 2 - 5%);
    padding: 50px;
  }
}

@media (min-width: 1600px) {
  .contact-modal-form {
    max-width: calc(100% / 2 - 10%);
    padding: 60px;
  }
}

.contact-modal-box .container {
  height: 100%;
}

.contact-modal-form form input {
  width: 100%;
}

.contact-modal-form form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 1rem;
}

@media (min-width: 768px) {
  .contact-modal-form form {
    row-gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .contact-modal-form form {
    row-gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .contact-modal-form form {
    row-gap: 2rem;
  }
}

@media (min-width: 1600px) {
  .contact-modal-form form {
    row-gap: 2.5rem;
  }
}

.contact-modal-form form input:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.contact-modal-form form textarea {
  height: 80px;
  width: 100%;
  border-width: 1px;
  background-color: transparent;
  padding: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1280px) {
  .contact-modal-form form textarea {
    height: 110px;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .contact-modal-form form textarea {
    height: 140px;
    font-size: 20px;
  }
}

.contact-modal-form form textarea:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.contact-modal-form form input[type="text"] {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
  background-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {
  .contact-modal-form form input[type="text"] {
    max-width: calc(100% / 2 - 20px);
  }
}

@media (min-width: 768px) {
  .contact-modal-form form input[type="text"] {
    max-width: calc(100%);
  }
}

@media (min-width: 1280px) {
  .contact-modal-form form input[type="text"] {
    max-width: calc(100% / 2 - 20px);
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .contact-modal-form form input[type="text"] {
    font-size: 20px;
  }
}

.contact-modal-form form input[type="email"] {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
  background-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1280px) {
  .contact-modal-form form input[type="email"] {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .contact-modal-form form input[type="email"] {
    font-size: 20px;
  }
}

.contact-modal-form form .checkbox-area {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.contact-modal-form form .checkbox-area input[type="checkbox"] {
  height: 20px;
  width: 20px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 50%;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
  padding: 10px;
}

.contact-modal-form form .checkbox-area input[type="checkbox"]:checked {
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
}

.upload-file input[type="file"] {
  position: absolute;
  top: 0px;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  opacity: 0;
}

.upload-file p {
  width: 100%;
  --tw-text-opacity: 1;
  color: rgb(156 163 183 / var(--tw-text-opacity));
}

.upload-file {
  position: relative;
  width: 100%;
  border-bottom-width: 1px;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1280px) {
  .upload-file {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .upload-file {
    font-size: 20px;
  }
}

.contact-modal-form form button[type="submit"] {
  border-radius: 26px;
  --tw-bg-opacity: 1;
  background-color: rgb(50 61 91 / var(--tw-bg-opacity));
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1280px) {
  .contact-modal-form form button[type="submit"] {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .contact-modal-form form button[type="submit"] {
    font-size: 20px;
  }
}

.contact-modal-form form button[type="submit"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.contact-modal-vector-blue {
  position: absolute;
  left: 0px;
  top: 0px;
}

.contact-modal-yellow-vector {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.contact-address-content .contact-address-title h2 {
  z-index: 10;
  margin-bottom: 25px;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  border-bottom-width: 4px;
  --tw-border-opacity: 1;
  border-color: rgb(50 61 91 / var(--tw-border-opacity));
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .contact-address-content .contact-address-title h2 {
    margin-left: 220px;
  }
}

@media (min-width: 768px) {
  .contact-address-content .contact-address-title h2 {
    margin-left: 0px;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .contact-address-content .contact-address-title h2 {
    margin-left: 130px;
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .contact-address-content .contact-address-title h2 {
    margin-left: 150px;
    font-size: 42px;
  }
}

@media (min-width: 1600px) {
  .contact-address-content .contact-address-title h2 {
    margin-left: 185px;
    font-size: 50px;
  }
}

.contact-address-content .contact-address-title {
  z-index: 10;
  width: 100%;
}

.contact-modal-vector-blue img {
  width: 100%;
}

@media (min-width: 475px) {
  .contact-modal-vector-blue img {
    max-width: 480px;
  }
}

@media (min-width: 640px) {
  .contact-modal-vector-blue img {
    max-width: 590px;
  }
}

@media (min-width: 1024px) {
  .contact-modal-vector-blue img {
    max-width: 700px;
  }
}

@media (min-width: 1280px) {
  .contact-modal-vector-blue img {
    max-width: 845px;
  }
}

@media (min-width: 1600px) {
  .contact-modal-vector-blue img {
    max-width: 994px;
  }
}

/* --------------------------------------contact ends------------------------- */

/* --------------------------------------start a project starts----------------------- */

.start-project-pop {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 50;
  display: none;
  height: 100vh;
  width: 100%;
  align-items: center;
  overflow-y: auto;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.start-project-pop.show-popup {
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .start-project-pop.show-popup {
    flex-direction: row;
  }
}

.spacer-pop {
  height: 2.5rem;
}

@media (min-width: 768px) {
  .spacer-pop {
    height: 1.25rem;
  }
}

.start-pro-pop-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .start-pro-pop-divider {
    flex-direction: row;
  }
}

.start-pro-pop-form.contact-modal-form {
  width: 100%;
  border-radius: 0px;
  border-style: none;
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  --tw-backdrop-blur: blur(0);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

@media (min-width: 768px) {
  .start-pro-pop-form.contact-modal-form {
    max-width: calc(100% / 2);
  }
}

.start-pro-pop-form.contact-modal-form form {
  margin-left: auto;
  width: 100%;
}

@media (min-width: 1024px) {
  .start-pro-pop-form.contact-modal-form form {
    max-width: 430px;
  }
}

@media (min-width: 1280px) {
  .start-pro-pop-form.contact-modal-form form {
    max-width: 500px;
  }
}

@media (min-width: 1600px) {
  .start-pro-pop-form.contact-modal-form form {
    max-width: 630px;
  }
}

.start-pro-pop-content h3 {
  width: 100%;
  max-width: 637px;
  padding-bottom: 1.5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .start-pro-pop-content h3 {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .start-pro-pop-content h3 {
    padding-bottom: 3rem;
    font-size: 35px;
  }
}

@media (min-width: 1024px) {
  .start-pro-pop-content h3 {
    padding-bottom: 3.5rem;
    font-size: 42px;
    line-height: 50px;
  }
}

@media (min-width: 1280px) {
  .start-pro-pop-content h3 {
    padding-bottom: 4rem;
    font-size: 50px;
    line-height: 60px;
  }
}

@media (min-width: 1600px) {
  .start-pro-pop-content h3 {
    padding-bottom: 5rem;
    font-size: 60px;
    line-height: 70px;
  }
}

.start-pro-pop-content h5 {
  padding-bottom: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 640px) {
  .start-pro-pop-content h5 {
    padding-bottom: 1rem;
  }
}

@media (min-width: 768px) {
  .start-pro-pop-content h5 {
    padding-bottom: 1.25rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .start-pro-pop-content h5 {
    padding-bottom: 1.5rem;
    font-size: 22px;
  }
}

@media (min-width: 1280px) {
  .start-pro-pop-content h5 {
    padding-bottom: 2rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1600px) {
  .start-pro-pop-content h5 {
    padding-bottom: 2.5rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.start-pro-pop-content div a {
  display: block;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  padding-bottom: 0.75rem;
  font-size: 20px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .start-pro-pop-content div a {
    padding-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

@media (min-width: 1024px) {
  .start-pro-pop-content div a {
    padding-bottom: 1.25rem;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1280px) {
  .start-pro-pop-content div a {
    padding-bottom: 1.5rem;
    font-size: 34px;
  }
}

@media (min-width: 1600px) {
  .start-pro-pop-content div a {
    padding-bottom: 2rem;
    font-size: 40px;
  }
}

.start-pro-pop-content div a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.start-pro-pop-content {
  width: 100%;
}

@media (min-width: 768px) {
  .start-pro-pop-content {
    max-width: calc(100% / 2);
  }
}

.popup-cross a img {
  margin-left: auto;
  width: 100%;
  max-width: 25px;
}

@media (min-width: 1280px) {
  .popup-cross a img {
    max-width: 30px;
  }
}

@media (min-width: 1600px) {
  .popup-cross a img {
    max-width: 35px;
  }
}

.vectors-popup {
  height: 100vh;
  overflow-y: hidden;
}

.start-project-pop .container {
  position: relative;
}

.popup-cross {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

/* --------------------------------------start a project ends------------------------- */

/* -----------------------------------------work.html--------------------------------- */

.portfolio-banner-head h2 {
  width: 140px;
  text-align: center;
  font-size: 130px;
  font-weight: 700;
  line-height: 95px;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
  text-shadow: 0px 46px 28px rgb(0 0 0 / 25%);
}

@media (min-width: 475px) {
  .portfolio-banner-head h2 {
    font-size: 140px;
    line-height: 100px;
  }
}

@media (min-width: 640px) {
  .portfolio-banner-head h2 {
    width: 160px;
    font-size: 150px;
    line-height: 108px;
  }
}

@media (min-width: 768px) {
  .portfolio-banner-head h2 {
    width: 185px;
    font-size: 180px;
    line-height: 150px;
  }
}

@media (min-width: 1024px) {
  .portfolio-banner-head h2 {
    width: 220px;
    font-size: 210px;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner-head h2 {
    width: 255px;
    font-size: 240px;
    line-height: 176px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner-head h2 {
    width: 311px;
    font-size: 306px;
    line-height: 206px;
  }
}

@media (min-width: 768px) {
  .portfolio-banner-divider {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}

.portfolio-banner-head {
  z-index: 10;
  display: flex;
  width: 100%;
  max-width: 320px;
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: 20px;
}

@media (min-width: 768px) {
  .portfolio-banner-head {
    max-width: 100%;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner-head {
    row-gap: 51px;
  }
}

section.portfolio-banner .container {
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (min-width: 640px) {
  section.portfolio-banner .container {
    padding-top: 110px;
    padding-bottom: 100px;
  }
}

@media (min-width: 768px) {
  section.portfolio-banner .container {
    padding-top: 80px;
    padding-bottom: 130px;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner .container {
    padding-top: 110px;
    padding-bottom: 160px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner .container {
    padding-top: 130px;
    padding-bottom: 190px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner .container {
    padding-top: 156px;
    padding-bottom: 234px;
  }
}

.portfolio-banner {
  position: relative;
  overflow: hidden;
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}

.ogrelogic-yellow-circle.portfolio-circle-rotate {
  position: absolute;
  left: -65%;
  top: -32%;
  z-index: -10;
}

@media (min-width: 475px) {
  .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: -53%;
    top: -50%;
  }
}

@media (min-width: 640px) {
  .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: -48%;
  }
}

@media (min-width: 768px) {
  .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: -45%;
    z-index: 0;
  }
}

@media (min-width: 1024px) {
  .ogrelogic-yellow-circle.portfolio-circle-rotate {
    top: -60%;
  }
}

@media (min-width: 1600px) {
  .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: -30%;
    top: -72%;
  }
}

.portfolio-banner.web-dev .ogrelogic-yellow-circle.portfolio-circle-rotate {
  left: -4%;
}

@media (min-width: 475px) {
  .portfolio-banner.web-dev .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: 20%;
  }
}

@media (min-width: 640px) {
  .portfolio-banner.web-dev .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: 20%;
  }
}

@media (min-width: 768px) {
  .portfolio-banner.web-dev .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: 43%;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: 42%;
  }
}

.ogrelogic-yellow-circle.portfolio-circle-rotate img {
  width: 100%;
  max-width: 1660px;
}

@media (min-width: 640px) {
  .ogrelogic-yellow-circle.portfolio-circle-rotate img {
    width: 850px;
  }
}

@media (min-width: 1024px) {
  .ogrelogic-yellow-circle.portfolio-circle-rotate img {
    width: 100%;
    max-width: 1100px;
  }
}

@media (min-width: 1280px) {
  .ogrelogic-yellow-circle.portfolio-circle-rotate img {
    max-width: 1260px;
  }
}

@media (min-width: 1600px) {
  .ogrelogic-yellow-circle.portfolio-circle-rotate img {
    max-width: 1660px;
  }
}

.work-portfolio {
  position: absolute;
  right: 0px;
  top: 0px;
}

.work-portfolio img {
  width: 100%;
  max-width: 320px;
}

@media (min-width: 475px) {
  .work-portfolio img {
    max-width: 400px;
  }
}

@media (min-width: 640px) {
  .work-portfolio img {
    max-width: 480px;
  }
}

@media (min-width: 1280px) {
  .work-portfolio img {
    max-width: 875px;
  }
}

@media (min-width: 1600px) {
  .work-portfolio img {
    max-width: 1014.63px;
  }
}

.portfolio-banner-content p {
  padding-top: 60px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .portfolio-banner-content p {
    padding-top: 0px;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .portfolio-banner-content p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner-content p {
    font-size: 21px;
    line-height: 2.25rem;
    letter-spacing: 0.8px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner-content p {
    font-size: 23px;
    line-height: 2.5rem;
    letter-spacing: 1.0px;
  }
}

.portfolio-banner-content {
  z-index: 10;
}

/* portfolio tabs */

@media (min-width: 640px) {
  .container-sizer.container {
    max-width: 500px;
  }
}

@media (min-width: 768px) {
  .container-sizer.container {
    max-width: 680px;
  }
}

@media (min-width: 1024px) {
  .container-sizer.container {
    max-width: 900px;
  }
}

@media (min-width: 1280px) {
  .container-sizer.container {
    max-width: 1100px;
  }
}

@media (min-width: 1600px) {
  .container-sizer.container {
    max-width: 1400px;
  }
}

.container-sizer.container.mtabs {
  max-width: 100%;
}

@media (min-width: 1024px) {
  .container-sizer.container.mtabs {
    max-width: 900px;
  }
}

@media (min-width: 1280px) {
  .container-sizer.container.mtabs {
    max-width: 1100px;
  }
}

@media (min-width: 1600px) {
  .container-sizer.container.mtabs {
    max-width: 1400px;
  }
}

.main-tabs h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .main-tabs h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .main-tabs h3 {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .main-tabs h3 {
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .main-tabs h3 {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.main-tabs h3:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

.approach-tab-grid.approach-tab-active-grid {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

.main-tabs {
  position: relative;
  margin-left: auto;
  margin-bottom: 1.25rem;
  margin-top: 0px;
  display: flex;
  width: 100%;
  max-width: 500px;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 1.25rem;
  border-bottom-width: 3px;
  --tw-border-opacity: 1;
  border-color: rgb(49 61 90 / var(--tw-border-opacity));
  padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .main-tabs {
    margin-bottom: 1.5rem;
    gap: 2.5rem;
  }
}

@media (min-width: 768px) {
  .main-tabs {
    margin-bottom: 2rem;
    margin-top: -40px;
    gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .main-tabs {
    margin-bottom: 2.5rem;
    margin-top: -80px;
    gap: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .main-tabs {
    margin-bottom: 50px;
    margin-top: -100px;
    max-width: 570px;
    gap: 4rem;
  }
}

@media (min-width: 1600px) {
  .main-tabs {
    margin-bottom: 61px;
    margin-top: -125px;
    max-width: 700px;
    gap: 5rem;
  }
}

.grid-tab-section {
  position: relative;
  padding-top: 170px;
  padding-bottom: 85px;
}

@media (min-width: 475px) {
  .grid-tab-section {
    padding-top: 120px;
  }
}

@media (min-width: 768px) {
  .grid-tab-section {
    padding-top: 170px;
  }
}

@media (min-width: 1600px) {
  .grid-tab-section {
    padding-top: 233px;
  }
}

.tabs-grid-divider {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 5rem;
}

@media (min-width: 768px) {
  .tabs-grid-divider {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
    row-gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .tabs-grid-divider {
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
    row-gap: 50px;
  }
}

@media (min-width: 1280px) {
  .tabs-grid-divider {
    -moz-column-gap: 5rem;
         column-gap: 5rem;
    row-gap: 60px;
  }
}

@media (min-width: 1600px) {
  .tabs-grid-divider {
    -moz-column-gap: 111px;
         column-gap: 111px;
    row-gap: 75px;
  }
}

.blured-portfolio-image img {
  height: 400px;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  --tw-blur: blur(3.5px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width: 475px) {
  .blured-portfolio-image img {
    height: 450px;
  }
}

@media (min-width: 1280px) {
  .blured-portfolio-image img {
    height: 530px;
  }
}

@media (min-width: 1600px) {
  .blured-portfolio-image img {
    height: 623px;
  }
}

.normal-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  --tw-translate-x: -50%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.normal-image img {
  margin-left: auto;
  margin-right: auto;
  height: 370px;
  width: 100%;
  max-width: 270px;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (min-width: 1280px) {
  .normal-image img {
    height: 450px;
    max-width: 328px;
  }
}

@media (min-width: 1600px) {
  .normal-image img {
    height: 549px;
    max-width: 399px;
  }
}

.portfolio-tags h6 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(62 135 216 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .portfolio-tags h6 {
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .portfolio-tags h6 {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .portfolio-tags h6 {
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}

.content-area-port .portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  padding-bottom: 5px;
}

@media (min-width: 768px) {
  .content-area-port .portfolio-tags {
    min-height: 53px;
  }
}

@media (min-width: 1024px) {
  .content-area-port .portfolio-tags {
    -moz-column-gap: 1rem;
         column-gap: 1rem;
  }
}

@media (min-width: 1280px) {
  .content-area-port .portfolio-tags {
    -moz-column-gap: 1.25rem;
         column-gap: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .content-area-port .portfolio-tags {
    -moz-column-gap: 26px;
         column-gap: 26px;
  }
}

.content-area-port h3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .content-area-port h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .content-area-port h3 {
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .content-area-port h3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .content-area-port h3 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.content-area-port p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 1px;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 1280px) {
  .content-area-port p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 23px;
  }
}

@media (min-width: 1600px) {
  .content-area-port p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 25px;
  }
}

.portfolio-image-possition {
  position: relative;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.portfolio-category-tabs h6 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .portfolio-category-tabs h6 {
    font-size: 1.125rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .portfolio-category-tabs h6 {
    font-size: 1.25rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .portfolio-category-tabs h6 {
    font-size: 22px;
    line-height: 2.5rem;
  }
}

.portfolio-category-tabs h6:hover {
  --tw-text-opacity: 1;
  color: rgb(62 135 216 / var(--tw-text-opacity));
}

.portfolio-category-tabs {
  margin-top: -100px;
  margin-bottom: 1.25rem;
  display: flex;
  width: 100%;
  max-width: 900px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  row-gap: 0.75rem;
}

@media (min-width: 768px) {
  .portfolio-category-tabs {
    position: absolute;
    left: 50%;
    top: 70px;
    margin-top: 0px;
    margin-bottom: 0px;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .portfolio-category-tabs {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
}

@media (min-width: 1280px) {
  .portfolio-category-tabs {
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
    row-gap: 1rem;
  }
}

@media (min-width: 1600px) {
  .portfolio-category-tabs {
    top: 80px;
    max-width: 1000px;
    -moz-column-gap: 4rem;
         column-gap: 4rem;
    row-gap: 1.25rem;
  }
}

.approach-tab.approach-tab-active {
  --tw-text-opacity: 1;
  color: rgb(62 135 216 / var(--tw-text-opacity));
}

.tab-grid-content:hover .content-area-port h3 {
  --tw-text-opacity: 1;
  color: rgb(62 135 216 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.tab-grid-content:hover .blured-portfolio-image:after {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
  height: 100%;
  width: 100%;
  background-color: rgb(62 135 216 / 60%);
  transition-duration: 500ms;
  transition-timing-function: linear;
  --tw-content: "";
  content: var(--tw-content);
}

.tab-grid-content:hover .blured-portfolio-image img {
  --tw-blur: blur(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blured-portfolio-image {
  position: relative;
}

.container-sizer.container.mtabs {
  --tw-bg-opacity: 1;
  background-color: rgb(232 238 254 / var(--tw-bg-opacity));
  padding-bottom: 1.25rem;
}

@media (min-width: 1024px) {
  .container-sizer.container.mtabs {
    background-color: transparent;
    padding-bottom: 0px;
  }
}

/* portfolio tabs ends*/

/* ----------------------------------------work.html ends----------------------------- */

/* ----------------------------------------blog.html---------------------------------- */

.work-portfolio-tabs.blog-tabs .main-tabs {
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .work-portfolio-tabs.blog-tabs .main-tabs {
    gap: 0.75rem;
  }
}

@media (min-width: 768px) {
  .work-portfolio-tabs.blog-tabs .main-tabs {
    gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .work-portfolio-tabs.blog-tabs .main-tabs {
    gap: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .work-portfolio-tabs.blog-tabs .main-tabs {
    gap: 2rem;
  }
}

@media (min-width: 1600px) {
  .work-portfolio-tabs.blog-tabs .main-tabs {
    gap: 3.5rem;
  }
}

.work-portfolio-tabs.blog-tabs .blured-portfolio-image img {
  --tw-blur: blur(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  filter: none;
}

.work-portfolio-tabs.blog-tabs .content-area-port h3 {
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0px;
}

@media (min-width: 1024px) {
  .work-portfolio-tabs.blog-tabs .content-area-port h3 {
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .work-portfolio-tabs.blog-tabs .content-area-port h3 {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .work-portfolio-tabs.blog-tabs .content-area-port h3 {
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}

.blog-data p {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1242px;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .blog-data p {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .blog-data p {
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .blog-data p {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .blog-data p {
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}

.blog-data {
  width: 100%;
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .blog-data {
    position: absolute;
    top: 2.5rem;
    left: 50%;
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    padding-top: 0px;
  }
}

.work-portfolio-tabs.blog-tabs .container-sizer.container {
  position: relative;
}

.work-portfolio-tabs.blog-tabs .grid-tab-section {
  padding-top: 2.5rem;
}

@media (min-width: 768px) {
  .work-portfolio-tabs.blog-tabs .grid-tab-section {
    padding-top: 170px;
  }
}

@media (min-width: 1600px) {
  .work-portfolio-tabs.blog-tabs .grid-tab-section {
    padding-top: 233px;
  }
}

.single-blog-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .single-blog-content {
    flex-direction: row;
    align-items: center;
  }
}

.single-img-content {
  width: 100%;
  max-width: 812px;
}

@media (min-width: 768px) {
  .single-img-content {
    max-width: 400px;
  }
}

@media (min-width: 1024px) {
  .single-img-content {
    max-width: 600px;
  }
}

@media (min-width: 1280px) {
  .single-img-content {
    max-width: 706px;
  }
}

@media (min-width: 1600px) {
  .single-img-content {
    max-width: 812px;
  }
}

.single-img-content h3 {
  padding-bottom: 0.75rem;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .single-img-content h3 {
    padding-bottom: 1rem;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .single-img-content h3 {
    padding-bottom: 1.25rem;
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .single-img-content h3 {
    padding-bottom: 1.5rem;
    font-size: 28px;
    line-height: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .single-img-content h3 {
    padding-bottom: 1.75rem;
    font-size: 32px;
    line-height: 50px;
  }
}

@media (min-width: 1600px) {
  .single-img-content h3 {
    padding-bottom: 34px;
    font-size: 40px;
    line-height: 60px;
  }
}

.single-img-content p {
  padding-bottom: 1.25rem;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  letter-spacing: 1px;
}

@media (min-width: 768px) {
  .single-img-content p {
    padding-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .single-img-content p {
    padding-bottom: 1.75rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .single-img-content p {
    padding-bottom: 2rem;
    font-size: 22px;
    line-height: 2.25rem;
    letter-spacing: 2px;
  }
}

@media (min-width: 1600px) {
  .single-img-content p {
    padding-bottom: 34px;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.single-img-content a {
  display: flex;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .single-img-content a {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .single-img-content a {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .single-img-content a {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .single-img-content a {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.single-img-content a span {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(32 41 59 / var(--tw-border-opacity));
}

.single-img-content a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.single-img-content a:hover span {
  --tw-border-opacity: 1;
  border-color: rgb(253 197 38 / var(--tw-border-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.single-blog-img img {
  width: 100%;
  max-width: 300px;
}

@media (min-width: 1024px) {
  .single-blog-img img {
    max-width: 380px;
  }
}

@media (min-width: 1280px) {
  .single-blog-img img {
    max-width: 500px;
  }
}

@media (min-width: 1600px) {
  .single-blog-img img {
    max-width: 638px;
  }
}

.single-blog-divider .single-blog-content1 .content-single p {
  padding-bottom: 1rem;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  letter-spacing: 1px;
}

@media (min-width: 768px) {
  .single-blog-divider .single-blog-content1 .content-single p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .single-blog-divider .single-blog-content1 .content-single p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .single-blog-divider .single-blog-content1 .content-single p {
    font-size: 22px;
    line-height: 2.25rem;
    letter-spacing: 2px;
  }
}

@media (min-width: 1600px) {
  .single-blog-divider .single-blog-content1 .content-single p {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.single-blog-divider .single-blog-content1 .content-single h5 {
  padding-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .single-blog-divider .single-blog-content1 .content-single h5 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .single-blog-divider .single-blog-content1 .content-single h5 {
    padding-bottom: 0.75rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .single-blog-divider .single-blog-content1 .content-single h5 {
    padding-bottom: 1rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .single-blog-divider .single-blog-content1 .content-single h5 {
    padding-bottom: 1.25rem;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.single-blog-divider .single-blog-content1 .content-single {
  margin-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .single-blog-divider .single-blog-content1 .content-single {
    margin-bottom: 1rem;
  }
}

@media (min-width: 768px) {
  .single-blog-divider .single-blog-content1 .content-single {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .single-blog-divider .single-blog-content1 .content-single {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .single-blog-divider .single-blog-content1 .content-single {
    margin-bottom: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .single-blog-divider .single-blog-content1 .content-single {
    margin-bottom: 2rem;
  }
}

.single-blog-divider {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 0.75rem;
}

@media (min-width: 768px) {
  .single-blog-divider {
    flex-direction: row;
    padding-top: 1rem;
  }
}

@media (min-width: 1024px) {
  .single-blog-divider {
    padding-top: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .single-blog-divider {
    padding-top: 22px;
  }
}

@media (min-width: 1600px) {
  .single-blog-divider {
    padding-top: 25px;
  }
}

.single-blog-content1 {
  width: 100%;
}

@media (min-width: 768px) {
  .single-blog-content1 {
    max-width: calc(100% - 300px);
  }
}

@media (min-width: 1024px) {
  .single-blog-content1 {
    max-width: calc(100% - 350px);
  }
}

@media (min-width: 1280px) {
  .single-blog-content1 {
    max-width: calc(100% - 470px);
  }
}

@media (min-width: 1600px) {
  .single-blog-content1 {
    max-width: calc(100% - 590px);
  }
}

.single-blog-content2 {
  width: 100%;
  max-width: 570px;
}

@media (min-width: 768px) {
  .single-blog-content2 {
    max-width: 300px;
  }
}

@media (min-width: 1024px) {
  .single-blog-content2 {
    max-width: 350px;
  }
}

@media (min-width: 1280px) {
  .single-blog-content2 {
    max-width: 470px;
  }
}

@media (min-width: 1600px) {
  .single-blog-content2 {
    max-width: 570px;
  }
}

.single-blog-cat h6 {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.75rem;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(50 61 91 / var(--tw-border-opacity));
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .single-blog-cat h6 {
    margin-bottom: 1rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .single-blog-cat h6 {
    margin-bottom: 1.25rem;
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .single-blog-cat h6 {
    margin-bottom: 22px;
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}

.single-blog-cat ul li a {
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .single-blog-cat ul li a {
    line-height: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .single-blog-cat ul li a {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .single-blog-cat ul li a {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

.single-blog-cat ul li a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 300ms;
  transition-timing-function: linear;
}

.single-blog-cat ul {
  margin-left: 0.75rem;
  list-style-type: disc;
}

.single-blog-cat {
  margin-bottom: 1rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
  padding: 0.75rem;
}

@media (min-width: 1024px) {
  .single-blog-cat {
    padding: 1rem;
  }
}

@media (min-width: 1280px) {
  .single-blog-cat {
    padding: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .single-blog-cat {
    padding: 1.5rem;
  }
}

.post-data img {
  width: 100%;
  max-width: 89px;
}

.post-data {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .post-data {
    gap: 0.75rem;
  }
}

@media (min-width: 1280px) {
  .post-data {
    gap: 1rem;
  }
}

@media (min-width: 1600px) {
  .post-data {
    gap: 18px;
  }
}

.post-data-con h5 {
  padding-bottom: 0.5rem;
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .post-data-con h5 {
    line-height: 1rem;
  }
}

@media (min-width: 1280px) {
  .post-data-con h5 {
    padding-bottom: 0.75rem;
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .post-data-con h5 {
    padding-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.5rem;
  }
}

.post-data-con p {
  margin-left: auto;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  font-family: Poppins, sans-serif;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .post-data-con p {
    line-height: 1rem;
  }
}

@media (min-width: 1280px) {
  .post-data-con p {
    line-height: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .post-data-con p {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

.post-data {
  margin-bottom: 0.5rem;
}

@media (min-width: 1024px) {
  .post-data {
    margin-bottom: 0.75rem;
  }
}

@media (min-width: 1280px) {
  .post-data {
    margin-bottom: 1rem;
  }
}

@media (min-width: 1600px) {
  .post-data {
    margin-bottom: 18px;
  }
}

.single-blog-cat.twitter-acc {
  height: 418px;
  overflow-y: auto;
}

.nxt-prev-btns {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .nxt-prev-btns {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .nxt-prev-btns {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .nxt-prev-btns {
    margin-bottom: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .nxt-prev-btns {
    margin-bottom: 30px;
  }
}

.nxt-prev-btns a {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 1600px) {
  .nxt-prev-btns a {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

/* ------------------------------------------blog.html ends--------------------------- */

/* -----------------------------------------about.html starts-------------------------- */

.satisfied-customers.about-satisfied .container h3 {
  padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .satisfied-customers.about-satisfied .container h3 {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .satisfied-customers.about-satisfied .container h3 {
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .satisfied-customers.about-satisfied .container h3 {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .satisfied-customers.about-satisfied .container h3 {
    padding-bottom: 50px;
  }
}

@media (min-width: 1600px) {
  .satisfied-customers.about-satisfied .container h3 {
    padding-bottom: 60px;
  }
}

.portfolio-banner-head h3 {
  font-family: Poppins, sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.5;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
  text-shadow: 0px 46px 28px rgb(0 0 0 / 25%);
}

@media (min-width: 768px) {
  .portfolio-banner-head h3 {
    font-size: 3.75rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {
  .portfolio-banner-head h3 {
    font-size: 4.5rem;
    line-height: 1;
    line-height: 110px;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner-head h3 {
    font-size: 82px;
    line-height: 130px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner-head h3 {
    font-size: 100px;
    line-height: 150px;
  }
}

@media (min-width: 768px) {
  .container.about-cont {
    height: 530px;
  }
}

@media (min-width: 1024px) {
  .container.about-cont {
    height: 590px;
  }
}

@media (min-width: 1280px) {
  .container.about-cont {
    height: 692px;
  }
}

@media (min-width: 1600px) {
  .container.about-cont {
    height: 853px;
  }
}

.portfolio-banner-content h5 a {
  z-index: 30;
  margin-top: 0.75rem;
  display: block;
  width: 100%;
  max-width: 170px;
  border-radius: 50px;
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-weight: 800;
  line-height: 36px;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
  filter: drop-shadow(-5px 10px 20px rgba(0, 0, 0, 0.25));
}

@media (min-width: 1024px) {
  .portfolio-banner-content h5 a {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner-content h5 a {
    max-width: 190px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 20px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner-content h5 a {
    max-width: 211.48px;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 23px;
  }
}

.portfolio-banner-content h5 a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.gif-content .container img {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.container.about-cont .portfolio-banner-head {
  position: relative;
}

.container.about-cont .portfolio-banner-head h5 {
  position: absolute;
  bottom: -2.5rem;
  width: 100%;
}

@media (min-width: 640px) {
  .container.about-cont .portfolio-banner-head h5 {
    bottom: -3rem;
  }
}

@media (min-width: 768px) {
  .container.about-cont .portfolio-banner-head h5 {
    bottom: -4rem;
  }
}

@media (min-width: 1024px) {
  .container.about-cont .portfolio-banner-head h5 {
    bottom: -5rem;
  }
}

@media (min-width: 1280px) {
  .container.about-cont .portfolio-banner-head h5 {
    bottom: -60px;
  }
}

@media (min-width: 1600px) {
  .container.about-cont .portfolio-banner-head h5 {
    bottom: -130px;
  }
}

.container.about-cont .portfolio-banner-head h3 {
  height: 210px;
}

@media (min-width: 475px) {
  .container.about-cont .portfolio-banner-head h3 {
    height: 220px;
  }
}

@media (min-width: 640px) {
  .container.about-cont .portfolio-banner-head h3 {
    height: 236px;
  }
}

@media (min-width: 768px) {
  .container.about-cont .portfolio-banner-head h3 {
    height: auto;
  }
}

.main-tabs.about-tabs {
  width: 100%;
  max-width: 406px;
}

.we-are-you {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .we-are-you {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .we-are-you {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .we-are-you {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .we-are-you {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1600px) {
  .we-are-you {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

.we-are-you .container h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

@media (min-width: 640px) {
  .we-are-you .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .we-are-you .container h3 {
    padding-bottom: 1rem;
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .we-are-you .container h3 {
    padding-bottom: 1.25rem;
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .we-are-you .container h3 {
    padding-bottom: 1.5rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .we-are-you .container h3 {
    padding-bottom: 1.75rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.we-are-you .container p {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  letter-spacing: 1px;
}

@media (min-width: 640px) {
  .we-are-you .container p {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .we-are-you .container p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .we-are-you .container p {
    max-width: 900px;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .we-are-you .container p {
    max-width: 1100px;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .we-are-you .container p {
    max-width: 1448px;
    font-size: 25px;
    line-height: 2.5rem;
    letter-spacing: 2px;
  }
}

.we-are-you .container .we-cards-content p {
  text-align: center;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 1px;
}

@media (min-width: 1280px) {
  .we-are-you .container .we-cards-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 28px;
  }
}

@media (min-width: 1600px) {
  .we-are-you .container .we-cards-content p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px;
    letter-spacing: 2px;
  }
}

.we-are-you .container .we-cards-content h5 {
  margin-left: auto;
  margin-right: auto;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .we-are-you .container .we-cards-content h5 {
    padding-bottom: 1rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .we-are-you .container .we-cards-content h5 {
    padding-top: 1rem;
    padding-bottom: 1.25rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .we-are-you .container .we-cards-content h5 {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .we-are-you .container .we-cards-content h5 {
    padding-top: 22px;
    padding-bottom: 1.75rem;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.we-are-you .container .we-cards-content img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 70px;
}

@media (min-width: 1280px) {
  .we-are-you .container .we-cards-content img {
    max-width: 80px;
  }
}

@media (min-width: 1600px) {
  .we-are-you .container .we-cards-content img {
    max-width: 100px;
  }
}

.we-are-you .container .we-cards-content {
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(223 228 245 / var(--tw-bg-opacity));
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 768px) {
  .we-are-you .container .we-cards-content {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .we-are-you .container .we-cards-content {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .we-are-you .container .we-cards-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1600px) {
  .we-are-you .container .we-cards-content {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.we-are-you .container .we-cards-content {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  width: 100%;
}

@media (min-width: 768px) {
  .we-are-you .container .we-cards-content {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .we-are-you .container .we-cards-content {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

@media (min-width: 1280px) {
  .we-are-you .container .we-cards-content {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    max-width: 360px;
  }
}

@media (min-width: 1600px) {
  .we-are-you .container .we-cards-content {
    margin-top: 3rem;
    margin-bottom: 3rem;
    max-width: 440px;
  }
}

.we-are-you .container .we-cards {
  justify-content: space-between;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .we-are-you .container .we-cards {
    display: flex;
  }
}

.precision-sec1 h3 {
  padding-bottom: 0.75rem;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .precision-sec1 h3 {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .precision-sec1 h3 {
    padding-bottom: 1rem;
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .precision-sec1 h3 {
    padding-bottom: 1.25rem;
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .precision-sec1 h3 {
    padding-bottom: 1.5rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .precision-sec1 h3 {
    padding-bottom: 1.75rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.precision-sec1 p {
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  letter-spacing: 1px;
}

@media (min-width: 768px) {
  .precision-sec1 p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .precision-sec1 p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .precision-sec1 p {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .precision-sec1 p {
    font-size: 25px;
    line-height: 2.5rem;
    letter-spacing: 2px;
  }
}

.precision-sec1 {
  width: 100%;
  max-width: 810px;
}

@media (min-width: 1024px) {
  .precision-sec1 {
    max-width: 520px;
  }
}

@media (min-width: 1280px) {
  .precision-sec1 {
    max-width: 650px;
  }
}

@media (min-width: 1600px) {
  .precision-sec1 {
    max-width: 810px;
  }
}

.precision-sec2 img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 400px;
}

@media (min-width: 1024px) {
  .precision-sec2 img {
    max-width: 500px;
  }
}

@media (min-width: 1280px) {
  .precision-sec2 img {
    max-width: 580px;
  }
}

@media (min-width: 1600px) {
  .precision-sec2 img {
    max-width: 686px;
  }
}

.precision-divider {
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .precision-divider {
    display: flex;
  }
}

.precision-scroll {
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .precision-scroll {
    height: 384px;
  }
}

@media (min-width: 1280px) {
  .precision-scroll {
    height: 462px;
  }
}

@media (min-width: 1600px) {
  .precision-scroll {
    height: 548px;
  }
}

.precision-scroll::-webkit-scrollbar {
  width: 0px;
}

/* -----------------------------------------about.html ends---------------------------- */

/* -----------------------------------------service.html starts------------------------ */

.work-portfolio-tabs.service-tabs .main-tabs {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 475px;
  border-bottom-width: 0px;
}

@media (min-width: 640px) {
  .work-portfolio-tabs.service-tabs .main-tabs {
    max-width: 500px;
  }
}

@media (min-width: 768px) {
  .work-portfolio-tabs.service-tabs .main-tabs {
    max-width: 600px;
  }
}

@media (min-width: 1024px) {
  .work-portfolio-tabs.service-tabs .main-tabs {
    margin-top: -93px;
    margin-left: auto;
    margin-right: 0px;
    max-width: 570px;
  }
}

@media (min-width: 1280px) {
  .work-portfolio-tabs.service-tabs .main-tabs {
    margin-top: -132px;
    max-width: 660px;
  }
}

@media (min-width: 1600px) {
  .work-portfolio-tabs.service-tabs .main-tabs {
    margin-top: -196px;
    max-width: 746px;
  }
}

.work-portfolio-tabs.service-tabs .main-tabs ul {
  margin-left: 1.25rem;
  display: flex;
  list-style-type: disc;
  flex-wrap: wrap;
  justify-content: space-between;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 0.75rem;
}

@media (min-width: 640px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul {
    -moz-column-gap: 2rem;
         column-gap: 2rem;
  }
}

@media (min-width: 768px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
    row-gap: 1rem;
  }
}

@media (min-width: 1024px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul {
    -moz-column-gap: 10px;
         column-gap: 10px;
    row-gap: 2px;
  }
}

@media (min-width: 1280px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul {
    -moz-column-gap: 60px;
         column-gap: 60px;
    row-gap: 0.75rem;
  }
}

@media (min-width: 1600px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul {
    -moz-column-gap: 70px;
         column-gap: 70px;
    row-gap: 33px;
  }
}

.work-portfolio-tabs.service-tabs .main-tabs ul li a {
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul li a {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul li a {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px;
  }
}

@media (min-width: 1280px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul li a {
    font-size: 22px;
    line-height: 34px;
  }
}

@media (min-width: 1600px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul li a {
    font-size: 25px;
    line-height: 37.5px;
  }
}

.work-portfolio-tabs.service-tabs .main-tabs ul li:hover a {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 300ms;
  transition-timing-function: linear;
}

.work-portfolio-tabs.service-tabs .main-tabs ul li:hover::marker {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 300ms;
  transition-timing-function: linear;
}

.work-portfolio-tabs.service-tabs .main-tabs ul li {
  width: 100%;
}

@media (min-width: 640px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul li {
    max-width: calc(100% / 2 - 35px);
  }
}

@media (min-width: 1024px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul li {
    max-width: calc(100% / 2 - 18px);
  }
}

@media (min-width: 1280px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul li {
    max-width: calc(100% / 2 - 37px);
  }
}

@media (min-width: 1600px) {
  .work-portfolio-tabs.service-tabs .main-tabs ul li {
    max-width: calc(100% / 2 - 35px);
  }
}

.service-main .service-content h3 {
  padding-bottom: 0.5rem;
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .service-main .service-content h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .service-main .service-content h3 {
    padding-bottom: 0.75rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .service-main .service-content h3 {
    padding-bottom: 1rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .service-main .service-content h3 {
    padding-bottom: 18px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.service-main .service-content p {
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .service-main .service-content p {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .service-main .service-content p {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .service-main .service-content p {
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .service-main .service-content p {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.service-main .service-content {
  width: 100%;
}

@media (min-width: 768px) {
  .service-main .service-content {
    max-width: 423px;
  }
}

@media (min-width: 1024px) {
  .service-main .service-content {
    max-width: 587px;
  }
}

@media (min-width: 1280px) {
  .service-main .service-content {
    max-width: 728px;
  }
}

@media (min-width: 1600px) {
  .service-main .service-content {
    max-width: 859px;
  }
}

.service-content-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 768px) {
  .service-content-divider {
    margin-bottom: 1.25rem;
    flex-direction: row;
  }
}

@media (min-width: 1280px) {
  .service-content-divider {
    margin-bottom: 0px;
  }
}

@media (min-width: 768px) {
  .service-section .service-content-divider:nth-child(even) {
    flex-direction: row-reverse;
  }
}

.service-section .service-content-divider .service-images img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 300px;
}

@media (min-width: 768px) {
  .service-section .service-content-divider .service-images img {
    max-width: 350px;
  }
}

@media (min-width: 1024px) {
  .service-section .service-content-divider .service-images img {
    max-width: 400px;
  }
}

@media (min-width: 1280px) {
  .service-section .service-content-divider .service-images img {
    max-width: 450px;
  }
}

@media (min-width: 1600px) {
  .service-section .service-content-divider .service-images img {
    max-width: 558px;
  }
}

/* -----------------------------------------service.html ends-------------------------- */

/* --------------------------------------web-development starts------------------------ */

section.portfolio-banner.web-dev .portfolio-banner-content img {
  top: 2.5rem;
  right: 0px;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  width: 100%;
  max-width: 380px;
}

@media (min-width: 475px) {
  section.portfolio-banner.web-dev .portfolio-banner-content img {
    max-width: 475px;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev .portfolio-banner-content img {
    position: absolute;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .portfolio-banner-content img {
    max-width: 650px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .portfolio-banner-content img {
    max-width: 879px;
  }
}

section.portfolio-banner.web-dev .container {
  position: relative;
}

section.portfolio-banner.web-dev .container .portfolio-banner-head h3 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 700;
}

@media (min-width: 640px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head h3 {
    font-size: 40px;
  }
}

@media (min-width: 768px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head h3 {
    font-size: 50px;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head h3 {
    font-size: 56px;
    line-height: 60px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head h3 {
    font-size: 62px;
    line-height: 70px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head h3 {
    font-size: 70px;
    line-height: 80px;
  }
}

section.portfolio-banner.web-dev .container .portfolio-banner-head p {
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head p {
    font-size: 20px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head p {
    font-size: 23px;
    line-height: 2.5rem;
  }
}

section.portfolio-banner.web-dev .portfolio-banner-head {
  width: 100%;
  max-width: 600px;
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .portfolio-banner-head {
    max-width: 689px;
  }
}

.web-gif img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 600px;
}

@media (min-width: 1024px) {
  .web-gif img {
    max-width: 780px;
  }
}

@media (min-width: 1280px) {
  .web-gif img {
    max-width: 800px;
  }
}

@media (min-width: 1600px) {
  .web-gif img {
    max-width: 936px;
  }
}

.web-gif {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .web-gif {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .web-gif {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .web-gif {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .web-gif {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .web-gif {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
}

section.portfolio-banner.web-dev .container .portfolio-banner-divider {
  display: flex;
  flex-direction: column-reverse;
}

@media (min-width: 768px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-divider {
    display: grid;
  }
}

section.portfolio-banner.web-dev .container {
  padding-top: 1.25rem;
}

@media (min-width: 768px) {
  section.portfolio-banner.web-dev .container {
    padding-top: 80px;
    padding-bottom: 130px;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev .container {
    padding-top: 110px;
    padding-bottom: 160px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .container {
    padding-top: 130px;
    padding-bottom: 215px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .container {
    padding-top: 138px;
    padding-bottom: 276px;
  }
}

.overview-web .container h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .overview-web .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .overview-web .container h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .overview-web .container h3 {
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .overview-web .container h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .overview-web .container h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.overview-web .container h5 {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  padding-bottom: 1.25rem;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .overview-web .container h5 {
    padding-bottom: 1.5rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .overview-web .container h5 {
    padding-bottom: 1.75rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .overview-web .container h5 {
    max-width: 540px;
    padding-bottom: 2rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .overview-web .container h5 {
    max-width: 570px;
    padding-bottom: 2.5rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .overview-web .container h5 {
    max-width: 646px;
    padding-bottom: 50px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.overview-web .container p {
  padding-bottom: 0.25rem;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 640px) {
  .overview-web .container p {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .overview-web .container p {
    padding-bottom: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .overview-web .container p {
    padding-bottom: 0.75rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .overview-web .container p {
    padding-bottom: 1rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .overview-web .container p {
    padding-bottom: 18px;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.overview-web .container {
  padding-top: 0.75rem;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .overview-web .container {
    padding-top: 1rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .overview-web .container {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .overview-web .container {
    padding-top: 1.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .overview-web .container {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .overview-web .container {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
  }
}

.immersive .container h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .immersive .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .immersive .container h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .immersive .container h3 {
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .immersive .container h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .immersive .container h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.immersive .container h5 {
  margin-left: auto;
  margin-right: auto;
  max-width: 1100px;
  padding-bottom: 1.25rem;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .immersive .container h5 {
    padding-bottom: 1.5rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .immersive .container h5 {
    padding-bottom: 1.75rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .immersive .container h5 {
    padding-bottom: 2rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .immersive .container h5 {
    padding-bottom: 2.5rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .immersive .container h5 {
    max-width: 1332px;
    padding-bottom: 50px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.dev-tech h6 {
  font-family: Poppins, sans-serif;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .dev-tech h6 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .dev-tech h6 {
    font-size: 22px;
  }
}

@media (min-width: 1280px) {
  .dev-tech h6 {
    font-size: 26px;
  }
}

@media (min-width: 1600px) {
  .dev-tech h6 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.dev-tech-images {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .dev-tech-images {
    gap: 2rem;
  }
}

@media (min-width: 768px) {
  .dev-tech-images {
    gap: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .dev-tech-images {
    gap: 50px;
  }
}

@media (min-width: 1280px) {
  .dev-tech-images {
    gap: 60px;
  }
}

@media (min-width: 1600px) {
  .dev-tech-images {
    gap: 82px;
  }
}

.dev-tech {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  width: 100%;
  max-width: 700px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .dev-tech {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .dev-tech {
    flex-direction: row;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .dev-tech {
    max-width: 900px;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1280px) {
  .dev-tech {
    max-width: 1100px;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .dev-tech {
    max-width: 1326px;
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }
}

.divider-line {
  width: 100%;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.immersive {
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity));
}

.dev-tech-images img {
  width: 100%;
  max-width: 55px;
}

@media (min-width: 640px) {
  .dev-tech-images img {
    max-width: 60px;
  }
}

@media (min-width: 768px) {
  .dev-tech-images img {
    max-width: 70px;
  }
}

@media (min-width: 1024px) {
  .dev-tech-images img {
    max-width: 80px;
  }
}

@media (min-width: 1280px) {
  .dev-tech-images img {
    max-width: 90px;
  }
}

@media (min-width: 1600px) {
  .dev-tech-images img {
    max-width: 114px;
  }
}

.designing-inno .container {
  padding-top: 2.5rem;
}

@media (min-width: 640px) {
  .designing-inno .container {
    padding-top: 3rem;
  }
}

@media (min-width: 768px) {
  .designing-inno .container {
    padding-top: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .designing-inno .container {
    padding-top: 4rem;
  }
}

@media (min-width: 1280px) {
  .designing-inno .container {
    padding-top: 5rem;
  }
}

@media (min-width: 1600px) {
  .designing-inno .container {
    padding-top: 6rem;
  }
}

.designing-inno .container h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .designing-inno .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .designing-inno .container h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .designing-inno .container h3 {
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .designing-inno .container h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .designing-inno .container h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.designing-inno .container p {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1100px;
  padding-bottom: 1rem;
  text-align: start;
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 640px) {
  .designing-inno .container p {
    padding-bottom: 1.25rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .designing-inno .container p {
    padding-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .designing-inno .container p {
    padding-bottom: 2rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .designing-inno .container p {
    padding-bottom: 2.5rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .designing-inno .container p {
    max-width: 1278px;
    padding-bottom: 2.75rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.card-content {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(53 110 180 / var(--tw-bg-opacity));
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .card-content {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (min-width: 768px) {
  .card-content {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .card-content {
    max-width: 350px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .card-content {
    max-width: 400px;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1600px) {
  .card-content {
    max-width: 440px;
    padding-top: 42px;
    padding-bottom: 42px;
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }
}

.card-content img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  width: 100%;
  max-width: 55px;
}

@media (min-width: 640px) {
  .card-content img {
    margin-bottom: 1.25rem;
    max-width: 60px;
  }
}

@media (min-width: 768px) {
  .card-content img {
    margin-bottom: 1.5rem;
    max-width: 70px;
  }
}

@media (min-width: 1024px) {
  .card-content img {
    margin-bottom: 2rem;
    max-width: 80px;
  }
}

@media (min-width: 1280px) {
  .card-content img {
    margin-bottom: 2.5rem;
    max-width: 90px;
  }
}

@media (min-width: 1600px) {
  .card-content img {
    margin-bottom: 2.75rem;
    max-width: 114px;
  }
}

.card-content h5 {
  margin-bottom: 0.75rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .card-content h5 {
    margin-bottom: 1rem;
  }
}

@media (min-width: 768px) {
  .card-content h5 {
    margin-bottom: 1.25rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .card-content h5 {
    margin-bottom: 1.5rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .card-content h5 {
    margin-bottom: 1.75rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .card-content h5 {
    margin-bottom: 33px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.designing-inno .container .card-content p {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .designing-inno .container .card-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 20px;
  }
}

@media (min-width: 1280px) {
  .designing-inno .container .card-content p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 22px;
  }
}

@media (min-width: 1600px) {
  .designing-inno .container .card-content p {
    font-size: 22px;
    line-height: 25px;
  }
}

.design-cards {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 1rem;
}

@media (min-width: 640px) {
  .design-cards {
    gap: 1.25rem;
  }
}

@media (min-width: 768px) {
  .design-cards {
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .design-cards {
    flex-direction: row;
    gap: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .design-cards {
    gap: 3rem;
  }
}

@media (min-width: 1600px) {
  .design-cards {
    gap: 5rem;
  }
}

/* -------------------------------------web development ends--------------------------- */

/* ---------------------------------------technology.html starts ------------------------ */

@media (min-width: 768px) {
  section.portfolio-banner.web-dev.tech-dev .container {
    padding-bottom: 130px;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev.tech-dev .container {
    padding-bottom: 190px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev.tech-dev .container {
    padding-bottom: 215px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev.tech-dev .container {
    padding-bottom: 320px;
  }
}

.tools-sec-content h3 {
  padding-bottom: 0.5rem;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .tools-sec-content h3 {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .tools-sec-content h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .tools-sec-content h3 {
    padding-bottom: 0.75rem;
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .tools-sec-content h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .tools-sec-content h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.tools-sec-content p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .tools-sec-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .tools-sec-content p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .tools-sec-content p {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .tools-sec-content p {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.tools-divider {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: center;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .tools-divider {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.tools-sec-content {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 560px;
}

@media (min-width: 1600px) {
  .tools-sec-content {
    max-width: 644px;
  }
}

.tools-sec-image img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 520px;
}

@media (min-width: 1280px) {
  .tools-sec-image img {
    max-width: 580px;
  }
}

@media (min-width: 1600px) {
  .tools-sec-image img {
    max-width: 677px;
  }
}

.tools-used {
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .tools-used {
    margin-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  .tools-used {
    margin-bottom: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .tools-used {
    margin-bottom: 4rem;
  }
}

@media (min-width: 1280px) {
  .tools-used {
    margin-bottom: 5rem;
  }
}

@media (min-width: 1600px) {
  .tools-used {
    margin-bottom: 110px;
  }
}

.overview-web.tech-web .container {
  width: 100%;
}

@media (min-width: 1024px) {
  .overview-web.tech-web .container {
    max-width: 920px;
  }
}

@media (min-width: 1280px) {
  .overview-web.tech-web .container {
    max-width: 1120px;
  }
}

@media (min-width: 1600px) {
  .overview-web.tech-web .container {
    max-width: 1321px;
  }
}

.tools-tabs .container .tools-tabs-sec h5 a {
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .tools-tabs .container .tools-tabs-sec h5 a {
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .tools-tabs .container .tools-tabs-sec h5 a {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .tools-tabs .container .tools-tabs-sec h5 a {
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}

.tools-tabs .container .tools-tabs-sec h5 a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 300ms;
  transition-timing-function: linear;
}

.tools-tabs .container .tools-tabs-sec {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 0.75rem;
}

@media (min-width: 640px) {
  .tools-tabs .container .tools-tabs-sec {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
    row-gap: 1rem;
  }
}

@media (min-width: 768px) {
  .tools-tabs .container .tools-tabs-sec {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
    row-gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .tools-tabs .container .tools-tabs-sec {
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
    row-gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .tools-tabs .container .tools-tabs-sec {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
    row-gap: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .tools-tabs .container .tools-tabs-sec {
    -moz-column-gap: 5rem;
         column-gap: 5rem;
    row-gap: 33px;
  }
}

.tech-tab-section .mySwiperTech .swiper-wrapper .swiper-slide img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 160px;
}

@media (min-width: 1280px) {
  .tech-tab-section .mySwiperTech .swiper-wrapper .swiper-slide img {
    max-width: 180px;
  }
}

@media (min-width: 1600px) {
  .tech-tab-section .mySwiperTech .swiper-wrapper .swiper-slide img {
    max-width: 200px;
  }
}

.tech-tab-section .mySwiperTech .swiper-wrapper .swiper-slide h6 {
  margin-left: auto;
  margin-right: auto;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

@media (min-width: 1024px) {
  .tech-tab-section .mySwiperTech .swiper-wrapper .swiper-slide h6 {
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .tech-tab-section .mySwiperTech .swiper-wrapper .swiper-slide h6 {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .tech-tab-section .mySwiperTech .swiper-wrapper .swiper-slide h6 {
    font-size: 1.25rem;
    line-height: 2.5rem;
  }
}

.tech-btns {
  position: absolute;
  top: 50%;
  z-index: 20;
  display: flex;
  width: 100%;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  flex-direction: row-reverse;
  justify-content: space-between;
}

.tools-tabs {
  margin-bottom: 1rem;
}

@media (min-width: 640px) {
  .tools-tabs {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .tools-tabs {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .tools-tabs {
    margin-bottom: 2rem;
  }
}

@media (min-width: 1280px) {
  .tools-tabs {
    margin-bottom: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .tools-tabs {
    margin-bottom: 54px;
  }
}

.tools-tabs .container .tools-tabs-sec h5.approach-tab-active-tech a {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

/* ---------------------------------------technology.html ends -------------------------- */

/* --------------------------------------marketing.html starts--------------------------- */

.portfolio-banner.web-dev.mark-dev .portfolio-banner-head {
  width: 100%;
  max-width: 660px;
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev.mark-dev .portfolio-banner-head {
    max-width: 742px;
  }
}

@media (min-width: 1024px) {
  .portfolio-banner.web-dev.mark-dev .container {
    padding-bottom: 160px;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner.web-dev.mark-dev .container {
    padding-bottom: 180px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev.mark-dev .container {
    padding-bottom: 216px;
  }
}

.overview-web.mark-web .container h5 {
  width: 100%;
  max-width: 780px;
}

@media (min-width: 1280px) {
  .overview-web.mark-web .container h5 {
    max-width: 860px;
  }
}

@media (min-width: 1600px) {
  .overview-web.mark-web .container h5 {
    max-width: 952px;
  }
}

.mark-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .mark-divider {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .mark-divider {
    flex-direction: row;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .mark-divider {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .mark-divider {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .mark-divider {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 5rem;
  }
}

.mark-divider .mark-img-content h4 {
  padding-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .mark-divider .mark-img-content h4 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .mark-divider .mark-img-content h4 {
    padding-bottom: 0.75rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .mark-divider .mark-img-content h4 {
    padding-bottom: 1rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .mark-divider .mark-img-content h4 {
    padding-bottom: 18px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.mark-divider .mark-img-content p {
  padding-bottom: 0.5rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .mark-divider .mark-img-content p {
    padding-bottom: 0.75rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .mark-divider .mark-img-content p {
    padding-bottom: 1rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .mark-divider .mark-img-content p {
    padding-bottom: 1.25rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .mark-divider .mark-img-content p {
    padding-bottom: 1.5rem;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.mark-divider .mark-img-content ul li {
  margin-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(51 113 95 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .mark-divider .mark-img-content ul li {
    font-size: 1.125rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .mark-divider .mark-img-content ul li {
    font-size: 1.25rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .mark-divider .mark-img-content ul li {
    font-size: 22px;
    line-height: 2.5rem;
  }
}

.mark-divider .mark-img-content ul {
  display: grid;
  list-style-type: disc;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  align-items: center;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .mark-divider .mark-img-content ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.mark-divider .mark-img-content ul::marker {
  --tw-text-opacity: 1;
  color: rgb(51 113 95 / var(--tw-text-opacity));
}

.mark-divider .mark-img-content {
  width: 100%;
  max-width: 480px;
}

@media (min-width: 1024px) {
  .mark-divider .mark-img-content {
    max-width: 627px;
  }
}

@media (min-width: 1280px) {
  .mark-divider .mark-img-content {
    max-width: 742px;
  }
}

@media (min-width: 1600px) {
  .mark-divider .mark-img-content {
    max-width: 859px;
  }
}

.mark-content {
  padding-top: 2.5rem;
}

@media (min-width: 640px) {
  .mark-content {
    padding-top: 3rem;
  }
}

@media (min-width: 768px) {
  .mark-content {
    padding-top: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .mark-content {
    padding-top: 4rem;
  }
}

@media (min-width: 1280px) {
  .mark-content {
    padding-top: 5rem;
  }
}

@media (min-width: 1600px) {
  .mark-content {
    padding-top: 114px;
  }
}

.mark-divider .mark-image img {
  width: 100%;
  max-width: 280px;
}

@media (min-width: 1024px) {
  .mark-divider .mark-image img {
    max-width: 320px;
  }
}

@media (min-width: 1280px) {
  .mark-divider .mark-image img {
    max-width: 380px;
  }
}

@media (min-width: 1600px) {
  .mark-divider .mark-image img {
    max-width: 434px;
  }
}

@media (min-width: 768px) {
  .mark-content .mark-divider:nth-child(even) {
    flex-direction: row-reverse;
  }
}

/* --------------------------------------marketing.html ends----------------------------- */

/* --------------------------------------mobile development starts----------------------- */

.portfolio-banner.web-dev.mob-dev .portfolio-banner-head {
  max-width: 640px;
  row-gap: 10px;
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev.mob-dev .portfolio-banner-head {
    max-width: 742px;
  }
}

.portfolio-banner.web-dev.mob-dev .container .portfolio-banner-head p {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1024px) {
  .portfolio-banner.web-dev.mob-dev .container .portfolio-banner-head p {
    font-size: 1.125rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner.web-dev.mob-dev .container .portfolio-banner-head p {
    font-size: 19px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev.mob-dev .container .portfolio-banner-head p {
    font-size: 22px;
    line-height: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner.web-dev.mob-dev .container {
    padding-bottom: 195px;
    padding-top: 67px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev.mob-dev .container {
    padding-bottom: 250px;
    padding-top: 95px;
  }
}

.tech-starts .container li {
  margin-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

.tech-starts .container li *::marker {
  color: rgb(50 61 91 );
}

.tech-starts .container li::marker {
  color: rgb(50 61 91 );
}

@media (min-width: 640px) {
  .tech-starts .container li {
    font-size: 1rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 768px) {
  .tech-starts .container li {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .tech-starts .container li {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .tech-starts .container li {
    font-size: 21px;
    line-height: 2rem;
  }
}

@media (min-width: 1600px) {
  .tech-starts .container li {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.tech-starts .container ul {
  display: grid;
  list-style-type: disc;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  row-gap: 0.5rem;
}

@media (min-width: 475px) {
  .tech-starts .container ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .tech-starts .container ul {
    max-width: 929px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .tech-starts .container ul {
    max-width: 975px;
    row-gap: 0.25rem;
  }
}

@media (min-width: 1600px) {
  .tech-starts .container ul {
    max-width: 1146px;
    row-gap: 0.75rem;
  }
}

.tech-starts .container {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 1024px) {
  .tech-starts .container {
    padding-top: 0px;
  }
}

@media (min-width: 1280px) {
  .tech-starts .container {
    padding-top: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .tech-starts .container {
    padding-bottom: 0.5rem;
  }
}

.tech-starts {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(232 239 255 / var(--tw-bg-opacity));
}

@media (min-width: 1024px) {
  .tech-starts {
    margin-top: -48px;
  }
}

@media (min-width: 1280px) {
  .tech-starts {
    margin-top: -120px;
    background-color: transparent;
  }
}

@media (min-width: 1600px) {
  .tech-starts {
    margin-top: -175px;
  }
}

.overview-web .container .mob-overview-divider p {
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .overview-web .container .mob-overview-divider p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .overview-web .container .mob-overview-divider p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .overview-web .container .mob-overview-divider p {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .overview-web .container .mob-overview-divider p {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.overview-web .container .mob-overview-divider ul li {
  margin-left: 2rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .overview-web .container .mob-overview-divider ul li {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .overview-web .container .mob-overview-divider ul li {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .overview-web .container .mob-overview-divider ul li {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .overview-web .container .mob-overview-divider ul li {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.overview-web .container .mob-overview-divider ul {
  list-style-type: disc;
  padding-bottom: 0.75rem;
}

.overview-web .container .mob-overview-divider ul *::marker {
  color: rgb(0 0 0 );
}

.overview-web .container .mob-overview-divider ul::marker {
  color: rgb(0 0 0 );
}

@media (min-width: 1280px) {
  .overview-web .container .mob-overview-divider ul {
    padding-bottom: 1rem;
  }
}

@media (min-width: 1600px) {
  .overview-web .container .mob-overview-divider ul {
    padding-bottom: 1.25rem;
  }
}

.overview-web .container .mob-overview-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .overview-web .container .mob-overview-divider {
    gap: 1.5rem;
  }
}

@media (min-width: 768px) {
  .overview-web .container .mob-overview-divider {
    flex-direction: row;
    gap: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .overview-web .container .mob-overview-divider {
    gap: 2rem;
  }
}

@media (min-width: 1280px) {
  .overview-web .container .mob-overview-divider {
    gap: 2rem;
  }
}

@media (min-width: 1600px) {
  .overview-web .container .mob-overview-divider {
    gap: 55px;
  }
}

.overview-web .container .mob-overview-divider .mob-overview-content {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .overview-web .container .mob-overview-divider .mob-overview-content {
    max-width: 440px;
  }
}

@media (min-width: 1024px) {
  .overview-web .container .mob-overview-divider .mob-overview-content {
    max-width: 600px;
  }
}

@media (min-width: 1280px) {
  .overview-web .container .mob-overview-divider .mob-overview-content {
    max-width: 843px;
  }
}

@media (min-width: 1600px) {
  .overview-web .container .mob-overview-divider .mob-overview-content {
    max-width: 997px;
  }
}

.overview-web .container .mob-overview-divider .mob-over-img img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 330px;
}

@media (min-width: 640px) {
  .overview-web .container .mob-overview-divider .mob-over-img img {
    max-width: 350px;
  }
}

@media (min-width: 1024px) {
  .overview-web .container .mob-overview-divider .mob-over-img img {
    max-width: 360px;
  }
}

@media (min-width: 1280px) {
  .overview-web .container .mob-overview-divider .mob-over-img img {
    max-width: 400px;
  }
}

@media (min-width: 1600px) {
  .overview-web .container .mob-overview-divider .mob-over-img img {
    max-width: 548px;
  }
}

.mobile-cards-content {
  width: 100%;
  max-width: 320px;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(223 228 245 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.25);
}

@media (min-width: 640px) {
  .mobile-cards-content {
    max-width: 280px;
  }
}

@media (min-width: 768px) {
  .mobile-cards-content {
    max-width: 320px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .mobile-cards-content {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1280px) {
  .mobile-cards-content {
    max-width: 360px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .mobile-cards-content {
    max-width: 440px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }
}

.mobile-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  row-gap: 1rem;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .mobile-cards {
    row-gap: 1.25rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .mobile-cards {
    row-gap: 1.5rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .mobile-cards {
    row-gap: 1.75rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .mobile-cards {
    row-gap: 2rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .mobile-cards {
    row-gap: 2.5rem;
    padding-bottom: 5rem;
  }
}

.mobile-cards-content img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5rem;
  width: 100%;
  max-width: 65px;
}

@media (min-width: 640px) {
  .mobile-cards-content img {
    margin-bottom: 0.75rem;
  }
}

@media (min-width: 768px) {
  .mobile-cards-content img {
    margin-bottom: 1rem;
  }
}

@media (min-width: 1024px) {
  .mobile-cards-content img {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .mobile-cards-content img {
    margin-bottom: 1.5rem;
    max-width: 70px;
  }
}

@media (min-width: 1600px) {
  .mobile-cards-content img {
    margin-bottom: 1.75rem;
    max-width: 80px;
  }
}

.mobile-cards-content h6 {
  padding-bottom: 0.75rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .mobile-cards-content h6 {
    padding-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .mobile-cards-content h6 {
    padding-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .mobile-cards-content h6 {
    padding-bottom: 1.5rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .mobile-cards-content h6 {
    padding-bottom: 30px;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.mobile-cards-content p {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 1280px) {
  .mobile-cards-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 28px;
  }
}

@media (min-width: 1600px) {
  .mobile-cards-content p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px;
  }
}

.immersive.mob-service {
  border-bottom-width: 0px;
}

.immersive.mob-process {
  border-bottom-width: 0px;
  padding-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .immersive.mob-process {
    padding-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  .immersive.mob-process {
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .immersive.mob-process {
    padding-bottom: 4rem;
  }
}

@media (min-width: 1280px) {
  .immersive.mob-process {
    padding-bottom: 5rem;
  }
}

@media (min-width: 1600px) {
  .immersive.mob-process {
    padding-bottom: 100px;
  }
}

.mobile-dev-scroller .port-image .tab-grid-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .mobile-dev-scroller .port-image .tab-grid-content {
    flex-direction: row;
  }
}

.mobile-dev-scroller .port-image .tab-grid-content .portfolio-image-possition img {
  width: 100%;
  max-width: 631px;
  border-radius: 30px;
}

.mobile-dev-scroller .port-image .tab-grid-content .content-area-port {
  width: 100%;
  max-width: 645px;
}

@media (min-width: 1024px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port {
    max-width: 500px;
  }
}

@media (min-width: 1280px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port {
    max-width: 560px;
  }
}

@media (min-width: 1600px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port {
    max-width: 645px;
  }
}

.mobile-dev-scroller .port-image .tab-grid-content .content-area-port h3 {
  text-align: start;
}

.mobile-dev-scroller .port-image .tab-grid-content .content-area-port .mob-dev-view a {
  margin-top: 0.5rem;
  margin-bottom: 2rem;
  display: block;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(62 135 216 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

@media (min-width: 640px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port .mob-dev-view a {
    margin-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port .mob-dev-view a {
    margin-bottom: 3rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port .mob-dev-view a {
    margin-bottom: 4rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port .mob-dev-view a {
    margin-bottom: 5rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port .mob-dev-view a {
    margin-bottom: 6rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.mobile-dev-scroller .port-image .tab-grid-content:hover .content-area-port .mob-dev-view a {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.mobile-dev-scroller .port-image .tab-grid-content .content-area-port p {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 29.5px;
  }
}

@media (min-width: 1280px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port p {
    font-size: 22px;
    line-height: 33.5px;
  }
}

@media (min-width: 1600px) {
  .mobile-dev-scroller .port-image .tab-grid-content .content-area-port p {
    font-size: 25px;
    line-height: 37.5px;
  }
}

.mobile-dev-scroller .port-image .tab-grid-content:hover .blured-portfolio-image:after {
  border-radius: 30px;
}

.mobile-dev-scroller {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
  height: 690px;
  width: 100%;
  max-width: 320px;
  overflow-y: auto;
}

@media (min-width: 475px) {
  .mobile-dev-scroller {
    height: 692px;
    max-width: 100%;
  }
}

@media (min-width: 640px) {
  .mobile-dev-scroller {
    margin-bottom: 2.5rem;
    height: 695px;
  }
}

@media (min-width: 768px) {
  .mobile-dev-scroller {
    margin-bottom: 3rem;
    height: 734px;
  }
}

@media (min-width: 1024px) {
  .mobile-dev-scroller {
    margin-bottom: 3.5rem;
    height: 450px;
  }
}

@media (min-width: 1280px) {
  .mobile-dev-scroller {
    margin-bottom: 4rem;
    height: 530px;
  }
}

@media (min-width: 1600px) {
  .mobile-dev-scroller {
    margin-bottom: 5rem;
    height: 623px;
  }
}

.mobile-dev-scroller::-webkit-scrollbar {
  width: 0px;
}

.mobile-dev-scroller .port-image {
  padding-bottom: 1.25rem;
}

section.portfolio-banner.web-dev .portfolio-banner-content.emerging img {
  max-width: 450px;
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev .portfolio-banner-content.emerging img {
    max-width: 500px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .portfolio-banner-content.emerging img {
    max-width: 580px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .portfolio-banner-content.emerging img {
    max-width: 701px;
  }
}

/* --------------------------------------mobile develoipment ends------------------------ */

/* --------------------------------------emerging technology starts---------------------- */

.overview-web.emerge-over .container h5 {
  max-width: 860px;
}

@media (min-width: 1600px) {
  .overview-web.emerge-over .container h5 {
    max-width: 1000px;
  }
}

.powerful-emerge .container h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .powerful-emerge .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .powerful-emerge .container h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .powerful-emerge .container h3 {
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .powerful-emerge .container h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .powerful-emerge .container h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.powerful-emerge .container h5 {
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
  padding-bottom: 1.25rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .powerful-emerge .container h5 {
    padding-bottom: 1.5rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .powerful-emerge .container h5 {
    padding-bottom: 1.75rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .powerful-emerge .container h5 {
    max-width: 850px;
    padding-bottom: 2rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .powerful-emerge .container h5 {
    max-width: 1000px;
    padding-bottom: 2.5rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .powerful-emerge .container h5 {
    max-width: 1126px;
    padding-bottom: 50px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.overview-web.emerge-over .container {
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .overview-web.emerge-over .container {
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .overview-web.emerge-over .container {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .overview-web.emerge-over .container {
    padding-bottom: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .overview-web.emerge-over .container {
    padding-bottom: 2rem;
  }
}

@media (min-width: 1600px) {
  .overview-web.emerge-over .container {
    padding-bottom: 2.5rem;
  }
}

.powerfull-emerge-content img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
  width: 100%;
  max-width: 80px;
}

@media (min-width: 640px) {
  .powerfull-emerge-content img {
    margin-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .powerfull-emerge-content img {
    margin-bottom: 1.75rem;
    max-width: 90px;
  }
}

@media (min-width: 1024px) {
  .powerfull-emerge-content img {
    margin-bottom: 2rem;
    max-width: 100px;
  }
}

@media (min-width: 1280px) {
  .powerfull-emerge-content img {
    margin-bottom: 2.5rem;
    max-width: 120px;
  }
}

@media (min-width: 1600px) {
  .powerfull-emerge-content img {
    margin-bottom: 46px;
    max-width: 154px;
  }
}

.powerfull-emerge-content p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .powerfull-emerge-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .powerfull-emerge-content p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .powerfull-emerge-content p {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .powerfull-emerge-content p {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.powerfull-emerge-content {
  width: 100%;
  max-width: 190px;
  text-align: center;
}

@media (min-width: 1280px) {
  .powerfull-emerge-content {
    max-width: 200px;
  }
}

@media (min-width: 1600px) {
  .powerfull-emerge-content {
    max-width: 231px;
  }
}

.powerfull-emerge-tech {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  -moz-column-gap: 3rem;
       column-gap: 3rem;
  row-gap: 1rem;
}

@media (min-width: 640px) {
  .powerfull-emerge-tech {
    -moz-column-gap: 3.5rem;
         column-gap: 3.5rem;
  }
}

@media (min-width: 768px) {
  .powerfull-emerge-tech {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
    row-gap: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .powerfull-emerge-tech {
    -moz-column-gap: 5rem;
         column-gap: 5rem;
    row-gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .powerfull-emerge-tech {
    -moz-column-gap: 100px;
         column-gap: 100px;
    row-gap: 2rem;
  }
}

@media (min-width: 1600px) {
  .powerfull-emerge-tech {
    -moz-column-gap: 130px;
         column-gap: 130px;
    row-gap: 2.5rem;
  }
}

.powerful-emerge .container {
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .powerful-emerge .container {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .powerful-emerge .container {
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .powerful-emerge .container {
    padding-bottom: 60px;
  }
}

@media (min-width: 1280px) {
  .powerful-emerge .container {
    padding-bottom: 70px;
  }
}

@media (min-width: 1600px) {
  .powerful-emerge .container {
    padding-bottom: 90px;
  }
}

.designing-inno.emerg-inn .container h5 {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  max-width: 900px;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .designing-inno.emerg-inn .container h5 {
    margin-bottom: 1.25rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .designing-inno.emerg-inn .container h5 {
    margin-bottom: 1.5rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .designing-inno.emerg-inn .container h5 {
    margin-bottom: 1.75rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .designing-inno.emerg-inn .container h5 {
    margin-bottom: 2rem;
    max-width: 1064px;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .designing-inno.emerg-inn .container h5 {
    margin-bottom: 45px;
    max-width: 1234px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.designing-inno.emerg-inn {
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .designing-inno.emerg-inn {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .designing-inno.emerg-inn {
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .designing-inno.emerg-inn {
    padding-bottom: 60px;
  }
}

@media (min-width: 1280px) {
  .designing-inno.emerg-inn {
    padding-bottom: 70px;
  }
}

@media (min-width: 1600px) {
  .designing-inno.emerg-inn {
    padding-bottom: 90px;
  }
}

.designing-inno.emerg-inn .container {
  padding-top: 0px;
}

.emerging-process .container h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .emerging-process .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .emerging-process .container h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .emerging-process .container h3 {
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .emerging-process .container h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .emerging-process .container h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.emerging-process .container h5 {
  margin-left: auto;
  margin-right: auto;
  max-width: 650px;
  padding-bottom: 1.25rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .emerging-process .container h5 {
    padding-bottom: 1.5rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .emerging-process .container h5 {
    padding-bottom: 1.75rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .emerging-process .container h5 {
    max-width: 780px;
    padding-bottom: 2rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .emerging-process .container h5 {
    max-width: 862px;
    padding-bottom: 2.5rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .emerging-process .container h5 {
    max-width: 998px;
    padding-bottom: 50px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.emerging-data-content {
  width: 100%;
  max-width: 560px;
}

@media (min-width: 768px) {
  .emerging-data-content {
    max-width: 450px;
  }
}

@media (min-width: 1024px) {
  .emerging-data-content {
    max-width: 560px;
  }
}

@media (min-width: 1280px) {
  .emerging-data-content {
    max-width: 680px;
  }
}

@media (min-width: 1600px) {
  .emerging-data-content {
    max-width: 772px;
  }
}

.emerging-data-content h6 {
  padding-bottom: 0.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}

@media (min-width: 768px) {
  .emerging-data-content h6 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .emerging-data-content h6 {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .emerging-data-content h6 {
    padding-bottom: 0.75rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .emerging-data-content h6 {
    padding-bottom: 1rem;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.emerging-data-content p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .emerging-data-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 24px;
  }
}

@media (min-width: 1280px) {
  .emerging-data-content p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 26px;
  }
}

@media (min-width: 1600px) {
  .emerging-data-content p {
    font-size: 22px;
    line-height: 28px;
  }
}

.emerging-data-divider {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .emerging-data-divider {
    gap: 2.5rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 768px) {
  .emerging-data-divider {
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .emerging-data-divider {
    gap: 3.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .emerging-data-divider {
    gap: 2.5rem;
    padding-bottom: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .emerging-data-divider {
    gap: 5rem;
    padding-bottom: 30px;
  }
}

.emerging-process .container {
  padding-bottom: 10px;
}

@media (min-width: 768px) {
  .emerging-process .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .emerging-process .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  .emerging-process .container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .emerging-process .container {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (min-width: 1024px) {
  .emerging-data .emerging-data-divider:nth-child(even) {
    padding-left: 200px;
  }
}

@media (min-width: 1600px) {
  .emerging-data .emerging-data-divider:nth-child(even) {
    padding-left: 335px;
  }
}

.emerging-data-img img {
  max-width: 60%;
}

@media (min-width: 768px) {
  .emerging-data-img img {
    max-width: 70%;
  }
}

@media (min-width: 1024px) {
  .emerging-data-img img {
    max-width: 173px;
  }
}

@media (min-width: 1280px) {
  .emerging-data-img img {
    max-width: 190px;
  }
}

@media (min-width: 1600px) {
  .emerging-data-img img {
    max-width: -webkit-max-content;
    max-width: -moz-max-content;
    max-width: max-content;
  }
}

/* --------------------------------------emerging technology ends------------------------ */

/* ----------------------------------------staff.html starts------------------------------*/

.perfect-candidate .container h3 {
  padding-bottom: 0.5rem;
  text-align: start;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .perfect-candidate .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .perfect-candidate .container h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .perfect-candidate .container h3 {
    padding-bottom: 0.75rem;
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .perfect-candidate .container h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .perfect-candidate .container h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.perfect-candidate .container p {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 640px) {
  .perfect-candidate .container p {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .perfect-candidate .container p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .perfect-candidate .container p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .perfect-candidate .container p {
    max-width: 1000px;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .perfect-candidate .container p {
    max-width: 1164px;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.perfect-candidate .container {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .perfect-candidate .container {
    padding-top: 1.25rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .perfect-candidate .container {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .perfect-candidate .container {
    padding-top: 1.75rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .perfect-candidate .container {
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .perfect-candidate .container {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
  }
}

.perfect-cards-divider {
  padding-top: 1rem;
}

@media (min-width: 640px) {
  .perfect-cards-divider {
    padding-top: 1.25rem;
  }
}

@media (min-width: 768px) {
  .perfect-cards-divider {
    padding-top: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .perfect-cards-divider {
    padding-top: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .perfect-cards-divider {
    padding-top: 2rem;
  }
}

@media (min-width: 1600px) {
  .perfect-cards-divider {
    padding-top: 2.5rem;
  }
}

.perfect-cards-content {
  width: 100%;
  max-width: 320px;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(223 228 245 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  box-shadow: -5px 20px 30px rgba(0, 0, 0, 0.25);
}

@media (min-width: 475px) {
  .perfect-cards-content {
    max-width: 360px;
  }
}

@media (min-width: 640px) {
  .perfect-cards-content {
    padding-top: 1.25rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 768px) {
  .perfect-cards-content {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .perfect-cards-content {
    max-width: 300px;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.75rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1280px) {
  .perfect-cards-content {
    max-width: 350px;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 2rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .perfect-cards-content {
    max-width: 440px;
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 2.5rem;
    padding-bottom: 73px;
  }
}

.perfect-cards-content .perfect-card-img img {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.75rem;
  width: 100%;
  max-width: 70px;
}

@media (min-width: 768px) {
  .perfect-cards-content .perfect-card-img img {
    margin-bottom: 1rem;
  }
}

@media (min-width: 1024px) {
  .perfect-cards-content .perfect-card-img img {
    margin-bottom: 1.25rem;
    max-width: 80px;
  }
}

@media (min-width: 1280px) {
  .perfect-cards-content .perfect-card-img img {
    margin-bottom: 1.5rem;
    max-width: 95px;
  }
}

@media (min-width: 1600px) {
  .perfect-cards-content .perfect-card-img img {
    margin-bottom: 30px;
    max-width: 115px;
  }
}

.perfect-cards-content .perfect-card-img p {
  padding-bottom: 1rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

@media (min-width: 640px) {
  .perfect-cards-content .perfect-card-img p {
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .perfect-cards-content .perfect-card-img p {
    padding-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .perfect-cards-content .perfect-card-img p {
    padding-bottom: 1.75rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .perfect-cards-content .perfect-card-img p {
    padding-bottom: 2rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .perfect-cards-content .perfect-card-img p {
    padding-bottom: 2.5rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.perfect-cards-content .perfect-card-content ul li {
  margin-left: 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .perfect-cards-content .perfect-card-content ul li {
    font-size: 1.125rem;
    line-height: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .perfect-cards-content .perfect-card-content ul li {
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 1600px) {
  .perfect-cards-content .perfect-card-content ul li {
    font-size: 22px;
    line-height: 30px;
  }
}

.perfect-cards-content .perfect-card-content ul {
  margin-top: 0.25rem;
  list-style-type: disc;
}

.perfect-cards-content .perfect-card-content ul *::marker {
  font-size: 20px;
}

.perfect-cards-content .perfect-card-content ul::marker {
  font-size: 20px;
}

@media (min-width: 1024px) {
  .perfect-cards-content .perfect-card-content ul {
    margin-top: 6px;
  }
}

@media (min-width: 1280px) {
  .perfect-cards-content .perfect-card-content ul {
    margin-top: 0.5rem;
  }
}

@media (min-width: 1600px) {
  .perfect-cards-content .perfect-card-content ul {
    margin-top: 10px;
  }
}

.perfect-card-img {
  border-bottom-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(32 41 59 / var(--tw-border-opacity));
}

.perfect-cards-divider {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .perfect-cards-divider {
    justify-content: space-evenly;
  }
}

.immersive.staff-process .container h5 {
  max-width: 760px;
}

@media (min-width: 1280px) {
  .immersive.staff-process .container h5 {
    max-width: 900px;
  }
}

@media (min-width: 1600px) {
  .immersive.staff-process .container h5 {
    max-width: 998px;
  }
}

.staff-process-content p {
  padding-top: 0.75rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .staff-process-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .staff-process-content p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .staff-process-content p {
    padding-top: 1rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .staff-process-content p {
    padding-top: 18px;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.staff-process-content {
  display: flex;
  width: auto;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .staff-process-content {
    width: 120px;
  }
}

@media (min-width: 1024px) {
  .staff-process-content {
    width: 150px;
  }
}

@media (min-width: 1280px) {
  .staff-process-content {
    width: 170px;
  }
}

@media (min-width: 1600px) {
  .staff-process-content {
    width: 186px;
  }
}

.immersive.staff-process .container .development-tech .dev-tech-images {
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .immersive.staff-process .container .development-tech .dev-tech-images {
    gap: 0.75rem;
  }
}

@media (min-width: 1280px) {
  .immersive.staff-process .container .development-tech .dev-tech-images {
    gap: 1rem;
  }
}

@media (min-width: 1600px) {
  .immersive.staff-process .container .development-tech .dev-tech-images {
    gap: 1.25rem;
  }
}

.perfect-candidate.why-hire .container {
  padding-top: 2rem;
}

@media (min-width: 640px) {
  .perfect-candidate.why-hire .container {
    padding-top: 2.5rem;
  }
}

@media (min-width: 768px) {
  .perfect-candidate.why-hire .container {
    padding-top: 3rem;
  }
}

@media (min-width: 1024px) {
  .perfect-candidate.why-hire .container {
    padding-top: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .perfect-candidate.why-hire .container {
    padding-top: 4rem;
  }
}

@media (min-width: 1600px) {
  .perfect-candidate.why-hire .container {
    padding-top: 5rem;
  }
}

.perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content .perfect-card-img p {
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content .perfect-card-img p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content .perfect-card-img p {
    font-size: 17px;
  }
}

@media (min-width: 1280px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content .perfect-card-img p {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content .perfect-card-img p {
    font-size: 25px;
  }
}

.perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content .perfect-card-img {
  border-bottom-width: 0px;
}

.perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content .perfect-card-content p {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 1280px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content .perfect-card-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content .perfect-card-content p {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.perfect-candidate.why-hire .container .perfect-cards-divider .perfect-cards-content {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.perfect-candidate.why-hire .container .perfect-cards-divider {
  row-gap: 1rem;
}

@media (min-width: 640px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider {
    row-gap: 1.25rem;
  }
}

@media (min-width: 768px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider {
    row-gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider {
    row-gap: 2rem;
  }
}

@media (min-width: 1280px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider {
    row-gap: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .perfect-candidate.why-hire .container .perfect-cards-divider {
    row-gap: 54px;
  }
}

/* ------------------------------------------staff.html ends----------------------------- */

/* ----------------------------------------consulting services starts ------------------- */

@media (min-width: 1280px) {
  .portfolio-banner.web-dev.mob-dev .container.consult-services {
    padding-bottom: 232px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev.mob-dev .container.consult-services {
    padding-bottom: 328px;
  }
}

@media (min-width: 1280px) {
  .tech-starts.consult-services {
    margin-top: -128px;
  }
}

@media (min-width: 1600px) {
  .tech-starts.consult-services {
    margin-top: -175px;
  }
}

.perfect-candidate.why-hire .container p {
  max-width: 1000px;
}

@media (min-width: 1280px) {
  .perfect-candidate.why-hire .container p {
    max-width: 1110px;
  }
}

@media (min-width: 1600px) {
  .perfect-candidate.why-hire .container p {
    max-width: 1280px;
  }
}

.service-works .container h3 {
  max-width: 100%;
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .service-works .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .service-works .container h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .service-works .container h3 {
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .service-works .container h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .service-works .container h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.service-works .container h5 {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  padding-bottom: 1rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {
  .service-works .container h5 {
    padding-bottom: 1.25rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .service-works .container h5 {
    padding-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .service-works .container h5 {
    padding-bottom: 1.75rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .service-works .container h5 {
    max-width: 900px;
    padding-bottom: 2rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .service-works .container h5 {
    max-width: 1016px;
    padding-bottom: 2.5rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.service-works .container {
  margin-bottom: 2rem;
}

@media (min-width: 640px) {
  .service-works .container {
    margin-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .service-works .container {
    margin-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .service-works .container {
    margin-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .service-works .container {
    margin-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .service-works .container {
    margin-bottom: 5rem;
  }
}

.help-startup .container h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .help-startup .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .help-startup .container h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .help-startup .container h3 {
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .help-startup .container h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .help-startup .container h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.help-startup .container p {
  padding-bottom: 0.5rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 640px) {
  .help-startup .container p {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .help-startup .container p {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .help-startup .container p {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 0.75rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .help-startup .container p {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-bottom: 1rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .help-startup .container p {
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 1.25rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.help-startup .container {
  padding-bottom: 1.25rem;
}

/* ---------------------------------------consulting services ends----------------------- */

/* -----------------------------------------support.html starts-------------------------- */

section.portfolio-banner.web-dev .container.support-banner.consult-services .portfolio-banner-head h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

@media (min-width: 640px) {
  section.portfolio-banner.web-dev .container.support-banner.consult-services .portfolio-banner-head h3 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 768px) {
  section.portfolio-banner.web-dev .container.support-banner.consult-services .portfolio-banner-head h3 {
    font-size: 35px;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev .container.support-banner.consult-services .portfolio-banner-head h3 {
    font-size: 38px;
    line-height: 60px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .container.support-banner.consult-services .portfolio-banner-head h3 {
    font-size: 47px;
    line-height: 70px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .container.support-banner.consult-services .portfolio-banner-head h3 {
    font-size: 60px;
    line-height: 80px;
  }
}

section.portfolio-banner.web-dev .container.support-banner.consult-services .portfolio-banner-head {
  max-width: 100%;
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .container.support-banner.consult-services .portfolio-banner-head {
    max-width: 799px;
  }
}

@media (min-width: 1024px) {
  .portfolio-banner.web-dev.mob-dev .container.consult-services.support-banner {
    padding-bottom: 153px;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner.web-dev.mob-dev .container.consult-services.support-banner {
    padding-bottom: 196px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev.mob-dev .container.consult-services.support-banner {
    padding-bottom: 290px;
  }
}

@media (min-width: 1280px) {
  .tech-starts.support-tech {
    margin-top: -128px;
  }
}

@media (min-width: 1600px) {
  .tech-starts.support-tech {
    margin-top: -175px;
  }
}

@media (min-width: 1024px) {
  .tech-starts.support-tech .container ul li {
    font-size: 1rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .tech-starts.support-tech .container ul li {
    font-size: 19px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .tech-starts.support-tech .container ul li {
    font-size: 23px;
    line-height: 2.5rem;
  }
}

.designing-inno.support-inno .container h5 {
  padding-bottom: 1.25rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 768px) {
  .designing-inno.support-inno .container h5 {
    padding-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .designing-inno.support-inno .container h5 {
    padding-bottom: 2rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .designing-inno.support-inno .container h5 {
    padding-bottom: 2.5rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .designing-inno.support-inno .container h5 {
    padding-bottom: 3rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.designing-inno.support-inno .container {
  padding-bottom: 2rem;
  padding-top: 0px;
}

@media (min-width: 640px) {
  .designing-inno.support-inno .container {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .designing-inno.support-inno .container {
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .designing-inno.support-inno .container {
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .designing-inno.support-inno .container {
    padding-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .designing-inno.support-inno .container {
    padding-bottom: 5rem;
  }
}

.designing-inno.support-inno .card-content {
  padding-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .designing-inno.support-inno .card-content {
    padding-bottom: 1rem;
  }
}

@media (min-width: 1024px) {
  .designing-inno.support-inno .card-content {
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .designing-inno.support-inno .card-content {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1600px) {
  .designing-inno.support-inno .card-content {
    padding-bottom: 30px;
  }
}

.designing-inno.support-inno .card-content h5 {
  margin-bottom: 0px;
  padding-bottom: 0.75rem;
}

@media (min-width: 1024px) {
  .designing-inno.support-inno .card-content h5 {
    min-height: 80px;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1280px) {
  .designing-inno.support-inno .card-content h5 {
    min-height: 92px;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .designing-inno.support-inno .card-content h5 {
    min-height: 105px;
    padding-bottom: 1.5rem;
  }
}

.designing-inno.support-inno .card-content p {
  padding-bottom: 0px;
}

.emerging-data .emerging-data-divider:nth-child(1) .emerging-data-content h6 {
  --tw-text-opacity: 1;
  color: rgb(78 172 145 / var(--tw-text-opacity));
}

.emerging-data .emerging-data-divider:nth-child(2) .emerging-data-content h6 {
  --tw-text-opacity: 1;
  color: rgb(62 135 216 / var(--tw-text-opacity));
}

.emerging-data .emerging-data-divider:nth-child(3) .emerging-data-content h6 {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

.emerging-data .emerging-data-divider:nth-child(4) .emerging-data-content h6 {
  --tw-text-opacity: 1;
  color: rgb(89 98 122 / var(--tw-text-opacity));
}

.emerging-data .emerging-data-divider:nth-child(5) .emerging-data-content h6 {
  --tw-text-opacity: 1;
  color: rgb(225 179 156 / var(--tw-text-opacity));
}

.support-bg {
  margin-top: 2rem;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .support-bg {
    margin-top: 2.5rem;
  }
}

@media (min-width: 768px) {
  .support-bg {
    margin-top: 3rem;
  }
}

@media (min-width: 1024px) {
  .support-bg {
    margin-top: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .support-bg {
    margin-top: 4rem;
  }
}

@media (min-width: 1600px) {
  .support-bg {
    margin-top: 5rem;
  }
}

.support-bg .support-content {
  background-repeat: no-repeat;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .support-bg .support-content {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 768px) {
  .support-bg .support-content {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .support-bg .support-content {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .support-bg .support-content {
    padding-left: 50px;
    padding-right: 50px;
    padding-top: 2rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1600px) {
  .support-bg .support-content {
    padding-left: 61px;
    padding-right: 61px;
    padding-top: 2.5rem;
    padding-bottom: 1.25rem;
  }
}

.support-bg .support-content h4 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-bottom: 0.5rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .support-bg .support-content h4 {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .support-bg .support-content h4 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .support-bg .support-content h4 {
    max-width: 1100px;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .support-bg .support-content h4 {
    max-width: 1200px;
    padding-bottom: 0.75rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .support-bg .support-content h4 {
    max-width: 1336px;
    padding-bottom: 1rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.support-bg .support-content ul {
  list-style-type: disc;
  padding-bottom: 1rem;
}

.support-bg .support-content ul *::marker {
  font-size: 20px;
}

.support-bg .support-content ul::marker {
  font-size: 20px;
}

@media (min-width: 640px) {
  .support-bg .support-content ul {
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .support-bg .support-content ul {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .support-bg .support-content ul {
    padding-bottom: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .support-bg .support-content ul {
    padding-bottom: 2rem;
  }
}

@media (min-width: 1600px) {
  .support-bg .support-content ul {
    padding-bottom: 2.5rem;
  }
}

.support-bg .support-content ul li {
  margin-left: 1.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .support-bg .support-content ul li {
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .support-bg .support-content ul li {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .support-bg .support-content ul li {
    font-size: 20px;
    line-height: 2.5rem;
  }
}

.support-bg .support-content h6 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 730px;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .support-bg .support-content h6 {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .support-bg .support-content h6 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .support-bg .support-content h6 {
    max-width: 800px;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .support-bg .support-content h6 {
    max-width: 900px;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .support-bg .support-content h6 {
    max-width: 1094px;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

/* -------------------------------------------support.html ends-------------------------- */

/* ------------------------------------------ppc starts---------------------------------- */

section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h3 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h3 {
    font-size: 2.25rem;
    line-height: 2.5rem;
    line-height: 65px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h3 {
    font-size: 42px;
    line-height: 70px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h3 {
    font-size: 50px;
    line-height: 75px;
  }
}

section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head {
  row-gap: 0.75rem;
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head {
    row-gap: 0.5rem;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head {
    row-gap: 1.25rem;
  }
}

section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5 {
  padding-top: 0.75rem;
}

@media (min-width: 640px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5 {
    padding-top: 1rem;
  }
}

@media (min-width: 768px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5 {
    padding-top: 1.25rem;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5 {
    padding-top: 1.5rem;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5 {
    padding-top: 1.25rem;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5 {
    padding-top: 2rem;
  }
}

section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-content img {
  max-width: 450px;
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-content img {
    max-width: 480px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-content img {
    max-width: 540px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-content img {
    max-width: 747px;
  }
}

section.tech-starts.ppc-tech .container {
  padding-bottom: 30px;
}

@media (min-width: 1024px) {
  section.tech-starts.ppc-tech .container {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1280px) {
  section.tech-starts.ppc-tech .container {
    padding-bottom: 90px;
  }
}

@media (min-width: 768px) {
  section.tech-starts.ppc-tech {
    margin-top: -25px;
  }
}

@media (min-width: 1024px) {
  section.tech-starts.ppc-tech {
    margin-top: -16px;
  }
}

@media (min-width: 1280px) {
  section.tech-starts.ppc-tech {
    margin-top: -140px;
  }
}

@media (min-width: 1600px) {
  section.tech-starts.ppc-tech {
    margin-top: -150px;
  }
}

.power-tool-content h3 {
  padding-bottom: 1rem;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .power-tool-content h3 {
    padding-bottom: 1.25rem;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .power-tool-content h3 {
    padding-bottom: 1.5rem;
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .power-tool-content h3 {
    padding-bottom: 1.75rem;
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .power-tool-content h3 {
    padding-bottom: 2rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .power-tool-content h3 {
    padding-bottom: 2.5rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.power-tool-content p {
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .power-tool-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .power-tool-content p {
    padding-bottom: 0.75rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .power-tool-content p {
    padding-bottom: 1rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .power-tool-content p {
    padding-bottom: 1.25rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.power-tool-content {
  width: 100%;
}

@media (min-width: 1024px) {
  .power-tool-content {
    max-width: 680px;
  }
}

@media (min-width: 1280px) {
  .power-tool-content {
    max-width: 780px;
  }
}

@media (min-width: 1600px) {
  .power-tool-content {
    max-width: 906px;
  }
}

.powerfull-tool-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

@media (min-width: 1024px) {
  .powerfull-tool-divider {
    flex-direction: row;
  }
}

.powerfull-tool {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .powerfull-tool {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .powerfull-tool {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .powerfull-tool {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .powerfull-tool {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .powerfull-tool {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.power-tool-img img {
  width: 100%;
  max-width: 300px;
}

@media (min-width: 1024px) {
  .power-tool-img img {
    max-width: 360px;
  }
}

@media (min-width: 1280px) {
  .power-tool-img img {
    max-width: 400px;
  }
}

@media (min-width: 1600px) {
  .power-tool-img img {
    max-width: 469px;
  }
}

.plans-and-price .container h3 {
  padding-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .plans-and-price .container h3 {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .plans-and-price .container h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .plans-and-price .container h3 {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .container h3 {
    padding-bottom: 6px;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .container h3 {
    padding-bottom: 0.5rem;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.plans-and-price .container p {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 600px;
  padding-bottom: 1rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 640px) {
  .plans-and-price .container p {
    padding-bottom: 1.25rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .plans-and-price .container p {
    padding-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .plans-and-price .container p {
    padding-bottom: 2rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .container p {
    max-width: 700px;
    padding-bottom: 2.5rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .container p {
    max-width: 862px;
    padding-bottom: 2.75rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.price-divider-content {
  width: 100%;
  max-width: 250px;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(32 41 59 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .price-divider-content {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .price-divider-content {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .price-divider-content {
    max-width: 260px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .price-divider-content {
    max-width: 280px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1600px) {
  .price-divider-content {
    max-width: 312px;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
}

.price-divider-content h4 {
  padding-bottom: 1.25rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .price-divider-content h4 {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .price-divider-content h4 {
    padding-bottom: 2rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .price-divider-content h4 {
    padding-bottom: 2.5rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .price-divider-content h4 {
    padding-bottom: 3rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .price-divider-content h4 {
    padding-bottom: 58px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.price-divider-content h5 {
  padding-bottom: 0.25rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .price-divider-content h5 {
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .price-divider-content h5 {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .price-divider-content h5 {
    font-size: 20px;
    line-height: 2.5rem;
  }
}

.plans-and-price .container .price-divider-content p {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .plans-and-price .container .price-divider-content p {
    line-height: 23px;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .container .price-divider-content p {
    line-height: 25px;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .container .price-divider-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 27px;
  }
}

.plans-and-price .container .price-divider-content .price-cost-hover {
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(78 172 145 / var(--tw-bg-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 768px) {
  .plans-and-price .container .price-divider-content .price-cost-hover {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1024px) {
  .plans-and-price .container .price-divider-content .price-cost-hover {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .container .price-divider-content .price-cost-hover {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .container .price-divider-content .price-cost-hover {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 27px;
    padding-right: 27px;
  }
}

.plans-and-price .container .price-divider-content .price-cost-hover p {
  padding-bottom: 0.25rem;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

.plans-and-price .container .price-divider-content .price-cost-hover h6 {
  padding-bottom: 0.25rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .plans-and-price .container .price-divider-content .price-cost-hover h6 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .plans-and-price .container .price-divider-content .price-cost-hover h6 {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .container .price-divider-content .price-cost-hover h6 {
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .container .price-divider-content .price-cost-hover h6 {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.plans-and-price .container .price-divider-content ul li {
  padding-bottom: 2px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .plans-and-price .container .price-divider-content ul li {
    line-height: 23px;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .container .price-divider-content ul li {
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 25px;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .container .price-divider-content ul li {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 27px;
  }
}

.plans-and-price .container .price-divider-content ul {
  margin-top: 0.75rem;
}

@media (min-width: 768px) {
  .plans-and-price .container .price-divider-content ul {
    margin-top: 1rem;
  }
}

@media (min-width: 1024px) {
  .plans-and-price .container .price-divider-content ul {
    margin-top: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .container .price-divider-content ul {
    margin-top: 1.5rem;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .container .price-divider-content ul {
    margin-top: 29px;
  }
}

.price-divider .price-divider-content:hover .price-cost-hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.price-divider .price-divider-content:hover {
  cursor: pointer;
}

.price-divider .price-divider-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.drop-key img {
  width: 100%;
  max-width: 25px;
}

@media (min-width: 1024px) {
  .drop-key img {
    max-width: 30px;
  }
}

@media (min-width: 1280px) {
  .drop-key img {
    max-width: 35px;
  }
}

@media (min-width: 1600px) {
  .drop-key img {
    max-width: 40px;
  }
}

.drop-key {
  position: absolute;
  bottom: -8px;
  left: 50%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (min-width: 1024px) {
  .drop-key {
    bottom: -12px;
  }
}

@media (min-width: 1280px) {
  .drop-key {
    bottom: -13px;
  }
}

@media (min-width: 1600px) {
  .drop-key {
    bottom: -15px;
  }
}

.plans-and-price .container {
  padding-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .plans-and-price .container {
    padding-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  .plans-and-price .container {
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .plans-and-price .container {
    padding-bottom: 4rem;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .container {
    padding-bottom: 5rem;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .container {
    padding-bottom: 94px;
  }
}

.price-divider .swiper-slide {
  padding-bottom: 1.25rem;
}

.target-depend .container h3 {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 700px;
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .target-depend .container h3 {
    padding-bottom: 18px;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .target-depend .container h3 {
    padding-bottom: 22px;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .target-depend .container h3 {
    max-width: 800px;
    padding-bottom: 26px;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .target-depend .container h3 {
    max-width: 900px;
    padding-bottom: 30px;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .target-depend .container h3 {
    max-width: 1088px;
    padding-bottom: 35px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.target-depend {
  position: relative;
  margin-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .target-depend {
    margin-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  .target-depend {
    margin-bottom: 3.5rem;
  }
}

@media (min-width: 1024px) {
  .target-depend {
    margin-bottom: 4rem;
  }
}

@media (min-width: 1280px) {
  .target-depend {
    margin-bottom: 5rem;
  }
}

@media (min-width: 1600px) {
  .target-depend {
    margin-bottom: 94px;
  }
}

.target-depend-content {
  width: 100%;
  max-width: 780px;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(223 228 245 / var(--tw-bg-opacity));
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  padding-bottom: 1.25rem;
  box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.25);
}

@media (min-width: 640px) {
  .target-depend-content {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 16px;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .target-depend-content {
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    padding-top: 20px;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .target-depend-content {
    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 25px;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .target-depend-content {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 30px;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1600px) {
  .target-depend-content {
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 35px;
    padding-bottom: 60px;
  }
}

.target-depend-content h5 {
  padding-bottom: 0.75rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
}

@media (min-width: 768px) {
  .target-depend-content h5 {
    padding-bottom: 1rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .target-depend-content h5 {
    padding-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .target-depend-content h5 {
    padding-bottom: 1.5rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .target-depend-content h5 {
    padding-bottom: 30px;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.target-depend-content p {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 300;
  line-height: 21px;
}

@media (min-width: 1280px) {
  .target-depend-content p {
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 23px;
  }
}

@media (min-width: 1600px) {
  .target-depend-content p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 25px;
  }
}

.target-depend-divider {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .target-depend-divider {
    flex-direction: row;
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .target-depend-divider {
    gap: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .target-depend-divider {
    gap: 2rem;
  }
}

@media (min-width: 1600px) {
  .target-depend-divider {
    gap: 2.5rem;
  }
}

.explore-vector.ppc-vector {
  right: 30px;
}

.ppc-banner-text {
  position: absolute;
  left: 0px;
  top: 0px;
}

.ppc-banner-text img {
  width: 100%;
  max-width: 310px;
}

@media (min-width: 768px) {
  .ppc-banner-text img {
    max-width: 350px;
  }
}

@media (min-width: 1024px) {
  .ppc-banner-text img {
    max-width: 380px;
  }
}

@media (min-width: 1280px) {
  .ppc-banner-text img {
    max-width: 420px;
  }
}

@media (min-width: 1600px) {
  .ppc-banner-text img {
    max-width: 470px;
  }
}

/* -------------------------------------------ppc ends----------------------------------- */

/* -----------------------------------------ogrelite.html starts------------------------- */

section.portfolio-banner.web-dev .container.support-banner.ogrelite-banner .portfolio-banner-head h3 {
  font-size: 22px;
}

@media (min-width: 640px) {
  section.portfolio-banner.web-dev .container.support-banner.ogrelite-banner .portfolio-banner-head h3 {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  section.portfolio-banner.web-dev .container.support-banner.ogrelite-banner .portfolio-banner-head h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev .container.support-banner.ogrelite-banner .portfolio-banner-head h3 {
    font-size: 28px;
    line-height: 45px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .container.support-banner.ogrelite-banner .portfolio-banner-head h3 {
    font-size: 32px;
    line-height: 50px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .container.support-banner.ogrelite-banner .portfolio-banner-head h3 {
    font-size: 40px;
    line-height: 60px;
  }
}

.online-reviews.og-review {
  --tw-bg-opacity: 1;
  background-color: rgb(232 238 254 / var(--tw-bg-opacity));
  padding-bottom: 18px;
}

@media (min-width: 1024px) {
  .online-reviews.og-review {
    margin-top: -90px;
    background-color: transparent;
  }
}

@media (min-width: 1280px) {
  .online-reviews.og-review {
    margin-top: -120px;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .online-reviews.og-review {
    margin-top: -140px;
    padding-bottom: 54px;
  }
}

.why-plan .container h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 22px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .why-plan .container h3 {
    text-align: center;
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .why-plan .container h3 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .why-plan .container h3 {
    font-size: 28px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .why-plan .container h3 {
    padding-bottom: 1rem;
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .why-plan .container h3 {
    padding-bottom: 1.25rem;
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.why-plan .container h5 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .why-plan .container h5 {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .why-plan .container h5 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .why-plan .container h5 {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .why-plan .container h5 {
    padding-bottom: 1rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .why-plan .container h5 {
    padding-bottom: 1.25rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.why-plan .container p {
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 640px) {
  .why-plan .container p {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .why-plan .container p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .why-plan .container p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .why-plan .container p {
    padding-bottom: 1rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .why-plan .container p {
    padding-bottom: 1.25rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.why-plan .container {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .why-plan .container {
    padding-top: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .why-plan .container {
    padding-top: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .why-plan .container {
    padding-top: 2rem;
  }
}

@media (min-width: 1600px) {
  .why-plan .container {
    padding-top: 2.5rem;
  }
}

/* what we do starts */

.what-we-do-homeOgre {
  position: relative;
  overflow-y: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 640px) {
  .what-we-do-homeOgre {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 768px) {
  .what-we-do-homeOgre {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

@media (min-width: 1024px) {
  .what-we-do-homeOgre {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

@media (min-width: 1280px) {
  .what-we-do-homeOgre {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }
}

@media (min-width: 1600px) {
  .what-we-do-homeOgre {
    padding-top: 8rem;
    padding-bottom: 160px;
  }
}

.green-vector-image {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.green-vector-image img {
  height: auto;
  width: 100%;
  max-width: 544px;
}

@media (min-width: 1024px) {
  .green-vector-image img {
    max-width: 648px;
  }
}

@media (min-width: 1280px) {
  .green-vector-image img {
    max-width: 735px;
  }
}

@media (min-width: 1600px) {
  .green-vector-image img {
    max-width: 860px;
  }
}

.mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide:hover {
  cursor: pointer;
  --tw-bg-opacity: 1;
  background-color: rgb(218 238 255 / var(--tw-bg-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide:hover a {
  letter-spacing: 1px;
  transition-duration: 500ms;
  transition-timing-function: linear;
}

@media (min-width: 1600px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide:hover a {
    letter-spacing: 2px;
  }
}

.what-we-do-homeOgre .container h3 {
  width: 100%;
  max-width: 400px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .what-we-do-homeOgre .container h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .what-we-do-homeOgre .container h3 {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1280px) {
  .what-we-do-homeOgre .container h3 {
    max-width: 440px;
    font-size: 26px;
    line-height: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .what-we-do-homeOgre .container h3 {
    max-width: 503px;
    font-size: 1.875rem;
    line-height: 2.25rem;
    line-height: 45px;
  }
}

.what-we-do-homeOgre .container p {
  width: 100%;
  max-width: 280px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 475px) {
  .what-we-do-homeOgre .container p {
    max-width: 332px;
  }
}

@media (min-width: 640px) {
  .what-we-do-homeOgre .container p {
    max-width: 535px;
  }
}

@media (min-width: 768px) {
  .what-we-do-homeOgre .container p {
    max-width: 585px;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .what-we-do-homeOgre .container p {
    max-width: 652px;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px;
  }
}

@media (min-width: 1280px) {
  .what-we-do-homeOgre .container p {
    max-width: 727px;
    font-size: 22px;
    line-height: 32px;
  }
}

@media (min-width: 1600px) {
  .what-we-do-homeOgre .container p {
    max-width: 814px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 25px;
    line-height: 35px;
  }
}

.mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide {
  margin-left: auto;
  margin-right: auto;
  width: 280px;
  border-radius: 30px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding: 1.25rem;
  padding-top: 1rem;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
}

@media (min-width: 475px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 1.25rem;
    padding-bottom: 17px;
  }
}

@media (min-width: 640px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide {
    width: 400px;
    padding-top: 1.5rem;
  }
}

@media (min-width: 768px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide {
    padding-top: 2rem;
  }
}

@media (min-width: 1024px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    padding-top: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide {
    width: 350px;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 2.75rem;
  }
}

@media (min-width: 1600px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide {
    width: 440px;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-top: 3rem;
  }
}

.mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide h4 {
  height: 104px;
  padding-bottom: 0.75rem;
  padding-top: 1.25rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 475px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide h4 {
    height: 120px;
  }
}

@media (min-width: 640px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide h4 {
    height: 145px;
  }
}

@media (min-width: 768px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide h4 {
    height: 135px;
    padding-top: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide h4 {
    padding-bottom: 1rem;
    padding-top: 2rem;
    line-height: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide h4 {
    height: 144px;
    padding-bottom: 1.25rem;
    padding-top: 2.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide h4 {
    height: 165px;
    padding-bottom: 1.5rem;
    padding-top: 45px;
    font-size: 22px;
    line-height: 2rem;
  }
}

.mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide img {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 42px;
}

@media (min-width: 1024px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide img {
    max-width: 48px;
  }
}

@media (min-width: 1280px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide img {
    max-width: 52px;
  }
}

@media (min-width: 1600px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide img {
    max-width: 60px;
  }
}

.mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide a {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 300;
  --tw-text-opacity: 1;
  color: rgb(25 118 210 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide a {
    line-height: 22px;
  }
}

@media (min-width: 1280px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide a {
    font-size: 1rem;
    line-height: 1.5rem;
    line-height: 25px;
  }
}

@media (min-width: 1600px) {
  .mySwiperWhatWeDoOgre .swiper-wrapper .swiper-slide a {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 27px;
  }
}

.swiper.mySwiperWhatWeDoOgre {
  padding-top: 1.5rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .swiper.mySwiperWhatWeDoOgre {
    padding-top: 2rem;
  }
}

@media (min-width: 768px) {
  .swiper.mySwiperWhatWeDoOgre {
    padding-top: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .swiper.mySwiperWhatWeDoOgre {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1280px) {
  .swiper.mySwiperWhatWeDoOgre {
    padding-top: 50px;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .swiper.mySwiperWhatWeDoOgre {
    padding-top: 60px;
    padding-bottom: 1.5rem;
  }
}

section.what-we-do-homeOgre {
  overflow-x: hidden;
}

@media (min-width: 640px) {
  section.what-we-do-homeOgre .container .slide-right {
    --tw-translate-x: 70px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 768px) {
  section.what-we-do-homeOgre .container .slide-right {
    --tw-translate-x: 100px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 1024px) {
  section.what-we-do-homeOgre .container .slide-right {
    --tw-translate-x: 129px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 1280px) {
  section.what-we-do-homeOgre .container .slide-right {
    --tw-translate-x: 156px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

@media (min-width: 1600px) {
  section.what-we-do-homeOgre .container .slide-right {
    --tw-translate-x: 163px;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}

section.what-we-do-homeOgre .container {
  position: relative;
}

.what-we-do-arrowOgre {
  position: absolute;
  right: 10px;
  top: 45px;
  display: flex;
  flex-direction: row-reverse;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .what-we-do-arrowOgre {
    right: 0px;
    top: 20px;
  }
}

.table-data {
  position: fixed;
  top: 0px;
  z-index: 50;
  display: none;
  height: 100vh;
  width: 100%;
  overflow: auto;
  background-color: rgb(0 0 0 / 50%);
}

.table-data.show-table {
  display: block;
}

.table-data::-webkit-scrollbar {
  width: 0px;
}

.table-responsive::-webkit-scrollbar {
  width: 0px;
}

div#pricePopClose {
  position: fixed;
  right: 1.25rem;
  top: 2.5rem;
  display: flex;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

@media (min-width: 768px) {
  div#pricePopClose {
    top: 1.25rem;
  }
}

@media (min-width: 1600px) {
  div#pricePopClose {
    height: 40px;
    width: 40px;
  }
}

div#calcPopClose {
  position: fixed;
  right: 1.25rem;
  top: 2.5rem;
  z-index: 50;
  display: flex;
  height: 30px;
  width: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

@media (min-width: 768px) {
  div#calcPopClose {
    top: 1.25rem;
  }
}

@media (min-width: 1600px) {
  div#calcPopClose {
    height: 40px;
    width: 40px;
  }
}

/* what we do ends */

.plans-and-price .mySwiperOgrelite {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 800px;
}

@media (min-width: 1024px) {
  .plans-and-price .mySwiperOgrelite {
    max-width: 900px;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .mySwiperOgrelite {
    max-width: 1000px;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .mySwiperOgrelite {
    max-width: 1170px;
  }
}

@media (min-width: 768px) {
  .mySwiperOgrelite .price-divider-content h4 {
    height: 100px;
  }
}

@media (min-width: 1280px) {
  .mySwiperOgrelite .price-divider-content h4 {
    min-height: 120px;
  }
}

@media (min-width: 1600px) {
  .mySwiperOgrelite .price-divider-content h4 {
    min-height: 138px;
  }
}

.plans-and-price .container .mySwiperOgrelite .price-divider-content ul {
  margin-left: 1.25rem;
  min-height: 240px;
  list-style-type: disc;
}

.plans-and-price .container .mySwiperOgrelite .price-divider-content ul *::marker {
  font-size: 16px;
}

.plans-and-price .container .mySwiperOgrelite .price-divider-content ul::marker {
  font-size: 16px;
}

@media (min-width: 1024px) {
  .plans-and-price .container .mySwiperOgrelite .price-divider-content ul {
    min-height: 260px;
  }
}

@media (min-width: 1280px) {
  .plans-and-price .container .mySwiperOgrelite .price-divider-content ul {
    min-height: 270px;
  }
}

@media (min-width: 1600px) {
  .plans-and-price .container .mySwiperOgrelite .price-divider-content ul {
    min-height: 290px;
  }
}

@media (min-width: 1024px) {
  .plans-and-price.ogrelite-price {
    margin-top: -50px;
  }
}

@media (min-width: 1280px) {
  .plans-and-price.ogrelite-price {
    margin-top: -60px;
  }
}

@media (min-width: 1600px) {
  .plans-and-price.ogrelite-price {
    margin-top: -100px;
  }
}

.plans-and-price.ogrelite-price .ogrelite-price-head {
  max-width: 900px;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 640px) {
  .plans-and-price.ogrelite-price .ogrelite-price-head {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .plans-and-price.ogrelite-price .ogrelite-price-head {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .plans-and-price.ogrelite-price .ogrelite-price-head {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .plans-and-price.ogrelite-price .ogrelite-price-head {
    max-width: 1000px;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .plans-and-price.ogrelite-price .ogrelite-price-head {
    max-width: 1153px;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.immersive.mob-service.ogrelite-work .container h3 {
  text-align: start;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .immersive.mob-service.ogrelite-work .container h3 {
    text-align: center;
  }
}

.immersive.mob-service.ogrelite-work {
  padding-top: 0px;
}

.immersive.mob-service.ogrelite-work .container h5 {
  max-width: 800px;
}

@media (min-width: 1024px) {
  .immersive.mob-service.ogrelite-work .container h5 {
    max-width: 900px;
  }
}

@media (min-width: 1280px) {
  .immersive.mob-service.ogrelite-work .container h5 {
    max-width: 1000px;
  }
}

@media (min-width: 1600px) {
  .immersive.mob-service.ogrelite-work .container h5 {
    max-width: 1182px;
  }
}

.review-testimonial .container .ogre-review-content h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  .review-testimonial .container .ogre-review-content h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .review-testimonial .container .ogre-review-content h3 {
    font-size: 22px;
  }
}

@media (min-width: 1280px) {
  .review-testimonial .container .ogre-review-content h3 {
    font-size: 26px;
  }
}

@media (min-width: 1600px) {
  .review-testimonial .container .ogre-review-content h3 {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

.review-testimonial .container .ogre-review-content h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 2rem;
}

@media (min-width: 640px) {
  .review-testimonial .container .ogre-review-content h2 {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  .review-testimonial .container .ogre-review-content h2 {
    font-size: 26px;
  }
}

@media (min-width: 1024px) {
  .review-testimonial .container .ogre-review-content h2 {
    font-size: 28px;
  }
}

@media (min-width: 1280px) {
  .review-testimonial .container .ogre-review-content h2 {
    font-size: 32px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .review-testimonial .container .ogre-review-content h2 {
    font-size: 40px;
    line-height: 2.5rem;
  }
}

.review-testimonial .container .ogre-review-content  h6 {
  width: 100%;
  max-width: 420px;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 768px) {
  .review-testimonial .container .ogre-review-content  h6 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .review-testimonial .container .ogre-review-content  h6 {
    min-height: 80px;
    padding-bottom: 1rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .review-testimonial .container .ogre-review-content  h6 {
    min-height: 85px;
    padding-bottom: 1.25rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .review-testimonial .container .ogre-review-content  h6 {
    min-height: 104px;
    max-width: 456px;
    padding-bottom: 1.5rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.review-testimonial .container .ogre-review-content  p {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 768px) {
  .review-testimonial .container .ogre-review-content  p {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .review-testimonial .container .ogre-review-content  p {
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .review-testimonial .container .ogre-review-content  p {
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .review-testimonial .container .ogre-review-content  p {
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.review-star-rate .checked {
  font-size: 20px;
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

@media (min-width: 1024px) {
  .review-star-rate .checked {
    font-size: 22px;
  }
}

@media (min-width: 1280px) {
  .review-star-rate .checked {
    font-size: 24px;
  }
}

@media (min-width: 1600px) {
  .review-star-rate .checked {
    font-size: 26px;
  }
}

.review-star-rate {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

@media (min-width: 475px) {
  .review-star-rate {
    margin-top: 1.5rem;
  }
}

@media (min-width: 640px) {
  .review-star-rate {
    margin-top: 2rem;
  }
}

@media (min-width: 768px) {
  .review-star-rate {
    margin-top: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .review-star-rate {
    margin-top: 3rem;
  }
}

@media (min-width: 1280px) {
  .review-star-rate {
    margin-top: 3.5rem;
  }
}

@media (min-width: 1600px) {
  .review-star-rate {
    margin-top: 70px;
  }
}

@media (min-width: 768px) {
  .review-testimonial .container .ogre-review-content {
    max-width: 450px;
  }
}

@media (min-width: 1024px) {
  .review-testimonial .container .ogre-review-content {
    max-width: 700px;
  }
}

@media (min-width: 1280px) {
  .review-testimonial .container .ogre-review-content {
    max-width: 786px;
  }
}

@media (min-width: 1600px) {
  .review-testimonial .container .ogre-review-content {
    max-width: 893px;
  }
}

.ogre-review-divider .ogre-review-image img {
  width: 100%;
  max-width: 300px;
}

@media (min-width: 1024px) {
  .ogre-review-divider .ogre-review-image img {
    max-width: 330px;
  }
}

@media (min-width: 1280px) {
  .ogre-review-divider .ogre-review-image img {
    max-width: 360px;
  }
}

@media (min-width: 1600px) {
  .ogre-review-divider .ogre-review-image img {
    max-width: 428px;
  }
}

.ogre-review-divider {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

@media (min-width: 768px) {
  .ogre-review-divider {
    flex-direction: row;
  }
}

.review-testimonial {
  padding-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .review-testimonial {
    padding-bottom: 2rem;
  }
}

@media (min-width: 768px) {
  .review-testimonial {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .review-testimonial {
    padding-bottom: 3rem;
  }
}

@media (min-width: 1280px) {
  .review-testimonial {
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1600px) {
  .review-testimonial {
    padding-bottom: 68px;
  }
}

.swiper-pagination-review.swiper-pagination-bullets.swiper-pagination-horizontal {
  position: absolute;
  bottom: 0px;
  z-index: 20;
}

@media (min-width: 768px) {
  .swiper-pagination-review.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 10px;
  }
}

@media (min-width: 1280px) {
  .swiper-pagination-review.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 33px;
  }
}

@media (min-width: 1600px) {
  .swiper-pagination-review.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 50px;
  }
}

.swiper-pagination-review.swiper-pagination-bullets.swiper-pagination-horizontal span.swiper-pagination-bullet {
  height: 10px;
  width: 10px;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(32 41 59 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

@media (min-width: 1280px) {
  .swiper-pagination-review.swiper-pagination-bullets.swiper-pagination-horizontal span.swiper-pagination-bullet {
    height: 12px;
    width: 12px;
  }
}

@media (min-width: 1600px) {
  .swiper-pagination-review.swiper-pagination-bullets.swiper-pagination-horizontal span.swiper-pagination-bullet {
    height: 14px;
    width: 14px;
  }
}

.swiper-pagination-review.swiper-pagination-bullets.swiper-pagination-horizontal span.swiper-pagination-bullet.swiper-pagination-bullet-active {
  --tw-bg-opacity: 1;
  background-color: rgb(32 41 59 / var(--tw-bg-opacity));
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev.mob-dev .container.ogrelite-banner {
    padding-bottom: 270px;
  }
}

section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head.content-marketing-spacing h5 {
  padding-top: 0px;
}

.nav-menu ul li ul li.active a,.mobile-nav ul li ul li.active a {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

.calculater {
  position: fixed;
  top: 0px;
  z-index: 100;
  display: none;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  background-color: rgb(0 0 0 / 30%);
}

.calculater.show-calc {
  display: block;
}

.review-testimonial .container .mySwiperReview .swiper-slide.swiper-slide-active {
  padding-bottom: 1.25rem;
}

@media (min-width: 1024px) {
  .review-testimonial .container .mySwiperReview .swiper-slide.swiper-slide-active {
    padding-bottom: 0px;
  }
}

.calc-talk {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .calc-talk {
    gap: 1.25rem;
  }
}

@media (min-width: 768px) {
  .calc-talk {
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .calc-talk {
    gap: 2rem;
  }
}

@media (min-width: 1280px) {
  .calc-talk {
    gap: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .calc-talk {
    gap: 62px;
  }
}

.space-maintainer .portfolio-banner-head {
  row-gap: 0px;
}

@media (min-width: 1600px) {
  .space-maintainer .portfolio-banner-head {
    row-gap: 20px;
  }
}

.lets-talk-btn h5 a {
  z-index: 30;
  margin-top: 0.75rem;
  display: block;
  width: 100%;
  max-width: 170px;
  border-radius: 50px;
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-weight: 800;
  line-height: 36px;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
  filter: drop-shadow(-5px 10px 20px rgba(0, 0, 0, 0.25));
}

@media (min-width: 1024px) {
  .lets-talk-btn h5 a {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .lets-talk-btn h5 a {
    max-width: 190px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 22px;
  }
}

@media (min-width: 1600px) {
  .lets-talk-btn h5 a {
    max-width: 211.48px;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 24px;
  }
}

.lets-talk-btn h5,.lets-talk-btn {
  width: 100%;
}

.lets-talk-btn h5 a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.portfolio-banner-head h5 a {
  z-index: 30;
  margin-top: 0.75rem;
  display: block;
  width: 100%;
  max-width: 170px;
  border-radius: 50px;
  --tw-bg-opacity: 1;
  background-color: rgb(253 197 38 / var(--tw-bg-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-weight: 800;
  line-height: 36px;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
  filter: drop-shadow(-5px 10px 20px rgba(0, 0, 0, 0.25));
}

@media (min-width: 1024px) {
  .portfolio-banner-head h5 a {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner-head h5 a {
    max-width: 190px;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 22px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner-head h5 a {
    max-width: 211.48px;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 24px;
  }
}

.portfolio-banner-head h5 {
  width: 100%;
  max-width: 170px;
}

@media (min-width: 1280px) {
  .portfolio-banner-head h5 {
    max-width: 190px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner-head h5 {
    max-width: 211.48px;
  }
}

.portfolio-banner-head h5 a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.lets-talk-btn.pos-left h5 a {
  margin-left: 0px;
}

.lets-talk-btn.ptopnone h5 a {
  margin-top: 0px;
}

.service-banner-space.portfolio-banner-head {
  row-gap: 0.5rem;
}

@media (min-width: 1600px) {
  .service-banner-space.portfolio-banner-head {
    row-gap: 10px;
  }
}

@media (min-width: 1280px) {
  .portfolio-banner.web-dev.mark-dev .container.marketing-spacer {
    padding-top: 50px;
    padding-bottom: 220px;
  }
}

@media (min-width: 1600px) {
  .portfolio-banner.web-dev.mark-dev .container.marketing-spacer {
    padding-top: 120px;
    padding-bottom: 250px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.converstionrate.web-dev.ratebanner.ppc-banner .container.cr-spacing {
    padding-bottom: 180px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.converstionrate.web-dev.ratebanner.ppc-banner .container.cr-spacing {
    padding-bottom: 280px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.converstionrate.web-dev.email-markting.ppc-banner .container.cr-spacing {
    padding-bottom: 205px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.converstionrate.web-dev.email-markting.ppc-banner .container.cr-spacing {
    padding-bottom: 290px;
  }

  section.portfolio-banner.web-dev.tech-dev .container.tech-spacer {
    padding-bottom: 290px;
    padding-top: 155px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev.tech-dev.seo-lead .container .portfolio-banner-head .space-seo-main a {
    margin-top: 10px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev.tech-dev.seo-lead .container .portfolio-banner-head .space-seo-main a {
    margin-top: 50px;
  }
}

section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5.space-seo-main {
  padding-top: 0px;
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5.space-seo-main {
    padding-top: 0.75rem;
  }
}

section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5.space-seo-main a {
  margin-top: 0px;
}

section.portfolio-banner.web-dev.ppc-banner .container.orm-spacer .portfolio-banner-head {
  gap: 0px;
}

section.portfolio-banner.web-dev.ppc-banner .container.ssm-sizer .portfolio-banner-head {
  gap: 0.25rem;
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .container.ssm-sizer {
    padding-bottom: 183px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .container.ssm-sizer {
    padding-bottom: 276px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .container.content-spacer {
    padding-top: 91px;
    padding-bottom: 210px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .container.content-spacer {
    padding-top: 138px;
    padding-bottom: 245px;
  }
}

.review-testimonial.web-space {
  padding-top: 2rem;
}

@media (min-width: 640px) {
  .review-testimonial.web-space {
    padding-top: 2.5rem;
  }
}

@media (min-width: 768px) {
  .review-testimonial.web-space {
    padding-top: 3rem;
  }
}

@media (min-width: 1024px) {
  .review-testimonial.web-space {
    padding-top: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .review-testimonial.web-space {
    padding-top: 4rem;
  }
}

@media (min-width: 1600px) {
  .review-testimonial.web-space {
    padding-top: 5rem;
  }
}

section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-head h5.space-ppc-main {
  padding-top: 0px;
}

.calculater.show-calc::-webkit-scrollbar {
  width: 0px;
}

h5.approach-tab-tech.approach-tab-active-tech {
  position: relative;
}

h5.approach-tab-tech.approach-tab-active-tech:after {
  position: absolute;
  left: 50%;
  height: 2px;
  width: 120%;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(49 61 90 / var(--tw-bg-opacity));
  --tw-content: "";
  content: var(--tw-content);
}

@media (min-width: 1280px) {
  h5.approach-tab-tech.approach-tab-active-tech:after {
    height: 3px;
  }
}

@media (min-width: 1600px) {
  h5.approach-tab-tech.approach-tab-active-tech:after {
    height: 4px;
  }
}

/* ----------------------------------------ogrelite.html ends---------------------------- */

/* video popup starts */

.video-test-pop {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 60;
  display: none;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
}

.video-test-pop.show-video {
  display: block;
}

.video-test-pop .container .cross-video-pop {
  position: fixed;
  right: 2.25rem;
  top: 2.25rem;
  z-index: 20;
  display: flex;
  height: 35px;
  width: 35px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

@media (min-width: 1280px) {
  .video-test-pop .container .cross-video-pop {
    height: 40px;
    width: 40px;
  }
}

@media (min-width: 1600px) {
  .video-test-pop .container .cross-video-pop {
    height: 45px;
    width: 45px;
  }
}

.video-area-content iframe {
  z-index: 20;
  margin-left: auto;
  margin-right: auto;
  height: 230px;
  width: 300px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (min-width: 475px) {
  .video-area-content iframe {
    width: 350px;
  }
}

@media (min-width: 640px) {
  .video-area-content iframe {
    height: 300px;
    width: 400px;
  }
}

@media (min-width: 768px) {
  .video-area-content iframe {
    height: 350px;
    width: 500px;
  }
}

@media (min-width: 1024px) {
  .video-area-content iframe {
    height: 400px;
    width: 600px;
  }
}

@media (min-width: 1280px) {
  .video-area-content iframe {
    height: 450px;
    width: 700px;
  }
}

@media (min-width: 1600px) {
  .video-area-content iframe {
    height: 560px;
    width: 990px;
  }
}

.video-test-pop .container {
  height: 100%;
}

.video-test-pop .container .video-area-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.black-frame {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgb(0 0 0 / 70%);
}

/* video popup ends */

/* -----------------------------------refund policy starts--------------- */

section.portfolio-banner.web-dev .portfolio-banner-content.refund-banner img {
  width: 100%;
  max-width: 380px;
}

@media (min-width: 475px) {
  section.portfolio-banner.web-dev .portfolio-banner-content.refund-banner img {
    max-width: 475px;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev .portfolio-banner-content.refund-banner img {
    max-width: 500px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .portfolio-banner-content.refund-banner img {
    max-width: 580px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .portfolio-banner-content.refund-banner img {
    max-width: 679px;
  }
}

@media (min-width: 768px) {
  .refund-policy .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .refund-policy .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  .refund-policy .container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .refund-policy .container {
    padding-left: 63px;
    padding-right: 63px;
  }
}

.refund-policy .container p {
  padding-bottom: 0.25rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {
  .refund-policy .container p {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .refund-policy .container p {
    font-size: 1.125rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .refund-policy .container p {
    padding-bottom: 0.5rem;
    font-size: 1.25rem;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .refund-policy .container p {
    padding-bottom: 0.75rem;
    font-size: 22px;
    line-height: 2.5rem;
  }
}

.refund-policy {
  position: relative;
  padding-top: 0.75rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .refund-policy {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .refund-policy {
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .refund-policy {
    padding-top: 1rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .refund-policy {
    padding-top: 1.25rem;
    padding-bottom: 3rem;
  }
}

@media (min-width: 1600px) {
  .refund-policy {
    padding-top: 1.5rem;
    padding-bottom: 3.5rem;
  }
}

.guidelines {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(223 228 245 / var(--tw-bg-opacity));
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 475px) {
  .guidelines {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media (min-width: 640px) {
  .guidelines {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 768px) {
  .guidelines {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1024px) {
  .guidelines {
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-left: 3.5rem;
    padding-right: 3.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 1280px) {
  .guidelines {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding-left: 4rem;
    padding-right: 4rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 1600px) {
  .guidelines {
    margin-top: 25px;
    margin-bottom: 25px;
    padding-left: 96px;
    padding-right: 96px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

.guidelines ul {
  list-style-type: disc;
}

.guidelines ul *::marker {
  font-size: 14px;
}

.guidelines ul::marker {
  font-size: 14px;
}

.guidelines ul li {
  margin-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 300;
}

@media (min-width: 1024px) {
  .guidelines ul li {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 22px;
  }
}

@media (min-width: 1280px) {
  .guidelines ul li {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 26px;
  }
}

@media (min-width: 1600px) {
  .guidelines ul li {
    font-size: 22px;
    line-height: 30px;
  }
}

.guidelines h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .guidelines h3 {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .guidelines h3 {
    padding-bottom: 1rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .guidelines h3 {
    padding-bottom: 1.25rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .guidelines h3 {
    padding-bottom: 24px;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .guidelines h3 {
    padding-bottom: 30px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.explore-vector.refund-vector {
  position: absolute;
  right: 0.75rem;
  bottom: 2.5rem;
  top: auto;
  z-index: -10;
  display: none;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
}

@media (min-width: 768px) {
  .explore-vector.refund-vector {
    display: block;
  }
}

@media (min-width: 1024px) {
  .explore-vector.refund-vector {
    right: 40px;
  }
}

@media (min-width: 1600px) {
  .explore-vector.refund-vector {
    right: 60px;
  }
}

.refund-policy .container p a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

section.portfolio-banner.web-dev .container .portfolio-banner-head p.privacy-text {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head p.privacy-text {
    line-height: 22px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head p.privacy-text {
    font-size: 17px;
    line-height: 26px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev .container .portfolio-banner-head p.privacy-text {
    font-size: 20px;
    line-height: 30px;
  }
}

/* ------------------------------------refund policy ends----------------- */

/* ------------------------------------privacy-policy starts---------------- */

.privacy-policies .container p {
  padding-bottom: 0.5rem;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 640px) {
  .privacy-policies .container p {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .privacy-policies .container p {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 22px;
  }
}

@media (min-width: 1280px) {
  .privacy-policies .container p {
    padding-bottom: 0.75rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 26px;
  }
}

@media (min-width: 1600px) {
  .privacy-policies .container p {
    padding-bottom: 1rem;
    font-size: 22px;
    line-height: 30px;
  }
}

.privacy-policies .container p a {
  --tw-text-opacity: 1;
  color: rgb(62 135 216 / var(--tw-text-opacity));
}

.privacy-policies .container p a:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.privacy-policies {
  padding-top: 0.75rem;
  padding-bottom: 2rem;
}

@media (min-width: 640px) {
  .privacy-policies {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 768px) {
  .privacy-policies {
    padding-bottom: 3rem;
  }
}

@media (min-width: 1024px) {
  .privacy-policies {
    padding-top: 1rem;
    padding-bottom: 3.5rem;
  }
}

@media (min-width: 1280px) {
  .privacy-policies {
    padding-top: 1.25rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1600px) {
  .privacy-policies {
    padding-top: 1.5rem;
    padding-bottom: 5rem;
  }
}

.privacy-policies .container .inf-collection h3 {
  padding-bottom: 0.5rem;
  padding-top: 1rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(50 61 91 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .privacy-policies .container .inf-collection h3 {
    padding-top: 1.25rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .privacy-policies .container .inf-collection h3 {
    padding-top: 1.5rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .privacy-policies .container .inf-collection h3 {
    padding-bottom: 0.75rem;
    padding-top: 2rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .privacy-policies .container .inf-collection h3 {
    padding-bottom: 1rem;
    padding-top: 2.5rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .privacy-policies .container .inf-collection h3 {
    padding-bottom: 1.25rem;
    padding-top: 3rem;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.privacy-policies .container .inf-collection ul.list-para {
  list-style-type: disc;
}

.privacy-policies .container .inf-collection ul.list-para li {
  margin-left: auto;
  margin-right: auto;
  max-width: -webkit-max-content;
  max-width: -moz-max-content;
  max-width: max-content;
  text-align: start;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.privacy-policies .container .inf-collection ul.list-para li *::marker {
  font-size: 14px;
}

.privacy-policies .container .inf-collection ul.list-para li::marker {
  font-size: 14px;
}

@media (min-width: 640px) {
  .privacy-policies .container .inf-collection ul.list-para li {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .privacy-policies .container .inf-collection ul.list-para li {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 22px;
  }
}

@media (min-width: 1280px) {
  .privacy-policies .container .inf-collection ul.list-para li {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 26px;
  }
}

@media (min-width: 1600px) {
  .privacy-policies .container .inf-collection ul.list-para li {
    font-size: 22px;
    line-height: 30px;
  }
}

.data-types {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(150 156 187 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .data-types {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .data-types {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .data-types {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .data-types {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    padding-left: 45px;
    padding-right: 45px;
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1600px) {
  .data-types {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-left: 60px;
    padding-right: 60px;
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
  }
}

.privacy-policies .container {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 640px) {
  .privacy-policies .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (min-width: 768px) {
  .privacy-policies .container {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .privacy-policies .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 1280px) {
  .privacy-policies .container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .privacy-policies .container {
    padding-left: 52px;
    padding-right: 52px;
  }
}

.data-types h5 {
  padding-bottom: 1.25rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
  text-decoration-line: underline;
}

@media (min-width: 640px) {
  .data-types h5 {
    padding-bottom: 1.5rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .data-types h5 {
    padding-bottom: 1.75rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .data-types h5 {
    padding-bottom: 2rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .data-types h5 {
    padding-bottom: 2.5rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .data-types h5 {
    margin-bottom: 54px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.privacy-sec-divider {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.privacy-tabs-sec {
  width: 100%;
}

@media (min-width: 768px) {
  .privacy-tabs-sec {
    max-width: 280px;
  }
}

@media (min-width: 1024px) {
  .privacy-tabs-sec {
    max-width: 320px;
  }
}

@media (min-width: 1280px) {
  .privacy-tabs-sec {
    max-width: 400px;
  }
}

@media (min-width: 1600px) {
  .privacy-tabs-sec {
    max-width: 500px;
  }
}

.privacy-policies .container .data-types .privacy-data-content {
  width: 100%;
}

@media (min-width: 768px) {
  .privacy-policies .container .data-types .privacy-data-content {
    max-width: calc(100% - 280px);
  }
}

@media (min-width: 1024px) {
  .privacy-policies .container .data-types .privacy-data-content {
    max-width: calc(100% - 320px);
  }
}

@media (min-width: 1280px) {
  .privacy-policies .container .data-types .privacy-data-content {
    max-width: calc(100% - 400px);
  }
}

@media (min-width: 1600px) {
  .privacy-policies .container .data-types .privacy-data-content {
    max-width: calc(100% - 500px);
  }
}

.privacy-tabs-sec ul li {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .privacy-tabs-sec ul li {
    margin-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .privacy-tabs-sec ul li {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .privacy-tabs-sec ul li {
    margin-bottom: 2rem;
    font-size: 1.25rem;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .privacy-tabs-sec ul li {
    margin-bottom: 2.5rem;
    font-size: 22px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .privacy-tabs-sec ul li {
    margin-bottom: 3rem;
    font-size: 25px;
    line-height: 2.5rem;
  }
}

.privacy-tabs-sec ul li:hover {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
  transition-duration: 500ms;
  transition-timing-function: linear;
}

.privacy-tabs-sec ul li.approach-tab-active-privacy {
  --tw-text-opacity: 1;
  color: rgb(253 197 38 / var(--tw-text-opacity));
}

.privacy-policies .container .data-types .privacy-data-content p {
  padding-bottom: 0px;
  text-align: start;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.discloser .privacy-data-content ul li {
  margin-left: 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .discloser .privacy-data-content ul li {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 22px;
  }
}

@media (min-width: 1280px) {
  .discloser .privacy-data-content ul li {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 26px;
  }
}

@media (min-width: 1600px) {
  .discloser .privacy-data-content ul li {
    font-size: 22px;
    line-height: 30px;
  }
}

.discloser .privacy-data-content ul {
  margin-top: 1.25rem;
  list-style-type: disc;
}

.discloser .privacy-data-content ul *::marker {
  font-size: 14px;
}

.discloser .privacy-data-content ul::marker {
  font-size: 14px;
}

.data-types.discloser .privacy-tabs-sec ul li.approach-tab-active-privacyd {
  --tw-text-opacity: 1;
  color: rgb(78 172 145 / var(--tw-text-opacity));
}

.data-types.discloser .privacy-tabs-sec ul li:hover {
  --tw-text-opacity: 1;
  color: rgb(78 172 145 / var(--tw-text-opacity));
}

.privacy-policies .container .data-types.discloser .privacy-data-content p {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.privacy-policies .container .data-types.discloser {
  background-color: transparent;
}

.privacy-policies .container .data-types .privacy-data-content p span {
  font-weight: 500;
}

/* ------------------------------------privacy-policy ends------------------ */

/* -----------------------------------site-map starts---------------------- */

@media (min-width: 1280px) {
  .service-banner-space.portfolio-banner-head.site-map {
    row-gap: 18px;
  }
}

@media (min-width: 1600px) {
  .service-banner-space.portfolio-banner-head.site-map {
    row-gap: 23px;
  }
}

.site-pages .container {
  padding-top: 1rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 640px) {
  .site-pages .container {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 768px) {
  .site-pages .container {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1024px) {
  .site-pages .container {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .site-pages .container {
    padding-top: 2.5rem;
    padding-bottom: 60px;
  }
}

@media (min-width: 1600px) {
  .site-pages .container {
    padding-top: 51px;
    padding-bottom: 70px;
  }
}

.site-pages .container h3 {
  padding-bottom: 1.25rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .site-pages .container h3 {
    padding-bottom: 1.5rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .site-pages .container h3 {
    padding-bottom: 2rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .site-pages .container h3 {
    padding-bottom: 2.5rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .site-pages .container h3 {
    padding-bottom: 50px;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .site-pages .container h3 {
    padding-bottom: 60px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.main-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  row-gap: 0.75rem;
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .main-pages {
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .main-pages {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .main-pages {
    padding-bottom: 2rem;
  }
}

@media (min-width: 1280px) {
  .main-pages {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .main-pages {
    padding-bottom: 51px;
  }
}

.main-pages a {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .main-pages a {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .main-pages a {
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .main-pages a {
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .main-pages a {
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.site-inner-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 0.75rem;
}

@media (min-width: 1024px) {
  .site-inner-pages {
    row-gap: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .site-inner-pages {
    row-gap: 2rem;
  }
}

@media (min-width: 1600px) {
  .site-inner-pages {
    row-gap: 2.5rem;
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }
}

.site-inner-pages a {
  width: 100%;
  max-width: 227px;
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1024px) {
  .site-inner-pages a {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .site-inner-pages a {
    font-size: 19px;
  }
}

@media (min-width: 1600px) {
  .site-inner-pages a {
    max-width: 263px;
    font-size: 22px;
  }
}

.site-inner-pages a:nth-child(5),.site-inner-pages a:nth-child(10),.site-inner-pages a:nth-child(15),.site-inner-pages a:nth-child(20) {
  max-width: 304px;
}

@media (min-width: 1600px) {
  .site-inner-pages a:nth-child(5),.site-inner-pages a:nth-child(10),.site-inner-pages a:nth-child(15),.site-inner-pages a:nth-child(20) {
    max-width: 352px;
  }
}

.posts-blogs .container {
  border-radius: 20px;
  --tw-bg-opacity: 1;
  background-color: rgb(223 228 245 / var(--tw-bg-opacity));
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.75rem;
  padding-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .posts-blogs .container {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .posts-blogs .container {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1.25rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1280px) {
  .posts-blogs .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 22px;
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .posts-blogs .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 27px;
    padding-bottom: 53px;
  }
}

.posts-blogs .container ul li {
  margin-left: 1.25rem;
  list-style-type: disc;
}

.posts-blogs .container ul li *::marker {
  font-size: 14px;
}

.posts-blogs .container ul li::marker {
  font-size: 14px;
}

.posts-blogs .container ul li a {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.75rem;
}

@media (min-width: 1280px) {
  .posts-blogs .container ul li a {
    font-size: 1rem;
    line-height: 2rem;
  }
}

@media (min-width: 1600px) {
  .posts-blogs .container ul li a {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }
}

.posts-blogs .container ul li a {
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

.posts-blogs-sec {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 2rem;
}

@media (min-width: 1024px) {
  .posts-blogs-sec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .posts-blogs-sec {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
    row-gap: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .posts-blogs-sec {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
    row-gap: 4rem;
  }
}

.posts-blogs .container h3 {
  padding-bottom: 1.25rem;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  .posts-blogs .container h3 {
    padding-bottom: 1.5rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .posts-blogs .container h3 {
    padding-bottom: 2rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .posts-blogs .container h3 {
    padding-bottom: 2.5rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .posts-blogs .container h3 {
    padding-bottom: 53px;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.mark-links .container {
  padding-top: 1rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 640px) {
  .mark-links .container {
    padding-top: 1.25rem;
    padding-bottom: 1rem;
  }
}

@media (min-width: 768px) {
  .mark-links .container {
    padding-top: 1.5rem;
    padding-bottom: 18px;
  }
}

@media (min-width: 1024px) {
  .mark-links .container {
    padding-top: 2rem;
    padding-bottom: 22px;
  }
}

@media (min-width: 1280px) {
  .mark-links .container {
    padding-top: 2.5rem;
    padding-bottom: 26px;
  }
}

@media (min-width: 1600px) {
  .mark-links .container {
    padding-top: 45px;
    padding-bottom: 30px;
  }
}

.mark-links .container .mark-link-divider {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .mark-links .container .mark-link-divider {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .mark-links .container .mark-link-divider {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .mark-links .container .mark-link-divider {
    gap: 1.5rem;
  }
}

@media (min-width: 1600px) {
  .mark-links .container .mark-link-divider {
    gap: 2rem;
  }
}

.mark-links .container .mark-link-divider h3 {
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(32 41 59 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .mark-links .container .mark-link-divider h3 {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .mark-links .container .mark-link-divider h3 {
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .mark-links .container .mark-link-divider h3 {
    padding-bottom: 1rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .mark-links .container .mark-link-divider h3 {
    padding-bottom: 1.25rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .mark-links .container .mark-link-divider h3 {
    padding-bottom: 1.5rem;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.mark-links .container .mark-link-divider .mark-link-content ul {
  list-style-type: disc;
}

.mark-links .container .mark-link-divider .mark-link-content ul *::marker {
  font-size: 14px;
}

.mark-links .container .mark-link-divider .mark-link-content ul::marker {
  font-size: 14px;
}

.mark-links .container .mark-link-divider .mark-link-content ul li {
  margin-left: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-decoration-line: underline;
}

@media (min-width: 1024px) {
  .mark-links .container .mark-link-divider .mark-link-content ul li {
    line-height: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .mark-links .container .mark-link-divider .mark-link-content ul li {
    font-size: 1rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1600px) {
  .mark-links .container .mark-link-divider .mark-link-content ul li {
    font-size: 1.125rem;
    line-height: 2rem;
  }
}

.online-mark .container .online-mark-sec ul {
  list-style-type: disc;
}

.online-mark .container .online-mark-sec ul *::marker {
  font-size: 14px;
}

.online-mark .container .online-mark-sec ul::marker {
  font-size: 14px;
}

.online-mark .container .online-mark-sec ul li {
  margin-left: 1.25rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 1280px) {
  .online-mark .container .online-mark-sec ul li {
    font-size: 1.125rem;
    line-height: 1.75rem;
    line-height: 28px;
  }
}

@media (min-width: 1600px) {
  .online-mark .container .online-mark-sec ul li {
    font-size: 1.25rem;
    line-height: 1.75rem;
    line-height: 30px;
  }
}

.online-mark .container .online-mark-sec ul li ul li {
  margin-left: 2rem;
  text-decoration-line: underline;
}

.online-mark .container h3 {
  margin-bottom: 1rem;
  border-radius: 10px;
  --tw-bg-opacity: 1;
  background-color: rgb(223 228 245 / var(--tw-bg-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  text-align: start;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(49 61 90 / var(--tw-text-opacity));
}

@media (min-width: 640px) {
  .online-mark .container h3 {
    margin-bottom: 1.25rem;
    text-align: center;
  }
}

@media (min-width: 768px) {
  .online-mark .container h3 {
    margin-bottom: 1.5rem;
    font-size: 20px;
  }
}

@media (min-width: 1024px) {
  .online-mark .container h3 {
    margin-bottom: 2rem;
    font-size: 22px;
    line-height: 2rem;
  }
}

@media (min-width: 1280px) {
  .online-mark .container h3 {
    margin-bottom: 2.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 26px;
    line-height: 2.25rem;
  }
}

@media (min-width: 1600px) {
  .online-mark .container h3 {
    margin-bottom: 52px;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    font-size: 1.875rem;
    line-height: 2.5rem;
  }
}

.online-mark-sizer {
  width: 100%;
}

@media (min-width: 768px) {
  .online-mark-sizer {
    max-width: 330px;
  }
}

@media (min-width: 1024px) {
  .online-mark-sizer {
    max-width: 490px;
  }
}

@media (min-width: 1280px) {
  .online-mark-sizer {
    max-width: 570px;
  }
}

@media (min-width: 1600px) {
  .online-mark-sizer {
    max-width: 713px;
  }
}

.online-mark-sec {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.online-mark .container {
  padding-bottom: 1rem;
}

@media (min-width: 640px) {
  .online-mark .container {
    padding-bottom: 1.25rem;
  }
}

@media (min-width: 768px) {
  .online-mark .container {
    padding-bottom: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .online-mark .container {
    padding-bottom: 2rem;
  }
}

@media (min-width: 1280px) {
  .online-mark .container {
    padding-bottom: 2.5rem;
  }
}

@media (min-width: 1600px) {
  .online-mark .container {
    padding-bottom: 2.75rem;
  }
}

section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-content.refund-banner img {
  width: 100%;
  max-width: 380px;
}

@media (min-width: 475px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-content.refund-banner img {
    max-width: 475px;
  }
}

@media (min-width: 1024px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-content.refund-banner img {
    max-width: 500px;
  }
}

@media (min-width: 1280px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-content.refund-banner img {
    max-width: 580px;
  }
}

@media (min-width: 1600px) {
  section.portfolio-banner.web-dev.ppc-banner .container .portfolio-banner-content.refund-banner img {
    max-width: 679px;
  }
}

/* ------------------------------------site-map ends----------------------- */

.visible {
  visibility: visible;
}

.absolute {
  position: absolute;
}

.table {
  display: table;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.grow {
  flex-grow: 1;
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

@media (min-width:768px){
  .video-testimonial .container .swiper-slide.swiper-slide-prev .video-slide-content{
    margin-left: 0 !important;
    transform: translateX(-17px) rotateX(0deg) rotateY(-30deg) rotateZ(-14deg);
    scale: 0.8;
  }

  .video-testimonial .container .swiper-slide.swiper-slide-next .video-slide-content{
    margin-right: 0 !important;
    transform: translateX(9px) rotateX(0deg) rotateY(28deg) rotateZ(13deg);
    scale: 0.85;
  }
}

@media (min-width:840px){
  .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: -38%;
  }

  .portfolio-banner.web-dev .ogrelogic-yellow-circle.portfolio-circle-rotate{
    left: 50%;
  }
}

@media (min-width:930px){
  .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: -29%;
  }

  .portfolio-banner.web-dev .ogrelogic-yellow-circle.portfolio-circle-rotate{
    left: 41%;
  }
}

@media (min-width:1024px){
  .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: -37%;
  }
}

@media (min-width:1400px){
  .ogrelogic-yellow-circle.portfolio-circle-rotate {
    left: -31%;
  }

  .portfolio-banner.web-dev .ogrelogic-yellow-circle.portfolio-circle-rotate{
    left: 43%;
  }
}

/* extra css */

.contact-modal-form{
  background: rgba( 255, 255, 255, 0.25 );
  box-shadow: 0 8px 32px 0 rgb(31 38 135 / 10%);
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 60px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.what-we-do-home .swiper-button-lock{
  display: block !important;
}

.review-testimonial .container .mySwiperReview .swiper-slide{
  opacity: 0 !important;
}

.review-testimonial .container .mySwiperReview .swiper-slide.swiper-slide-active{
  opacity: 1 !important;
}

.review-testimonial .container .mySwiperReview .swiper-slide-shadow{
  background: none !important;
}

.mySwiperWork .swiper-slide-shadow{
  background: none !important;
}

.swiper.mySwiperCustomers .swiper-slide-shadow{
  background: none !important;
}

.video-testimonial .container .swiper-slide-shadow{
  display: none !important;
}

/* animations css */

.ogrelogic-yellow-circle img{
  -webkit-animation: animate-rotate-infinity 20s linear infinite;
          animation: animate-rotate-infinity 20s linear infinite;
}

.mobile-banner-vector .mobile-clip-image .iso-image-1 img{
  -webkit-animation: animate-b-to-t 1.5s ease-in;
          animation: animate-b-to-t 1.5s ease-in;
}

.mobile-banner-vector .mobile-clip-image .iso-image-2 img{
  -webkit-animation: animate-r-to-l 1.5s ease-in;
          animation: animate-r-to-l 1.5s ease-in;
}

.mobile-banner-vector .mobile-clip-image .iso-image-3 img{
  -webkit-animation: animate-t-to-b 1.5s ease-in;
          animation: animate-t-to-b 1.5s ease-in;
}

.mobile-nav-menu.show-menu{
  -webkit-animation: animate-shutter 1s ease-in;
          animation: animate-shutter 1s ease-in;
}

.contact-modal-vector-blue img{
  -webkit-animation: animate-contact-bounce 5s linear infinite;
          animation: animate-contact-bounce 5s linear infinite;
}

.contact-modal-yellow-vector img,.explore-vector img{
  -webkit-animation:animate-contact-bounce-reverse 5s linear infinite;
          animation:animate-contact-bounce-reverse 5s linear infinite;
}

.green-vector-image img{
  -webkit-animation: animate-to-and-fro 5s linear infinite;
          animation: animate-to-and-fro 5s linear infinite;
}

.innovation-vector-yellow img{
  -webkit-animation: animate-bounce 5s linear infinite;
          animation: animate-bounce 5s linear infinite;
}

.innovation-vector img{
  -webkit-animation: animate-bounce-normal 5s linear infinite;
          animation: animate-bounce-normal 5s linear infinite;
}

.innovation-data.inner-innovate-content.active .innovation-data-content{
  -webkit-animation: animate-fade 0.7s ease-in;
          animation: animate-fade 0.7s ease-in;
}

.start-project-pop.show-popup{
  -webkit-animation: animte-drop-down 0.9s ease-in;
          animation: animte-drop-down 0.9s ease-in;
}

.tab-grid-content:hover .blured-portfolio-image:after{
  -webkit-animation: animate-full-width 0.5s ease-in;
          animation: animate-full-width 0.5s ease-in;
}

.table-data.show-table{
  -webkit-animation: animate-table-pop 1s ease-in;
          animation: animate-table-pop 1s ease-in;
}

.table-data.close-table{
  -webkit-animation: animate-table-pop-close 1s ease-in;
          animation: animate-table-pop-close 1s ease-in;
}

.nav-drop div img{
  -webkit-animation: animate-bounce-drop 5s linear infinite;
          animation: animate-bounce-drop 5s linear infinite;
}

.nav-drop div.hover-vector-yellow img,.nav-drop div.hover-vector-green img,.nav-drop .hover-vector-light img{
  -webkit-animation:animate-bounce-drop-rev 5s linear infinite;
          animation:animate-bounce-drop-rev 5s linear infinite;
}

.calculater.show-calc{
  -webkit-animation: animate-table-pop 1s ease-in;
          animation: animate-table-pop 1s ease-in;
}

.calculater.close-calc-pop{
  -webkit-animation: animate-table-pop-close 1s ease-in;
          animation: animate-table-pop-close 1s ease-in;
}

.video-test-pop.show-video{
  -webkit-animation: animate-table-pop 1s ease-in;
          animation: animate-table-pop 1s ease-in;
}

.video-test-pop.show-video-ani{
  -webkit-animation: animate-table-pop-close 1s ease-in;
          animation: animate-table-pop-close 1s ease-in;
}

@-webkit-keyframes animate-bounce-drop-rev {
  0%{
    transform: translateY(0) rotate(0deg);
  }

  50%{
    transform: translateY(-10px) rotate(15deg);
  }

  100%{
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes animate-bounce-drop-rev {
  0%{
    transform: translateY(0) rotate(0deg);
  }

  50%{
    transform: translateY(-10px) rotate(15deg);
  }

  100%{
    transform: translateY(0) rotate(0deg);
  }
}

@-webkit-keyframes animate-bounce-drop {
  0%{
    transform: translateY(0) rotate(0deg);
  }

  50%{
    transform: translateY(10px) rotate(15deg);
  }

  100%{
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes animate-bounce-drop {
  0%{
    transform: translateY(0) rotate(0deg);
  }

  50%{
    transform: translateY(10px) rotate(15deg);
  }

  100%{
    transform: translateY(0) rotate(0deg);
  }
}

@-webkit-keyframes animate-table-pop-close {
  0%{
    opacity: 1;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }

  100%{
    opacity: 0;
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
            clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  }
}

@keyframes animate-table-pop-close {
  0%{
    opacity: 1;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }

  100%{
    opacity: 0;
    -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
            clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
  }
}

@-webkit-keyframes animate-table-pop {
  0%{
    opacity: 0;
    -webkit-clip-path: polygon(50% 100%, 50% 100%, 50% 0, 50% 0);
            clip-path: polygon(50% 100%, 50% 100%, 50% 0, 50% 0);
  }

  20%{
    opacity: 0;
  }

  100%{
    opacity: 1;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}

@keyframes animate-table-pop {
  0%{
    opacity: 0;
    -webkit-clip-path: polygon(50% 100%, 50% 100%, 50% 0, 50% 0);
            clip-path: polygon(50% 100%, 50% 100%, 50% 0, 50% 0);
  }

  20%{
    opacity: 0;
  }

  100%{
    opacity: 1;
    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
            clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
  }
}

@-webkit-keyframes animte-drop-down {
  0%{
    opacity: 0;
    /* transform: translateY(-500px); */
    -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
            clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }

  100%{
    opacity: 1;
    /* transform: translateY(0px); */
    -webkit-clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
            clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
  }
}

@keyframes animte-drop-down {
  0%{
    opacity: 0;
    /* transform: translateY(-500px); */
    -webkit-clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
            clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
  }

  100%{
    opacity: 1;
    /* transform: translateY(0px); */
    -webkit-clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
            clip-path: polygon(0 0, 50% 0, 100% 0, 100% 50%, 100% 100%, 50% 100%, 0 100%, 0 50%);
  }
}

@-webkit-keyframes animate-full-width {
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

@keyframes animate-full-width {
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

@-webkit-keyframes animate-fade {
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

@keyframes animate-fade {
  0%{
    opacity: 0;
  }

  100%{
    opacity: 1;
  }
}

@-webkit-keyframes animate-to-and-fro {
  0%{
    transform: rotate(0deg);
  }

  50%{
    transform: rotate(15deg);
  }

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

@keyframes animate-to-and-fro {
  0%{
    transform: rotate(0deg);
  }

  50%{
    transform: rotate(15deg);
  }

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

@-webkit-keyframes animate-bounce-normal {
  0%{
    transform: translateY(30px);
  }

  50%{
    transform: translateY(0px);
  }

  100%{
    transform: translateY(30px);
  }
}

@keyframes animate-bounce-normal {
  0%{
    transform: translateY(30px);
  }

  50%{
    transform: translateY(0px);
  }

  100%{
    transform: translateY(30px);
  }
}

@-webkit-keyframes animate-contact-bounce {
  0%{
    transform: translateY(30px);
  }

  50%{
    transform: translateY(0px);
  }

  100%{
    transform: translateY(30px);
  }
}

@keyframes animate-contact-bounce {
  0%{
    transform: translateY(30px);
  }

  50%{
    transform: translateY(0px);
  }

  100%{
    transform: translateY(30px);
  }
}

@-webkit-keyframes animate-contact-bounce-reverse {
  0%{
    transform: translateY(-30px);
  }

  50%{
    transform: translateY(0px);
  }

  100%{
    transform: translateY(-30px);
  }
}

@keyframes animate-contact-bounce-reverse {
  0%{
    transform: translateY(-30px);
  }

  50%{
    transform: translateY(0px);
  }

  100%{
    transform: translateY(-30px);
  }
}

@-webkit-keyframes animate-bounce {
  0%{
    transform: translateY(0) rotate(0deg);
  }

  50%{
    transform: translateY(50px) rotate(15deg);
  }

  100%{
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes animate-bounce {
  0%{
    transform: translateY(0) rotate(0deg);
  }

  50%{
    transform: translateY(50px) rotate(15deg);
  }

  100%{
    transform: translateY(0) rotate(0deg);
  }
}

@-webkit-keyframes animate-shutter {
  0%{
    width: 0;
    opacity: 0;
  }

  30%{
    opacity: 0;
  }

  100%{
    width: 100%;
    opacity: 1;
  }
}

@keyframes animate-shutter {
  0%{
    width: 0;
    opacity: 0;
  }

  30%{
    opacity: 0;
  }

  100%{
    width: 100%;
    opacity: 1;
  }
}

@-webkit-keyframes animate-image-shutter {
  0%{
    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
            clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
  }

  25%{
    -webkit-clip-path: polygon(0 0, 25% 0, 25% 100%, 0% 100%);
            clip-path: polygon(0 0, 25% 0, 25% 100%, 0% 100%);
  }

  50%{
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
  }

  75%{
    -webkit-clip-path: polygon(0 0, 75% 0, 75% 100%, 0% 100%);
            clip-path: polygon(0 0, 75% 0, 75% 100%, 0% 100%);
  }

  100%{
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

@keyframes animate-image-shutter {
  0%{
    -webkit-clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
            clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
  }

  25%{
    -webkit-clip-path: polygon(0 0, 25% 0, 25% 100%, 0% 100%);
            clip-path: polygon(0 0, 25% 0, 25% 100%, 0% 100%);
  }

  50%{
    -webkit-clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
            clip-path: polygon(0 0, 50% 0, 50% 100%, 0% 100%);
  }

  75%{
    -webkit-clip-path: polygon(0 0, 75% 0, 75% 100%, 0% 100%);
            clip-path: polygon(0 0, 75% 0, 75% 100%, 0% 100%);
  }

  100%{
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

@-webkit-keyframes animate-rotate-infinity{
  0%{
    transform: rotateZ(0deg);
    opacity: 1;
  }

  100%{
    transform: rotateZ(360deg);
    opacity: 1;
  }
}

@keyframes animate-rotate-infinity{
  0%{
    transform: rotateZ(0deg);
    opacity: 1;
  }

  100%{
    transform: rotateZ(360deg);
    opacity: 1;
  }
}

@-webkit-keyframes animate-b-to-t {
  0%{
    transform: translateY(200px);
    opacity: 0;
  }

  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes animate-b-to-t {
  0%{
    transform: translateY(200px);
    opacity: 0;
  }

  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes animate-r-to-l {
  0%{
    transform: translateX(100px);
    opacity: 0;
  }

  100%{
    transform: translateX(0px);
    opacity: 1;
  }
}

@keyframes animate-r-to-l {
  0%{
    transform: translateX(100px);
    opacity: 0;
  }

  100%{
    transform: translateX(0px);
    opacity: 1;
  }
}

@-webkit-keyframes animate-t-to-b {
  0%{
    transform: translateY(-200px);
    opacity: 0;
  }

  100%{
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes animate-t-to-b {
  0%{
    transform: translateY(-200px);
    opacity: 0;
  }

  100%{
    transform: translateY(0px);
    opacity: 1;
  }
}

/* animation css ends */