@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700;800;900&family=Mulish:wght@200..1000&display=swap");

/* The src/css/input.css file contains the custom style of the template (e.g., color definitions, buttons, form elements) and the CSS code for each of the components used to build the template. */

/* Colors + Color Themes;
Buttons + Forms style;
Custom Typography. */

/* <!-- design changes start here 2 --> */

/* <!-- design changes end here 2 --> */

*, ::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-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --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(63 131 248 / 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:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::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-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --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(63 131 248 / 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:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/* ! tailwindcss v3.4.17 | 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: #E5E7EB;
  /* 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.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  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, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
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. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. 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-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
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-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: 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,
input:where([type='button']),
input:where([type='reset']),
input:where([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;
}

/*
Reset default styling for dialogs.
*/

dialog {
  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]:where(:not([hidden="until-found"])) {
  display: none;
}

.tooltip-arrow,.tooltip-arrow:before{
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

.tooltip-arrow{
  visibility: hidden;
}

.tooltip-arrow:before{
  content: "";
  visibility: visible;
  transform: rotate(45deg);
}

[data-tooltip-style^='light'] + .tooltip > .tooltip-arrow:before{
  border-style: solid;
  border-color: #e5e7eb;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='top'] > .tooltip-arrow:before{
  border-bottom-width: 1px;
  border-right-width: 1px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='right'] > .tooltip-arrow:before{
  border-bottom-width: 1px;
  border-left-width: 1px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='bottom'] > .tooltip-arrow:before{
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-tooltip-style^='light'] + .tooltip[data-popper-placement^='left'] > .tooltip-arrow:before{
  border-top-width: 1px;
  border-right-width: 1px;
}

.tooltip[data-popper-placement^='top'] > .tooltip-arrow{
  bottom: -4px;
}

.tooltip[data-popper-placement^='bottom'] > .tooltip-arrow{
  top: -4px;
}

.tooltip[data-popper-placement^='left'] > .tooltip-arrow{
  right: -4px;
}

.tooltip[data-popper-placement^='right'] > .tooltip-arrow{
  left: -4px;
}

.tooltip.invisible > .tooltip-arrow:before{
  visibility: hidden;
}

[data-popper-arrow],[data-popper-arrow]:before{
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}

[data-popper-arrow]{
  visibility: hidden;
}

[data-popper-arrow]:before{
  content: "";
  visibility: visible;
  transform: rotate(45deg);
}

[data-popper-arrow]:after{
  content: "";
  visibility: visible;
  transform: rotate(45deg);
  position: absolute;
  width: 9px;
  height: 9px;
  background: inherit;
}

[role="tooltip"] > [data-popper-arrow]:before{
  border-style: solid;
  border-color: #e5e7eb;
}

.dark [role="tooltip"] > [data-popper-arrow]:before{
  border-style: solid;
  border-color: #4b5563;
}

[role="tooltip"] > [data-popper-arrow]:after{
  border-style: solid;
  border-color: #e5e7eb;
}

.dark [role="tooltip"] > [data-popper-arrow]:after{
  border-style: solid;
  border-color: #4b5563;
}

[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:before{
  border-bottom-width: 1px;
  border-right-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]:after{
  border-bottom-width: 1px;
  border-right-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:before{
  border-bottom-width: 1px;
  border-left-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]:after{
  border-bottom-width: 1px;
  border-left-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:before{
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]:after{
  border-top-width: 1px;
  border-left-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:before{
  border-top-width: 1px;
  border-right-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]:after{
  border-top-width: 1px;
  border-right-width: 1px;
}

[data-popover][role="tooltip"][data-popper-placement^='top'] > [data-popper-arrow]{
  bottom: -5px;
}

[data-popover][role="tooltip"][data-popper-placement^='bottom'] > [data-popper-arrow]{
  top: -5px;
}

[data-popover][role="tooltip"][data-popper-placement^='left'] > [data-popper-arrow]{
  right: -5px;
}

[data-popover][role="tooltip"][data-popper-placement^='right'] > [data-popper-arrow]{
  left: -5px;
}

[role="tooltip"].invisible > [data-popper-arrow]:before{
  visibility: hidden;
}

[role="tooltip"].invisible > [data-popper-arrow]:after{
  visibility: hidden;
}

[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: #fff;
  border-color: #6B7280;
  border-width: 1px;
  border-radius: 0px;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
}

[type='text']:focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #1C64F2;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-color: #1C64F2;
}

input::-moz-placeholder, textarea::-moz-placeholder{
  color: #6B7280;
  opacity: 1;
}

input::placeholder,textarea::placeholder{
  color: #6B7280;
  opacity: 1;
}

::-webkit-datetime-edit-fields-wrapper{
  padding: 0;
}

input[type="time"]::-webkit-calendar-picker-indicator{
  background: none;
}

select:not([size]){
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 6'%3e %3cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 1 4 4 4-4'/%3e %3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 0.75em 0.75em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

:is([dir=rtl]) select:not([size]){
  background-position: left 0.75rem center;
  padding-right: 0.75rem;
  padding-left: 0;
}

[multiple]{
  background-image: initial;
  background-position: initial;
  background-repeat: unset;
  background-size: initial;
  padding-right: 0.75rem;
  -webkit-print-color-adjust: unset;
          print-color-adjust: unset;
}

[type='checkbox'],[type='radio']{
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding: 0;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  display: inline-block;
  vertical-align: middle;
  background-origin: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
  color: #1C64F2;
  background-color: #fff;
  border-color: #6B7280;
  border-width: 1px;
  --tw-shadow: 0 0 #0000;
}

[type='checkbox']{
  border-radius: 0px;
}

[type='radio']{
  border-radius: 100%;
}

[type='checkbox']:focus,[type='radio']:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: #1C64F2;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

[type='checkbox']:checked,[type='radio']:checked,.dark [type='checkbox']:checked,.dark [type='radio']:checked{
  border-color: transparent;
  background-color: currentColor;
  background-size: 0.55em 0.55em;
  background-position: center;
  background-repeat: no-repeat;
}

[type='checkbox']:checked{
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M1 5.917 5.724 10.5 15 1.5'/%3e %3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 0.55em 0.55em;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[type='radio']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-size: 1em 1em;
}

.dark [type='radio']:checked{
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  background-size: 1em 1em;
}

[type='checkbox']:indeterminate{
  background-image: url("data:image/svg+xml,%3csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 12'%3e %3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M0.5 6h14'/%3e %3c/svg%3e");
  background-color: currentColor;
  border-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 0.55em 0.55em;
  -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
}

[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
  border-color: transparent;
  background-color: currentColor;
}

[type='file']{
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

[type='file']:focus{
  outline: 1px auto inherit;
}

input[type=file]::file-selector-button{
  color: white;
  background: #1F2937;
  border: 0;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  padding-left: 2rem;
  padding-right: 1rem;
  margin-inline-start: -1rem;
  margin-inline-end: 1rem;
}

input[type=file]::file-selector-button:hover{
  background: #374151;
}

:is([dir=rtl]) input[type=file]::file-selector-button{
  padding-right: 2rem;
  padding-left: 1rem;
}

.dark input[type=file]::file-selector-button{
  color: white;
  background: #4B5563;
}

.dark input[type=file]::file-selector-button:hover{
  background: #6B7280;
}

input[type="range"]::-webkit-slider-thumb{
  height: 1.25rem;
  width: 1.25rem;
  background: #1C64F2;
  border-radius: 9999px;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type="range"]:disabled::-webkit-slider-thumb{
  background: #9CA3AF;
}

.dark input[type="range"]:disabled::-webkit-slider-thumb{
  background: #6B7280;
}

input[type="range"]:focus::-webkit-slider-thumb{
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1px;
  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
}

input[type="range"]::-moz-range-thumb{
  height: 1.25rem;
  width: 1.25rem;
  background: #1C64F2;
  border-radius: 9999px;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

input[type="range"]:disabled::-moz-range-thumb{
  background: #9CA3AF;
}

.dark input[type="range"]:disabled::-moz-range-thumb{
  background: #6B7280;
}

input[type="range"]::-moz-range-progress{
  background: #3F83F8;
}

input[type="range"]::-ms-fill-lower{
  background: #3F83F8;
}

.toggle-bg:after{
  content: "";
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  background: white;
  border-color: #D1D5DB;
  border-width: 1px;
  border-radius: 9999px;
  height: 1.25rem;
  width: 1.25rem;
  transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
  transition-duration: .15s;
  box-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
}

input:checked + .toggle-bg:after{
  transform: translateX(100%);;
  border-color: white;
}

input:checked + .toggle-bg{
  background: #1C64F2;
  border-color: #1C64F2;
}

.container{
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

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

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

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

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

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

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

.container-fluid{
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 12px;
  padding-right: 12px;
}

.visible{
  visibility: visible;
}

.invisible{
  visibility: hidden;
}

.collapse{
  visibility: collapse;
}

.static{
  position: static;
}

.fixed{
  position: fixed;
}

.absolute{
  position: absolute;
}

.relative{
  position: relative;
}

.sticky{
  position: sticky;
}

.inset-0{
  inset: 0px;
}

.inset-2{
  inset: 0.5rem;
}

.inset-3{
  inset: 0.75rem;
}

.\!left-1\/2{
  left: 50% !important;
}

.-bottom-\[10px\]{
  bottom: -10px;
}

.-left-12{
  left: -3rem;
}

.-left-28{
  left: -7rem;
}

.-left-9{
  left: -2.25rem;
}

.-right-9{
  right: -2.25rem;
}

.-top-16{
  top: -4rem;
}

.-top-5{
  top: -1.25rem;
}

.-top-8{
  top: -2rem;
}

.bottom-0{
  bottom: 0px;
}

.bottom-5{
  bottom: 1.25rem;
}

.bottom-8{
  bottom: 2rem;
}

.bottom-\[60px\]{
  bottom: 60px;
}

.left-0{
  left: 0px;
}

.left-1\/2{
  left: 50%;
}

.left-9{
  left: 2.25rem;
}

.left-\[5\%\]{
  left: 5%;
}

.left-unset{
  left: unset;
}

.right-0{
  right: 0px;
}

.right-12{
  right: 3rem;
}

.right-14{
  right: 3.5rem;
}

.right-28{
  right: 7rem;
}

.right-5{
  right: 1.25rem;
}

.right-6{
  right: 1.5rem;
}

.right-60{
  right: 15rem;
}

.right-unset{
  right: unset;
}

.top-0{
  top: 0px;
}

.top-1\/2{
  top: 50%;
}

.top-20{
  top: 5rem;
}

.top-28{
  top: 7rem;
}

.top-32{
  top: 8rem;
}

.top-48{
  top: 12rem;
}

.top-56{
  top: 14rem;
}

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

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

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

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

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

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

.z-\[250\]{
  z-index: 250;
}

.order-1{
  order: 1;
}

.order-2{
  order: 2;
}

.col-span-1{
  grid-column: span 1 / span 1;
}

.col-span-12{
  grid-column: span 12 / span 12;
}

.col-span-2{
  grid-column: span 2 / span 2;
}

.col-span-4{
  grid-column: span 4 / span 4;
}

.col-span-6{
  grid-column: span 6 / span 6;
}

.col-start-1{
  grid-column-start: 1;
}

.col-start-12{
  grid-column-start: 12;
}

.col-end-13{
  grid-column-end: 13;
}

.col-end-5{
  grid-column-end: 5;
}

.col-end-6{
  grid-column-end: 6;
}

.col-end-7{
  grid-column-end: 7;
}

.float-right{
  float: right;
}

.m-0{
  margin: 0px;
}

.m-auto{
  margin: auto;
}

.mx-12{
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-6{
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.mx-auto{
  margin-left: auto;
  margin-right: auto;
}

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

.my-auto{
  margin-top: auto;
  margin-bottom: auto;
}

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

.\!mb-3{
  margin-bottom: 0.75rem !important;
}

.\!mt-0{
  margin-top: 0px !important;
}

.\!mt-3{
  margin-top: 0.75rem !important;
}

.-mt-10{
  margin-top: -2.5rem;
}

.-mt-16{
  margin-top: -4rem;
}

.-mt-9{
  margin-top: -2.25rem;
}

.-mt-\[63px\]{
  margin-top: -63px;
}

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

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

.mb-10{
  margin-bottom: 2.5rem;
}

.mb-11{
  margin-bottom: 2.75rem;
}

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

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

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

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

.mb-32{
  margin-bottom: 8rem;
}

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

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

.mb-5{
  margin-bottom: 1.25rem;
}

.mb-6{
  margin-bottom: 1.5rem;
}

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

.mb-7{
  margin-bottom: 1.75rem;
}

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

.mb-9{
  margin-bottom: 2.25rem;
}

.me-2{
  margin-inline-end: 0.5rem;
}

.me-5{
  margin-inline-end: 1.25rem;
}

.ml-2{
  margin-left: 0.5rem;
}

.ml-3{
  margin-left: 0.75rem;
}

.ml-auto{
  margin-left: auto;
}

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

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

.mr-3{
  margin-right: 0.75rem;
}

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

.mr-6{
  margin-right: 1.5rem;
}

.ms-6{
  margin-inline-start: 1.5rem;
}

.mt-0{
  margin-top: 0px;
}

.mt-1{
  margin-top: 0.25rem;
}

.mt-10{
  margin-top: 2.5rem;
}

.mt-12{
  margin-top: 3rem;
}

.mt-2{
  margin-top: 0.5rem;
}

.mt-3{
  margin-top: 0.75rem;
}

.mt-5{
  margin-top: 1.25rem;
}

.mt-6{
  margin-top: 1.5rem;
}

.mt-7{
  margin-top: 1.75rem;
}

.mt-8{
  margin-top: 2rem;
}

.mt-9{
  margin-top: 2.25rem;
}

.mt-auto{
  margin-top: auto;
}

.block{
  display: block;
}

.inline-block{
  display: inline-block;
}

.inline{
  display: inline;
}

.\!flex{
  display: flex !important;
}

.flex{
  display: flex;
}

.inline-flex{
  display: inline-flex;
}

.table{
  display: table;
}

.grid{
  display: grid;
}

.inline-grid{
  display: inline-grid;
}

.contents{
  display: contents;
}

.hidden{
  display: none;
}

.h-1{
  height: 1px;
}

.h-10{
  height: 2.5rem;
}

.h-11{
  height: 2.75rem;
}

.h-12{
  height: 3rem;
}

.h-14{
  height: 3.5rem;
}

.h-16{
  height: 4rem;
}

.h-2{
  height: 0.5rem;
}

.h-20{
  height: 5rem;
}

.h-200{
  height: 200px;
}

.h-24{
  height: 6rem;
}

.h-28{
  height: 7rem;
}

.h-3{
  height: 0.75rem;
}

.h-300{
  height: 300px;
}

.h-350{
  height: 350px;
}

.h-36{
  height: 9rem;
}

.h-4{
  height: 1rem;
}

.h-52{
  height: 13rem;
}

.h-56{
  height: 14rem;
}

.h-6{
  height: 1.5rem;
}

.h-60{
  height: 15rem;
}

.h-600{
  height: 600px;
}

.h-645{
  height: 645px;
}

.h-7{
  height: 1.75rem;
}

.h-8{
  height: 2rem;
}

.h-9{
  height: 2.25rem;
}

.h-96{
  height: 24rem;
}

.h-\[100px\]{
  height: 100px;
}

.h-\[150px\]{
  height: 150px;
}

.h-\[2px\]{
  height: 2px;
}

.h-\[320px\]{
  height: 320px;
}

.h-\[55px\]{
  height: 55px;
}

.h-\[88px\]{
  height: 88px;
}

.h-\[935px\]{
  height: 935px;
}

.h-auto{
  height: auto;
}

.h-full{
  height: 100%;
}

.h-screen{
  height: 100vh;
}

.min-h-\[220px\]{
  min-height: 220px;
}

.\!w-unset{
  width: unset !important;
}

.w-1\/2{
  width: 50%;
}

.w-10{
  width: 2.5rem;
}

.w-11{
  width: 2.75rem;
}

.w-12{
  width: 3rem;
}

.w-14{
  width: 3.5rem;
}

.w-16{
  width: 4rem;
}

.w-2{
  width: 0.5rem;
}

.w-20{
  width: 5rem;
}

.w-24{
  width: 6rem;
}

.w-28{
  width: 7rem;
}

.w-3{
  width: 0.75rem;
}

.w-3\/4{
  width: 75%;
}

.w-310{
  width: 310px;
}

.w-32{
  width: 8rem;
}

.w-36{
  width: 9rem;
}

.w-4{
  width: 1rem;
}

.w-40{
  width: 10rem;
}

.w-44{
  width: 11rem;
}

.w-500{
  width: 500px;
}

.w-52{
  width: 13rem;
}

.w-6{
  width: 1.5rem;
}

.w-60{
  width: 15rem;
}

.w-64{
  width: 16rem;
}

.w-7{
  width: 1.75rem;
}

.w-700{
  width: 700px;
}

.w-72{
  width: 18rem;
}

.w-760{
  width: 760px;
}

.w-8{
  width: 2rem;
}

.w-9{
  width: 2.25rem;
}

.w-\[100px\]{
  width: 100px;
}

.w-\[150px\]{
  width: 150px;
}

.w-\[55px\]{
  width: 55px;
}

.w-\[60px\]{
  width: 60px;
}

.w-\[88px\]{
  width: 88px;
}

.w-full{
  width: 100%;
}

.max-w-container{
  max-width: 1320px;
}

.flex-1{
  flex: 1 1 0%;
}

.flex-shrink{
  flex-shrink: 1;
}

.flex-shrink-0{
  flex-shrink: 0;
}

.shrink-0{
  flex-shrink: 0;
}

.grow{
  flex-grow: 1;
}

.\!translate-x-unset{
  --tw-translate-x: unset !important;
  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)) !important;
}

.\!translate-y-unset{
  --tw-translate-y: unset !important;
  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)) !important;
}

.-translate-x-1\/2{
  --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));
}

.-translate-x-2\/4{
  --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));
}

.-translate-x-full{
  --tw-translate-x: -100%;
  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));
}

.-translate-y-1\/2{
  --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));
}

.-translate-y-2\/4{
  --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));
}

.-translate-y-full{
  --tw-translate-y: -100%;
  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));
}

.translate-x-0{
  --tw-translate-x: 0px;
  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));
}

.translate-x-full{
  --tw-translate-x: 100%;
  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));
}

.translate-y-1\/2{
  --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));
}

.translate-y-full{
  --tw-translate-y: 100%;
  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));
}

.-rotate-90{
  --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));
}

.rotate-180{
  --tw-rotate: 180deg;
  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));
}

.rotate-\[-19\.657deg\]{
  --tw-rotate: -19.657deg;
  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));
}

.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));
}

.transform-none{
  transform: none;
}

.cursor-default{
  cursor: default;
}

.cursor-not-allowed{
  cursor: not-allowed;
}

.cursor-pointer{
  cursor: pointer;
}

.cursor-text{
  cursor: text;
}

.resize{
  resize: both;
}

.list-none{
  list-style-type: none;
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-12{
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.flex-col{
  flex-direction: column;
}

.flex-col-reverse{
  flex-direction: column-reverse;
}

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

.flex-nowrap{
  flex-wrap: nowrap;
}

.place-content-center{
  place-content: center;
}

.place-items-center{
  place-items: center;
}

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

.items-end{
  align-items: flex-end;
}

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

.items-baseline{
  align-items: baseline;
}

.justify-start{
  justify-content: flex-start;
}

.justify-end{
  justify-content: flex-end;
}

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

.justify-between{
  justify-content: space-between;
}

.justify-items-center{
  justify-items: center;
}

.gap-0{
  gap: 0px;
}

.gap-1{
  gap: 0.25rem;
}

.gap-10{
  gap: 2.5rem;
}

.gap-11{
  gap: 2.75rem;
}

.gap-2{
  gap: 0.5rem;
}

.gap-2\.5{
  gap: 0.625rem;
}

.gap-3{
  gap: 0.75rem;
}

.gap-4{
  gap: 1rem;
}

.gap-5{
  gap: 1.25rem;
}

.gap-6{
  gap: 1.5rem;
}

.gap-7{
  gap: 1.75rem;
}

.gap-9{
  gap: 2.25rem;
}

.gap-x-2{
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-2\.5{
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}

.gap-x-5{
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-x-6{
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-3{
  row-gap: 0.75rem;
}

.gap-y-3\.5{
  row-gap: 0.875rem;
}

.gap-y-5{
  row-gap: 1.25rem;
}

.space-x-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.divide-y > :not([hidden]) ~ :not([hidden]){
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.self-end{
  align-self: flex-end;
}

.overflow-hidden{
  overflow: hidden;
}

.overflow-y-auto{
  overflow-y: auto;
}

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

.overflow-x-scroll{
  overflow-x: scroll;
}

.rounded{
  border-radius: 0.25rem;
}

.rounded-2xl{
  border-radius: 1rem;
}

.rounded-3xl{
  border-radius: 1.5rem;
}

.rounded-\[30px\]{
  border-radius: 30px;
}

.rounded-full{
  border-radius: 9999px;
}

.rounded-lg{
  border-radius: 0.5rem;
}

.rounded-md{
  border-radius: 0.375rem;
}

.rounded-xl{
  border-radius: 0.75rem;
}

.rounded-b-2xl{
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.rounded-e-lg{
  border-start-end-radius: 0.5rem;
  border-end-end-radius: 0.5rem;
}

.rounded-l-lg{
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}

.rounded-r-lg{
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}

.rounded-s-lg{
  border-start-start-radius: 0.5rem;
  border-end-start-radius: 0.5rem;
}

.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.rounded-bl-lg{
  border-bottom-left-radius: 0.5rem;
}

.rounded-bl-xl{
  border-bottom-left-radius: 0.75rem;
}

.rounded-br-lg{
  border-bottom-right-radius: 0.5rem;
}

.rounded-br-xl{
  border-bottom-right-radius: 0.75rem;
}

.rounded-tl-lg{
  border-top-left-radius: 0.5rem;
}

.rounded-tl-xl{
  border-top-left-radius: 0.75rem;
}

.rounded-tr-lg{
  border-top-right-radius: 0.5rem;
}

.rounded-tr-xl{
  border-top-right-radius: 0.75rem;
}

.border{
  border-width: 1px;
}

.border-0{
  border-width: 0px;
}

.border-1{
  border-width: 1px;
}

.border-4{
  border-width: 4px;
}

.border-y{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b-0{
  border-bottom-width: 0px;
}

.border-b-1{
  border-bottom-width: 1px;
}

.border-l{
  border-left-width: 1px;
}

.border-l-2{
  border-left-width: 2px;
}

.border-l-4{
  border-left-width: 4px;
}

.border-l-8{
  border-left-width: 8px;
}

.border-r-0{
  border-right-width: 0px;
}

.border-r-1{
  border-right-width: 1px;
}

.border-s-3{
  border-inline-start-width: 3px;
}

.border-t-1{
  border-top-width: 1px;
}

.border-dashed{
  border-style: dashed;
}

.border-black-200{
  --tw-border-opacity: 1;
  border-color: rgb(65 65 64 / var(--tw-border-opacity, 1));
}

.border-blue-600{
  --tw-border-opacity: 1;
  border-color: rgb(28 100 242 / var(--tw-border-opacity, 1));
}

.border-blue-700{
  --tw-border-opacity: 1;
  border-color: rgb(26 86 219 / var(--tw-border-opacity, 1));
}

.border-dark{
  --tw-border-opacity: 1;
  border-color: rgb(34 34 34 / var(--tw-border-opacity, 1));
}

.border-gray-100{
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}

.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}

.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.border-grey{
  --tw-border-opacity: 1;
  border-color: rgb(240 240 240 / var(--tw-border-opacity, 1));
}

.border-light-green{
  --tw-border-opacity: 1;
  border-color: rgb(62 187 149 / var(--tw-border-opacity, 1));
}

.border-light-green-100{
  --tw-border-opacity: 1;
  border-color: rgb(8 167 112 / var(--tw-border-opacity, 1));
}

.border-light-grey{
  --tw-border-opacity: 1;
  border-color: rgb(245 245 245 / var(--tw-border-opacity, 1));
}

.border-light-grey-200{
  --tw-border-opacity: 1;
  border-color: rgb(228 228 228 / var(--tw-border-opacity, 1));
}

.border-light-grey-400{
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
}

.border-light-grey-500{
  --tw-border-opacity: 1;
  border-color: rgb(231 231 241 / var(--tw-border-opacity, 1));
}

.border-light-grey-800{
  --tw-border-opacity: 1;
  border-color: rgb(236 236 236 / var(--tw-border-opacity, 1));
}

.border-light-grey-border{
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
}

.border-primary{
  --tw-border-opacity: 1;
  border-color: rgb(245 134 52 / var(--tw-border-opacity, 1));
}

.border-secondary{
  --tw-border-opacity: 1;
  border-color: rgb(0 88 58 / var(--tw-border-opacity, 1));
}

.border-secondary-100{
  --tw-border-opacity: 1;
  border-color: rgb(70 188 152 / var(--tw-border-opacity, 1));
}

.border-white{
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.border-white\/25{
  border-color: rgb(255 255 255 / 0.25);
}

.border-b-dark-200{
  --tw-border-opacity: 1;
  border-bottom-color: rgb(23 23 23 / var(--tw-border-opacity, 1));
}

.border-b-light-grey-200{
  --tw-border-opacity: 1;
  border-bottom-color: rgb(228 228 228 / var(--tw-border-opacity, 1));
}

.border-l-secondary{
  --tw-border-opacity: 1;
  border-left-color: rgb(0 88 58 / var(--tw-border-opacity, 1));
}

.border-r-dark-200{
  --tw-border-opacity: 1;
  border-right-color: rgb(23 23 23 / var(--tw-border-opacity, 1));
}

.border-r-light-grey-100{
  --tw-border-opacity: 1;
  border-right-color: rgb(90 90 90 / var(--tw-border-opacity, 1));
}

.border-s-secondary{
  --tw-border-opacity: 1;
  border-inline-start-color: rgb(0 88 58 / var(--tw-border-opacity, 1));
}

.border-t-light-grey-200{
  --tw-border-opacity: 1;
  border-top-color: rgb(228 228 228 / var(--tw-border-opacity, 1));
}

.border-opacity-5{
  --tw-border-opacity: 0.05;
}

.\!bg-gray-50{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-primary{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1)) !important;
}

.\!bg-primary-300{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(220 116 27 / var(--tw-bg-opacity, 1)) !important;
}

.bg-\[\#ffede0\]{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 224 / var(--tw-bg-opacity, 1));
}

.bg-black-100{
  --tw-bg-opacity: 1;
  background-color: rgb(15 15 15 / var(--tw-bg-opacity, 1));
}

.bg-black-gradient-1{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}

.bg-blue-100{
  --tw-bg-opacity: 1;
  background-color: rgb(225 239 254 / var(--tw-bg-opacity, 1));
}

.bg-blue-700{
  --tw-bg-opacity: 1;
  background-color: rgb(26 86 219 / var(--tw-bg-opacity, 1));
}

.bg-box-color-1{
  --tw-bg-opacity: 1;
  background-color: rgb(0 30 43 / var(--tw-bg-opacity, 1));
}

.bg-box-color-2{
  --tw-bg-opacity: 1;
  background-color: rgb(130 130 130 / var(--tw-bg-opacity, 1));
}

.bg-box-color-4{
  --tw-bg-opacity: 1;
  background-color: rgb(144 197 63 / var(--tw-bg-opacity, 1));
}

.bg-dark{
  --tw-bg-opacity: 1;
  background-color: rgb(34 34 34 / var(--tw-bg-opacity, 1));
}

.bg-dark-100{
  --tw-bg-opacity: 1;
  background-color: rgb(17 17 17 / var(--tw-bg-opacity, 1));
}

.bg-dark\/75{
  background-color: rgb(34 34 34 / 0.75);
}

.bg-gray-100{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}

.bg-gray-800{
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.bg-gray-900\/50{
  background-color: rgb(17 24 39 / 0.5);
}

.bg-green-1{
  --tw-bg-opacity: 1;
  background-color: rgb(2 211 95 / var(--tw-bg-opacity, 1));
}

.bg-grey-600{
  --tw-bg-opacity: 1;
  background-color: rgb(246 248 249 / var(--tw-bg-opacity, 1));
}

.bg-light-blue{
  --tw-bg-opacity: 1;
  background-color: rgb(97 218 251 / var(--tw-bg-opacity, 1));
}

.bg-light-blue-2{
  --tw-bg-opacity: 1;
  background-color: rgb(33 117 155 / var(--tw-bg-opacity, 1));
}

.bg-light-green{
  --tw-bg-opacity: 1;
  background-color: rgb(62 187 149 / var(--tw-bg-opacity, 1));
}

.bg-light-green-1{
  --tw-bg-opacity: 1;
  background-color: rgb(236 248 246 / var(--tw-bg-opacity, 1));
}

.bg-light-green-100{
  --tw-bg-opacity: 1;
  background-color: rgb(8 167 112 / var(--tw-bg-opacity, 1));
}

.bg-light-grey{
  --tw-bg-opacity: 1;
  background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}

.bg-light-grey-2{
  --tw-bg-opacity: 1;
  background-color: rgb(224 224 224 / var(--tw-bg-opacity, 1));
}

.bg-light-grey-2-200{
  background-color: rgba(228,228,228,0.2);
}

.bg-light-grey-700{
  --tw-bg-opacity: 1;
  background-color: rgb(236 236 236 / var(--tw-bg-opacity, 1));
}

.bg-light-grey-900{
  --tw-bg-opacity: 1;
  background-color: rgb(249 248 248 / var(--tw-bg-opacity, 1));
}

.bg-light-orange-1{
  background-color: rgba(241,131,34,0.2);
}

.bg-light-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(255 245 238 / var(--tw-bg-opacity, 1));
}

.bg-light-primary-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 224 / var(--tw-bg-opacity, 1));
}

.bg-light-secondary{
  --tw-bg-opacity: 1;
  background-color: rgb(236 249 245 / var(--tw-bg-opacity, 1));
}

.bg-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
}

.bg-primary-100{
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 224 / var(--tw-bg-opacity, 1));
}

.bg-primary-300{
  --tw-bg-opacity: 1;
  background-color: rgb(220 116 27 / var(--tw-bg-opacity, 1));
}

.bg-primary-color-300{
  --tw-bg-opacity: 1;
  background-color: rgb(245 130 32 / var(--tw-bg-opacity, 1));
}

.bg-primary-yellow-clr{
  --tw-bg-opacity: 1;
  background-color: rgb(255 244 235 / var(--tw-bg-opacity, 1));
}

.bg-red-1{
  --tw-bg-opacity: 1;
  background-color: rgb(255 45 32 / var(--tw-bg-opacity, 1));
}

.bg-secondary{
  --tw-bg-opacity: 1;
  background-color: rgb(0 88 58 / var(--tw-bg-opacity, 1));
}

.bg-secondary-100{
  --tw-bg-opacity: 1;
  background-color: rgb(70 188 152 / var(--tw-bg-opacity, 1));
}

.bg-secondary-200{
  --tw-bg-opacity: 1;
  background-color: rgb(0 71 41 / var(--tw-bg-opacity, 1));
}

.bg-secondary-400{
  --tw-bg-opacity: 1;
  background-color: rgb(219 244 233 / var(--tw-bg-opacity, 1));
}

.bg-secondary-600{
  --tw-bg-opacity: 1;
  background-color: rgb(222 245 235 / var(--tw-bg-opacity, 1));
}

.bg-transparent{
  background-color: transparent;
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-white-bg-2{
  background-color: rgba(255,255,255,0.25);
}

.bg-white\/50{
  background-color: rgb(255 255 255 / 0.5);
}

.bg-yellow-clr-1{
  --tw-bg-opacity: 1;
  background-color: rgb(255 231 201 / var(--tw-bg-opacity, 1));
}

.bg-about-img{
  background-image: url('../images/career.png');
}

.bg-black-gradient{
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.80) 0%, rgba(26, 26, 26, 0.64) 100.81%);
}

.bg-blockchain-bg{
  background-image: url(../images/block-chain-bg.png);
}

.bg-blockchain-bg-1{
  background-image: url(../images/bg-8.png);
}

.bg-box-bg{
  background-image: url(../images/box-bg-1.png);
}

.bg-call-to-action-bg{
  background-image: url(../images/call-to-action-bg.png);
}

.bg-circle-bg{
  background-image: url(../images/circle-bg.png),url(../images/network-join-bg.png);
}

.bg-contact-bg{
  background-image: url('../images/contact-bg.png');
}

.bg-curve-pattern{
  background-image: url(../images/curve-pattern.png);
}

.bg-e-commerce-bg{
  background-image: url(../images/fancy-pants.png);
}

.bg-e-commerce-bg-1{
  background-image: url(../images/pattern-2.png),url(../images/e-com-bg-1.png);
}

.bg-e-commerce-bg-2{
  background-image: url(../images/e-commerce-vector.svg);
}

.bg-fifth-bg{
  background-image: url(../images/fifth-bg.png);
}

.bg-footer-bg{
  background-image: url('../images/footer-bg.png');
}

.bg-fourth-bg{
  background-image: url(../images/fourth-bg.png);
}

.bg-green-bg-1{
  background-image: url(../images/globe-2.png), url(../images/green-bg-1.png);
}

.bg-green-bg-2{
  background-image: url(../images/how-we-bg.png);
}

.bg-java-benefits{
  background-image: url(../images/java-benefits-img.png);
}

.bg-location-dot-black{
  background-image: url('../images/location-dots-black.png');
}

.bg-location-dot-white{
  background-image: url('../images/location-dots-white.png');
}

.bg-menu-bg-2{
  background-image: url('../images/bg-pattern-1.png');
}

.bg-menu-bg-3{
  background-image: url('../images/bg-pattern-2.png');
}

.bg-network-bg{
  background-image: url('../images/network-join-bg.png');
}

.bg-overlay-bg{
  background-image: linear-gradient(160deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 58%, rgba(0,0,0,0.57) 100%);
}

.bg-overview-1{
  background-image: url(../images/bg-1.png),url(../images/square-bg.png);
}

.bg-overview-bg{
  background-image: url(../images/management-left.png),url(../images/management-right.png);
}

.bg-overview-bg-1{
  background-image: url(../images/ring-left.png),url(../images/ring-right.png);
}

.bg-phm{
  background-image: url(../images/phm-bg.png);
}

.bg-php-benefits{
  background-image: url(../images/php-benefits-img.png);
}

.bg-portfolio-banner{
  background-image: url(../images/bg-noise.png);
}

.bg-portfolio-bg{
  background-image: url(../images/portfolio-3.png);
}

.bg-portfolio-bg-1{
  background-image: url(../images/portfolio-page-section-bg-1.png);
}

.bg-portfolio-contact-us{
  background-image: url(../images/contact-us-2.png);
}

.bg-portfolio-page-section-bg{
  background-image: url(../images/portfolio-page-section-bg.png);
}

.bg-portfolio-section-bg-overlay-1{
  background-image: url(../images/portfolio-section-bg-overlay-1.png);
}

.bg-portfolio-testimonial-bg-1{
  background-image: url(../images/portfolio-testimonial-bg-1.png);
}

.bg-ruby-bg{
  background-image: url(../images/ruby-bg.png);
}

.bg-ruby-service{
  background-image: url(../images/ruby-services.png);
}

.bg-second-bg{
  background-image: url('../images/bg-2.png');
}

.bg-stech-bg{
  background-image: url(../images/stech-lab-product.png);
}

.bg-stories-bg{
  background-image: url('../images/pattern-2.png');
}

.bg-testimonial-bg{
  background-image: url(../images/testimonial-bg.png);
}

.bg-third-bg{
  background-image: url('../images/bg-3.png');
}

.bg-top-bg{
  background-image: url(../images/stech-bg.png);
}

.bg-vector-bg-2{
  background-image: url(../images/wave-1.png);
}

.bg-vector-bg-3{
  background-image: url(../images/call-us-2.png);
}

.bg-white-bg{
  background-image: url('../images/bg-1.png');
}

.bg-\[length\:100px\]{
  background-size: 100px;
}

.bg-\[length\:200px\]{
  background-size: 200px;
}

.bg-\[length\:320px\]{
  background-size: 320px;
}

.bg-contain{
  background-size: contain;
}

.bg-cover{
  background-size: cover;
}

.bg-cover-1{
  background-size: cover,contain;
}

.bg-cover-2{
  background-size: contain,cover;
}

.bg-cover-3{
  background-size: 50%,50%;
}

.bg-bottom{
  background-position: bottom;
}

.bg-bottom-center{
  background-position: right bottom,center;
}

.bg-center{
  background-position: center;
}

.bg-center-position{
  background-position: center top;
}

.bg-overview-position{
  background-position: top left,top right;
}

.bg-overview-position-1{
  background-position: top left,bottom right;
}

.bg-overview-position-3{
  background-position: center,bottom left;
}

.bg-right-bottom{
  background-position: right bottom;
}

.bg-right-center{
  background-position: right center;
}

.bg-repeat{
  background-repeat: repeat;
}

.bg-no-repeat{
  background-repeat: no-repeat;
}

.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover{
  -o-object-fit: cover;
     object-fit: cover;
}

.object-top{
  -o-object-position: top;
     object-position: top;
}

.p-0{
  padding: 0px;
}

.p-1{
  padding: 0.25rem;
}

.p-10{
  padding: 2.5rem;
}

.p-2\.5{
  padding: 0.625rem;
}

.p-3{
  padding: 0.75rem;
}

.p-4{
  padding: 1rem;
}

.p-5{
  padding: 1.25rem;
}

.p-6{
  padding: 1.5rem;
}

.p-7{
  padding: 1.75rem;
}

.p-8{
  padding: 2rem;
}

.\!px-3{
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

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

.px-2\.5{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

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

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

.px-48{
  padding-left: 12rem;
  padding-right: 12rem;
}

.px-5{
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

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

.px-7{
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

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

.px-9{
  padding-left: 2.25rem;
  padding-right: 2.25rem;
}

.py-0{
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

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

.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-16{
  padding-top: 4rem;
  padding-bottom: 4rem;
}

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

.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

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

.py-40{
  padding-top: 40px;
  padding-bottom: 40px;
}

.py-5{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6{
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-7{
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}

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

.py-9{
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

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

.\!pb-11{
  padding-bottom: 2.75rem !important;
}

.\!pl-0{
  padding-left: 0px !important;
}

.\!pl-5{
  padding-left: 1.25rem !important;
}

.pb-0{
  padding-bottom: 0px;
}

.pb-12{
  padding-bottom: 3rem;
}

.pb-2{
  padding-bottom: 0.5rem;
}

.pb-3{
  padding-bottom: 0.75rem;
}

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

.pb-5{
  padding-bottom: 1.25rem;
}

.pb-7{
  padding-bottom: 1.75rem;
}

.pb-8{
  padding-bottom: 2rem;
}

.pb-9{
  padding-bottom: 2.25rem;
}

.pl-14{
  padding-left: 3.5rem;
}

.pl-2{
  padding-left: 0.5rem;
}

.pl-4{
  padding-left: 1rem;
}

.pl-6{
  padding-left: 1.5rem;
}

.pr-0{
  padding-right: 0px;
}

.pr-1{
  padding-right: 0.25rem;
}

.pr-2{
  padding-right: 0.5rem;
}

.pr-4{
  padding-right: 1rem;
}

.pt-0{
  padding-top: 0px;
}

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

.pt-12{
  padding-top: 3rem;
}

.pt-2{
  padding-top: 0.5rem;
}

.pt-3{
  padding-top: 0.75rem;
}

.pt-4{
  padding-top: 1rem;
}

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

.pt-8{
  padding-top: 2rem;
}

.pt-9{
  padding-top: 2.25rem;
}

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

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

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

.text-start{
  text-align: start;
}

.text-end{
  text-align: end;
}

.font-epilogue{
  font-family: Kanit, sans-serif;
}

.font-inter{
  font-family: Mulish,  sans-serif;
}

.\!text-3base-medium{
  font-size: 22px !important;
  font-weight: 500 !important;
}

.text-2medium-bold{
  font-size: 20px;
  font-weight: 700;
}

.text-2medium-medium{
  font-size: 20px;
  font-weight: 600;
}

.text-2medium-regular{
  font-size: 20px;
}

.text-2medium-semibold{
  font-size: 20px;
  font-weight: 600;
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-2xl-regular{
  font-size: 40px;
}

.text-2xs-semibold{
  font-size: 13px;
  line-height: 30px;
  font-weight: 600;
}

.text-3base-medium{
  font-size: 22px;
  font-weight: 500;
}

.text-3medium-bold{
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
}

.text-3medium-semibold{
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

.text-3xl-bold{
  font-size: 45px;
  line-height: 54px;
  font-weight: 700;
}

.text-3xs-regular{
  font-size: 12px;
}

.text-4medium-semibold{
  font-size: 22px;
  font-weight: 600;
}

.text-4xl-semibold{
  font-size: 70px;
  line-height: 30px;
  font-weight: 600;
}

.text-5medium-semibold{
  font-size: 25px;
  font-weight: 600;
}

.text-\[14px\]{
  font-size: 14px;
}

.text-\[28px\]{
  font-size: 28px;
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-base-medium{
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}

.text-base-regular{
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.text-base-semibold{
  font-size: 16px;
  font-weight: 600;
}

.text-footer-heading-xs{
  font-size: 25px;
  line-height: 35px;
  font-weight: 600;
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-lg-medium{
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
}

.text-medium-bold{
  font-size: 18px;
  font-weight: 700;
}

.text-medium-regular{
  font-size: 18px;
  font-weight: 400;
}

.text-medium-semibold{
  font-size: 18px;
  font-weight: 600;
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-small-regular{
  font-size: 14px;
  font-weight: 400;
}

.text-small-semibold{
  font-size: 14px;
  line-height: 30px;
  font-weight: 600;
}

.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xl-blog-h2{
  font-size: 24px;
  line-height: 30px;
}

.text-xs-blog-detail-h2{
  font-size: 24px;
  line-height: 30px;
}

.text-xs-blog-detail-h3{
  font-size: 22px;
  line-height: 25px;
}

.text-xs-blog-h2{
  font-size: 20px;
  line-height: 25px;
}

.text-xs-blog-heading{
  font-size: 26px;
  line-height: 38px;
  font-weight: 500;
}

.text-xs-regular{
  font-size: 15px;
  line-height: 25px;
  font-weight: 400;
}

.\!font-bold{
  font-weight: 700 !important;
}

.\!font-extrabold{
  font-weight: 800 !important;
}

.\!font-medium{
  font-weight: 500 !important;
}

.\!font-normal{
  font-weight: 400 !important;
}

.\!font-semibold{
  font-weight: 600 !important;
}

.\!font-thin{
  font-weight: 100 !important;
}

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

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

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

.font-normal{
  font-weight: 400;
}

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

.uppercase{
  text-transform: uppercase;
}

.capitalize{
  text-transform: capitalize;
}

.italic{
  font-style: italic;
}

.\!leading-4{
  line-height: 1rem !important;
}

.\!leading-none{
  line-height: 1 !important;
}

.\!leading-normal{
  line-height: 1.5 !important;
}

.\!leading-snug{
  line-height: 1.375 !important;
}

.\!leading-tight{
  line-height: 1.25 !important;
}

.leading-10{
  line-height: 2.5rem;
}

.leading-3{
  line-height: .75rem;
}

.leading-6{
  line-height: 1.5rem;
}

.leading-60{
  line-height: 60px;
}

.leading-7{
  line-height: 1.75rem;
}

.leading-8{
  line-height: 2rem;
}

.leading-9{
  line-height: 2.25rem;
}

.leading-none{
  line-height: 1;
}

.leading-normal{
  line-height: 1.5;
}

.\!text-dark{
  --tw-text-opacity: 1 !important;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1)) !important;
}

.\!text-dark-100{
  --tw-text-opacity: 1 !important;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1)) !important;
}

.\!text-primary{
  --tw-text-opacity: 1 !important;
  color: rgb(245 134 52 / var(--tw-text-opacity, 1)) !important;
}

.\!text-secondary-100{
  --tw-text-opacity: 1 !important;
  color: rgb(70 188 152 / var(--tw-text-opacity, 1)) !important;
}

.\!text-white{
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.text-blue-600{
  --tw-text-opacity: 1;
  color: rgb(28 100 242 / var(--tw-text-opacity, 1));
}

.text-dark{
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}

.text-dark-100{
  --tw-text-opacity: 1;
  color: rgb(17 17 17 / var(--tw-text-opacity, 1));
}

.text-dark-500{
  --tw-text-opacity: 1;
  color: rgb(85 85 85 / var(--tw-text-opacity, 1));
}

.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.text-gray-800{
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.text-gray-900{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-grey-1{
  --tw-text-opacity: 1;
  color: rgb(194 194 194 / var(--tw-text-opacity, 1));
}

.text-light-green{
  --tw-text-opacity: 1;
  color: rgb(62 187 149 / var(--tw-text-opacity, 1));
}

.text-light-grey-100{
  --tw-text-opacity: 1;
  color: rgb(90 90 90 / var(--tw-text-opacity, 1));
}

.text-light-grey-300{
  --tw-text-opacity: 1;
  color: rgb(150 150 150 / var(--tw-text-opacity, 1));
}

.text-light-grey-900{
  --tw-text-opacity: 1;
  color: rgb(249 248 248 / var(--tw-text-opacity, 1));
}

.text-primary{
  --tw-text-opacity: 1;
  color: rgb(245 134 52 / var(--tw-text-opacity, 1));
}

.text-primary-color-200{
  --tw-text-opacity: 1;
  color: rgb(238 126 31 / var(--tw-text-opacity, 1));
}

.text-primary-color-300{
  --tw-text-opacity: 1;
  color: rgb(245 130 32 / var(--tw-text-opacity, 1));
}

.text-red-1{
  --tw-text-opacity: 1;
  color: rgb(255 45 32 / var(--tw-text-opacity, 1));
}

.text-secondary{
  --tw-text-opacity: 1;
  color: rgb(0 88 58 / var(--tw-text-opacity, 1));
}

.text-secondary-100{
  --tw-text-opacity: 1;
  color: rgb(70 188 152 / var(--tw-text-opacity, 1));
}

.text-star-yellow{
  --tw-text-opacity: 1;
  color: rgb(255 188 55 / var(--tw-text-opacity, 1));
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.opacity-0{
  opacity: 0;
}

.opacity-100{
  opacity: 1;
}

.opacity-40{
  opacity: 0.4;
}

.opacity-80{
  opacity: 0.8;
}

.bg-blend-luminosity{
  background-blend-mode: luminosity;
}

.mix-blend-multiply{
  mix-blend-mode: multiply;
}

.mix-blend-screen{
  mix-blend-mode: screen;
}

.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);
}

.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-normal{
  --tw-shadow: 0px 3px 20px rgba(0,0,0,0.03999999910593033);
  --tw-shadow-colored: 0px 3px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-normal-1{
  --tw-shadow:  0px 6px 18px 0px rgb(0 0 0 / 10%);
  --tw-shadow-colored: 0px 6px 18px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-normal-2{
  --tw-shadow:  0px 6px 18px 0px rgba(0,24,78,0.12);;
  --tw-shadow-colored: 0px 6px 18px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-normal-3{
  --tw-shadow:  0px 2px 20px rgba(0,0,0,0.1);;
  --tw-shadow-colored: 0px 2px 20px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-normal-4{
  --tw-shadow:  0 2px 15px 0px #FF9D49;;
  --tw-shadow-colored: 0 2px 15px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-normal-5{
  --tw-shadow:  1px 0px 43px 0px rgba(177,177,177,0.25);;
  --tw-shadow-colored: 1px 0px 43px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-normal-6{
  --tw-shadow:  0px 0px 43px 0px rgba(62,187,149,0.5);;
  --tw-shadow-colored: 0px 0px 43px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-normal-7{
  --tw-shadow:  0px 0px 43px 0px rgba(1,88,59,0.5);;
  --tw-shadow-colored: 0px 0px 43px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline{
  outline-style: solid;
}

.blur{
  --tw-blur: blur(8px);
  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);
}

.invert{
  --tw-invert: invert(100%);
  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{
  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);
}

.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity{
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform{
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Base style */

/* <!-- design changes start here 2 --> */

body{
  font-family: Mulish,  sans-serif;
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}

/* <!-- design changes end here 2 --> */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6{
  font-family: Kanit, sans-serif;
}

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

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

a {
  text-decoration: none !important;
  outline: none !important;
  transition: all 0.3s ease-in-out;
}

a:focus,
a:hover {
  text-decoration: none;
}

button:focus {
  box-shadow: none !important;
}

.swiper-slider .swiper-horizontal > .swiper-pagination-progressbar,
.swiper-slider .swiper-pagination-progressbar.swiper-pagination-horizontal{
  left: 50%;
  bottom: 0.5rem;
  height: 0.125rem;
  width: 12rem;
  transform-origin: center;
}

.swiper-slider .swiper-button-next:after,
.swiper-slider .swiper-button-prev:after {
  content: unset;
}

.swiper-slider .swiper-pagination {
  top: unset !important;
  background: rgba(255, 255, 255, 0.4);
  bottom: 50px !important;
}

.swiper-slider .swiper-pagination-progressbar-fill {
  background: #ffffff !important;
}

.slider .slide-progress {
  width: 280px;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  left: 50%;
  bottom: 30px;
  margin-left: -110px;
  z-index: 3;
  text-align: center;
}

.slider .slide-progress span {
  display: inline-block;
  color: #fff;
  font-size: 16px;
}

.slider .slide-progress .swiper-pagination {
  width: 160px;
  height: 2px;
  margin: auto 25px;
  display: inline-block;
  position: static;
  background: rgba(255, 255, 255, 0.3);
}

/* Circle text styles */

.circle-button .rotate-circle svg {
  width: 210px;
  fill: #ffffff;
}

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

.circle-button:before {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 1px solid #f58634;
  border-radius: 50%;
  background: #f58634;
}

.hover-this .circle-button:hover:before {
  background: #46BC98 !important;
  border: 1px solid #46BC98;
}

.circle-button-green:before{
  border: 1px solid #00583A;
  background: #00583A;
  outline: 1px solid #00583A;
  outline-offset: 12px;
}

.stories-explore-more:before{
  border: 1px solid #00583A;
  background: #00583A;
}

.circle-button:after {
  content: "";
  position: absolute;
  top: 55px;
  left: 55px;
  right: 55px;
  bottom: 55px;
  border: 1px solid #f58634;
  border-radius: 50%;
  background: #ffffff;
}

.sumanas-logo-rotation:after {
  z-index: -1 !important;
}

.circle-button-green:after{
  border: 1px solid #00583A;
  background: #00583A;
}

.stories-explore-more:after{
  border: 1px solid #00583A;
  /* background: #00583A; */
}

.circle-button .arrow {
  position: absolute;
  top: 54%;
  left: 52%;
  transform: translateX(-20px) translateY(-20px);
  display: inline-block;
  z-index: 9;
}

.circle-button-green .arrow {
  transform: translateX(-37px) translateY(-40px);
}

.circle-button-green .arrow img{
  height: 4rem;
  width: 4rem;
}

/* Circle text styles */

/* rotateCircle animation styles */

.rotate-circle {
  animation-name: rotateCircle;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

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

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

/* rotateCircle animation styles */

/* ----running text start ------ */

.running-text span {
  color: transparent;
  -webkit-text-stroke: 1px #f58634;
}

/* .main-marq .box:last-of-type .item:nth-of-type(odd) h4 {
} */

/* Marqueee animation styles */

/* .marquee {
   position: relative;
   overflow: hidden;
}
.running-text-box {
   position: relative;
    -webkit-animation: slide-har 20s linear infinite;
    animation: slide-har 20s linear infinite;
 }
 
 .running-text-box .item {
   padding: 0 30px;
   white-space: nowrap;
 }
 .running-text-box {
   display:-webkit-box;
 }
 
 
 
 @-webkit-keyframes slide-har {
   0% {
     -webkit-transform: translateX(0%);
     transform: translateX(0%);
   }
   100% {
     -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
   }
 }
 
 @keyframes slide-har {
   0% {
     -webkit-transform: translateX(0%);
     transform: translateX(0%);
   }
   100% {
     -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
   }
 } */

/* Marqueee animation styles */

.headline-text .marquee {
  height: 120px;
}

.marquee {
  width: calc(100% + 60px);
}

.slide-har.st1 .box {
  animation: slide-har 30s linear infinite;
}

@keyframes slide-har {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* Marqueee animation styles */

/* Marqueee animation styles */

.onovo-section-full {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.content-sidebar li a,
.onovo-counter,
.onovo-cta,
.onovo-cta-info,
.onovo-hover-label,
.onovo-lnk a,
.onovo-reviews,
.onovo-section-full > div,
.onovo-services-showcase,
.onovo-showcase,
.post-content .wp-block-archives li a,
[data-onovo-overlay],
a.onovo-lnk,
span.onovo-lnk {
  position: relative;
}

.onovo-section-bg {
  background-color: #fafafa;
}

@media (max-width: 991px) {
  .hide-on-mobile {
    display: none;
  }
}

@media (min-width: 991px) {
  .hide-on-desktop {
    display: none;
  }
}

.row.gap-row {
  margin-top: -30px;
}

.onovo-reviews-summary,
.onovo-service-item-inner .list,
.onovo-team-item .onovo-social-1,
.row.gap-row > div,
ol,
ul {
  margin-top: 30px;
}

.onovo-faq-item .onovo-text > :first-child,
.onovo-reviews-item .text p,
.post-content h1:first-child,
.post-content h2:first-child,
.post-content h3:first-child,
.post-content h4:first-child,
.post-content h5:first-child,
.post-content h6:first-child,
.post-content > :first-child,
dd {
  margin-top: 0;
}

.gap-140 {
  padding: 140px 100px;
}

.gap-top-140 {
  padding-top: 140px;
}

.gap-top-130 {
  padding-top: 130px;
}

.gap-top-120 {
  padding-top: 120px;
}

.gap-top-110 {
  padding-top: 110px;
}

.gap-top-100 {
  padding-top: 100px;
}

.gap-top-90 {
  padding-top: 90px;
}

.gap-top-80 {
  padding-top: 80px;
}

.gap-top-70 {
  padding-top: 70px;
}

.gap-top-60,
.onovo-service-item.onovo-service-no-icon .onovo-service-item-inner {
  padding-top: 60px;
}

.gap-top-50,
.onovo-hero.hero--two .container {
  padding-top: 50px;
}

.gap-top-0,
.gap-top-40 {
  padding-top: 40px;
}

.gap-bottom-140 {
  padding-bottom: 140px;
}

.gap-bottom-130 {
  padding-bottom: 130px;
}

.gap-bottom-120 {
  padding-bottom: 120px;
}

.gap-bottom-110 {
  padding-bottom: 110px;
}

.gap-bottom-100 {
  padding-bottom: 100px;
}

.gap-bottom-80 {
  padding-bottom: 80px;
}

.gap-bottom-70 {
  padding-bottom: 70px;
}

.gap-bottom-60 {
  padding-bottom: 60px;
}

.gap-bottom-50 {
  padding-bottom: 50px;
}

.gap-bottom-40 {
  padding-bottom: 40px;
}

.gap-bottom-0,
.search-form label {
  padding-bottom: 0;
}

@media (max-width: 1024px) {
  .gap-140 {
    padding: 140px 20px;
  }
}

.onovo-blog-slide-item.full--width .desc,
figure {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 15px;
  line-height: 1.2;
}

.onovo-service-item .image .icon,
h1 {
  font-size: 60px;
}

.onovo-service-grid-item .icon,
h2 {
  font-size: 50px;
}

h3 {
  font-size: 40px;
}

/* ----- button css ---- */

.content-block button i {
  /* transform: translateX(-20px) translateY(-20px); */
}

/* ------------------  portfolio page start ------------- */

.works.thecontainer {
  width: 300vw;
  min-height: 100vh;
  display: -ms-flexbox;
  /* display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap; */
}

.works .panel {
  display: flex;
  height: 100%;
  flex: 1;
  justify-content: flex-end;
  align-items: center;
}

.works .panel .item {
  width: 830px;
  position: relative;
}

.works .panel .item .cont {
  margin-top: 30px;
}

.works .panel .item .cont h5 {
  font-weight: 600;
  margin-bottom: 5px;
}

.works .panel .item .cont span {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.75;
}

.works .panel .item .link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.workinter .block .block__link {
  display: block;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.workinter .block .block__link:first-of-type {
  padding-top: 0;
}

.workinter .block .hover-reveal {
  width: 450px;
  height: 300px;
  z-index: 3;
}

.workinter .lg-sec-head h2 {
  background: -webkit-linear-gradient(90deg, transparent, #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.workinter .lg-sec-head .rotate-circle svg {
  width: 220px;
  fill: rgba(255, 255, 255, 0.5);
}

.portfolio-fixed .left {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.portfolio-fixed .img {
  background-size: cover;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.4s linear;
  opacity: 0;
}

.portfolio-fixed .img:first-of-type {
  opacity: 1;
  z-index: 1;
}

.portfolio-fixed .img:nth-of-type(2) {
  z-index: 2;
}

.portfolio-fixed .img:nth-of-type(3) {
  z-index: 3;
}

.portfolio-fixed .img:nth-of-type(4) {
  z-index: 4;
}

.portfolio-fixed .img:nth-of-type(5) {
  z-index: 5;
}

.portfolio-fixed .img.current {
  opacity: 1;
}

.portfolio-fixed .right {
  padding: 250px 100px;
  overflow: hidden;
}

.portfolio-fixed .cont {
  margin-bottom: 250px;
  opacity: 0.1;
  transition: all 0.4s;
}

.portfolio-fixed .cont:last-of-type {
  margin-bottom: 0;
}

.portfolio-fixed .cont.active {
  opacity: 1;
}

.portfolio-fixed .cont .img-hiden {
  display: none;
}

.portfolio-fixed .current.cont {
  opacity: 1;
}

.portfolio .gallery2 .items {
  width: 50%;
}

.portfolio .gallery2 .items.width2 {
  width: 25%;
}

.portfolio .gallery2 .items .item-img {
  border-radius: 10px;
}

.portfolio {
  position: relative;
}

.portfolio .sec-head .lg-text {
  font-size: 8vw;
  line-height: 1;
}

.portfolio .filtering .filter {
  padding: 11px 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  display: inline-block;
}

.portfolio .filtering span {
  font-weight: 500;
  font-size: 13px;
  margin: 0 20px;
  cursor: pointer;
  position: relative;
  opacity: 0.7;
}

.portfolio .filtering span.active {
  opacity: 1;
}

.portfolio .filtering span.text {
  pointer-events: none;
}

.portfolio.changed-bg {
  transition: all 0.5s;
}

.portfolio.changed-bg.chang-text {
  color: #000;
}

.portfolio.changed-bg.chang-text p {
  color: #000;
  transition: all 0.5s;
}

.portfolio.changed-bg.chang-text .sec-lg-head .path {
  stroke: #000;
  transition: all 0.5s;
}

.portfolio .work-row .item {
  position: relative;
  padding: 40px 0;
}

.portfolio .work-row .item:hover .main-marq .box {
  animation-play-state: running;
}

.portfolio .work-row .item .title {
  padding-bottom: 15px;
}

.portfolio .work-row .item .title .numb {
  font-size: 12px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  margin-bottom: 15px;
}

.portfolio .work-row .item .cont {
  padding-left: 30px;
  padding-bottom: 15px;
}

.portfolio .work-row .item .main-marq {
  position: absolute;
  width: 100%;
  top: 15px;
  left: -50%;
  transform: translateX(-50%);
  opacity: 0.05;
  z-index: -1;
}

.portfolio .work-row .item .main-marq .box {
  animation-play-state: paused;
}

.portfolio .work-row .item .main-marq .box .item {
  padding: 0 60px;
}

.portfolio .metro .items.height-1 {
  height: 530px;
}

.portfolio .metro .items.height-1 img {
  height: 530px;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.portfolio .metro .items.height-2 {
  height: 250px;
}

.portfolio .metro .items.height-2 img {
  height: 250px;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.portfolio .metro .items .item-img a {
  width: 100%;
}

.portfolio .metro .info-overlay .item-img {
  position: relative;
  overflow: hidden;
}

.portfolio .metro .info-overlay .item-img:hover:after {
  opacity: 0.8;
}

.portfolio .metro .info-overlay .item-img:hover .info h6,
.portfolio .metro .info-overlay .item-img:hover .info .tag {
  transform: translateY(0);
  opacity: 1;
}

.portfolio .metro .info-overlay .item-img:hover .info .tag {
  transition-delay: 0.2s;
}

.portfolio .metro .info-overlay .item-img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1d1d1d;
  transition: all 0.4s;
  pointer-events: none;
  opacity: 0;
}

.portfolio .metro .info-overlay .item-img .info {
  color: #fff !important;
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 2;
}

.portfolio .metro .info-overlay .item-img .info h6,
.portfolio .metro .info-overlay .item-img .info .tag {
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.6s;
}

.portfolio .metro .info-overlay .item-img .info h6 a,
.portfolio .metro .info-overlay .item-img .info .tag a {
  color: #fff !important;
}

.portfolio .metro .info-overlay .item-img .info .tag {
  transition-delay: 0;
}

.portfolio .metro .item-img {
  position: relative;
  height: 100%;
}

.portfolio .metro .item-img .info-over {
  position: absolute;
  bottom: 30px;
  left: 30px;
  opacity: 0;
}

.portfolio .masonry .info-overlay .item-img,
.portfolio .grid .info-overlay .item-img {
  position: relative;
}

.portfolio .masonry .info-overlay .item-img:after,
.portfolio .grid .info-overlay .item-img:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #1d1d1d;
  opacity: 0;
  transition: all 0.4s;
  pointer-events: none;
}

.portfolio .masonry .info-overlay .item-img a,
.portfolio .grid .info-overlay .item-img a {
  width: 100%;
}

.portfolio .masonry .info-overlay .item-img .info,
.portfolio .grid .info-overlay .item-img .info {
  position: absolute;
  bottom: 40px;
  left: 40px;
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.4s;
  z-index: 2;
}

.portfolio .masonry .info-overlay .item-img:hover:after,
.portfolio .grid .info-overlay .item-img:hover:after {
  opacity: 0.2;
}

.portfolio .masonry .info-overlay .item-img:hover .info,
.portfolio .grid .info-overlay .item-img:hover .info {
  opacity: 1;
  transform: translateY(0);
}

.portfolio .masonry .inner,
.portfolio .grid .inner {
  height: 400px;
}

.portfolio .masonry .inner img,
.portfolio .grid .inner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
}

.portfolio .masonry .inner {
  height: auto;
}

.portfolio .masonry .inner img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
}

.portfolio .max-margin {
  margin-left: -40px;
  margin-right: -40px;
}

.portfolio .max-margin .items {
  padding: 0 40px;
}

.portfolio.clasic .item .img {
  position: relative;
  height: 400px;
}

.portfolio.clasic .item .img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center center;
  object-position: center center;
}

.portfolio.clasic .item .img .tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 7px 20px;
  border-radius: 30px;
  background: #fff;
  color: #000;
  font-size: 13px;
  transition: all 0.4s;
  opacity: 0;
}

.portfolio.clasic .item:hover .img .tag {
  opacity: 1;
}

/* Marqueee animation styles */

.rolling-text {
  position: relative;
  overflow: hidden;
  padding: 50px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transform: rotate(-3deg);
  /* width: calc(100% + 60px); */
  margin-left: -30px;
  background: #ffd3d3;
}

.marquee h4 {
  font-size: 70px;
  white-space: nowrap;
  line-height: 1;
  margin: 0;
}

.slide-har.st1 .box {
  position: relative;
  animation: slide-har 30s linear infinite;
}

@keyframes slide-har {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* Marqueee animation styles */

/* ROJO POGI PLAY BUTTON */

.video-play-button{
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  box-sizing: content-box;
  display: block;
  height: 2.75rem;
  width: 1.5rem;
  --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));
  border-radius: 9999px;
  padding: 1.75rem;
}

.workinter .video-play-button .block__link {
  display: block;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.workinter .video-play-button .block__link:first-of-type {
  padding-top: 0;
}

.workinter .video-play-button .hover-reveal {
  width: 450px;
  height: 300px;
  z-index: 3;
}

.video-play-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  height: 5rem;
  width: 5rem;
  --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));
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
}

.workinter .video-play-button .block__link:before {
  display: block;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.workinter .video-play-button .block__link:first-of-type:before {
  padding-top: 0;
}

.workinter .video-play-button .hover-reveal:before {
  width: 450px;
  height: 300px;
  z-index: 3;
}

.video-play-button:before {
  animation: pulse-border 1500ms ease-out infinite;
}

.video-play-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  display: block;
  height: 5rem;
  width: 5rem;
  --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));
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
}

.workinter .video-play-button .block__link:after {
  display: block;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.workinter .video-play-button .block__link:first-of-type:after {
  padding-top: 0;
}

.workinter .video-play-button .hover-reveal:after {
  width: 450px;
  height: 300px;
  z-index: 3;
}

.video-play-button:after {
  transition: all 200ms;
}

.video-play-button:hover:after{
  --tw-bg-opacity: 1;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
}

.video-play-button img{
  position: relative;
  z-index: 20;
  height: auto;
  width: auto;
  max-width: 100%;
}

.video-play-button span{
  position: relative;
  z-index: 20;
  display: block;
  height: 0px;
  width: 0px;
}

.workinter .video-play-button span .block__link {
  display: block;
  padding: 30px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.workinter .video-play-button span .block__link:first-of-type {
  padding-top: 0;
}

.workinter .video-play-button span .hover-reveal {
  width: 450px;
  height: 300px;
  z-index: 3;
}

.video-play-button span {
  border-left: 32px solid #fff;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}

/* Design changes start */

/* heade line marquee */

.headline-text{
  margin-bottom: 2.5rem;
  text-align: center;
  font-family: Kanit, sans-serif;
  font-size: 70px;
  line-height: 70px;
  font-weight: 600;
  text-transform: uppercase;
  --tw-text-opacity: 1;
  color: rgb(245 134 52 / var(--tw-text-opacity, 1));
  line-height: 1;
}

/* .headline-text > span {
  padding-left: 5%;
  -webkit-animation: marquee 30s linear infinite;
  animation: marquee 30s linear infinite;
} */

.headline-text > span span {
  color: transparent;
  -webkit-text-stroke: 2px;
  -webkit-text-stroke-color: #F58634;
}

.services-tab button, .services-tab button span{
  transition: 0.3s ease-out;
}

#client-logo .item img{
  margin: auto;
}

/* Design changes end */

/* Headline */

@keyframes marquee {
  100% {
    transform: translate(-100%, 0);
  }
}

/* carousel dots */

.owl-theme .owl-nav{
  position: relative;
  margin-top: 3.5rem;
  width: 275px;
}

.owl-theme .owl-dots{
  text-align: left;
  margin-left: 54px;
  margin-top: 58px;
}

.owl-carousel .owl-nav button.owl-prev{
  position: absolute;
  top: 0px;
  left: 0px;
}

.owl-carousel .owl-nav button.owl-next{
  position: absolute;
  top: 0px;
}

.owl-theme .owl-nav [class*=owl-]:hover{
  background-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}

.owl-theme .owl-dots .owl-dot span{
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(236 236 236 / var(--tw-bg-opacity, 1)) !important;
  margin: 0 5px;
}

.owl-dots .owl-dot.active span{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1)) !important;
}

/* Cursor
-----------------------------------------------------------------*/

.cursor{
  pointer-events: none;
  position: fixed;
  border-radius: 9999px;
  --tw-bg-opacity: 1 !important;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1)) !important;
  padding: 0.375rem;
  transition: transform 0.3s ease, opacity 0.4s ease;
  z-index: 99999;
}

.cursor-active {
  transform: translate(-50%, -50%) scale(8);
  opacity: .1;
}

/* Cursor
-----------------------------------------------------------------*/

.rotation-circle {
  left: unset !important;
}

.mobile-swiper {
  width: 100%;
  height: 100%;
}

.mobile-swiper .swiper-button-next, 
.mobile-swiper .swiper-button-prev {
  width: 30px  !important;
  height: 30px !important;
  color: #F58634 !important;
}

.mobile-swiper .swiper-button-next::after, 
.mobile-swiper .swiper-button-prev::after {
  font-size: 30px !important;
}

/* ------- menu css start ----- */

.center-height {
  height: calc(100vh - 54px) !important;
}

.offcanvas__menu-wrapper.mean-container {
  padding-top: 10px;
}

.sub-text {
  font-size: 24px !important;
  font-weight: 600 !important;
}

.inner-sub-menu-heading {
  font-size: 20px !important;
}

.inner-sub-menu {
  font-size: 18px !important;
}

.offcanvas__contact ul i {
  color: #44B896;
}

.offcanvas__contact ul h3 {
  color: #F58634;
  padding-bottom: 0;
}

.mobile-social-icon {
  display: none !important;
}

/* ----------  CURSOR CSS START ----------*/

.cursor {
  position: fixed;
  left: 0;
  pointer-events: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: #000;
  background: #fff;
  text-transform: capitalize;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  z-index: 999;
  opacity: 0;
  mix-blend-mode: hard-light;
  transition: all 0.3s;
}

.cursor.large {
  width: 180px;
  height: 180px;
  text-align: center;
  font-size: 19px;
  font-weight: 400;
}

.cursor1 {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 1px solid #F58634;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.15s;
  z-index: 999;
  /* mix-blend-mode: difference; */
}

@media (max-width: 1200px) {
  .cursor1 {
    display: none;
  }
}

.cursor1.hide {
  opacity: 0;
  visibility: hidden;
}

.cursor2 {
  position: fixed;
  width: 8px;
  height: 8px;
  background-color: #F58634;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.2s;
  z-index: 999;
  /* mix-blend-mode: difference; */
}

@media (max-width: 1200px) {
  .cursor2 {
    display: none;
  }
}

.cursor2.hide {
  opacity: 0;
  visibility: hidden;
}

.cursor2.circle {
  width: 60px;
  height: 60px;
}

.cursor-testi {
  position: fixed;
  width: 80px;
  height: 80px;
  background-color: #44B896;
  border-radius: 50%;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: 0.2s;
  z-index: 999;
}

@media (max-width: 1200px) {
  .cursor-testi {
    display: none;
  }
}

.cursor-testi.hide {
  opacity: 0;
  visibility: hidden;
}

.cursor-testi.play {
  width: 100px;
  height: 100px;
  mix-blend-mode: unset;
  background-color: #F58634;
}

.cursor-testi.play::after {
  position: absolute;
  content: "Play";
  color: #44B896;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#featured_cursor {
  background: #00583A;
  color: #F58634;
}

@media (max-width: 1200px) {
  #client_cursor {
    display: none;
  }
}

.switcher__area {
  position: relative;
  direction: ltr;
}

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

.switcher__icon {
  position: fixed;
  width: 50px;
  height: 50px;
  background: #F58634;
  right: 0;
  top: 40%;
  transform: translateY(-50%);
  z-index: 999;
  transition: all 0.3s;
  mix-blend-mode: exclusion;
}

.switcher__icon button {
  font-size: 24px;
  color: #44B896;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transition: all 0.3s;
}

.switcher__icon button:hover {
  color: #44B896;
}

.switcher__icon button#switcher_open {
  animation: wcSpinner 5s infinite linear;
}

.switcher__items {
  width: 280px;
  padding: 50px 30px;
  background: #F58634;
  position: fixed;
  right: -280px;
  top: 40%;
  z-index: 99;
  transform: translateY(-50%);
  font-family: "Kanit", sans-serif;
  transition: all 0.3s;
}

.switcher__items .wc-col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.switcher__item {
  margin-bottom: 30px;
}

.switcher__item:nth-child(2) {
  margin-bottom: 0;
}

.switcher__item:last-child {
  margin-bottom: 0;
  display: none;
}

.switcher__title {
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  color: #000;
  text-transform: capitalize;
  padding-bottom: 10px;
}

.switcher__btn button {
  display: inline-block;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
  color: #00583A;
  background: #2B2B2F;
  border-radius: 4px;
  padding: 10px 15px;
  text-transform: capitalize;
}

.switcher__btn button:hover, .switcher__btn button.active {
  color:#F58634;
}

.switcher__btn select {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #44B896;
  width: 100%;
  border: none;
  padding: 9px 10px;
  border-radius: 4px;
  background: #2B2B2F;
  text-transform: capitalize;
  outline: none;
  cursor: pointer;
}

#switcher_close {
  display: none;
}

.contact-us-roation::before {
  border: 1px solid #00583a;
  background: #00583a;
  outline: 1px solid #9d8e8e;
  outline-offset: 13px;
}

.contact-us-roation::after {
  border: 1px solid #00583a;
  border-radius: 50%;
  background: #00583a;
}

.circle-button.contact-us-roation .arrow {
  top: 45%;
  left: 53%;
}

/* ------- btn  css start -----*/

.all-btn.hover-slide-right::before {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0%;
  border-radius: 99px;
}

.all-btn.hover-slide-right:hover::before {
  width: 100%;
}

.all-btn::before {
  transition: 0.3s ease-out;
  border-radius: 99px;
  color: #ffffff;
}

.all-btn::after, .all-btn::before {
  position: absolute;
  content: "";
}

.first-btn:hover .btn-text ,
.second-btn:hover .btn-text{
  color: #ffffff !important;
}

.all-btn:hover .arrow-rotate {
  transform: rotate(45deg);
  transition: 0.3s ease-out;
  margin-top: -8px;
}

.first-btn::before {
  background-color: #00583A;
}

.second-btn:before {
  background-color: #F58634;
}

.second-btn:hover .arrow-color,
.first-btn:hover .arrow-color{
  /* Safari/Chrome */
  filter: brightness(0) invert(1);
}

.normal-btn:hover {
  background: #F58634;
  color: #ffffff;
}

.footer-btn:hover .arrow-rotate {
  transform: rotate(45deg);
  transition: 0.3s ease-out;
  margin-top: 0px;
}

/* ------- about us page start ------- */

.img-line {
  position: absolute;
  left: 20px;
  top: 230px;
  width: 1px;
  height: 300px;
  background: #D9D9D9;
}

.active-btn[true] {
  background-color: #00583A !important;
  color: #ffffff !important;
}

.team-section .active {
  background-color: #00583A !important;
  color: #ffffff !important;
}

/* .hover-img {
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease-in-out;
}
.person-img:hover .hover-img{
   opacity: 1;
   position: absolute;
   top: 0;
   transition: all 0.3s ease-in-out;
} */

.person-img .hover-img{
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all 0.3s ease-in-out;
}

.person-img:hover .hover-img{
  opacity: 1;
}

.about-img-section {
  width: 40%;
  flex-shrink: 0;
}

.inner-content {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
}

/* .img-overlay {
  background-image: linear-gradient(90deg,#000000 62%, #000000 100% );
} */

.img-overlay {
  background-image: linear-gradient(90deg,#0000000a 62%, #0000004f 100% );
}

.about-section-2 {
  width: 100%;
}

.about-history {
  background-image:url('../images/text-clip-4.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-blend-mode: multiply;
  display: inline-block;
}

.about-history-1 {
  background-image:url('../images/text-clip-6.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  background-blend-mode: multiply;
}

/* .white-line:after {
  content: "";
  height: 16px;
  width: 16px;
  background-color: #3EBB95;
  display: inline-block;
  rotate: 45deg;
}
.timeline-year::after {
	content: "";
	display: block;
	position: absolute;
	right: 0;
	bottom: 103px;
	left: 0;
	height: 1px;
	width: 200vw;
	background-color: #DDDDDD;
	transform: translateX(-50%);
	z-index: -1;
} */

.our-timeline .timeline-swiper {
  overflow: visible;
}

/* .our-timeline .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
  transform: translateZ(0);
} */

/* .timeline-year {
  display: block;
  position: relative;
  transition: 0.4s;
  border-bottom: 1px solid #DDDDDD;
} */

.white-line::after {
  content: "";
  height: 16px !important;
  width: 16px !important;
  background-color: #3EBB95;
  display: inline-block;
  rotate: 45deg;
  /* content: ""; */
  /* display: inline-block; */
  /* width: 0; */
  /* height: 0; */
  vertical-align: top;
  bottom: -8px;
  position: absolute;
  z-index: 1;
  left: 2px;
}

.timeline-year {
  display: block;
  position: relative;
}

.timeline-year::after {
  /* display: block; */
  /* position: absolute; */
  /* right: 0; */
  /* bottom: 0; */
  /* left: 0; */
  /* height: 1px; */
  /* width: 200vw; */
  /* background-color: #DDDDDD; */
  /* transform: translateX(-50%); */
  /* z-index: -1; */
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: #ddd;
}

.white-line {
  display: block;
  height: 0;
  width: 100%;
}

.our-timeline .swiper-slide-active .timeline-year::after {
  width: 200vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

.our-timeline .swiper-pagination-bullet {
  background: #C8C8C8 ;
  opacity: 1;
}

.our-timeline .swiper-pagination-bullet-active {
  height: 8px !important;
  width: 8px !important;
  background: #F58634 !important;
}

.time-line-next-btn {
  /* top: -430px !important; */
  height: 50px !important;
  width: 50px !important;
}

.our-timeline .swiper-button-next{
  background-color: #F58634 !important;
  border-radius: 50%;
  color: #ffffff;
}

.our-timeline .swiper-button-next:hover,
.our-timeline .swiper-button-prev:hover {
  background-color: #46BC98 !important;
  color: #ffffff !important;
}

.our-timeline .swiper-button-prev  {
  border-radius: 50%;
  color: #ffffff;
  background-color: #F58634 !important;
}

.our-timeline .swiper-button-disabled {
  height: 50px !important;
  width: 50px !important;
  background-color: #d3d3d3 !important;
  -moz-columns: #939393 !important;
       columns: #939393 !important;
}

.our-timeline .swiper-button-disabled::after {
  -moz-columns: #939393 !important;
       columns: #939393 !important;
}

.our-timeline {
  position: relative;
}

.our-timeline .swiper-button-next::after,
.our-timeline .swiper-button-prev::after {
  font-size: 20px !important;
}

.our-timeline .swiper-button-next.swiper-button-disabled, 
.our-timeline .swiper-button-prev.swiper-button-disabled {
  opacity: 1 !important;
}

.our-timeline .swiper-button-next::after {
  content: '\f054';
  font-family: "FontAwesome";
  font-weight: 400;
}

.our-timeline .swiper-button-prev::after{
  content: '\f053';
  font-family: "FontAwesome";
  font-weight: 400;
}

.our-clients .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.our-clients.swiper {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.our-clients .swiper-slide {
  background-color: #ffffff;
  padding: 12px 35px;
  box-shadow: -1px 5px 5px 0px rgba(0, 0, 0, 0.02);
  -webkit-box-shadow: -1px 5px 5px 0px rgba(0, 0, 0, 0.02);
  -moz-box-shadow: -1px 5px 5px 0px rgba(0, 0, 0, 0.02);
  height: 140px;
  width: 205px !important;
  margin-top: 0 !important;
  margin-bottom: 20px;
}

/* .our-clients .swiper-slide:nth-child(even) {
  margin-top: 55px !important;
} */

.our-timeline .swiper-button-next {
  top: -430px ;
}

.our-timeline .swiper-button-prev {
  right: 100px ;
  top: -430px ;
  left: auto ;
}

.our-timeline .swiper-horizontal > .swiper-pagination-bullets,
.our-timeline .swiper-pagination-bullets.swiper-pagination-horizontal, 
.our-timeline .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: -20px;
}

.client-text {
  padding-left: 140px;
}

.sliding-background {
  background: url("../images/testimonial.png") repeat-x;
  height: 500px;
  width: 4000px;
  animation: slide 20s linear infinite;
}

.overlay-gradient{
  position: absolute;
  top: 0;
  width: 15%;
  height: 100%;
  left: 0;
  background: rgb(245,245,245);
  background: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(0,0,0,0) 10%);
  z-index: 1;
}

@keyframes slide{
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-1692px, 0, 0);
  }
}

.team-members > .person-img{
  flex: 0 0 auto;
  width: 32%;
}

.founder-block > .savy-box{
  flex: 0 0 auto;
  width: 46%;
}

.normal-img img{
  width: 100%;
}

.team-section [aria-selected="true"]{
  background-color: #00583A;
  color: #ffffff;
}

.team-section [aria-selected="true"]:hover{
  color: #ffffff;
}

.services-tab [aria-selected="true"]{
  color: #00583A !important;
}

.services-tab [aria-selected="true"] span{
  background-color: #f58634 !important;
  color: #ffffff !important;
}

/* header{
  position: fixed;
  top: 0;
  background-color: #fff;
} */

/* ----contact us page start ---- */

.address-block [aria-selected="true"],
.active-tab:hover  {
  background-color: #f58634 !important;
  color: #ffffff !important;
  border-color: #f58634 !important;
}

/* .address-block .active-tab:hover{
  color: #222222 !important;
} */

.third-btn .arrow-color{
  /* Safari/Chrome */
  filter: brightness(0) invert(1);
}

.third-btn:hover .arrow-color{
  /* Safari/Chrome */
  filter: none;
}

.third-btn::before {
  background-color: #ffffff;
}

.third-btn:hover .btn-text {
  color: #F58634 !important;
}

.map-section iframe {
  height: 620px !important;
}

/* ---blog page start ---- */

.blog-pagination li [aria-current="page"] {
  background-color: #222222 !important;
  color: #ffffff !important;
  border-color: #222222 !important;
}

.recent-blog-post {
  box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 1px 7px 0px rgba(0,0,0,0.1);
}

.view-more-btn:hover img{
  transition: all 0.4s;
  margin-left: 10px ;
}

.view-more-btn img{
  transition: all 0.4s;
}

.blog-img {
  overflow: hidden;
}

.blog-img img  {
  transition: all .5s ease-in-out;
}

.blog-img:hover img {
  transition: all .5s;
  transform: scale(1.2);
}

.blog-img:hover .blog-hover  {
  height: 100%;
}

.blog-img:hover {
  overflow: hidden;
}

/* -------------- services page start ----------- */

.service-box-hover:hover .img-overlay-1 {
  opacity: 1;
  transition: all.5ms;
  position: absolute;
}

.img-overlay-1 {
  opacity: 0;
}

.service-box-hover:hover .service-arrow {
  filter: brightness(0) invert(1);
}

.service-icon:after {
  position: absolute;
  content: "";
  background-color:#00583A;
  width: 100%;
  height: 0%;
  left: 50%;
  top: 50%;
  border-radius: 25px;
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 0;
  transition: all 500ms ease;
}

.service-box-hover:hover .service-icon:after  {
  height: 100%;
  background: #00583A;
}

.service-icon {
  overflow: hidden;
  transition: 100ms ease;
}

.line-hover {
  overflow: hidden;
  transition: all 500ms linear;
  /* position: relative;
  left: 0;
  bottom: 0;
  width: 100%; */
}

.line-hover::after {
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  width: 0;
  opacity: 0;
  height: calc(100% + 20px);
  content: "";
  background-color: #ffffff;
  transition: all 500ms linear;
  transform: rotate(32deg);
  margin: 0 auto;
}

.service-box-hover:hover .line-hover::after {
  width: 4px;
  opacity: 1;
}

.service-box-hover {
  box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.1);
  -webkit-box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 4px 10px 1px rgba(0,0,0,0.1);
}

.service-box-hover:hover .view-more-btn img{
  transition: .5s;
  margin-left: 10px ;
}

.service-icon {
  position: relative;
  z-index: 1;
  /* margin: -45px auto 15px; */
  overflow: hidden;
  transition: 100ms ease;
}

/* .service-height {
  min-height: 209px;
} */

/* --- career page start ----- */

.our-benefits{
  height: 1120px;
}

.swiper.benefits {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.our-benefits .swiper-pagination-bullet-active {
  background: #F58634 !important;
}

.our-benefits .swiper-pagination-bullet  {
  background: #C8C8C8;
}

.benefits .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.our-benefits .swiper-pagination-bullets {
  bottom: 0;
}

.our-benefits .swiper-pagination-bullet-active {
  background: #F58634 !important;
}

.our-benefits .swiper-pagination-bullet  {
  background: #C8C8C8;
}

/* .life-at-sumanas .grid-image{
  grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
	grid-auto-rows: 370px;
} */

.life-at-sumanas .gallery-image{
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 340px;
}

.life-at-sumanas .gallery-image .gallery-heading{
  padding-left: 14rem;
}

.full-container{
  max-width: 1920px;
  margin: auto;
}

.apply-btn img{
  transition: .5s;
  margin-left: 10px ;
}

.developer-box:hover .apply-btn img{
  margin-left: 20px;
  transition: .5s;
}

.our-benefits .swiper-slide .content-block{
  --tw-bg-opacity: 1;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
}

.our-benefits .swiper-slide .benefit-count{
  --tw-text-opacity: 1;
  color: rgb(255 245 238 / var(--tw-text-opacity, 1));
}

.our-benefits .swiper-slide:nth-child(4n + 0) .content-block,  
.our-benefits .swiper-slide:nth-child(4n + 1) .content-block{
  --tw-bg-opacity: 1;
  background-color: rgb(0 88 58 / var(--tw-bg-opacity, 1));
}

.our-benefits .swiper-slide:nth-child(4n + 0) .benefit-count,
.our-benefits .swiper-slide:nth-child(4n + 1) .benefit-count{
  --tw-text-opacity: 1;
  color: rgb(0 88 58 / var(--tw-text-opacity, 1));
}

/* dropzone styles start */

.my-dropzone{
  border-radius: 0.5rem;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(150 150 150 / var(--tw-border-opacity, 1));
}

/* dropzone styles end */

/* blog details start */

.truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.swiper-pagination-bullet{
  --tw-bg-opacity: 1;
  background-color: rgb(236 236 236 / var(--tw-bg-opacity, 1));
  opacity: 1;
}

.swiper-pagination-bullet-active{
  --tw-bg-opacity: 1;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
}

.share-block{
  top: 130px;
}

.share-block ul{
  transform: translate(-140%,0%);
}

.timeline-swiper  h5, .works .item h5{
  font-family: Mulish,  sans-serif;
}

/* ------- stech lab start ------ */

.stech-testimonial .owl-dots,
.stech-testimonial .owl-nav
 {
  margin:0 ;
  text-align: center;
}

.stech-testimonial .owl-theme .owl-dots .owl-dot span {
  width:45px;
  height:3px;
  border-radius:20px;
  /* background-color: #D2D1D2 !important; */
}

.stech-testimonial .owl-prev,
.stech-testimonial .owl-next {
  background-color: #F58634 !important;
  height:50px;
  width:50px;
  border-radius:50% !important;
  display:flex;
  align-items: center;
  justify-content: center;
}

.stech-testimonial .owl-prev i,
.stech-testimonial .owl-next i {
  color:#ffffff !important;
  font-size:25px;
  margin-top:6px !important;
}

#stech-testimonial-1 .owl-prev {
  position:absolute;
  top:0;
  left:0;
}

#stech-testimonial-1 .owl-nav {
  position: unset !important;
}

#stech-testimonial-1 .owl-next {
  position:absolute;
  top:0  !important;
  right:0 !important;
}

#stech-testimonial-1 .owl-prev,
#stech-testimonial-1 .owl-next {
  top:60px !important;
}

/* ------- stech lab end ------ */

/* blog details end */

.first-btn-1:before {
  background-color:#ffffff !important;
}

.first-btn-1:hover .btn-text {
  color: #F58634 !important;
}

.first-btn-2:before {
  background-color:#F58634 !important;
}

.first-btn-2:hover .btn-text {
  color: #ffffff !important;
}

/* .h-screen-1 {
  height:1020px;
} */

/* --- stech lab detail page start ----- */

.stech-points li {
  position: relative;
}

.stech-points li::before {
  /* @apply absolute left-0 top-0  content-['\f219']; */
  /* font-family: 'FontAwesome';
   position: absolute;
   left: 0;
   top: 0; */
  /* height: 14px;
   width: 14px;
   background-color: #F58634; */
  /* content: '\f219'; */
}

.hms-technology .img-2 {
  top:48px;
  left: 185px;
}

.hms-technology .img-3 {
  top:173px;
  left: 185px;
}

.hms-technology .img-4 {
  top:297px;
  left: 185px;
}

.hms-technology .img-5 {
  top:422px;
  left: 185px;
}

.hms-technology .img-6 {
  left: 310px;
}

.hms-technology .img-7 {
  left: 435px;
}

.hms-technology .img-8 {
  left: 60px;
}

.screen-show .swiper-slide img {
  /* filter: drop-shadow(0px 6px 18px 0px rgba(0,24,78,0.12)) !important; */
  filter: drop-shadow(0px 6px 18px 0px rgba(0,24,78,0.12)) !important;
}

.stech-module .owl-dots {
  margin-left: 0;
  text-align: center;
}

.stech-module.owl-carousel .owl-nav button.owl-prev,
.stech-module.owl-carousel .owl-nav button.owl-next {
  height:30px;
  width:30px;
  border-radius:50%;
  background-color:#F58634;
  box-shadow: -1px 5px 5px 0px rgba(0, 0, 0, 0.02);
}

.stech-module  {
  position: relative;
}

.stech-module .owl-nav {
  position: absolute;
  top:70px !important;
}

.stech-module.owl-carousel .owl-nav button.owl-prev {
  left: -20px;
}

.stech-module.owl-carousel .owl-nav button.owl-next {
  right: 20px;
}

.stech-module.owl-carousel .owl-nav {
  width: 100%;
}

.stech-module.owl-carousel .owl-nav button.owl-prev i,
.stech-module.owl-carousel .owl-nav button.owl-next i  {
  color: #ffffff;
}

.stech-module.owl-theme .owl-dots {
  margin-top: 30px;
}

.stech-module-1.owl-carousel .owl-nav button.owl-prev {
  left: 25px !important;
}

.stech-module-1.owl-carousel .owl-nav button.owl-next {
  right: -20px !important;
}

.stech-product-2.owl-carousel .owl-nav button.owl-prev,
.stech-product-2.owl-carousel .owl-nav button.owl-next {
  height:32px;
  width:32px;
  border-radius:50%;
  background-color:#ffffff;
}

.stech-product-2.owl-carousel .owl-nav button.owl-prev i,
.stech-product-2.owl-carousel .owl-nav button.owl-next i {
  color:#F58634;
}

.stech-product-2 .owl-nav {
  width:100%;
}

.stech-product-2.owl-carousel .owl-nav button.owl-next {
  right: 47% !important;
}

.stech-product-2.owl-carousel .owl-nav button.owl-prev {
  left: 45% !important;
}

/* --- stech lab detail page end ----- */

.progress {
  width: 75px;
  height: 75px;
  font-size: 20px;
  color: #222222;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: #fff;
  text-align: center;
  line-height: 77px;
  margin: 0px;
  font-weight: 700;
  /* border:5px solid #FFE4CF; */
  /* border-style:inset; */
}

.progress::after {
  content: "%";
}

.progress .title {
  position: relative;
  z-index: 100;
  left: 3px;
}

.progress .overlay {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #fff;
}

.progress .left, .progress .right {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 5px solid #F58220;
  border-radius: 100px 0px 0px 100px;
  border-right: 0;
  transform-origin: right;
}

.progress .left {
  animation: load1 1s linear forwards;
}

.progress:nth-of-type(2) .right, .progress:nth-of-type(3) .right {
  animation: load2 .5s linear forwards 1s;
}

.progress:last-of-type .right, .progress:first-of-type .right {
  animation: load3 .8s linear forwards 1s;
}

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

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

@keyframes load2 {
  0% {
    z-index: 100;
    transform: rotate(180deg);
  }

  100% {
    z-index: 100;
    transform: rotate(270deg);
  }
}

@keyframes load3 {
  0% {
    z-index: 100;
    transform: rotate(180deg);
  }

  100% {
    z-index: 100;
    transform: rotate(315deg);
  }
}

.right-line {
  position: relative;
}

.right-line::before {
  position: absolute;
  left: 210px;
  height: 180px;
  width: 1px;
  background-color: #ffffff;
  content: "";
  top: -10px;
  opacity: 0.1;
}

.service-bebefits {
  position: relative;
  /* background-image: url('../images/left-bg.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: top left; */
}

.service-bebefits::before {
  position: absolute;
  content: "";
  left: 0;
  width: 45%;
  height: 100%;
  background-image: url('../images/left-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.service-bebefits [aria-expanded="false"] {
  margin-bottom:20px;
  border-bottom-right-radius:8px;
  border-bottom-left-radius:8px;
  color:#222222;
}

.before-line {
  position:relative;
}

.before-line::before{
  position: absolute;
  left: 0px;
  height: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(70 188 152 / var(--tw-bg-opacity, 1));
  width: 5px;
  content: "";
  border-radius: 30px 6px 6px 30px;
}

.show-arrow {
  display:none;
}

.first-btn-1:hover .show-arrow {
  display:block;
}

.first-btn-1:hover .hide-arrow {
  display:none;
}

.first-btn-2:hover .show-arrow   {
  display:block;
}

.first-btn-2:hover .hide-arrow {
  display: block;
  margin-top: -6px;
}

/* technology page start */

.php-pattern-img{
  position: absolute;
  top: 0px;
  z-index: -10;
  height: auto;
  width: auto;
  left: -290px;
}

.right-position {
  right: -290px !important;
  left: unset;
}

.feature-icon:after {
  content: " ";
  position: absolute;
  z-index: -10;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
  width: 55px;
  height: 55px;
  right: -25px;
  top: 5px;
}

.technologies-list-block .technologies-list-item{
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(217 217 217 / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

#block-chain-1 .owl-item.active.center .item .technologies-list-block .technologies-list-item {
  background: #3EBB95;
  position: relative;
}

#block-chain-1 .owl-item.active.center .item .technologies-list-block .technologies-list-item p,
#block-chain-1 .owl-item.active.center .item .technologies-list-block .technologies-list-item h4 {
  color: #ffffff;
}

#block-chain-1 .owl-item.active.center .item .technologies-list-block .technologies-list-item::before {
  position: absolute;
  content: '';
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url("../images/feature-shape-1.png");
  background-repeat: no-repeat;
  background-position: bottom center;
}

#block-chain-1 .owl-item.active.center .item .technologies-list-block .technologies-list-item .hover-icon .solution-icon,
#block-chain-1 .owl-item.active.center .item .technologies-list-block .technologies-list-item .hover-icon .global-icon,
#block-chain-1 .owl-item.active.center .item .technologies-list-block .technologies-list-item .hover-icon .work-flow-icon {
  background: #3EBB95;
  position: relative;
}

.technologies-list-block .technologies-list-item {
  width: 170px;
  height: 235px;
}

.technologies-list-block:hover .technologies-list-item{
  --tw-border-opacity: 1;
  border-color: rgb(245 134 52 / var(--tw-border-opacity, 1));
}

.technologies-list-item .tech-img {
  width: 75px;
  height: 95px;
  -o-object-fit: contain;
     object-fit: contain;
}

.php-benefits .tech-benefits-list span,
.mean-benefit .mean-benefit-list span{
  width: 50px !important;
  height: 50px !important;
}

.tech-benefits .tech-benefits-list span {
  width: 60px;
  height: 60px;
}

.php-benefits.tech-benefits li:not(:last-child),
.mean-benefit li:not(:last-child){
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom-width: 1px;
}

.java-tech-benefits.tech-benefits,
.tech-benefits-ruby
 {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
}

.java-tech-benefits.tech-benefits li,
.tech-benefits-ruby li {
  width:45% !important;
}

.java-tech-benefits.tech-benefits {
  display:flex;
  flex-wrap: wrap;
}

.java-tech-benefits.tech-benefits li img {
  width:30px;
}

.services-list-2-row{
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.25rem;
}

.services-list-2-row li{
  flex-basis: 100%;
  padding-right: 0px;
}

@media (min-width: 768px){
  .services-list-2-row li{
    flex-basis: 50%;
    padding-right: 0.5rem;
  }
}

.swiper-navigation .swiper-button-next,
.swiper-navigation .swiper-button-prev {
  position: unset;
}

.hero-grid-content{
  position: absolute;
  bottom: 0px;
  width: 100%;
  backface-visibility: hidden;
  height: 235px;
}

.hero-grid-content::before,
.hero-grid-content::after{
  pointer-events: none;
}

.effect-target {
  transform: translate3d(0, 20px, 0);
  transition: transform 0.35s;
}

.effect-move:hover .effect-target,
.effect-move:hover .effect-image {
  transform: translate3d(0, 0, 0);
}

.effect-text{
  opacity: 0;
  transition: opacity 0.2s, transform 0.35s;
}

.effect-move:hover .effect-image,
.effect-move:hover .effect-text{
  opacity: 1;
}

.effect-move:hover .effect-text {
  transition-delay: 0.05s;
  transition-duration: 0.35s;
}

.line-1 {
  width:5px;
  height:74px;
  background-color:#F58634;
  display:inline-block;
  margin-right:35px;
}

/*--------- service detail start  ------------*/

.horizontal-line {
  position: relative;
}

.horizontal-line::before {
  content: "";
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 2px;
  background-color: #DDDDDD;
  border-radius: 10px;
  z-index: 0;
}

.boxes {
  position: relative;
  min-height: 291px;
}

.boxes::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 48px;
  background-color: #DDDDDD;
  left: 50%;
  transform: translateX(-50%);
  top: -35px;
  z-index: -1;
}

.img-parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ----services page start ---*/

/* .service-box-hover:after {
  display:block;
  clear: both;
  content: "";
} */

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.stech-product-2 .owl-nav {
  margin-top: 38px !important;
}

.box-hover {
  transform: translate3d(0, 0, 0);
  transition: transform 0.35s;
}

.box-hover:hover{
  /* transform: translate3d(0, -20px, 0); */
  box-shadow: 0px 9px 40px 0px rgba(0,88,58,0.40) !important;
  -webkit-box-shadow: 0px 9px 40px 0px rgba(0,88,58,0.40) !important;
  -moz-box-shadow: 0px 9px 40px 0px rgba(0,88,58,0.40) !important;
  transition:all(0.2s)
}

.box-hover-1:hover{
  /* transform: translate3d(0, -20px, 0); */
  box-shadow: 0px 9px 40px 0px rgba(255,231,201,0.40) !important;
  -webkit-box-shadow: 0px 9px 40px 0px rgba(255,231,201,0.40) !important;
  -moz-box-shadow: 0px 9px 40px 0px rgba(255,231,201,0.40) !important;
  transition:all(0.2s)
}

.box-hover-3:hover{
  box-shadow: 0px 9px 40px 0px rgba(70,188,152,0.40) !important;
  -webkit-box-shadow: 0px 9px 40px 0px rgba(70,188,152,0.40) !important;
  -moz-box-shadow: 0px 9px 40px 0px rgba(70,188,152,0.40) !important;
  transition:all(0.2s)
}

.box-hover-4:hover{
  box-shadow: 0px 9px 40px 0px rgba(245,134,52,0.40) !important;
  -webkit-box-shadow: 0px 9px 40px 0px rgba(245,134,52,0.40) !important;
  -moz-box-shadow: 0px 9px 40px 0px rgba(245,134,52,0.40) !important;
  transition:all(0.2s)
}

#client-testimonial.owl-carousel .owl-nav button.owl-prev i:hover,
#client-testimonial.owl-carousel .owl-nav button.owl-next i:hover {
  color:#F58634 !important;
}

.stech-module.owl-carousel .owl-nav button.owl-prev:hover,
.stech-module.owl-carousel .owl-nav button.owl-next:hover {
  background:#00583A;
}

/* .stech-product-2.owl-carousel .owl-nav button.owl-prev:hover, {
	background:#00583A !important;
} */

.stech-product-2.owl-carousel .owl-nav button.owl-prev:hover,
.stech-product-2.owl-carousel .owl-nav button.owl-next:hover {
  background:#F58634 !important;
}

.stech-product-2.owl-carousel .owl-nav button.owl-prev:hover i,
.stech-product-2.owl-carousel .owl-nav button.owl-next:hover i {
  color:#ffffff;
}

/* .nav-toggle {
  display: inline-block;
  width: 22px !important;
  height: 22px !important;
}
.nav-toggle:hover {
  fill:red !important;
} */

.toggle-masking {
  -webkit-mask:url(../svg/menu-toggle-dark.svg);
          mask:url(../svg/menu-toggle-dark.svg);
}

.toggle-masking-1 {
  -webkit-mask:url(../svg/menu-toggle.svg);
          mask:url(../svg/menu-toggle.svg);
  background: #ffffff !important;
}

.toggle-masking-size {
  width: 22px;
  height: 19px;
  display: inline-block;
  -webkit-mask-size: cover;
          mask-size: cover;
  background: black;
}

.toggle-masking:hover,
 .toggle-masking-1:hover {
  background:#46BC98 !important;
}

#stech-testimonial-1 .owl-prev:hover, 
 #stech-testimonial-1 .owl-next:hover {
  background:#ffffff !important;
}

#stech-testimonial-1 .owl-nav .owl-prev:hover i, 
#stech-testimonial-1 .owl-nav .owl-next:hover i  {
  color:#F58634 !important;
}

.stech-testimonial .owl-theme .owl-dots .owl-dot span:hover {
  background-color: #ffffff !important;
}

.java-section {
  background-repeat: no-repeat, repeat !important;
}

/* ----------technologies java start--------  */

.benefit-img {
  position: relative;
}

.benefit-img::before {
  position: absolute;
  right: 390px;
  bottom: -60px;
  content: '';
  background-image: url('../images/pattern-7.png');
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-size: contain;
  opacity: 0.3;
}

/* ----------technologies java end--------  */

.ruby-section .feature-block {
  background: #f4f4f4;
  padding: 20px 20px;
  border-radius: 10px;
  gap: 18px !important;
  position: relative;
}

.ruby-section .feature-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 19px;
  width: 4px;
  height: 50px;
  background-color: #F58634;
  display: inline-block;
}

.ruby-section .feature-icon::after {
  content:unset;
}

/* ---ruby section masking ----- */

.icon-masking-1 {
  -webkit-mask:url(../images/productivity.svg);
          mask:url(../images/productivity.svg);
}

.icon-masking-2 {
  -webkit-mask:url(../images/developper-code.svg);
          mask:url(../images/developper-code.svg);
}

.icon-masking-3 {
  -webkit-mask:url(../images/community.svg);
          mask:url(../images/community.svg);
}

.icon-masking-4 {
  -webkit-mask:url(../images/typing.svg);
          mask:url(../images/typing.svg);
}

.icon-masking-size {
  width: 30px !important;
  height: 30px !important;
  display: inline-block;
  -webkit-mask-size: cover;
          mask-size: cover;
  background: #F58634;
  background-repeat: no-repeat !important;
}

.tech-benefits-list-ruby:hover .icon-masking-1,
.tech-benefits-list-ruby:hover .icon-masking-2,
.tech-benefits-list-ruby:hover .icon-masking-3,
.tech-benefits-list-ruby:hover .icon-masking-4 {
  background:#fff !important;
}

.tech-benefits-list-ruby {
  background-color:#ffffff;
  padding:15px 12px;
  border-radius:10px
}

.tech-benefits-list-ruby p {
  color:#F58634;
}

.tech-benefits-ruby {
  gap:20px !important;
}

.tech-benefits-list-ruby:hover {
  background:#F58634;
  /* transition: 2s ease-out; */
}

.tech-benefits-list-ruby:hover p {
  color:#ffffff !important;
}

/* .ruby-services li {
  width:;
 }
.ruby-services {
	background-color: #ffffff;
	padding: 15px 12px;
	border-radius: 10px;
} */

.ruby-services .tech-benefits-list-ruby p {
  text-align: center;
  color: #ffffff;
}

.ruby-services .tech-benefits-list-ruby {
  background-color: #00583a;
  height: 100%;
  justify-content: space-between;
}

.ruby-services.tech-benefits li {
  width: 22% !important;
}

.ruby-services.tech-benefits li img {
  width: 40px;
}

.mean-benefits [aria-expanded="false"] {
  margin-bottom: 20px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.mean-benefits .accordion-mean [aria-expanded="true"] {
  border-bottom:1px solid #cecece !important;
  background:#fde8d9;
  color:black !important; 
}

.mean-box {
  position: relative;
  background:#ffffff;
  z-index:1
}

.mean-box:hover:before {
  transition: all 0.4s;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  visibility: visible;
}

.mean-box:hover {
  color:#ffffff
}

.mean-box::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 1px;
  left: 50%;
  top: 0;
  background: #F58634;
  transition: all 0.4s;
  border-radius: 12px;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
}

.circle-button:hover::after {
  border: 1px solid #46BC98;
}

/* -----------python section start -------- */

.python-section:after {
  position: absolute;
  right: 0;
  bottom: 0;
  height:400px;
  width:600px;
  background:#ffede0;
  content: "";
  z-index:-1;
}

.process-python::after {
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  /* background: url */
}

.vector-bg {
  background:url('../images/vector-bg.png') no-repeat right 100px top 25px;
}

.usage-python:hover .rotate-img  {
  transform: rotateY(180deg);
  transition: .3s linear;
}

.usage-python:hover {
  border-radius: 12px;
  transform: all .3s;
  opacity: 1;
  /* border-bottom: 3px solid #F58634; */
  /* background: #F58634 !important; */
}

.usage-python {
  border-bottom: 3px solid transparent;
}

/* -----ai section strat ------------- */

.ai-hover:hover img{
  filter: brightness(0) invert(1);
}

.icon {
  width: 163px;
  height: 163px;
  text-align: center;
  border-radius: 50%;
  /* margin: 0 auto; */
  position: relative;
  background: #F58220;
}

.bar-shape {
  position: absolute;
  top: -9px;
  left: -10px;
  /* transform: translate(-50%, -50%); */
  width: 181px;
  /* height: 181px; */
}

/* .icon::after {
  position: absolute;
  content: '';
  background: url("../images/dot-bg.png");
  top: 0;
  left:0;
  height:100%;
  width: 100%;
} */

/* -----ai section end--------------- */

.wrapper{
  width: 100%;
}

.skill {
  /* margin-bottom: 25px; */
  position: relative;
  overflow-x: hidden;
}

.skill > p {
  font-size: 18px;
  font-weight: 700;
  color: #1a1716;
  /* margin: 0; */
}

.skill:before{
  width: 100%;
  height: 10px;
  content: "";
  display: block;
  position: absolute;
  background: #FDE7D6;
  bottom: 0;
}

.skill-bar {
  width: 100%;
  height: 10px;
  background:#F58634;
  display: block;
  position: relative;
}

/* SKILL 1 */

.skill1{
  width: 85%;
}

.skill-bar span{
  position: absolute;
  border-top: 0px solid #F58634;
  top: -30px;
  padding: 0;
  font-size: 18px;
  padding: 3px 0;
  font-weight: 500;
}

.skill-bar {
  position: relative;
}

.skill1 .skill-count1 {
  right: 0;
}

/* SKILL 2 */

.skill2{
  width: 85%;
}

.skill2 .skill-count2 {
  right: 0;
}

/* SKILL 3 */

.skill3{
  width: 85%;
}

.skill3 .skill-count3 {
  right: 0;
}

.skill4 .skill-count4 {
  right: 0;
}

/* SKILL 5 */

.skill5{
  width: 97%;
}

.skill5 .skill-count5 {
  right: 0;
}

/* SKILL 6 */

.skill6{
  width: 88%
}

.skill6 .skill-count6 {
  right: 0;
}

/* ---block chain start ---- */

.top-img::before {
  position: absolute;
  top:0;
  left: 0;
  content: '';
  background: url("../images/team-img-shape 2.png");
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  /* transform: translate(1, 1);
  transition: transform 0.5s ease; */
  transform: translate3d(-5%, 0, 0);
}

.top-img:hover::before{
  opacity: 1;
  z-index:0;
  transition: all 0.4s;
  transform: translate3d(0, 0, 0);
}

.block-chain {
  -webkit-mask:url("../images/block-chain-1.svg");
          mask:url("../images/block-chain-1.svg");
}

.block-nft {
  -webkit-mask:url("../images/nft.svg");
          mask:url("../images/nft.svg");
}

.block-crypto {
  -webkit-mask:url("../images/crypto.svg");
          mask:url("../images/crypto.svg");
}

.block-smart {
  -webkit-mask:url("../images/smart.svg");
          mask:url("../images/smart.svg");
}

.block-application {
  -webkit-mask:url("../images/application.svg");
          mask:url("../images/application.svg");
}

.bottle-neck {
  -webkit-mask:url("../images/bottle-neck.svg");
          mask:url("../images/bottle-neck.svg");
}

.block-chain-size {
  width: 60px;
  height: 60px;
  display: inline-block;
  -webkit-mask-size: cover;
          mask-size: cover;
  background: #3EBB95;
}

.top-img:hover .block-chain,
.top-img:hover .block-nft,
.top-img:hover .block-crypto,
.top-img:hover .bottle-neck,
.top-img:hover .block-application,
.top-img:hover .block-smart {
  background: #F58220;
}

#block-chain-1 .owl-dots {
  display: flex;
  align-items: center;
  justify-content: center;
}

#block-chain-1 .owl-nav .owl-prev, #block-chain-1 .owl-nav .owl-next {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  background: #F58220;
  position: absolute;
}

#block-chain-1 .owl-nav .owl-prev i,
 #block-chain-1 .owl-nav .owl-next i  {
  color: #ffffff;
}

#block-chain-1 .owl-theme .owl-dots {
  margin: 0;
}

#block-chain-1.owl-theme .owl-nav {
  position: unset;
  margin-top: 3.5rem;
  width: 100%;
}

#block-chain-1 {
  position: relative;
}

#block-chain-1 .owl-nav .owl-next {
  top: -80px;
  left: 60%;
}

#block-chain-1 .owl-nav .owl-prev {
  left:55%;
  top:-80px;
}

#block-chain-1 .owl-item.active.center .item .bg-white {
  background: #3EBB95;
  position: relative;
}

#block-chain-1 .owl-item.active.center .item .bg-white p,
#block-chain-1 .owl-item.active.center .item .bg-white h4 {
  color: #ffffff;
}

#block-chain-1 .owl-item.active.center .item .bg-white::before {
  position: absolute;
  content: '';
  bottom: 0;
  width: 100%;
  height: 100%;
  background: url("../images/feature-shape-1.png");
  background-repeat: no-repeat;
  background-position: bottom center;
}

.solution-icon {
  -webkit-mask:url("../images/solution-icon.svg");
          mask:url("../images/solution-icon.svg");
}

.global-icon {
  -webkit-mask:url("../images/global.svg");
          mask:url("../images/global.svg");
}

.work-flow-icon {
  -webkit-mask:url("../images/automated-work-flow.svg");
          mask:url("../images/automated-work-flow.svg");
}

.solution-icon-size {
  width: 60px;
  height: 60px;
  display: inline-block;
  -webkit-mask-size: cover;
          mask-size: cover;
  background: #EE7E1F;
}

#block-chain-1 .owl-item.active.center .item .bg-white .hover-icon .solution-icon,
#block-chain-1 .owl-item.active.center .item .bg-white .hover-icon .global-icon,
#block-chain-1 .owl-item.active.center .item .bg-white .hover-icon .work-flow-icon {
  background: #3EBB95;
  position: relative;
}

/* ---block chain end ----- */

/* ----portfolio start ---- */

.project-label {
  min-width:180px;
  position: relative;
}

.project-label::before {
  content: ":";
  position: absolute;
  bottom: 0;
  left: 150px;
  top:0;
}

.portfolio-list-item .quote-content {
  position: relative;
  padding-left: 20px;
  padding-top: 40px;
}

.portfolio-list-item .quote-content .quote-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
}

/*
  .portfolio-list-item .quote-content::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background-image: url('../images/testimonial-quote.png');
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
  } */

.portfolio-client .swiper-button-prev,
   .portfolio-client .swiper-button-next {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid #4B4B4B !important;
}

.portfolio-client .swiper-button-prev:hover,
   .portfolio-client .swiper-button-next:hover {
  border: 1px solid #46BC98;
}

.portfolio-screens .swiper-slide-active a img{
  /* background:rgba(0,0,0,0.4); */
  /* filter:blur(4px); */
  box-shadow: -6px 7px 38px -9px rgba(0,0,0,0.39);
  -webkit-box-shadow: -6px 7px 38px -9px rgba(0,0,0,0.39);
  -moz-box-shadow: -6px 7px 38px -9px rgba(0,0,0,0.39);
}

/* .layer-blur {
       background: rgb(0, 0, 0,(0.4));
      filter: blur(84px);
      -webkit-filter: blur(84px);
    } */

.screen-text {
  color: #000000;
  font-size: 250px;
  font-weight: 800;
  opacity: 0.1;
  /* -webkit-text-stroke-width: 2px; */
  /* stroke-width: 2px; */
  -webkit-text-stroke-color: #FFFFFF;
  stroke: #E90101;
  display: inline-block;
  font-family: 'mulish';
  margin-left: 850px;
  margin-top: -10px;
  line-height:unset;
}

/* .next-bg {
      position: relative;
      width:50%;
    }
    .next-bg::before {
      position: absolute;
      left:0;
      top:0;
      width: 100%;
      height: 100%;
      content: '';
      background: url('../images/next-bg.png');
      opacity: 0;
    }
    .next-bg:hover::before {
      opacity: 1;
    } */

.next-bg {
  position: relative;
  width:50%;
}

.next-bg::before {
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  content: '';
  background: url('../images/nxt-proj-midland.png');
  background-size: cover;
  opacity: 0;
}

.next-bg:hover::before {
  opacity: 0.2;
}

.prev-bg {
  position: relative;
  width:50%;
}

.prev-bg::before {
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  content: '';
  background: url('../images/prev-proj-photofacet.png');
  background-size: cover;
  opacity: 0;
}

.prev-bg:hover::before {
  opacity: 0.2;
}

.wave-line {
  position:relative;
}

.wave-line::before {
  position:absolute;
  left:0;
  bottom: 0;
  content: '';
  background: url('../images/wave-vector.png');
  background-repeat: no-repeat;
  width: 100%;
  height: 5px;
  background-size: cover;
}

/* ----portfolio end ----- */

/* ---portfolio 2 start --- */

.overview-masking {
  -webkit-mask:url('../images/finance-1.svg');
          mask:url('../images/finance-1.svg');
}

.overview-calendar {
  -webkit-mask:url('../images/calendar-1.svg');
          mask:url('../images/calendar-1.svg');
}

.overview-member {
  -webkit-mask:url('../images/overview-member.svg');
          mask:url('../images/overview-member.svg');
}

.overview-screens {
  -webkit-mask:url('../images/screens.svg');
          mask:url('../images/screens.svg');
}

.overview-icon-size {
  width: 65px;
  height: 65px;
  display: inline-block;
  -webkit-mask-size: cover;
          mask-size: cover;
  background: #ffffff;
}

/* .overview-masking:hover {
       background:#ED7F22;
    } */

.solution-content {
  position: relative;
}

.solution-content::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: 0;
  background:url('../images/solution-lab.png') no-repeat;
  width: 100%;
  height: 100%;
  background-position: bottom left;
}

.light-green-box  {
  position: relative;
}

.light-green-box::after {
  position: absolute;
  left: 107px;
  top: 45px;
  content: '';
  background: url('../images/dot.svg') no-repeat;
  height: 100%;
  width: 100%;
}

.overview-icon-design {
  width: 55px;
  height: 55px;
  display: inline-block;
  -webkit-mask-size: cover;
          mask-size: cover;
  background: #3CB590;
}

.overview-design {
  -webkit-mask:url('../images/design-1.svg');
          mask:url('../images/design-1.svg');
}

.overview-design-2 {
  -webkit-mask:url('../images/design-2.svg');
          mask:url('../images/design-2.svg');
}

.overview-design-3 {
  -webkit-mask:url('../images/design-3.svg');
          mask:url('../images/design-3.svg');
}

/* ---portfolio 2 end --- */

/* ----portfolio3 start ---- */

.swiper-slide-portfolio{
  text-align: center;
}

.effect-move-portfolio{
  opacity: 1 !important;
}

.hero-grid-content-portfolio{
  position: unset !important;
}

.technologies-list-block-portfolio,
    .technologies-list-item-portfolio{
  border-radius: 5px !important;
  border-color: #EE7E1F !important;
  width: 100px !important;
  height: 100px !important;
  box-shadow: 0 2px 15px 0px #ebebeb;
}

.effect-target-portfolio{
  transform: translate3d(0, 0, 0) !important;
}

.technologies-list-item-portfolio .tech-img {
  width: 60px;
  -o-object-fit: contain;
  object-fit: contain;
}

.portfolio-stats-number::before {
  content: "";
  position: absolute;
  top: 0px;
  bottom: 0;
  left: 50%;
  width: 1.2px;
  background-color: #FBCBA7;
  height: 100%;
}

.portfolio-screen-swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  overflow: hidden;
}

.portfolio-screen-swiper-slide img {
  width: 100%;
  border-radius: 30px;
}

.portfolio-screens-1-swiper .swiper-slide-active {
  opacity: 1;
}

.portfolio-screens-1-swiper
    .swiper-slide-prev,
    .portfolio-screens-1-swiper .swiper-slide-next  {
  opacity: 0.5;
}

.portfolio-screens-1-swiper
    .swiper-button-next:after,
     .swiper-rtl .swiper-button-prev:after,
     .ecommerce-swiper .swiper-button-next:after  {
  content: '\f054';
  font-family: "FontAwesome";
  font-weight: 400;
  font-size: 20px !important;
  color: #fff;
}

.portfolio-screens-1-swiper
    .swiper-button-prev:after,
    .swiper-rtl .swiper-button-next:after,
    .ecommerce-swiper .swiper-button-prev:after {
  content: '\f053';
  font-family: "FontAwesome";
  font-weight: 400;
  font-size: 20px !important;
  color: #fff;
}

.portfolio-screens-1-swiper
    .swiper-button-next {
  right: 11%;
}

.portfolio-screens-1-swiper
    .swiper-button-prev {
  left: 11%;
}

/* Modal Container */

.portfolio-modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
}

/* Hidden Class */

.portfolio-hidden {
  display: none;
}

/* Modal Content */

.portfolio-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.portfolio-modal-content img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
}

/* Close Button */

.portfolio-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s;
}

.portfolio-close:hover {
  transform: scale(1.2);
}

/* .banner-height-1 {
      top:10% ;
    } */

/* ----portfolio3 end ----- */

.overview-boxes,
  .solutions-boxes,
  .next-bg::before,
  .prev-bg::before{
  transition: all 0.4s;
}

.overview-box-1.mean-box::before {
  background: #fff;
}

.light-green-box-1 .mean-box::before {
  background: #3CB590;
}

.light-green-box-1 .mean-box {
  background: #DBF4E9;
}

.light-green-box-1 .mean-box:hover .overview-design,
  .light-green-box-1 .mean-box:hover .overview-design-2,
  .light-green-box-1 .mean-box:hover .overview-design-3 {
  background: #ffffff !important;
}

/* ------------responsive start ------------ */

/* ---new changes start --- */

/* .ai-hover:hover{
    transition: all 0.5s;
  } */

.ai-hover.mean-box::before {
  border-radius: 0px;
}

/* -----block chain start ------ */

.solution-item:hover{
  background-color: #3EBB95 !important;
}

.solution-item{
  transition: all 0.4s;
}

.solution-item:hover .solution-icon-size {
  background: #3EBB95;
}

.solution-item:hover p{
  color: #fff !important;
}

.solution-item:hover h4{
  color: #fff !important;
}

.solution-item::before {
  background: url("../images/feature-shape-1.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.4s;
}

.block-chain-indus-size {
  width: 100px;
  height: 100px;
  display: inline-block;
  -webkit-mask-size: cover;
  mask-size: cover;
  background: #3EBB95;
  transition: all 0.4s;
}

.solution-item:hover::before{
  display: block;
}

.block-manufacturing {
  -webkit-mask:url("../images/manufacturing.svg");
          mask:url("../images/manufacturing.svg");
}

.block-tech{
  -webkit-mask:url("../images/hi-tech.svg");
          mask:url("../images/hi-tech.svg");
}

.block-telecom{
  -webkit-mask:url("../images/telecom.svg");
          mask:url("../images/telecom.svg");
}

.block-food{
  -webkit-mask:url("../images/food.svg");
          mask:url("../images/food.svg");
}

.block-finance{
  -webkit-mask:url("../images/finance.svg");
          mask:url("../images/finance.svg");
}

.block-realestate{
  -webkit-mask:url("../images/real-estate.svg");
          mask:url("../images/real-estate.svg");
}

.block-pharma{
  -webkit-mask:url("../images/pharamedical.svg");
          mask:url("../images/pharamedical.svg");
}

.block-cloud-service{
  -webkit-mask:url("../images/cloud-service.svg");
          mask:url("../images/cloud-service.svg");
}

.python-service-icons-size{
        width: 40px;
        height: 40px;
        display: inline-block;
        mask-size: cover;
        background-color: #222;
        background-repeat: no-repeat;
        flex-shrink: 0;
      }

.python-web-app-1{
  -webkit-mask:url("../images/web-app-1.svg");
          mask:url("../images/web-app-1.svg");
}

.python-mobile-app-2{
  -webkit-mask:url("../images/mobile-app-2.svg");
          mask:url("../images/mobile-app-2.svg");
}

.python-api-1{
  -webkit-mask:url("../images/api-1.svg");
          mask:url("../images/api-1.svg");
}

.python-ai{
  -webkit-mask:url("../images/ai.svg");
          mask:url("../images/ai.svg");
}

.python-prototype{
  -webkit-mask:url("../images/prototype.svg");
          mask:url("../images/prototype.svg");
  background-repeat: no-repeat;
}

.box-hover-5,
      .box-hover-5:hover {
  transition: all .5s;
}

.folio-img-2 {
  height: 605px !important;
  top: 64px !important;
}

.overview-box.mean-box:hover::before {
  background: #FFFfff !important;
}

/* -----block chain end ------ */

.stech-section .swiper-pagination {
  bottom: 20px !important;
}

.stech-section .swiper {
  padding-bottom: 60px;
  /* or however much space you want above the pagination */
}

/* ----e commerce page start ---- */

.light-green-box-2::after {
  background: url('../images/dot-2.svg') no-repeat;
}

.e-com {
  background-repeat: repeat,no-repeat;
}

.e-com.our-timeline .swiper-button-prev,
.e-com.our-timeline .swiper-button-next {
  top: 0;
}

.ecommerce-swiper .portfolio-screen-swiper-slide img {
  opacity: 0.3;
}

.ecommerce-swiper .swiper-slide-active img{
  opacity: 1;
}

/* ---new changes end --- */

/* Extra small devices (portrait phones, less than 576px) */

@media (max-width: 575.98px) {
  .slider .slide-progress .swiper-pagination {
    width: 80px;
    margin: auto 15px;
  }

  .slider .slide-progress{
    width: 150px;
    left: 1.5rem;
    margin-left: 0;
  }

  /* Design changes start */

  /* .headline-text {
    margin-bottom: 15px;
    font-size: 45px;
    line-height: 54px;
  } */

  /* Design changes end */

  .circle-button .rotate-circle svg {
    width: 170px;
  }

  .circle-button .arrow {
    top: 55%;
    left: 55%;
  }

  .circle-button .arrow img:not(.sumanas-logo img){
    width: 22px;
  }

  .owl-theme .owl-dots {
    margin-top: 18px;
    text-align: center !important;
    margin-left: 0 !important;
  }

  .owl-theme .owl-nav {
    margin-top: 1.5rem;
  }

  .owl-carousel .owl-nav button.owl-next {
    right: 30%;
    top: -4px;
  }

  .owl-carousel .owl-nav button.owl-prev {
    left: 30%;
    top: -4px;
  }

  .owl-theme .owl-nav {
    width: 100%;
  }

  .rotation-circle {
    left: 50% !important;
  }

  .mobile-swiper .swiper-button-next, 
  .mobile-swiper .swiper-button-prev {
    top: 30% !important;
    width: 30px  !important;
    height: 30px !important;
    color: #F58634 !important;
  }

  .mobile-swiper .swiper-pagination-bullet {
    background: #F58634 !important;
    opacity: 1 !important;
  }

  .mobile-swiper .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #fff !important;
  }

  .center-height {
    height: 95vh !important;
  }

  .mobile-social-icon li a i{
    font-size: 20px !important;
    color: #48bd99;
  }

  .offcanvas__social ul {
    display: block !important;
  }

  .offcanvas__contact ul i {
    color: #44B896;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 15px;
  }

  .sub-text {
    font-size: 17px !important;
    font-weight: 500 !important;
  }

  .inner-sub-menu {
    font-size: 16px !important;
  }

  .mobile-social-icon li a  {
    justify-content: start !important;
    gap: 10px;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    border-top: 0;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
    border-bottom: 0 !important;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav > ul > li:last-child > a {
    border-bottom: 0;
  }

  .offcanvas__close {
    right: 2px !important;
    top: 7px !important;
  }

  .mobile-social-icon {
    display: flex !important;
    gap: 10px;
    padding-left: 15px !important;
  }

  .mobile-social-icon li {
    height: 30px !important;
    width: 30px !important;
    border-radius: 50%;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }

  .mobile-social-icon li a {
    padding: 0 !important;
    color: #F58634 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
  }

  .mobile-social-icon li:hover {
    background:#F58634 !important;
  }

  .mobile-social-icon li:hover a {
    color:#ffffff !important;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    height: 21px !important;
  }

  .mobile-swiper .swiper-wrapper {
    margin-bottom: 0px !important;
  }

  .mobile-swiper .swiper-horizontal > .swiper-pagination-bullets, 
.mobile-swiper .swiper-pagination-bullets.swiper-pagination-horizontal, 
.mobile-swiper .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0 !important;
  }

  .circle-button.contact-us-roation .arrow {
    top: 43%;
    left: 43%;
  }

  .sumanas-logo img {
    width: 65px;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    font-size: 25px !important;
  }

  .bottom-space {
    padding-bottom: 30px !important;
  }

  /* ------about us page start ------- */

  .normal-img,
.hover-img {
    width: 100%;
  }

  .about-img-section {
    height: 450px;
    width: 100% ;
  }

  .time-line-next-btn {
    height: 30px !important;
    width: 30px !important;
    top: 64px !important;
  }

  .our-timeline .swiper-button-disabled {
    height: 30px !important;
    width: 30px !important;
  }

  .our-timeline .swiper-button-next.swiper-button-disabled,
.our-timeline .swiper-button-next  {
    right: 20%;
    left: unset;
  }

  .our-timeline .swiper-button-prev.swiper-button-disabled,
.our-timeline .swiper-button-prev {
    left: 20%;
    right: unset;
  }

  .our-timeline .swiper-button-next::after, 
.our-timeline .swiper-button-prev::after {
    font-size: 15px !important;
  }

  .our-timeline .swiper-horizontal > .swiper-pagination-bullets,
.our-timeline .swiper-pagination-bullets.swiper-pagination-horizontal, 
.our-timeline .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -70px;
    left: 0;
    width: 100%;
  }

  .sliding-background {
    height: 270px;
    background-size: 12%;
    /* width: 100%; */
  }

  .team-members > .person-img{
    width: 100%;
  }

  .founder-block > .savy-box{
    width: 100%;
  }

  /* ---- career page start ----- */

  .benefits .swiper-slide {
    margin-top: 0 !important;
    margin-bottom: 25px;
  }

  /* ---contact us page start */

  .map-section iframe {
    height: 280px !important;
  }

  /* ---contact us page end */

  /* ---- career page start ----- */

  .life-at-sumanas .gallery-image {
    /* grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 180px;
  gap: 20px 15px; */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 100px;
    gap: 20px 15px;
  }

  .headline-text {
    margin-bottom: 1rem;
    font-size: 30px;
    line-height: 22px;
  }

  .life-at-sumanas .gallery-heading, .gallery-image{
    padding-left: 15px;
    padding-right: 15px;
  }

  .our-benefits {
    height: auto;
  }

  .our-benefits .swiper-slide:nth-child(even) .content-block{
    --tw-bg-opacity: 1;
    background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(even) .benefit-count{
    --tw-text-opacity: 1;
    color: rgb(255 245 238 / var(--tw-text-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(odd) .content-block{
    --tw-bg-opacity: 1;
    background-color: rgb(0 88 58 / var(--tw-bg-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(odd) .benefit-count{
    --tw-text-opacity: 1;
    color: rgb(0 88 58 / var(--tw-text-opacity, 1));
  }

  .mobile-social-icon{
    padding-left: 0 !important;
  }

  ul.mobile-social-icon{
    padding-left: 15px !important;
  }

  /* ----stech lab start ---- */

  #stech-testimonial-1 .owl-prev, 
#stech-testimonial-1 .owl-next {
    top: 20px !important;
  }

  .stech-testimonial .owl-prev, 
.stech-testimonial .owl-next {
    height: 35px;
    width: 35px;
  }

  #stech-testimonial-1 .owl-prev, 
#stech-testimonial-1 .owl-next {
    top: 280px !important;
    display:none;
  }

  #stech-testimonial-1 .owl-prev {
    left: 40px;
  }

  #stech-testimonial-1 .owl-next {
    right: 40px !important;
  }

  #stech-testimonial-1  .owl-theme .owl-dots {
    margin-top: 39px;
  }

  .stech-testimonial .owl-prev i, .stech-testimonial .owl-next i {
    font-size: 16px;
    margin-top: 5px !important;
  }

  .stech-testimonial .owl-theme .owl-dots .owl-dot span {
    width: 15px;
    height: 3px;
  }

  /* ----stech lab end ---- */

  /* ---------------technologies detail page start ---- */

  .sacs-img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position:top;
       object-position:top;
  }

  /* ----- service detail page start ------------ */

  .grey-box {
    min-height: 150px ;
  }

  .boxes {
    min-height: 196px;
  }

  .horizontal-line::before {
    content: unset;
  }

  /* ---stecch detail page start ----- */

  .img-width-1,
  .img-width-2 {
    width:95% !important;
  }

  .tech-benefits {
    flex-direction: column !important;
  }

  .java-tech-benefits.tech-benefits li {
    width: 100% !important;
  }

  .java-section {
    background-size: 35%,cover;
  }

  /* ------------ruby services section start ----------- */

  .tech-benefits.ruby-services,
  .tech-benefits-ruby {
    flex-direction: row !important;
    flex-wrap:wrap;
  }

  .ruby-services.tech-benefits li {
    width: 100% !important;
  }

  .tech-benefits li {
    width: 100% !important;
  }

  .java-tech-benefits.tech-benefits {
    gap: 30px;
  }

  .tech-benefits .tech-benefits-list span {
    width: 50px;
    height: 50px;
  }

  .bar-shape {
    width: 140px;
  }

  .icon {
    width: 120px;
    height: 120px;
  }

  .ai-img {
    width:60px
  }

  /*--------------block chain start -------------  */

  .block-chain-size {
    width: 40px;
    height: 40px;
  }

  .top-img:hover::before {
    opacity: 0;
  }

  #block-chain-1 .owl-nav .owl-prev {
    left: 37%;
    right: unset;
  }

  #block-chain-1 .owl-nav .owl-next {
    left: 47%;
    right: unset;
  }

  .solution-icon-size {
    width: 50px;
    height: 50px;
  }

  #block-chain-1.owl-theme .owl-nav {
    position: absolute;
    margin-top: 6.5rem;
  }

  #block-chain-1.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 30px;
  }

  #block-chain-1.owl-theme .owl-dots .owl-dot.active span {
    background-color: #F58634 !important;
  }

  #block-chain-1.owl-theme .owl-dots .owl-dot span {
    background-color: rgb(186, 186, 186) !important;
  }

  /*--------------block chain end -------------  */

  /* -------------python start ---------------- */

  .python-section::after {
    height: 200px;
    width: 290px;
  }

  .vector-bg {
    background-image:none;
  }

  /* -------------python end ----------------- */

  /* ---portfolio start ---- */

  .portfolio-list-item .quote-content .quote-img {
    top: 0;
    width: 70px;
  }

  .portfolio-list-item .quote-content {
    padding-left: 20px;
    padding-top: 10px;
    margin-bottom: 25px;
  }

  .screen-text {
    font-size: 87px;
    margin-left: 0;
  }

  .portfolio-testimonial .swiper-pagination {
    bottom: -40px !important;
    margin-bottom: 30px;
  }

  .next-bg,
.prev-bg {
    width: 100%;
  }

  .wave-line::before {
    content: unset;
  }

  .overview-icon-size {
    width: 45px;
    height: 45px;
  }

  .solution-content::before {
    content: unset;
  }

  .light-green-box::after {
    left: 91px;
    top: 30px;
  }

  /* ---portfolio end ---- */

  .technologies-list-block-portfolio, .technologies-list-item-portfolio {
    width: 90px !important;
    height: 90px !important;
  }

  .portfolio-stats-number::before {
    content: unset;
  }

  .portfolio-screens-1-swiper .swiper-button-prev {
    left: 6%;
  }

  .portfolio-screens-1-swiper .swiper-button-next {
    right: 6%;
  }

  .portfolio-screen-swiper-slide {
    border-radius: 15px;
  }

  .portfolio-screen-swiper-slide img {
    border-radius: 15px;
  }

  .portfolio-screen-swiper-slide {
    border-radius: 15px;
  }

  .effect-text {
    opacity: 1;
  }

  .hero-grid-content {
    position: unset;
  }

  .effect-target {
    transform: unset;
  }

  .technologies-list-item .tech-img {
    height: 50px;
  }

  /* ---stechlab swiper home -- */

  .stech-section .swiper {
    padding-bottom: 40px;
  }

  .e-com.our-timeline  .swiper-pagination-bullet {
    background: #FFF;
    opacity: 1;
  }

  .e-com.our-timeline .bullet{
    bottom: 0 !important;
  }
}

/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) and (max-width: 767.98px) {
  .slider .slide-progress .swiper-pagination {
    width: 110px;
  }

  .slider .slide-progress{
    width: 200px;
    left: 1.5rem;
    margin-left: 0;
  }

  /* Design changes start */

  /* .headline-text {
    margin-bottom: 5px;
    font-size: 60px;
    line-height: 54px;
  } */

  /* Design changes end */

  .rotation-circle {
    left: 50% !important;
  }

  .owl-theme .owl-dots {
    margin-top: 28px;
    text-align: center !important;
    margin-left: 0 !important;
  }

  .owl-theme .owl-nav {
    margin-top: 1.5rem;
  }

  .owl-carousel .owl-nav button.owl-next {
    right: 30%;
    top: 0%;
  }

  .owl-carousel .owl-nav button.owl-prev {
    left: 30%;
    top: 0px;
  }

  .owl-theme .owl-nav {
    width: 100%;
  }

  .swiper-wrapper {
    width: 100% !important;
  }

  .mobile-swiper .swiper-button-next,  .mobile-swiper .swiper-button-prev {
    top: 40%;
  }

  .mobile-swiper {
    width: 100%;
    height: 100%;
  }

  .mobile-swiper .swiper-button-next, 
  .mobile-swiper .swiper-button-prev {
    width: 30px  !important;
    height: 30px !important;
    color: #F58634 !important;
  }

  .mobile-swiper .swiper-button-next::after, 
  .mobile-swiper .swiper-button-prev::after {
    font-size: 30px !important;
  }

  .mobile-swiper .swiper-horizontal > .swiper-pagination-progressbar,
.mobile-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal, 
.mobile-swiper .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, 
.mobile-swiper .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    bottom: 0 !important;
    background: none !important;
    top: unset !important;
    padding: 21px !important;
    z-index: z;
    position: relative;
    padding-top: 100px;
    margin-top: 10px !important;
  }

  .mobile-swiper .swiper-horizontal > .swiper-pagination-bullets, 
.mobile-swiper .swiper-pagination-bullets.swiper-pagination-horizontal, 
.mobile-swiper .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0 !important;
  }

  .mobile-swiper .swiper-pagination-bullet {
    background: #F58634 !important;
    opacity: 1 !important;
  }

  .mobile-swiper .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #fff !important;
  }

  .center-height {
    height: 100vh !important;
  }

  .offcanvas__social ul {
    display: block !important;
  }

  .offcanvas__contact ul i {
    color: #44B896;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li a {
    padding-left: 15px;
  }

  .sub-text {
    font-size: 18px !important;
    font-weight: 500 !important;
  }

  .inner-sub-menu  {
    font-size: 15px !important;
  }

  .mobile-social-icon li a  {
    justify-content: start !important;
    gap: 10px;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    border-top: 0;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li li:last-child {
    border-bottom: 0 !important;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav > ul > li:last-child > a {
    border-bottom: 0;
  }

  .mobile-social-icon {
    display: flex !important;
    gap: 10px;
    padding-left: 15px !important;
  }

  .mobile-social-icon li {
    height: 30px !important;
    width: 30px !important;
    border-radius: 50%;
    background: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }

  .mobile-social-icon li a {
    padding: 0 !important;
    color: #F58634 !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
  }

  .mobile-social-icon li:hover {
    background:#F58634 !important;
  }

  .mobile-social-icon li:hover a {
    color:#ffffff !important;
  }

  .offcanvas__close {
    right: 2px !important;
    top: 7px !important;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    height: 19px !important;
  }

  .mobile-swiper .swiper-wrapper {
    margin-bottom: 0px !important;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand {
    font-size: 25px !important;
  }

  .bottom-space {
    padding-bottom: 30px !important;
  }

  /* ------ mobile nav mmmenu start ---- */

  .mobile-nav-menu-bg {
    background: #222222;
  }

  .mobile-nav-menu-bg li a {
    color: #ffffff;
  }

  /* ------about us page start ------- */

  .normal-img,
.hover-img {
    width: 245px !important;
  }

  .about-img-section {
    width: 100%;
    height: 450px;
  }

  /* .time-line-next-btn {
	top: -240px !important;
	height: 40px !important;
	width: 40px !important;
}
.our-timeline .swiper-button-disabled {
	height: 40px !important;
	width: 40px !important;
} */

  .time-line-next-btn {
    height: 40px !important;
    width: 40px !important;
    top: -10px !important;
  }

  .our-timeline .swiper-button-disabled {
    height: 40px !important;
    width: 40px !important;
  }

  /* .our-timeline .swiper-button-disabled {
	height: 40px !important;
	width: 40px !important;
} */

  .our-timeline .swiper-button-next.swiper-button-disabled,
.our-timeline .swiper-button-next  {
    right: 25%;
    left: unset;
  }

  .our-timeline .swiper-button-prev.swiper-button-disabled,
.our-timeline .swiper-button-prev {
    left: 25%;
    right: unset;
  }

  .our-timeline .swiper-horizontal > .swiper-pagination-bullets, 
.our-timeline .swiper-pagination-bullets.swiper-pagination-horizontal, 
.our-timeline .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0px;
  }

  .sliding-background {
    height: 270px;
    background-size: 12%;
  }

  .team-members > .person-img{
    width: 48%;
  }

  .founder-block > .savy-box{
    width: 100%;
  }

  /* ---- career page start ----- */

  .benefits .swiper-slide {
    margin-top: 0 !important;
    margin-bottom: 25px;
  }

  /* ---- career page end ----- */

  /* ---contact us page start */

  .map-section iframe {
    height: 300px !important;
  }

  /* ---contact us page end */

  /* ---- career page start ----- */

  .life-at-sumanas .gallery-image {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 150px;
    gap: 20px 15px;
  }

  .headline-text {
    margin-bottom: 1.5rem;
    font-size: 45px;
    line-height: 35px;
  }

  .life-at-sumanas .gallery-heading, .gallery-image{
    padding-left: 15px;
    padding-right: 15px;
  }

  .our-benefits {
    height: auto;
  }

  .our-benefits .swiper-slide:nth-child(even) .content-block{
    --tw-bg-opacity: 1;
    background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(even) .benefit-count{
    --tw-text-opacity: 1;
    color: rgb(255 245 238 / var(--tw-text-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(odd) .content-block{
    --tw-bg-opacity: 1;
    background-color: rgb(0 88 58 / var(--tw-bg-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(odd) .benefit-count{
    --tw-text-opacity: 1;
    color: rgb(0 88 58 / var(--tw-text-opacity, 1));
  }

  .mobile-social-icon{
    padding-left: 0 !important;
  }

  ul.mobile-social-icon{
    padding-left: 15px !important;
  }

  .mobile-social-icon li a i{
    font-size: 20px !important;
    color: #48bd99;
  }

  /* ----stech lab start ---- */

  #stech-testimonial-1 .owl-prev, 
#stech-testimonial-1 .owl-next {
    top: 20px !important;
  }

  .stech-testimonial .owl-prev, 
.stech-testimonial .owl-next {
    height: 40px;
    width: 40px;
  }

  #stech-testimonial-1 .owl-prev, 
#stech-testimonial-1 .owl-next {
    top: 190px !important;
  }

  #stech-testimonial-1 .owl-prev {
    left: 90px;
  }

  #stech-testimonial-1 .owl-next {
    right: 90px !important;
  }

  #stech-testimonial-1  .owl-theme .owl-dots {
    margin-top: 39px;
  }

  .stech-testimonial .owl-prev i, .stech-testimonial .owl-next i {
    font-size: 20px;
    margin-top: 4px !important;
  }

  /* ----stech lab end ---- */

  /* ---------------technologies detail page start ---- */

  .sacs-img {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position:top;
       object-position:top;
  }

  .stech-product-2.owl-carousel .owl-nav button.owl-next {
    right: 38% !important;
  }

  .stech-product-2 .owl-nav {
    margin-top: 28px !important;
    margin-bottom: 60px !important;
  }

  /* ----- service detail page start ------------ */

  .grey-box {
    min-height: 210px ;
  }

  .boxes {
    min-height: 292px;
  }

  .horizontal-line::before {
    content: unset;
  }

  /* ---stecch detail page start ----- */

  .img-width-1,
  .img-width-2 {
    width:500px !important;
  }

  .tech-benefits {
    flex-direction: column !important;
  }

  .tech-benefits li {
    width: 100% !important;
  }

  .java-section {
    background-size: 30%,cover;
  }

  /* ------------ruby services section start ----------- */

  .tech-benefits.ruby-services,
  .tech-benefits-ruby {
    flex-direction: row !important;
    flex-wrap:wrap;
  }

  .ruby-services.tech-benefits li {
    width: 48% !important;
  }

  .java-tech-benefits.tech-benefits li {
    width: 100% !important;
  }

  .tech-benefits-ruby li {
    width: 48% !important;
  }

  .java-tech-benefits.tech-benefits {
    gap: 30px;
  }

  .bar-shape {
    width: 140px;
  }

  .icon {
    width: 120px;
    height: 120px;
  }

  .ai-img {
    width:60px
  }

  /*--------------block chain start -------------  */

  .block-chain-size {
    width: 40px;
    height: 40px;
  }

  .top-img:hover::before {
    opacity: 0;
  }

  #block-chain-1 .owl-nav .owl-prev {
    left: 37%;
    right: unset;
  }

  #block-chain-1 .owl-nav .owl-next {
    left: 47%;
    right: unset;
  }

  .solution-icon-size {
    width: 50px;
    height: 50px;
  }

  #block-chain-1.owl-theme .owl-nav {
    position: absolute;
    margin-top: 6.5rem;
  }

  #block-chain-1.owl-theme .owl-dots .owl-dot span {
    background-color: rgb(186, 186, 186) !important;
  }

  #block-chain-1.owl-theme .owl-dots .owl-dot.active span {
    background-color: #F58634 !important;
  }

  /*--------------block chain end -------------  */

  /* -------------python start ----------------- */

  .python-section::after {
    height: 330px;
    width: 320px;
  }

  .vector-bg {
    background-image:none;
  }

  /* -------------python end ------------------- */

  /* ---portfolio start ---- */

  .portfolio-list-item .quote-content .quote-img {
    top: 0;
    width: 70px;
  }

  .portfolio-list-item .quote-content {
    padding-left: 20px;
    padding-top: 10px;
  }

  .screen-text {
    font-size: 87px;
    margin-left: 0;
  }

  .portfolio-testimonial .swiper-pagination {
    bottom: -40px !important;
    margin-bottom: 15px;
  }

  .overview-icon-size {
    width: 45px;
    height: 45px;
  }

  .solution-content::before {
    content: unset;
  }

  .light-green-box::after {
    left: 91px;
    top: 30px;
  }

  .portfolio-screen-swiper-slide img {
    border-radius: 15px;
  }

  .portfolio-screen-swiper-slide {
    border-radius: 15px;
  }

  .effect-text {
    opacity: 1;
  }

  .hero-grid-content {
    position: unset;
  }

  .effect-target {
    transform: unset;
  }

  /* ---portfolio end ---- */

  /* ---stechlab swiper home -- */

  .stech-section .swiper {
    padding-bottom: 40px;
  }

  /* ---e com start --- */

  .e-com.our-timeline .swiper-button-prev,
.e-com.our-timeline .swiper-button-next {
    top: 0 !important;
  }

  .e-com.our-timeline  .swiper-pagination-bullet {
    background: #FFF;
    opacity: 1;
  }
}

/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) and (max-width: 991.98px) {
  .slider .slide-progress .swiper-pagination {
    width: 110px;
  }

  .slider .slide-progress{
    width: 200px;
  }

  /* Design changes start */

  /* .headline-text {
    margin-bottom: 10px;
    font-size: 80px;
    line-height: 68px;
  } */

  /* Design changes end */

  .rotation-circle {
    left: 50% !important;
  }

  .works .panel .item {
    width: 870px;
  }

  .owl-theme .owl-dots {
    margin-top: 28px;
    text-align: center !important;
    margin-left: 0 !important;
  }

  .owl-theme .owl-nav {
    margin-top: 1.5rem;
  }

  .owl-carousel .owl-nav button.owl-next {
    right: 35%;
    top: 0%;
  }

  .owl-carousel .owl-nav button.owl-prev {
    left: 35%;
    top: 0px;
  }

  .owl-theme .owl-nav {
    width: 100%;
  }

  /* ---------- swiper slider start ------------- */

  .mobile-swiper .swiper-horizontal > .swiper-pagination-progressbar,
.mobile-swiper .swiper-pagination-progressbar.swiper-pagination-horizontal, 
.mobile-swiper .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, 
.mobile-swiper .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    bottom: 0 !important;
    background: none !important;
    top: unset !important;
    padding: 21px !important;
    position: relative;
    padding-top: 100px;
    margin-top: 10px !important;
  }

  .mobile-swiper .swiper-button-next, 
.mobile-swiper .swiper-button-prev {
    width: 30px  !important;
    height: 30px !important;
    color: #F58634 !important;
  }

  .mobile-swiper .swiper-horizontal > .swiper-pagination-bullets, 
.mobile-swiper .swiper-pagination-bullets.swiper-pagination-horizontal, 
.mobile-swiper .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0 !important;
  }

  .mobile-swiper .swiper-pagination-bullet {
    background: #F58634 !important;
    opacity: 1 !important;
  }

  .mobile-swiper .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #fff !important;
  }

  .mobile-swiper .swiper-wrapper {
    margin-bottom: 50px !important;
  }

  .swiper-button-next, .swiper-button-prev {
    top: 40% !important;
  }

  /* ---------- swiper slider end ------------- */

  .sub-text {
    font-size: 18px !important;
    font-weight: 500 !important;
  }

  .inner-sub-menu-heading {
    font-size: 15px !important;
  }

  .center-height {
    height: calc(100vh - 115px) !important;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    background: #222;
  }

  .offcanvas__contact br {
    display: none !important;
  }

  /* ------about us page start ------- */

  .img-line {
    top: 60px;
    height: 210px;
  }

  .normal-img,
.hover-img {
    width: 300px !important;
  }

  .about-img-section {
    width: 100%;
    height: 560px;
  }

  /* .time-line-next-btn {
  top: -350px !important;
  height: 45px !important;
	width: 45px !important;
}
.our-timeline .swiper-button-disabled {
	height: 45px !important;
	width: 45px !important;
} */

  .time-line-next-btn {
    height: 40px !important;
    width: 40px !important;
    top: -10px !important;
  }

  .our-timeline .swiper-button-disabled {
    height: 40px !important;
    width: 40px !important;
  }

  /* .our-timeline .swiper-button-disabled {
	height: 40px !important;
	width: 40px !important;
} */

  .our-timeline .swiper-button-next.swiper-button-disabled,
.our-timeline .swiper-button-next  {
    right: 25%;
    left: unset;
  }

  .our-timeline .swiper-button-prev.swiper-button-disabled,
.our-timeline .swiper-button-prev {
    left: 25%;
    right: unset;
  }

  .our-timeline .swiper-horizontal > .swiper-pagination-bullets, 
.our-timeline .swiper-pagination-bullets.swiper-pagination-horizontal, 
.our-timeline .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0px !important;
  }

  .sliding-background {
    height: 290px;
    background-size: 13%;
  }

  .team-members > .person-img{
    width: 48%;
  }

  .founder-block > .savy-box{
    width: 100%;
  }

  /* ---- career page start ----- */

  .benefits .swiper-slide {
    margin-top: 0 !important;
    margin-bottom: 25px;
  }

  .map-section iframe {
    height: 300px !important;
  }

  /* ---- career page start ----- */

  .life-at-sumanas .gallery-image {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 190px;
    gap: 20px 15px;
  }

  .headline-text {
    margin-bottom: 1rem;
    font-size: 50px;
    line-height: 40px;
  }

  .life-at-sumanas .gallery-heading, .gallery-image{
    padding-left: 15px;
    padding-right: 15px;
  }

  .our-benefits {
    height: auto;
  }

  .our-benefits .swiper-slide:nth-child(even) .content-block{
    --tw-bg-opacity: 1;
    background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(even) .benefit-count{
    --tw-text-opacity: 1;
    color: rgb(255 245 238 / var(--tw-text-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(odd) .content-block{
    --tw-bg-opacity: 1;
    background-color: rgb(0 88 58 / var(--tw-bg-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(odd) .benefit-count{
    --tw-text-opacity: 1;
    color: rgb(0 88 58 / var(--tw-text-opacity, 1));
  }

  /* ----stech lab start ---- */

  #stech-testimonial-1 .owl-prev,
#stech-testimonial-1 .owl-next {
    top: 20px !important;
  }

  .stech-testimonial .owl-prev,
.stech-testimonial .owl-next {
    height: 45px;
    width: 45px;
  }

  #stech-testimonial-1 .owl-prev,
#stech-testimonial-1 .owl-next {
    top: 188px !important;
  }

  #stech-testimonial-1 .owl-prev {
    left: 160px;
  }

  #stech-testimonial-1 .owl-next {
    right: 160px !important;
  }

  #stech-testimonial-1  .owl-theme .owl-dots {
    margin-top: 39px;
  }

  .stech-product-2 .owl-nav {
    margin-top: 40px !important;
  }

  /* ----- service detail page start ------------ */

  .grey-box {
    min-height: 185px ;
  }

  .boxes {
    min-height: 269px;
  }

  .horizontal-line::before {
    content: unset;
  }

  .img-width-2 {
    width:98% !important;
  }

  .tech-benefits {
    flex-direction: column !important;
  }

  .tech-benefits li {
    width: 100% !important;
  }

  .java-section {
    background-size: 30%,cover;
  }

  /* ------------ruby services section start ----------- */

  .tech-benefits.ruby-services,
  .tech-benefits-ruby {
    flex-direction: row !important;
    flex-wrap:wrap;
  }

  .ruby-services.tech-benefits li {
    width: 48% !important;
  }

  .java-tech-benefits.tech-benefits li  {
    width: 100% !important;
  }

  .tech-benefits-ruby li {
    width: 45% !important;
  }

  .java-tech-benefits.tech-benefits {
    gap: 20px;
  }

  .width-3 {
    width:47%;
  }

  /* ------------ruby services section end ----------- */

  /*--------------block chain start -------------  */

  .block-chain-size {
    width: 40px;
    height: 40px;
  }

  .top-img:hover::before {
    opacity: 0;
  }

  /*--------------block chain end -------------  */

  /*--------------block chain start -------------  */

  .block-chain-size {
    width: 50px;
    height: 50px;
  }

  .top-img:hover::before {
    opacity: 0;
  }

  #block-chain-1 .owl-nav .owl-prev {
    left: 40%;
    right: unset;
  }

  #block-chain-1 .owl-nav .owl-next {
    left: 47%;
    right: unset;
  }

  .solution-icon-size {
    width: 50px;
    height: 50px;
  }

  #block-chain-1.owl-theme .owl-nav {
    position: absolute;
    margin-top: 6.5rem;
  }

  /*--------------block chain end -------------  */

  .vector-bg {
    background-image:none;
  }

  /* ---portfolio start ---- */

  .portfolio-list-item .quote-content .quote-img {
    top: 0;
    width: 70px;
  }

  .portfolio-list-item .quote-content {
    padding-left: 20px;
    padding-top: 20px;
  }

  .screen-text {
    font-size: 100px;
    margin-left: 201px;
  }

  .overview-icon-size {
    width: 45px;
    height: 45px;
  }

  .solution-content::before {
    content: unset;
  }

  .light-green-box::after {
    left: 91px;
    top: 30px;
  }

  /* ---portfolio end ---- */

  .portfolio-screens-1-swiper .swiper-button-prev {
    left: 8%;
  }

  .portfolio-screens-1-swiper .swiper-button-next {
    right: 8%;
  }

  .portfolio-screen-swiper-slide img {
    border-radius: 15px;
  }

  .portfolio-screen-swiper-slide {
    border-radius: 15px;
  }

  .effect-text {
    opacity: 1;
  }

  .hero-grid-content {
    position: unset;
  }

  .effect-target {
    transform: unset;
  }

  /* -----home stechlab start ----  */

  .stech-section .swiper {
    padding-bottom: 0;
  }

  /* ---e com start --- */

  .e-com.our-timeline .swiper-button-prev,
.e-com.our-timeline .swiper-button-next,
.e-com.our-timeline .swiper-button-prev.swiper-button-disabled {
    top: 0 !important;
  }

  /* .e-com.our-timeline .swiper-button-prev.swiper-button-disabled, 
.e-com.our-timeline .swiper-button-prev {
	right: 70px !important;
	top: -310px !important;
	left: auto !important;
} */
}

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Design changes start */

  .headline-text {
    margin-bottom: 2rem;
    font-size: 60px;
    line-height: 45px;
  }

  /* Design changes end */

  .rotation-circle {
    left: 50% !important;
  }

  .works .panel .item {
    width: 750px;
    margin-left: 40px;
  }

  .owl-theme .owl-dots {
    margin-top: 28px;
  }

  .owl-theme .owl-nav {
    margin-top: 1.5rem;
  }

  /* ------- about us page start ----- */

  .img-line {
    top: 140px;
    height: 230px;
  }

  /* .time-line-next-btn {
    top: -350px !important;
  } */

  .our-timeline .swiper-button-next {
    top: -380px !important;
  }

  .our-timeline .swiper-button-prev {
    right: 100px !important;
    top: -380px !important;
    left: auto !important;
  }

  .our-timeline .swiper-horizontal > .swiper-pagination-bullets, 
.our-timeline .swiper-pagination-bullets.swiper-pagination-horizontal, 
.our-timeline .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: -20px;
  }

  .sliding-background {
    height: 360px;
    background-size: 16%;
  }

  .team-members > .person-img{
    width: 31%;
  }

  .founder-block > .savy-box{
    width: 100%;
  }

  /* ---- career page start ----- */

  .benefits .swiper-slide {
    margin-top: 0 !important;
    margin-bottom: 25px;
  }

  /* ------ contact us page start ---------*/

  .contact-block {
    padding-left: 99px;
  }

  .map-section iframe {
    height: 500px !important;
  }

  /* --------- services page start ----- */

  .service-box-hover:hover .view-more-btn img {
    margin-left: 0;
  }

  /* ---- career page start ----- */

  .life-at-sumanas .gallery-image {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 190px;
    gap: 20px 15px;
  }

  /* .headline-text {
    margin-bottom: 1.5rem;
    font-size: 75px;
  } */

  .life-at-sumanas .gallery-heading, .gallery-image{
    padding-left: 15px;
    padding-right: 15px;
  }

  .our-benefits {
    height: auto;
  }

  /* --- career page css --- */

  .our-benefits .swiper-slide:nth-child(even) .content-block{
    --tw-bg-opacity: 1;
    background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(even) .benefit-count{
    --tw-text-opacity: 1;
    color: rgb(255 245 238 / var(--tw-text-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(odd) .content-block{
    --tw-bg-opacity: 1;
    background-color: rgb(0 88 58 / var(--tw-bg-opacity, 1));
  }

  .our-benefits .swiper-slide:nth-child(odd) .benefit-count{
    --tw-text-opacity: 1;
    color: rgb(0 88 58 / var(--tw-text-opacity, 1));
  }

  /* ----stech lab start ---- */

  #stech-testimonial-1 .owl-prev, 
  #stech-testimonial-1 .owl-next {
    top: 20px !important;
  }

  .stech-testimonial .owl-prev, .stech-testimonial .owl-next {
    height: 45px;
    width: 45px;
  }

  .stech-testimonial .owl-prev i, 
  .stech-testimonial .owl-next i {
    font-size: 23px;
    margin-top: 2px;
  }

  /* ------stech lab detail page start -------- */

  .stech-module.owl-carousel .owl-nav button.owl-next {
    right: -19px;
  }

  .stech-module-1.owl-carousel .owl-nav button.owl-prev {
    left: -25px !important;
  }

  .stech-product-2 .owl-nav {
    margin-top: 48px !important;
  }

  /* ----- service detail page start ------------ */

  .boxes {
    min-height: 269px;
  }

  .horizontal-line::before {
    content: unset;
  }

  /* -----technologies detail page start ----- */

  .gallery-thumb-img {
    height:250px !important;
  }

  .img-width-2 {
    width:98% !important;
  }

  .tech-benefits {
    gap: 30px;
  }

  .java-section {
    background-size: 30%,cover;
  }

  /* ------------ruby section start----------------- */

  .tech-benefits li {
    width: 100% !important;
  }

  .tech-benefits {
    gap:30px
  }

  .tech-benefits-ruby.tech-benefits li {
    width: 47% !important;
  }

  .ruby-services  .tech-benefits-ruby.tech-benefits li {
    width: 47% !important;
  }

  .tech-benefits.ruby-services {
    flex-direction: row;
    flex-wrap:wrap;
  }

  .ruby-services.tech-benefits li {
    width: 48% !important;
  }

  .width-3 {
    width:47%;
  }

  /* ------------ruby section end----------------- */

  /*--------------block chain start -------------  */

  .block-chain-size {
    width: 50px;
    height: 50px;
  }

  .top-img:hover::before {
    opacity: 0;
  }

  #block-chain-1 .owl-nav .owl-prev {
    left: unset;
    right: 40px;
  }

  #block-chain-1 .owl-nav .owl-next {
    left: unset;
    right: 0;
  }

  #block-chain-1.owl-theme .owl-nav {
    margin-top: 0;
  }

  .solution-icon-size {
    width: 50px;
    height: 50px;
  }

  /*--------------block chain end -------------  */

  /* -------------python start ---------------- */

  .python-section::after {
    height: 290px;
    width: 450px;
  }

  .vector-bg {
    background-image:none;
  }

  /* -------------python end ----------------- */

  /* ---portfolio start ---- */

  .portfolio-rotate.circle-button .rotate-circle svg {
    width: 160px;
  }

  .portfolio-list-item .quote-content {
    padding-left: 10px;
    padding-top: 10px;
  }

  .portfolio-list-item .quote-content .quote-img {
    top: 10px;
    width: 80px;
  }

  .screen-text {
    font-size: 150px;
    margin-left: 221px;
  }

  .solution-content::before {
    content: unset;
  }

  .portfolio-screen-swiper-slide img {
    border-radius: 20px;
  }

  .portfolio-screen-swiper-slide {
    border-radius: 20px;
  }

  /* ---portfolio end ---- */

  /* ---e com start --- */

  .e-com.our-timeline .swiper-button-prev,
.e-com.our-timeline .swiper-button-next {
    top: 0 !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width: 1200px) and (max-width: 1400.98px) {
  /* ------  about us page css start ---------- */

  .img-line {
    top: 300px;
    height: 260px;
  }

  .about-section-2  {
    padding: 50px;
  }

  .founder-block {
    flex-wrap: wrap;
  }

  /* .about-img-section-1 {
      height: 920px;
    } */

  .sliding-background {
    height: 370px;
    background-size: 17%;
  }

  .founder-block > .savy-box{
    width: 100%;
  }

  /* ---- career page start ----- */

  .benefits .swiper-slide {
    margin-top: 0 !important;
    margin-bottom: 25px;
  }

  /* ---- career page start ----- */

  .life-at-sumanas .gallery-image {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); */
    grid-auto-rows: 250px;
    gap: 20px;
  }

  /* .headline-text {
        margin-bottom: 1.5rem;
        font-size: 75px;
      } */

  .life-at-sumanas .gallery-image .gallery-heading{
    padding-left: 10%;
  }

  .our-benefits {
    height: auto;
  }

  /* -------- stech lab detail page start ------ */

  .stech-module.owl-carousel .owl-nav button.owl-next {
    right: -20px;
  }

  .stech-module-1.owl-carousel .owl-nav button.owl-prev {
    left: -25px !important;
  }

  /* ----- service detail page start ------------ */

  .boxes {
    min-height: 326px;
  }

  /* -----technologies detail page start ----- */

  .gallery-thumb-img {
    height:330px !important;
  }

  .img-width-2 {
    width:99% !important;
  }

  .horizontal-line::before {
    top: 35%;
  }

  .java-section {
    background-size: 25%,cover;
  }

  .tech-benefits li {
    width: 100% !important;
  }

  .tech-benefits {
    gap:30px
  }

  .tech-benefits-ruby.tech-benefits li {
    width: 47% !important;
  }

  .ruby-services .tech-benefits-ruby.tech-benefits li {
    width: 47% !important;
  }

  .java-tech-benefits.tech-benefits li, .tech-benefits-ruby li {
    width: 100% !important;
  }

  .block-chain-size {
    width: 50px;
    height: 50px;
  }

  /*----portfolio start ---- */

  .screen-text {
    font-size: 194px;
    margin-left: 280px;
    margin-top: -10px;
  }

  .solution-content::before {
    background-size: 50%;
  }

  .portfolio-banner {
    width: 75% !important;
  }

  .main-img img {
    width: 1230px;
  }

  .banner-img-2 img {
    width: 560px;
  }

  .folio-img-2 {
    height: 450px !important;
    top: 163px !important;
  }

  /* e commerce landing page ---- */

  .e-com-banner {
    padding-left: 80px;
  }

  .e-com-img-width {
    width: 100% !important;
  }
}

@media (min-width: 1400px) and (max-width: 1580px){
  /* ------stech lab start ------- */

  .banner-height {
    top: 141px !important;
  }

  .banner-height h2 {
    font-size: 65px;
  }

  .banner-height p {
    font-size: 20px;
  }

  .banner-height .lab-img img {
    width:730px
  }

  .stech-badge {
    font-size:15px;
  }

  .spacing {
    margin-bottom:30px !important;
  }

  .slide-height {
    height:830px !important;
  }

  .portfolio-banner {
    width: 75% !important;
  }

  .main-img img {
    width: 1180px;
  }

  .folio-img {
    width: 100% !important;
  }

  .folio-img-2 {
    height: 450px !important;
    top: 163px !important;
  }

  .banner-height-1 img {
    width:900px !important;
  }

  .hide-img {
    display:none !important;
  }

  /* ----e commerce page start---- */

  .e-commerce-page .swiper-slide .e-com-banner {
    top: 170px;
  }

  .e-commerce-page .e-com-img-width {
    width: 900px;
  }

  .left-margin {
    margin-left: 18% !important;
  }

  .e-commerce-page p {
    margin-bottom: 30px !important;
  }

  /* ----stech swiper start --- */

  .img-width {
    width: 700px !important;
  }

  /* ----e com ---- */

  .benefits1.swiper {
    margin-left: 5% !important;
  }

  .e-com.our-timeline .swiper-button-prev,
    .e-com.our-timeline .swiper-button-next {
    top: 0 !important;
  }

  .sub-menus ul {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1401px) and (max-width: 1600px) {
  .panel .item .img img{
    width: 780px !important;
  }

  .img-width {
    width: 700px !important;
  }

  /* ---- career page start ----- */

  /* .benefits .swiper-slide {
      margin-top: 0 !important;
      margin-bottom: 25px;
    } */

  /* ---- career page start ----- */

  .life-at-sumanas .gallery-image {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    grid-auto-rows: 250px;
    gap: 20px;
  }

  /* .headline-text {
      margin-bottom: 1.5rem;
      font-size: 75px;
    } */

  .life-at-sumanas .gallery-image .gallery-heading{
    padding-left: 10%;
  }

  /* ------stech lab start ------- */

  .banner-height {
    top:160px !important;
  }

  .banner-height h2 {
    font-size: 65px;
  }

  .banner-height p {
    font-size:22px;
  }

  .banner-height .lab-img img {
    width:830px
  }

  .service-bebefits::before {
    width: 41%;
  }

  .our-benefits {
    height: 560px;
  }

  .java-section {
    background-size: 30%,cover;
  }

  /* --portfolio start-- */

  .solution-content::before {
    background-size: 50%;
  }

  /* --portfolio end-- */

  .main-img img {
    width: 1260px;
  }

  .main-img {
    left: 10%;
  }

  .heading-top {
    top: 60% !important;
  }

  .portfolio-technologies .swiper-wrapper {
    justify-content: center !important;
  }

  .heading-container {
    padding-right: 0 !important;
  }

  .banner-img-2 {
    right:0 !important;
  }

  .banner-img-2 img {
    width: 750px;
  }

  /* ----e commerce page start---- */

  .e-commerce-page .swiper-slide .e-com-banner {
    top: 170px;
  }

  .e-commerce-page .e-com-img-width {
    width: 900px;
  }

  .left-margin {
    margin-left: 18% !important;
  }

  .e-commerce-page p {
    margin-bottom: 30px !important;
  }
}

@media (min-width: 1500px) and (max-width: 1600.98px) {
  .our-benefits {
    height: 1080px;
  }

  .folio-img-2 {
    height: 475px !important;
    top: 130px !important;
  }

  /* -----menu fixes start --- */

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a,
      .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding: 0px 0 0px 10px !important;
  }
}

@media (min-width: 1600px) and (max-width: 1679.98px) {
  .life-at-sumanas .gallery-image {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    grid-auto-rows: 220px;
  }

  /* .headline-text {
    margin-bottom: 1.5rem;
    font-size: 90px;
  } */

  /* ------stech lab start ------- */

  .banner-height {
    top:160px !important;
  }

  .banner-height h2 {
    font-size:75px;
  }

  .banner-height p {
    font-size:22px;
  }

  .banner-height .lab-img img {
    width:900px
  }

  /* ------technologies detail page start ------ */

  .service-bebefits::before {
    width: 40%;
  }

  .folio-img {
    width: 100% !important;
  }

  .folio-img-2 {
    height: 500px !important;
    top: 120px !important;
  }

  .main-img-2 {
    width: 1350px !important;
  }

  .solution-content::before {
    background-size: 50%;
  }

  .heading-top {
    top: 55% !important;
  }

  .banner-img-2 {
    right:0 !important;
  }

  .banner-img-2 img {
    width: 750px;
  }

  .heading-container {
    padding-right: 0 !important;
  }

  /* -----menu fixes start --- */

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a,
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding: 0px 0 0px 20px !important;
  }
}

@media (min-width: 1680px) and (max-width: 1780.98px) {
  /* .headline-text {
    margin-bottom: 2.5rem;
    font-size: 100px;
  } */

  .service-bebefits::before {
    width: 37%;
  }

  .folio-img-2 {
    height: 520px !important;
    top: 115px !important;
  }

  .solution-content::before {
    background-size: 50%;
  }

  .heading-top {
    top: 50% !important;
  }

  .banner-img-2 {
    right:0 !important;
  }

  .banner-img-2 img {
    width: 750px;
  }

  .heading-container {
    padding-right: 0 !important;
  }

  /* -----menu fixes start --- */

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a,
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    padding: 0px 0 0px 20px !important;
  }
}

@media (min-width: 1781px) and (max-width:1849px) {
  .service-bebefits::before {
    width: 47%;
  }

  .folio-img-2 {
    height: 520px !important;
    top: 115px !important;
  }
}

@media (min-width: 1680px) and (max-width: 1800px) {
  /* .headline-text {
    font-size: 100px;
} */

  /* ------stech lab start ------- */

  .banner-height {
    top:160px !important;
  }

  .banner-height h2 {
    font-size:75px;
  }

  .banner-height p {
    font-size:22px;
  }

  .banner-height .lab-img img {
    width:900px
  }
}

@media (min-width: 2560px) {
  .service-bebefits::before {
    width: 47%;
  }
}

@media (min-width: 1280px) {
  .offcanvas__right .center-height{
    height: 100vh !important;
  }
}

@media (min-width: 1781px) and (max-width: 1920px) {
  /* .banner-height-1 {
    top:7%;
  } */

  /* .folio-img-2 {
    height: 520px !important;
    top: 115px !important;
  } */
}

.service-icon {
  position: absolute;
  transform: translate(-50%,-50%) !important;
  left: 50%;
  top: 100%;
}

.bg-light-black{
  background-color: #fff !important;
}

#drawer-navigation .text-white{
  color: #222;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li b a, #address-accordion button
{
  font-weight: 700 !important;
}

.offcanvas__menu-wrapper.mean-container .mean-nav .menu-text{
  font-weight: 600 !important;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  font-size: 35px;
  font-weight: 500;
  height: 45px !important;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand:hover
{
  background-color: transparent;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a.mean-expand{
  justify-content: start;
}

.offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
  background-color: transparent;
}

.sub-menus {
  margin-bottom: 15px;
}

.sub-menus ul{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  /* display: flex;
flex-wrap: wrap; */
}

.sub-menus ul li{
  /* width: 32% !important; */
  /* flex-shrink: 0; */
}

.sub-menus ul li a{
  font-size: 16px !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

.sub-menus ul li b a{
  color: #222 !important;
  font-weight: 600 !important;
  /* opacity: 1 !important; */
}

.center-height .mCSB_draggerRail{
  opacity: 0;
}

.center-height .mCSB_dragger_bar{
  background-color: rgb(175 175 175 / 75%) !important;
}

/* -----menu fixes start --- */

.menu-text{
  text-transform: uppercase;
  /* transition: all 0.3s; */
}

.mean-nav .menu-anim li:hover .menu-text{
  /* letter-spacing: 1.5px; */
  /* transition: all 0.3s; */
  color: #f58634;
}

/* -----menu fixes end --- */

.mean-nav .menu-anim li:hover .mean-expand{
  color: #f58634;
}

@media only screen and (min-width: 0px) and (max-width: 575px){
  .sub-menus ul{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 20px !important;
    height: 15px !important;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px){
  .sub-menus ul{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 25px !important;
    height: 25px !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px){
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 20px;
    font-weight: 500;
    height: 25px !important;
  }

  .sub-menus ul li a{
    font-size: 16px !important;
  }

  .sub-menus ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 10px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .offcanvas__menu-wrapper.mean-container .mean-nav ul li a {
    font-size: 22px;
    padding: 4px 0 4px 0px;
    height: 38px !important;
  }

  .offcanvas__menu-wrapper.mean-container .mean-nav ul li li a {
    padding-left: 0px !important;
    font-size: 20px;
    height: 27px !important;
  }

  .sub-menus ul li a {
    font-size: 16px !important;
  }

  .sub-menus ul{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .center-height {
    height: calc(100vh - 165px) !important;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1500px) {
  .offcanvas__body {
    display:-ms-grid;
    display: grid;
    -ms-grid-columns: 0.8fr 3fr 2fr;
    grid-template-columns: 0.8fr 3fr 2fr;
    height: 100%;
  }

  /* .circle-button{
    top: -60px;
  } */
  .circle-button-1{
    top: -60px !important;
  }
}

.benefits-swiper-button-prev{
  position: unset !important;
  background: #f68735;
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50px;
  padding: 15px;
}

.benefits-swiper-button-next {
  position: unset !important;
  margin-left: 20px !important;
  background: #f68735;
  color: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50px;
  padding: 15px;
}

.benefits-swiper-button-next::after{
  font-size: 23px !important;
}

.benefits-swiper-button-prev::after{
  font-size: 23px !important;
}

@media (min-width: 768px){
  .md\:container{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  @media (min-width: 576px){
    .md\:container{
      max-width: 540px;
    }
  }

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

  @media (min-width: 992px){
    .md\:container{
      max-width: 960px;
    }
  }

  @media (min-width: 1200px){
    .md\:container{
      max-width: 1140px;
    }
  }

  @media (min-width: 1400px){
    .md\:container{
      max-width: 1320px;
    }
  }

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

@media (min-width: 1600px){
  .xxxl\:container{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
  }

  @media (min-width: 576px){
    .xxxl\:container{
      max-width: 540px;
    }
  }

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

  @media (min-width: 992px){
    .xxxl\:container{
      max-width: 960px;
    }
  }

  @media (min-width: 1200px){
    .xxxl\:container{
      max-width: 1140px;
    }
  }

  @media (min-width: 1400px){
    .xxxl\:container{
      max-width: 1320px;
    }
  }

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

.before\:absolute::before{
  content: var(--tw-content);
  position: absolute;
}

.before\:left-0::before{
  content: var(--tw-content);
  left: 0px;
}

.before\:top-1\/2::before{
  content: var(--tw-content);
  top: 50%;
}

.before\:-z-10::before{
  content: var(--tw-content);
  z-index: -10;
}

.before\:h-1::before{
  content: var(--tw-content);
  height: 1px;
}

.before\:w-full::before{
  content: var(--tw-content);
  width: 100%;
}

.before\:-translate-y-2\/4::before{
  content: var(--tw-content);
  --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));
}

.before\:bg-grey::before{
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity, 1));
}

.first\:mt-0:first-child{
  margin-top: 0px;
}

.last\:mb-0:last-child{
  margin-bottom: 0px;
}

.last\:me-0:last-child{
  margin-inline-end: 0px;
}

.last\:border-0:last-child{
  border-width: 0px;
}

.last\:border-b-0:last-child{
  border-bottom-width: 0px;
}

.last\:border-r-0:last-child{
  border-right-width: 0px;
}

.last\:pb-0:last-child{
  padding-bottom: 0px;
}

.hover\:border-gray-300:hover{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.hover\:bg-blue-800:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(30 66 159 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-primary:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(0 88 58 / var(--tw-bg-opacity, 1));
}

.hover\:bg-secondary-100:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(70 188 152 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:\!text-primary:hover{
  --tw-text-opacity: 1 !important;
  color: rgb(245 134 52 / var(--tw-text-opacity, 1)) !important;
}

.hover\:text-blue-600:hover{
  --tw-text-opacity: 1;
  color: rgb(28 100 242 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-600:hover{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-900:hover{
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.hover\:text-primary:hover{
  --tw-text-opacity: 1;
  color: rgb(245 134 52 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary:hover{
  --tw-text-opacity: 1;
  color: rgb(0 88 58 / var(--tw-text-opacity, 1));
}

.hover\:text-secondary-100:hover{
  --tw-text-opacity: 1;
  color: rgb(70 188 152 / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:shadow-normal-1:hover{
  --tw-shadow:  0px 6px 18px 0px rgb(0 0 0 / 10%);
  --tw-shadow-colored: 0px 6px 18px 0px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-primary:focus{
  --tw-border-opacity: 1;
  border-color: rgb(245 134 52 / var(--tw-border-opacity, 1));
}

.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-1:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-4:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:\!ring-primary-300:focus{
  --tw-ring-opacity: 1 !important;
  --tw-ring-color: rgb(220 116 27 / var(--tw-ring-opacity, 1)) !important;
}

.focus\:ring-blue-300:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity, 1));
}

.focus\:ring-gray-200:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
}

.focus\:ring-primary:focus{
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(245 134 52 / var(--tw-ring-opacity, 1));
}

.group:hover .group-hover\:grid{
  display: grid;
}

.group:hover .group-hover\:border-primary{
  --tw-border-opacity: 1;
  border-color: rgb(245 134 52 / var(--tw-border-opacity, 1));
}

.group:hover .group-hover\:\!bg-white{
  --tw-bg-opacity: 1 !important;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)) !important;
}

.group:hover .group-hover\:bg-light-green{
  --tw-bg-opacity: 1;
  background-color: rgb(62 187 149 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-primary{
  --tw-bg-opacity: 1;
  background-color: rgb(245 134 52 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-secondary-100{
  --tw-bg-opacity: 1;
  background-color: rgb(70 188 152 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-secondary-500{
  --tw-bg-opacity: 1;
  background-color: rgb(60 181 144 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.group:hover .group-hover\:\!text-secondary{
  --tw-text-opacity: 1 !important;
  color: rgb(0 88 58 / var(--tw-text-opacity, 1)) !important;
}

.group:hover .group-hover\:text-dark{
  --tw-text-opacity: 1;
  color: rgb(34 34 34 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary{
  --tw-text-opacity: 1;
  color: rgb(245 134 52 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-secondary{
  --tw-text-opacity: 1;
  color: rgb(0 88 58 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:opacity-100{
  opacity: 1;
}

.dark\:border-blue-500:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(63 131 248 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-600:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
}

.dark\:border-gray-700:is(.dark *){
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}

.dark\:border-transparent:is(.dark *){
  border-color: transparent;
}

.dark\:\!bg-gray-700:is(.dark *){
  --tw-bg-opacity: 1 !important;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important;
}

.dark\:bg-blue-600:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(28 100 242 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-600:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-700:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800\/50:is(.dark *){
  background-color: rgb(31 41 55 / 0.5);
}

.dark\:bg-gray-900:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-900\/80:is(.dark *){
  background-color: rgb(17 24 39 / 0.8);
}

.dark\:text-blue-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(63 131 248 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-400:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}

.dark\:text-gray-500:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}

.dark\:text-white:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.dark\:hover\:bg-blue-700:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(26 86 219 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-600:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:bg-gray-800:hover:is(.dark *){
  --tw-bg-opacity: 1;
  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:hover\:text-blue-500:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(63 131 248 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-gray-300:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}

.dark\:hover\:text-white:hover:is(.dark *){
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

@media (min-width: 576px){
  .sm\:-right-3{
    right: -0.75rem;
  }

  .sm\:-top-20{
    top: -5rem;
  }

  .sm\:-top-6{
    top: -1.5rem;
  }

  .sm\:bottom-0{
    bottom: 0px;
  }

  .sm\:left-0{
    left: 0px;
  }

  .sm\:right-20{
    right: 5rem;
  }

  .sm\:top-48{
    top: 12rem;
  }

  .sm\:top-unset{
    top: unset;
  }

  .sm\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .sm\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .sm\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .sm\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .sm\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .sm\:m-auto{
    margin: auto;
  }

  .sm\:-mt-12{
    margin-top: -3rem;
  }

  .sm\:mb-0{
    margin-bottom: 0px;
  }

  .sm\:mb-1{
    margin-bottom: 0.25rem;
  }

  .sm\:mb-10{
    margin-bottom: 2.5rem;
  }

  .sm\:mb-11{
    margin-bottom: 2.75rem;
  }

  .sm\:mb-12{
    margin-bottom: 3rem;
  }

  .sm\:mb-14{
    margin-bottom: 3.5rem;
  }

  .sm\:mb-16{
    margin-bottom: 4rem;
  }

  .sm\:mb-3{
    margin-bottom: 0.75rem;
  }

  .sm\:mb-4{
    margin-bottom: 1rem;
  }

  .sm\:mb-5{
    margin-bottom: 1.25rem;
  }

  .sm\:mb-6{
    margin-bottom: 1.5rem;
  }

  .sm\:mb-7{
    margin-bottom: 1.75rem;
  }

  .sm\:mb-8{
    margin-bottom: 2rem;
  }

  .sm\:mb-9{
    margin-bottom: 2.25rem;
  }

  .sm\:mr-6{
    margin-right: 1.5rem;
  }

  .sm\:mt-4{
    margin-top: 1rem;
  }

  .sm\:block{
    display: block;
  }

  .sm\:flex{
    display: flex;
  }

  .sm\:inline-flex{
    display: inline-flex;
  }

  .sm\:hidden{
    display: none;
  }

  .sm\:h-10{
    height: 2.5rem;
  }

  .sm\:h-16{
    height: 4rem;
  }

  .sm\:h-350{
    height: 350px;
  }

  .sm\:h-36{
    height: 9rem;
  }

  .sm\:h-44{
    height: 11rem;
  }

  .sm\:h-48{
    height: 12rem;
  }

  .sm\:h-60{
    height: 15rem;
  }

  .sm\:h-64{
    height: 16rem;
  }

  .sm\:h-\[400px\]{
    height: 400px;
  }

  .sm\:w-1\/2{
    width: 50%;
  }

  .sm\:w-10{
    width: 2.5rem;
  }

  .sm\:w-16{
    width: 4rem;
  }

  .sm\:w-32{
    width: 8rem;
  }

  .sm\:w-36{
    width: 9rem;
  }

  .sm\:w-40{
    width: 10rem;
  }

  .sm\:w-400{
    width: 400px;
  }

  .sm\:w-440{
    width: 440px;
  }

  .sm\:w-48{
    width: 12rem;
  }

  .sm\:w-52{
    width: 13rem;
  }

  .sm\:w-64{
    width: 16rem;
  }

  .sm\:w-72{
    width: 18rem;
  }

  .sm\:w-\[450px\]{
    width: 450px;
  }

  .sm\:w-unset{
    width: unset;
  }

  .sm\:translate-x-unset{
    --tw-translate-x: unset;
    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));
  }

  .sm\:translate-y-unset{
    --tw-translate-y: unset;
    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));
  }

  .sm\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:flex-row{
    flex-direction: row;
  }

  .sm\:flex-nowrap{
    flex-wrap: nowrap;
  }

  .sm\:items-start{
    align-items: flex-start;
  }

  .sm\:items-end{
    align-items: flex-end;
  }

  .sm\:items-center{
    align-items: center;
  }

  .sm\:justify-between{
    justify-content: space-between;
  }

  .sm\:gap-16{
    gap: 4rem;
  }

  .sm\:gap-28{
    gap: 7rem;
  }

  .sm\:gap-4{
    gap: 1rem;
  }

  .sm\:gap-5{
    gap: 1.25rem;
  }

  .sm\:gap-6{
    gap: 1.5rem;
  }

  .sm\:gap-7{
    gap: 1.75rem;
  }

  .sm\:gap-8{
    gap: 2rem;
  }

  .sm\:border-b{
    border-bottom-width: 1px;
  }

  .sm\:border-r{
    border-right-width: 1px;
  }

  .sm\:border-r-0{
    border-right-width: 0px;
  }

  .sm\:p-0{
    padding: 0px;
  }

  .sm\:p-4{
    padding: 1rem;
  }

  .sm\:p-5{
    padding: 1.25rem;
  }

  .sm\:p-6{
    padding: 1.5rem;
  }

  .sm\:p-8{
    padding: 2rem;
  }

  .sm\:px-4{
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sm\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .sm\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .sm\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .sm\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .sm\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .sm\:py-60{
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .sm\:py-7{
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .sm\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .sm\:pb-0{
    padding-bottom: 0px;
  }

  .sm\:pb-12{
    padding-bottom: 3rem;
  }

  .sm\:pb-4{
    padding-bottom: 1rem;
  }

  .sm\:pb-5{
    padding-bottom: 1.25rem;
  }

  .sm\:pb-8{
    padding-bottom: 2rem;
  }

  .sm\:pt-0{
    padding-top: 0px;
  }

  .sm\:pt-10{
    padding-top: 2.5rem;
  }

  .sm\:pt-12{
    padding-top: 3rem;
  }

  .sm\:pt-6{
    padding-top: 1.5rem;
  }

  .sm\:text-left{
    text-align: left;
  }

  .sm\:text-start{
    text-align: start;
  }

  .sm\:text-2medium-regular{
    font-size: 20px;
  }

  .sm\:text-2medium-semibold{
    font-size: 20px;
    font-weight: 600;
  }

  .sm\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3medium-bold{
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
  }

  .sm\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4medium-semibold{
    font-size: 22px;
    font-weight: 600;
  }

  .sm\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-counter{
    font-size: 70px;
    line-height: 68px;
    font-weight: 800;
  }

  .sm\:text-footer-heading-sm{
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
  }

  .sm\:text-lg-medium{
    font-size: 28px;
    line-height: 35px;
    font-weight: 500;
  }

  .sm\:text-medium-bold{
    font-size: 18px;
    font-weight: 700;
  }

  .sm\:text-small-blog-heading{
    font-size: 30px;
    line-height: 43px;
    font-weight: 500;
  }

  .sm\:text-xs-blog-h2{
    font-size: 20px;
    line-height: 25px;
  }
}

@media (min-width: 768px){
  .md\:absolute{
    position: absolute;
  }

  .md\:-bottom-2{
    bottom: -0.5rem;
  }

  .md\:-top-8{
    top: -2rem;
  }

  .md\:right-0{
    right: 0px;
  }

  .md\:right-6{
    right: 1.5rem;
  }

  .md\:right-8{
    right: 2rem;
  }

  .md\:top-0{
    top: 0px;
  }

  .md\:top-44{
    top: 11rem;
  }

  .md\:order-1{
    order: 1;
  }

  .md\:order-2{
    order: 2;
  }

  .md\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .md\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .md\:col-start-1{
    grid-column-start: 1;
  }

  .md\:col-start-7{
    grid-column-start: 7;
  }

  .md\:mx-6{
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }

  .md\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }

  .md\:\!mb-10{
    margin-bottom: 2.5rem !important;
  }

  .md\:-mt-10{
    margin-top: -2.5rem;
  }

  .md\:-mt-14{
    margin-top: -3.5rem;
  }

  .md\:mb-0{
    margin-bottom: 0px;
  }

  .md\:mb-1{
    margin-bottom: 0.25rem;
  }

  .md\:mb-10{
    margin-bottom: 2.5rem;
  }

  .md\:mb-11{
    margin-bottom: 2.75rem;
  }

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

  .md\:mb-14{
    margin-bottom: 3.5rem;
  }

  .md\:mb-16{
    margin-bottom: 4rem;
  }

  .md\:mb-2{
    margin-bottom: 0.5rem;
  }

  .md\:mb-3{
    margin-bottom: 0.75rem;
  }

  .md\:mb-4{
    margin-bottom: 1rem;
  }

  .md\:mb-5{
    margin-bottom: 1.25rem;
  }

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

  .md\:mb-56{
    margin-bottom: 14rem;
  }

  .md\:mb-6{
    margin-bottom: 1.5rem;
  }

  .md\:mb-7{
    margin-bottom: 1.75rem;
  }

  .md\:mb-8{
    margin-bottom: 2rem;
  }

  .md\:mb-9{
    margin-bottom: 2.25rem;
  }

  .md\:ml-auto{
    margin-left: auto;
  }

  .md\:mr-7{
    margin-right: 1.75rem;
  }

  .md\:ms-16{
    margin-inline-start: 4rem;
  }

  .md\:mt-0{
    margin-top: 0px;
  }

  .md\:mt-10{
    margin-top: 2.5rem;
  }

  .md\:mt-12{
    margin-top: 3rem;
  }

  .md\:mt-16{
    margin-top: 4rem;
  }

  .md\:mt-6{
    margin-top: 1.5rem;
  }

  .md\:mt-8{
    margin-top: 2rem;
  }

  .md\:block{
    display: block;
  }

  .md\:inline{
    display: inline;
  }

  .md\:flex{
    display: flex;
  }

  .md\:hidden{
    display: none;
  }

  .md\:h-10{
    height: 2.5rem;
  }

  .md\:h-11{
    height: 2.75rem;
  }

  .md\:h-12{
    height: 3rem;
  }

  .md\:h-14{
    height: 3.5rem;
  }

  .md\:h-16{
    height: 4rem;
  }

  .md\:h-20{
    height: 5rem;
  }

  .md\:h-300{
    height: 300px;
  }

  .md\:h-310{
    height: 310px;
  }

  .md\:h-32{
    height: 8rem;
  }

  .md\:h-350{
    height: 350px;
  }

  .md\:h-36{
    height: 9rem;
  }

  .md\:h-440{
    height: 440px;
  }

  .md\:h-460{
    height: 460px;
  }

  .md\:h-470{
    height: 470px;
  }

  .md\:h-500{
    height: 500px;
  }

  .md\:h-52{
    height: 13rem;
  }

  .md\:h-64{
    height: 16rem;
  }

  .md\:h-8{
    height: 2rem;
  }

  .md\:h-\[960px\]{
    height: 960px;
  }

  .md\:h-full{
    height: 100%;
  }

  .md\:h-unset{
    height: unset;
  }

  .md\:w-1\/2{
    width: 50%;
  }

  .md\:w-10{
    width: 2.5rem;
  }

  .md\:w-11{
    width: 2.75rem;
  }

  .md\:w-11\/12{
    width: 91.666667%;
  }

  .md\:w-12{
    width: 3rem;
  }

  .md\:w-16{
    width: 4rem;
  }

  .md\:w-20{
    width: 5rem;
  }

  .md\:w-24{
    width: 6rem;
  }

  .md\:w-32{
    width: 8rem;
  }

  .md\:w-350{
    width: 350px;
  }

  .md\:w-40{
    width: 10rem;
  }

  .md\:w-44{
    width: 11rem;
  }

  .md\:w-440{
    width: 440px;
  }

  .md\:w-48{
    width: 12rem;
  }

  .md\:w-500{
    width: 500px;
  }

  .md\:w-600{
    width: 600px;
  }

  .md\:w-80{
    width: 20rem;
  }

  .md\:w-96{
    width: 24rem;
  }

  .md\:w-\[250px\]{
    width: 250px;
  }

  .md\:w-\[335px\]{
    width: 335px;
  }

  .md\:w-\[48\%\]{
    width: 48%;
  }

  .md\:w-\[600px\]{
    width: 600px;
  }

  .md\:w-\[75px\]{
    width: 75px;
  }

  .md\:w-full{
    width: 100%;
  }

  .md\:w-unset{
    width: unset;
  }

  .md\:basis-1\/2{
    flex-basis: 50%;
  }

  .md\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:flex-row{
    flex-direction: row;
  }

  .md\:flex-row-reverse{
    flex-direction: row-reverse;
  }

  .md\:flex-wrap{
    flex-wrap: wrap;
  }

  .md\:flex-nowrap{
    flex-wrap: nowrap;
  }

  .md\:justify-start{
    justify-content: flex-start;
  }

  .md\:justify-center{
    justify-content: center;
  }

  .md\:gap-12{
    gap: 3rem;
  }

  .md\:gap-3{
    gap: 0.75rem;
  }

  .md\:gap-4{
    gap: 1rem;
  }

  .md\:gap-5{
    gap: 1.25rem;
  }

  .md\:gap-6{
    gap: 1.5rem;
  }

  .md\:gap-8{
    gap: 2rem;
  }

  .md\:border-b{
    border-bottom-width: 1px;
  }

  .md\:border-r{
    border-right-width: 1px;
  }

  .md\:border-r-0{
    border-right-width: 0px;
  }

  .md\:border-r-2{
    border-right-width: 2px;
  }

  .md\:bg-\[url\(\.\.\/src\/images\/bg-pattern\.png\)\]{
    background-image: url(../images/bg-pattern.png);
  }

  .md\:bg-\[length\:140px\]{
    background-size: 140px;
  }

  .md\:bg-cover{
    background-size: cover;
  }

  .md\:bg-left-bottom{
    background-position: left bottom;
  }

  .md\:p-10{
    padding: 2.5rem;
  }

  .md\:p-2{
    padding: 0.5rem;
  }

  .md\:p-4{
    padding: 1rem;
  }

  .md\:p-8{
    padding: 2rem;
  }

  .md\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .md\:px-24{
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .md\:px-3{
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .md\:px-30{
    padding-left: 30px;
    padding-right: 30px;
  }

  .md\:px-32{
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .md\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .md\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .md\:px-7{
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .md\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-11{
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .md\:py-14{
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .md\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .md\:py-2\.5{
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
  }

  .md\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .md\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .md\:py-80{
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .md\:pb-0{
    padding-bottom: 0px;
  }

  .md\:pb-10{
    padding-bottom: 2.5rem;
  }

  .md\:pb-12{
    padding-bottom: 3rem;
  }

  .md\:pb-14{
    padding-bottom: 3.5rem;
  }

  .md\:pb-24{
    padding-bottom: 6rem;
  }

  .md\:pb-5{
    padding-bottom: 1.25rem;
  }

  .md\:pb-8{
    padding-bottom: 2rem;
  }

  .md\:pl-24{
    padding-left: 6rem;
  }

  .md\:pl-36{
    padding-left: 9rem;
  }

  .md\:pr-4{
    padding-right: 1rem;
  }

  .md\:pt-0{
    padding-top: 0px;
  }

  .md\:pt-10{
    padding-top: 2.5rem;
  }

  .md\:pt-11{
    padding-top: 2.75rem;
  }

  .md\:pt-14{
    padding-top: 3.5rem;
  }

  .md\:pt-5{
    padding-top: 1.25rem;
  }

  .md\:pt-80{
    padding-top: 80px;
  }

  .md\:text-left{
    text-align: left;
  }

  .md\:text-center{
    text-align: center;
  }

  .md\:text-end{
    text-align: end;
  }

  .md\:text-2medium-bold{
    font-size: 20px;
    font-weight: 700;
  }

  .md\:text-2medium-regular{
    font-size: 20px;
  }

  .md\:text-2medium-semibold{
    font-size: 20px;
    font-weight: 600;
  }

  .md\:text-2xl-regular{
    font-size: 40px;
  }

  .md\:text-3medium-regular{
    font-size: 24px;
    line-height: 29px;
    font-weight: 400;
  }

  .md\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4medium-semibold{
    font-size: 22px;
    font-weight: 600;
  }

  .md\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5medium-semibold{
    font-size: 25px;
    font-weight: 600;
  }

  .md\:text-5xl-semibold{
    font-size: 70px;
    line-height: 70px;
    font-weight: 600;
  }

  .md\:text-7xl{
    font-size: 4.5rem;
    line-height: 1;
  }

  .md\:text-\[15px\]{
    font-size: 15px;
  }

  .md\:text-base-regular{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .md\:text-base-semibold{
    font-size: 16px;
    font-weight: 600;
  }

  .md\:text-md-blog-detail-h2{
    font-size: 28px;
    line-height: 35px;
  }

  .md\:text-md-blog-detail-h3{
    font-size: 24px;
    line-height: 25px;
  }

  .md\:text-medium-blog-heading{
    font-size: 36px;
    line-height: 46px;
    font-weight: 500;
  }

  .md\:text-medium-regular{
    font-size: 18px;
    font-weight: 400;
  }

  .md\:text-medium-semibold{
    font-size: 18px;
    font-weight: 600;
  }

  .md\:text-xl-medium{
    font-size: 35px;
    line-height: 28px;
    font-weight: 500;
  }

  .md\:font-bold{
    font-weight: 700;
  }

  .md\:\!leading-10{
    line-height: 2.5rem !important;
  }

  .md\:leading-7{
    line-height: 1.75rem;
  }
}

@media (min-width: 992px){
  .lg\:absolute{
    position: absolute;
  }

  .lg\:-bottom-20{
    bottom: -5rem;
  }

  .lg\:bottom-4{
    bottom: 1rem;
  }

  .lg\:right-0{
    right: 0px;
  }

  .lg\:right-8{
    right: 2rem;
  }

  .lg\:top-40{
    top: 10rem;
  }

  .lg\:top-44{
    top: 11rem;
  }

  .lg\:order-1{
    order: 1;
  }

  .lg\:order-2{
    order: 2;
  }

  .lg\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .lg\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .lg\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .lg\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .lg\:col-start-1{
    grid-column-start: 1;
  }

  .lg\:col-start-12{
    grid-column-start: 12;
  }

  .lg\:col-start-5{
    grid-column-start: 5;
  }

  .lg\:my-auto{
    margin-top: auto;
    margin-bottom: auto;
  }

  .lg\:\!mb-30{
    margin-bottom: 30px !important;
  }

  .lg\:-mt-11{
    margin-top: -2.75rem;
  }

  .lg\:-mt-16{
    margin-top: -4rem;
  }

  .lg\:-mt-\[75px\]{
    margin-top: -75px;
  }

  .lg\:mb-0{
    margin-bottom: 0px;
  }

  .lg\:mb-10{
    margin-bottom: 2.5rem;
  }

  .lg\:mb-11{
    margin-bottom: 2.75rem;
  }

  .lg\:mb-12{
    margin-bottom: 3rem;
  }

  .lg\:mb-14{
    margin-bottom: 3.5rem;
  }

  .lg\:mb-16{
    margin-bottom: 4rem;
  }

  .lg\:mb-2{
    margin-bottom: 0.5rem;
  }

  .lg\:mb-24{
    margin-bottom: 6rem;
  }

  .lg\:mb-3{
    margin-bottom: 0.75rem;
  }

  .lg\:mb-4{
    margin-bottom: 1rem;
  }

  .lg\:mb-5{
    margin-bottom: 1.25rem;
  }

  .lg\:mb-6{
    margin-bottom: 1.5rem;
  }

  .lg\:mb-60{
    margin-bottom: 60px;
  }

  .lg\:mb-7{
    margin-bottom: 1.75rem;
  }

  .lg\:mb-8{
    margin-bottom: 2rem;
  }

  .lg\:mb-9{
    margin-bottom: 2.25rem;
  }

  .lg\:mr-9{
    margin-right: 2.25rem;
  }

  .lg\:ms-16{
    margin-inline-start: 4rem;
  }

  .lg\:mt-0{
    margin-top: 0px;
  }

  .lg\:mt-14{
    margin-top: 3.5rem;
  }

  .lg\:mt-3{
    margin-top: 0.75rem;
  }

  .lg\:mt-8{
    margin-top: 2rem;
  }

  .lg\:block{
    display: block;
  }

  .lg\:inline-block{
    display: inline-block;
  }

  .lg\:inline{
    display: inline;
  }

  .lg\:flex{
    display: flex;
  }

  .lg\:inline-flex{
    display: inline-flex;
  }

  .lg\:table{
    display: table;
  }

  .lg\:grid{
    display: grid;
  }

  .lg\:hidden{
    display: none;
  }

  .lg\:h-11{
    height: 2.75rem;
  }

  .lg\:h-12{
    height: 3rem;
  }

  .lg\:h-200{
    height: 200px;
  }

  .lg\:h-24{
    height: 6rem;
  }

  .lg\:h-300{
    height: 300px;
  }

  .lg\:h-310{
    height: 310px;
  }

  .lg\:h-32{
    height: 8rem;
  }

  .lg\:h-350{
    height: 350px;
  }

  .lg\:h-400{
    height: 400px;
  }

  .lg\:h-44{
    height: 11rem;
  }

  .lg\:h-440{
    height: 440px;
  }

  .lg\:h-470{
    height: 470px;
  }

  .lg\:h-600{
    height: 600px;
  }

  .lg\:h-64{
    height: 16rem;
  }

  .lg\:h-80{
    height: 20rem;
  }

  .lg\:h-\[200px\]{
    height: 200px;
  }

  .lg\:h-\[210px\]{
    height: 210px;
  }

  .lg\:h-\[245px\]{
    height: 245px;
  }

  .lg\:h-\[60px\]{
    height: 60px;
  }

  .lg\:h-\[80px\]{
    height: 80px;
  }

  .lg\:h-\[850px\]{
    height: 850px;
  }

  .lg\:h-full{
    height: 100%;
  }

  .lg\:min-h-\[200px\]{
    min-height: 200px;
  }

  .lg\:min-h-\[620px\]{
    min-height: 620px;
  }

  .lg\:min-h-\[650px\]{
    min-height: 650px;
  }

  .lg\:w-1\/2{
    width: 50%;
  }

  .lg\:w-11{
    width: 2.75rem;
  }

  .lg\:w-12{
    width: 3rem;
  }

  .lg\:w-200{
    width: 200px;
  }

  .lg\:w-24{
    width: 6rem;
  }

  .lg\:w-28{
    width: 7rem;
  }

  .lg\:w-36{
    width: 9rem;
  }

  .lg\:w-400{
    width: 400px;
  }

  .lg\:w-44{
    width: 11rem;
  }

  .lg\:w-440{
    width: 440px;
  }

  .lg\:w-500{
    width: 500px;
  }

  .lg\:w-52{
    width: 13rem;
  }

  .lg\:w-585{
    width: 585px;
  }

  .lg\:w-64{
    width: 16rem;
  }

  .lg\:w-645{
    width: 645px;
  }

  .lg\:w-700{
    width: 700px;
  }

  .lg\:w-800{
    width: 800px;
  }

  .lg\:w-\[150px\]{
    width: 150px;
  }

  .lg\:w-\[160px\]{
    width: 160px;
  }

  .lg\:w-\[210px\]{
    width: 210px;
  }

  .lg\:w-\[452px\]{
    width: 452px;
  }

  .lg\:w-\[60px\]{
    width: 60px;
  }

  .lg\:w-\[640px\]{
    width: 640px;
  }

  .lg\:w-\[730px\]{
    width: 730px;
  }

  .lg\:w-\[80px\]{
    width: 80px;
  }

  .lg\:w-\[90px\]{
    width: 90px;
  }

  .lg\:w-fit{
    width: -moz-fit-content;
    width: fit-content;
  }

  .lg\:w-full{
    width: 100%;
  }

  .lg\:w-unset{
    width: unset;
  }

  .lg\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .lg\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:flex-row{
    flex-direction: row;
  }

  .lg\:flex-col{
    flex-direction: column;
  }

  .lg\:flex-wrap{
    flex-wrap: wrap;
  }

  .lg\:flex-nowrap{
    flex-wrap: nowrap;
  }

  .lg\:items-start{
    align-items: flex-start;
  }

  .lg\:justify-start{
    justify-content: flex-start;
  }

  .lg\:justify-between{
    justify-content: space-between;
  }

  .lg\:gap-0{
    gap: 0px;
  }

  .lg\:gap-11{
    gap: 2.75rem;
  }

  .lg\:gap-3{
    gap: 0.75rem;
  }

  .lg\:gap-4{
    gap: 1rem;
  }

  .lg\:gap-6{
    gap: 1.5rem;
  }

  .lg\:gap-8{
    gap: 2rem;
  }

  .lg\:gap-x-6{
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }

  .lg\:gap-y-8{
    row-gap: 2rem;
  }

  .lg\:overflow-x-hidden{
    overflow-x: hidden;
  }

  .lg\:rounded-2xl{
    border-radius: 1rem;
  }

  .lg\:rounded-r-2xl{
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
  }

  .lg\:border-b-0{
    border-bottom-width: 0px;
  }

  .lg\:border-r{
    border-right-width: 1px;
  }

  .lg\:border-r-0{
    border-right-width: 0px;
  }

  .lg\:bg-\[length\:90px\]{
    background-size: 90px;
  }

  .lg\:bg-auto{
    background-size: auto;
  }

  .lg\:p-10{
    padding: 2.5rem;
  }

  .lg\:p-2{
    padding: 0.5rem;
  }

  .lg\:p-4{
    padding: 1rem;
  }

  .lg\:p-5{
    padding: 1.25rem;
  }

  .lg\:p-6{
    padding: 1.5rem;
  }

  .lg\:p-7{
    padding: 1.75rem;
  }

  .lg\:p-8{
    padding: 2rem;
  }

  .lg\:p-9{
    padding: 2.25rem;
  }

  .lg\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .lg\:px-16{
    padding-left: 4rem;
    padding-right: 4rem;
  }

  .lg\:px-36{
    padding-left: 9rem;
    padding-right: 9rem;
  }

  .lg\:px-44{
    padding-left: 11rem;
    padding-right: 11rem;
  }

  .lg\:px-48{
    padding-left: 12rem;
    padding-right: 12rem;
  }

  .lg\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .lg\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:px-60{
    padding-left: 60px;
    padding-right: 60px;
  }

  .lg\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:px-9{
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .lg\:py-0{
    padding-top: 0px;
    padding-bottom: 0px;
  }

  .lg\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .lg\:py-11{
    padding-top: 2.75rem;
    padding-bottom: 2.75rem;
  }

  .lg\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .lg\:py-24{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .lg\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }

  .lg\:py-5{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .lg\:py-6{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:py-8{
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .lg\:py-80{
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .lg\:pb-0{
    padding-bottom: 0px;
  }

  .lg\:pb-10{
    padding-bottom: 2.5rem;
  }

  .lg\:pb-12{
    padding-bottom: 3rem;
  }

  .lg\:pb-16{
    padding-bottom: 4rem;
  }

  .lg\:pb-24{
    padding-bottom: 6rem;
  }

  .lg\:pb-6{
    padding-bottom: 1.5rem;
  }

  .lg\:pb-7{
    padding-bottom: 1.75rem;
  }

  .lg\:pb-9{
    padding-bottom: 2.25rem;
  }

  .lg\:pb-\[0px\]{
    padding-bottom: 0px;
  }

  .lg\:pl-10{
    padding-left: 2.5rem;
  }

  .lg\:pl-36{
    padding-left: 9rem;
  }

  .lg\:ps-4{
    padding-inline-start: 1rem;
  }

  .lg\:pt-0{
    padding-top: 0px;
  }

  .lg\:pt-10{
    padding-top: 2.5rem;
  }

  .lg\:pt-12{
    padding-top: 3rem;
  }

  .lg\:pt-14{
    padding-top: 3.5rem;
  }

  .lg\:pt-16{
    padding-top: 4rem;
  }

  .lg\:pt-5{
    padding-top: 1.25rem;
  }

  .lg\:text-left{
    text-align: left;
  }

  .lg\:text-start{
    text-align: start;
  }

  .lg\:text-11xl-bold{
    font-size: 100px;
  }

  .lg\:text-12xl-bold{
    font-size: 65px;
  }

  .lg\:text-2medium-regular{
    font-size: 20px;
  }

  .lg\:text-2medium-semibold{
    font-size: 20px;
    font-weight: 600;
  }

  .lg\:text-2xl-regular{
    font-size: 40px;
  }

  .lg\:text-3base-medium{
    font-size: 22px;
    font-weight: 500;
  }

  .lg\:text-3medium-bold{
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
  }

  .lg\:text-3xl-bold{
    font-size: 45px;
    line-height: 54px;
    font-weight: 700;
  }

  .lg\:text-3xl-semibold{
    font-size: 35px;
    line-height: 43px;
    font-weight: 600;
  }

  .lg\:text-4medium-bold{
    font-size: 26px;
    line-height: 30px;
    font-weight: 700;
  }

  .lg\:text-4medium-semibold{
    font-size: 22px;
    font-weight: 600;
  }

  .lg\:text-5medium-semibold{
    font-size: 25px;
    font-weight: 600;
  }

  .lg\:text-5xl{
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-\[20px\]{
    font-size: 20px;
  }

  .lg\:text-base-regular{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .lg\:text-base-semibold{
    font-size: 16px;
    font-weight: 600;
  }

  .lg\:text-counter{
    font-size: 70px;
    line-height: 68px;
    font-weight: 800;
  }

  .lg\:text-footer-heading-lg{
    font-size: 35px;
    line-height: 45px;
    font-weight: 600;
  }

  .lg\:text-footer-heading-sm{
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
  }

  .lg\:text-footer-heading-xs{
    font-size: 25px;
    line-height: 35px;
    font-weight: 600;
  }

  .lg\:text-large-blog-heading{
    font-size: 48px;
    line-height: 57px;
    font-weight: 500;
  }

  .lg\:text-lg-medium{
    font-size: 28px;
    line-height: 35px;
    font-weight: 500;
  }

  .lg\:text-medium-regular{
    font-size: 18px;
    font-weight: 400;
  }

  .lg\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .lg\:text-xl-semibold{
    font-size: 28px;
    line-height: 45px;
    font-weight: 600;
  }

  .lg\:text-xs-blog-detail-h3{
    font-size: 22px;
    line-height: 25px;
  }

  .lg\:\!leading-9{
    line-height: 2.25rem !important;
  }

  .lg\:leading-7{
    line-height: 1.75rem;
  }

  .lg\:leading-8{
    line-height: 2rem;
  }

  .lg\:leading-9{
    line-height: 2.25rem;
  }

  .lg\:leading-90{
    line-height: 90px;
  }
}

@media (min-width: 1200px){
  .xl\:absolute{
    position: absolute;
  }

  .xl\:right-36{
    right: 9rem;
  }

  .xl\:right-40{
    right: 10rem;
  }

  .xl\:right-5{
    right: 1.25rem;
  }

  .xl\:top-36{
    top: 9rem;
  }

  .xl\:top-40{
    top: 10rem;
  }

  .xl\:top-\[100px\]{
    top: 100px;
  }

  .xl\:order-1{
    order: 1;
  }

  .xl\:order-2{
    order: 2;
  }

  .xl\:col-span-1{
    grid-column: span 1 / span 1;
  }

  .xl\:col-span-12{
    grid-column: span 12 / span 12;
  }

  .xl\:col-span-2{
    grid-column: span 2 / span 2;
  }

  .xl\:col-span-3{
    grid-column: span 3 / span 3;
  }

  .xl\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .xl\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .xl\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .xl\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .xl\:col-start-1{
    grid-column-start: 1;
  }

  .xl\:col-start-7{
    grid-column-start: 7;
  }

  .xl\:row-span-2{
    grid-row: span 2 / span 2;
  }

  .xl\:mx-30{
    margin-left: 30px;
    margin-right: 30px;
  }

  .xl\:mx-unset{
    margin-left: unset;
    margin-right: unset;
  }

  .xl\:my-12{
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .xl\:my-auto{
    margin-top: auto;
    margin-bottom: auto;
  }

  .xl\:\!mb-50{
    margin-bottom: 50px !important;
  }

  .xl\:-mt-24{
    margin-top: -6rem;
  }

  .xl\:-mt-36{
    margin-top: -9rem;
  }

  .xl\:mb-0{
    margin-bottom: 0px;
  }

  .xl\:mb-10{
    margin-bottom: 2.5rem;
  }

  .xl\:mb-11{
    margin-bottom: 2.75rem;
  }

  .xl\:mb-12{
    margin-bottom: 3rem;
  }

  .xl\:mb-14{
    margin-bottom: 3.5rem;
  }

  .xl\:mb-16{
    margin-bottom: 4rem;
  }

  .xl\:mb-24{
    margin-bottom: 6rem;
  }

  .xl\:mb-3{
    margin-bottom: 0.75rem;
  }

  .xl\:mb-4{
    margin-bottom: 1rem;
  }

  .xl\:mb-5{
    margin-bottom: 1.25rem;
  }

  .xl\:mb-6{
    margin-bottom: 1.5rem;
  }

  .xl\:mb-7{
    margin-bottom: 1.75rem;
  }

  .xl\:mb-75{
    margin-bottom: 75px;
  }

  .xl\:mb-8{
    margin-bottom: 2rem;
  }

  .xl\:mb-9{
    margin-bottom: 2.25rem;
  }

  .xl\:mb-\[40px\]{
    margin-bottom: 40px;
  }

  .xl\:mb-\[50px\]{
    margin-bottom: 50px;
  }

  .xl\:ml-16{
    margin-left: 4rem;
  }

  .xl\:ml-6{
    margin-left: 1.5rem;
  }

  .xl\:mt-0{
    margin-top: 0px;
  }

  .xl\:mt-12{
    margin-top: 3rem;
  }

  .xl\:mt-14{
    margin-top: 3.5rem;
  }

  .xl\:mt-24{
    margin-top: 6rem;
  }

  .xl\:mt-8{
    margin-top: 2rem;
  }

  .xl\:block{
    display: block;
  }

  .xl\:inline-block{
    display: inline-block;
  }

  .xl\:flex{
    display: flex;
  }

  .xl\:hidden{
    display: none;
  }

  .xl\:h-14{
    height: 3.5rem;
  }

  .xl\:h-16{
    height: 4rem;
  }

  .xl\:h-24{
    height: 6rem;
  }

  .xl\:h-350{
    height: 350px;
  }

  .xl\:h-40{
    height: 10rem;
  }

  .xl\:h-440{
    height: 440px;
  }

  .xl\:h-470{
    height: 470px;
  }

  .xl\:h-500{
    height: 500px;
  }

  .xl\:h-540{
    height: 540px;
  }

  .xl\:h-56{
    height: 14rem;
  }

  .xl\:h-64{
    height: 16rem;
  }

  .xl\:h-80{
    height: 20rem;
  }

  .xl\:h-\[250px\]{
    height: 250px;
  }

  .xl\:h-\[385px\]{
    height: 385px;
  }

  .xl\:h-\[412px\]{
    height: 412px;
  }

  .xl\:h-\[550px\]{
    height: 550px;
  }

  .xl\:h-\[78px\]{
    height: 78px;
  }

  .xl\:h-\[80px\]{
    height: 80px;
  }

  .xl\:h-\[90px\]{
    height: 90px;
  }

  .xl\:h-\[950px\]{
    height: 950px;
  }

  .xl\:h-full{
    height: 100%;
  }

  .xl\:h-unset{
    height: unset;
  }

  .xl\:min-h-\[250px\]{
    min-height: 250px;
  }

  .xl\:min-h-\[780px\]{
    min-height: 780px;
  }

  .xl\:min-h-\[811px\]{
    min-height: 811px;
  }

  .xl\:w-1\/2{
    width: 50%;
  }

  .xl\:w-120{
    width: 120px;
  }

  .xl\:w-14{
    width: 3.5rem;
  }

  .xl\:w-16{
    width: 4rem;
  }

  .xl\:w-200{
    width: 200px;
  }

  .xl\:w-24{
    width: 6rem;
  }

  .xl\:w-350{
    width: 350px;
  }

  .xl\:w-40{
    width: 10rem;
  }

  .xl\:w-440{
    width: 440px;
  }

  .xl\:w-470{
    width: 470px;
  }

  .xl\:w-500{
    width: 500px;
  }

  .xl\:w-52{
    width: 13rem;
  }

  .xl\:w-540{
    width: 540px;
  }

  .xl\:w-60{
    width: 15rem;
  }

  .xl\:w-64{
    width: 16rem;
  }

  .xl\:w-645{
    width: 645px;
  }

  .xl\:w-710{
    width: 710px;
  }

  .xl\:w-72{
    width: 18rem;
  }

  .xl\:w-830{
    width: 830px;
  }

  .xl\:w-9{
    width: 2.25rem;
  }

  .xl\:w-\[110px\]{
    width: 110px;
  }

  .xl\:w-\[210px\]{
    width: 210px;
  }

  .xl\:w-\[230px\]{
    width: 230px;
  }

  .xl\:w-\[250px\]{
    width: 250px;
  }

  .xl\:w-\[352px\]{
    width: 352px;
  }

  .xl\:w-\[48\%\]{
    width: 48%;
  }

  .xl\:w-\[555px\]{
    width: 555px;
  }

  .xl\:w-\[655px\]{
    width: 655px;
  }

  .xl\:w-\[78px\]{
    width: 78px;
  }

  .xl\:w-\[80px\]{
    width: 80px;
  }

  .xl\:w-\[90px\]{
    width: 90px;
  }

  .xl\:w-\[930px\]{
    width: 930px;
  }

  .xl\:w-\[960px\]{
    width: 960px;
  }

  .xl\:w-auto{
    width: auto;
  }

  .xl\:w-full{
    width: 100%;
  }

  .xl\:w-unset{
    width: unset;
  }

  .xl\:translate-x-unset{
    --tw-translate-x: unset;
    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));
  }

  .xl\:translate-y-unset{
    --tw-translate-y: unset;
    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));
  }

  .xl\:grid-cols-1{
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .xl\:grid-cols-12{
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .xl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xl\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:flex-row{
    flex-direction: row;
  }

  .xl\:flex-col{
    flex-direction: column;
  }

  .xl\:flex-nowrap{
    flex-wrap: nowrap;
  }

  .xl\:justify-start{
    justify-content: flex-start;
  }

  .xl\:gap-0{
    gap: 0px;
  }

  .xl\:gap-10{
    gap: 2.5rem;
  }

  .xl\:gap-16{
    gap: 4rem;
  }

  .xl\:gap-3{
    gap: 0.75rem;
  }

  .xl\:gap-5{
    gap: 1.25rem;
  }

  .xl\:gap-6{
    gap: 1.5rem;
  }

  .xl\:rounded-\[34px\]{
    border-radius: 34px;
  }

  .xl\:rounded-r-\[30px\]{
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
  }

  .xl\:border-b-0{
    border-bottom-width: 0px;
  }

  .xl\:border-b-1{
    border-bottom-width: 1px;
  }

  .xl\:bg-none{
    background-image: none;
  }

  .xl\:bg-\[length\:150px\]{
    background-size: 150px;
  }

  .xl\:bg-\[length\:200px\]{
    background-size: 200px;
  }

  .xl\:p-0{
    padding: 0px;
  }

  .xl\:p-10{
    padding: 2.5rem;
  }

  .xl\:p-3{
    padding: 0.75rem;
  }

  .xl\:p-5{
    padding: 1.25rem;
  }

  .xl\:p-7{
    padding: 1.75rem;
  }

  .xl\:p-8{
    padding: 2rem;
  }

  .xl\:p-9{
    padding: 2.25rem;
  }

  .xl\:px-11{
    padding-left: 2.75rem;
    padding-right: 2.75rem;
  }

  .xl\:px-32{
    padding-left: 8rem;
    padding-right: 8rem;
  }

  .xl\:px-36{
    padding-left: 9rem;
    padding-right: 9rem;
  }

  .xl\:px-48{
    padding-left: 12rem;
    padding-right: 12rem;
  }

  .xl\:px-5{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .xl\:px-56{
    padding-left: 14rem;
    padding-right: 14rem;
  }

  .xl\:px-6{
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .xl\:px-64{
    padding-left: 16rem;
    padding-right: 16rem;
  }

  .xl\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xl\:px-9{
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }

  .xl\:py-1{
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
  }

  .xl\:py-10{
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .xl\:py-12{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .xl\:py-120{
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .xl\:py-16{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .xl\:py-24{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .xl\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .xl\:py-5{
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .xl\:pb-0{
    padding-bottom: 0px;
  }

  .xl\:pb-10{
    padding-bottom: 2.5rem;
  }

  .xl\:pb-12{
    padding-bottom: 3rem;
  }

  .xl\:pb-16{
    padding-bottom: 4rem;
  }

  .xl\:pb-24{
    padding-bottom: 6rem;
  }

  .xl\:pb-8{
    padding-bottom: 2rem;
  }

  .xl\:pl-14{
    padding-left: 3.5rem;
  }

  .xl\:pl-50{
    padding-left: 50px;
  }

  .xl\:pl-75{
    padding-left: 75px;
  }

  .xl\:pr-20{
    padding-right: 20px;
  }

  .xl\:pr-7{
    padding-right: 1.75rem;
  }

  .xl\:ps-12{
    padding-inline-start: 3rem;
  }

  .xl\:ps-9{
    padding-inline-start: 2.25rem;
  }

  .xl\:pt-0{
    padding-top: 0px;
  }

  .xl\:pt-10{
    padding-top: 2.5rem;
  }

  .xl\:pt-12{
    padding-top: 3rem;
  }

  .xl\:pt-14{
    padding-top: 3.5rem;
  }

  .xl\:pt-16{
    padding-top: 4rem;
  }

  .xl\:pt-24{
    padding-top: 6rem;
  }

  .xl\:text-left{
    text-align: left;
  }

  .xl\:text-start{
    text-align: start;
  }

  .xl\:text-10xl-bold{
    font-size: 70px;
  }

  .xl\:text-2medium-bold{
    font-size: 20px;
    font-weight: 700;
  }

  .xl\:text-2medium-regular{
    font-size: 20px;
  }

  .xl\:text-3base-medium{
    font-size: 22px;
    font-weight: 500;
  }

  .xl\:text-3medium-bold{
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
  }

  .xl\:text-3medium-semibold{
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
  }

  .xl\:text-3xl-bold{
    font-size: 45px;
    line-height: 54px;
    font-weight: 700;
  }

  .xl\:text-3xl-semibold{
    font-size: 35px;
    line-height: 43px;
    font-weight: 600;
  }

  .xl\:text-4base-medium{
    font-size: 24px;
    font-weight: 500;
  }

  .xl\:text-4medium-semibold{
    font-size: 22px;
    font-weight: 600;
  }

  .xl\:text-8xl{
    font-size: 6rem;
    line-height: 1;
  }

  .xl\:text-\[40px\]{
    font-size: 40px;
  }

  .xl\:text-\[55px\]{
    font-size: 55px;
  }

  .xl\:text-base-regular{
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
  }

  .xl\:text-footer-heading{
    font-size: 40px;
    line-height: 45px;
    font-weight: 600;
  }

  .xl\:text-footer-heading-sm{
    font-size: 30px;
    line-height: 40px;
    font-weight: 600;
  }

  .xl\:text-footer-heading-xs{
    font-size: 25px;
    line-height: 35px;
    font-weight: 600;
  }

  .xl\:text-lg-medium{
    font-size: 28px;
    line-height: 35px;
    font-weight: 500;
  }

  .xl\:text-medium-regular{
    font-size: 18px;
    font-weight: 400;
  }

  .xl\:text-xl-blog-h2{
    font-size: 24px;
    line-height: 30px;
  }

  .xl\:text-xl-semibold{
    font-size: 28px;
    line-height: 45px;
    font-weight: 600;
  }

  .xl\:leading-10{
    line-height: 2.5rem;
  }

  .xl\:leading-60{
    line-height: 60px;
  }

  .xl\:text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }
}

@media (min-width: 1400px){
  .xxl\:bottom-0{
    bottom: 0px;
  }

  .xxl\:right-14{
    right: 3.5rem;
  }

  .xxl\:right-24{
    right: 6rem;
  }

  .xxl\:right-36{
    right: 9rem;
  }

  .xxl\:top-14{
    top: 3.5rem;
  }

  .xxl\:top-16{
    top: 4rem;
  }

  .xxl\:top-44{
    top: 11rem;
  }

  .xxl\:top-96{
    top: 24rem;
  }

  .xxl\:col-span-4{
    grid-column: span 4 / span 4;
  }

  .xxl\:col-span-5{
    grid-column: span 5 / span 5;
  }

  .xxl\:col-span-6{
    grid-column: span 6 / span 6;
  }

  .xxl\:col-span-7{
    grid-column: span 7 / span 7;
  }

  .xxl\:col-span-8{
    grid-column: span 8 / span 8;
  }

  .xxl\:col-start-1{
    grid-column-start: 1;
  }

  .xxl\:col-start-8{
    grid-column-start: 8;
  }

  .xxl\:mx-32{
    margin-left: 8rem;
    margin-right: 8rem;
  }

  .xxl\:mx-auto{
    margin-left: auto;
    margin-right: auto;
  }

  .xxl\:\!mb-80{
    margin-bottom: 80px !important;
  }

  .xxl\:mb-10{
    margin-bottom: 2.5rem;
  }

  .xxl\:mb-100{
    margin-bottom: 100px;
  }

  .xxl\:mb-12{
    margin-bottom: 3rem;
  }

  .xxl\:mb-14{
    margin-bottom: 3.5rem;
  }

  .xxl\:mb-16{
    margin-bottom: 4rem;
  }

  .xxl\:mb-24{
    margin-bottom: 6rem;
  }

  .xxl\:mb-4{
    margin-bottom: 1rem;
  }

  .xxl\:mb-5{
    margin-bottom: 1.25rem;
  }

  .xxl\:mb-6{
    margin-bottom: 1.5rem;
  }

  .xxl\:mb-7{
    margin-bottom: 1.75rem;
  }

  .xxl\:mb-\[100px\]{
    margin-bottom: 100px;
  }

  .xxl\:ml-24{
    margin-left: 6rem;
  }

  .xxl\:ml-72{
    margin-left: 18rem;
  }

  .xxl\:mt-0{
    margin-top: 0px;
  }

  .xxl\:block{
    display: block;
  }

  .xxl\:h-600{
    height: 600px;
  }

  .xxl\:h-64{
    height: 16rem;
  }

  .xxl\:h-72{
    height: 18rem;
  }

  .xxl\:h-\[520px\]{
    height: 520px;
  }

  .xxl\:h-\[605px\]{
    height: 605px;
  }

  .xxl\:h-\[88px\]{
    height: 88px;
  }

  .xxl\:h-full{
    height: 100%;
  }

  .xxl\:h-unset{
    height: unset;
  }

  .xxl\:\!w-3\/4{
    width: 75% !important;
  }

  .xxl\:w-1\/2{
    width: 50%;
  }

  .xxl\:w-3\/4{
    width: 75%;
  }

  .xxl\:w-5\/12{
    width: 41.666667%;
  }

  .xxl\:w-600{
    width: 600px;
  }

  .xxl\:w-72{
    width: 18rem;
  }

  .xxl\:w-\[1110px\]{
    width: 1110px;
  }

  .xxl\:w-\[290px\]{
    width: 290px;
  }

  .xxl\:w-\[416px\]{
    width: 416px;
  }

  .xxl\:w-\[88px\]{
    width: 88px;
  }

  .xxl\:w-unset{
    width: unset;
  }

  .xxl\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xxl\:flex-nowrap{
    flex-wrap: nowrap;
  }

  .xxl\:justify-between{
    justify-content: space-between;
  }

  .xxl\:gap-0{
    gap: 0px;
  }

  .xxl\:gap-10{
    gap: 2.5rem;
  }

  .xxl\:gap-4{
    gap: 1rem;
  }

  .xxl\:p-10{
    padding: 2.5rem;
  }

  .xxl\:p-16{
    padding: 4rem;
  }

  .xxl\:p-6{
    padding: 1.5rem;
  }

  .xxl\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .xxl\:px-8{
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .xxl\:py-14{
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .xxl\:py-24{
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  .xxl\:py-28{
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .xxl\:pb-0{
    padding-bottom: 0px;
  }

  .xxl\:pb-120{
    padding-bottom: 120px;
  }

  .xxl\:pb-14{
    padding-bottom: 3.5rem;
  }

  .xxl\:pb-8{
    padding-bottom: 2rem;
  }

  .xxl\:pl-32{
    padding-left: 8rem;
  }

  .xxl\:pl-80{
    padding-left: 80px;
  }

  .xxl\:pr-\[640px\]{
    padding-right: 640px;
  }

  .xxl\:pt-12{
    padding-top: 3rem;
  }

  .xxl\:pt-16{
    padding-top: 4rem;
  }

  .xxl\:pt-\[80px\]{
    padding-top: 80px;
  }

  .xxl\:text-start{
    text-align: start;
  }

  .xxl\:text-12xl-bold{
    font-size: 65px;
  }

  .xxl\:text-3medium-semibold{
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
  }

  .xxl\:text-3xl-semibold{
    font-size: 35px;
    line-height: 43px;
    font-weight: 600;
  }

  .xxl\:text-4medium-semibold{
    font-size: 22px;
    font-weight: 600;
  }

  .xxl\:text-6xl{
    font-size: 3.75rem;
    line-height: 1;
  }

  .xxl\:text-9xl-bold{
    font-size: 140px;
  }

  .xxl\:text-\[50px\]{
    font-size: 50px;
  }

  .xxl\:text-\[60px\]{
    font-size: 60px;
  }

  .xxl\:text-footer-heading-xs{
    font-size: 25px;
    line-height: 35px;
    font-weight: 600;
  }

  .xxl\:text-xl-medium{
    font-size: 35px;
    line-height: 28px;
    font-weight: 500;
  }

  .xxl\:leading-120{
    line-height: 120px;
  }

  .xxl\:leading-\[70px\]{
    line-height: 70px;
  }
}

@media (min-width: 1600px){
  .xxxl\:right-52{
    right: 13rem;
  }

  .xxxl\:top-40{
    top: 10rem;
  }

  .xxxl\:mb-16{
    margin-bottom: 4rem;
  }

  .xxxl\:mb-7{
    margin-bottom: 1.75rem;
  }

  .xxxl\:mb-9{
    margin-bottom: 2.25rem;
  }

  .xxxl\:w-120{
    width: 120px;
  }

  .xxxl\:w-5\/12{
    width: 41.666667%;
  }

  .xxxl\:p-24{
    padding: 6rem;
  }

  .xxxl\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }

  .xxxl\:px-12{
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .xxxl\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .xxxl\:text-5xl-semibold{
    font-size: 70px;
    line-height: 70px;
    font-weight: 600;
  }

  .xxxl\:text-blog-heading{
    font-size: 70px;
    line-height: 75px;
    font-weight: 500;
  }

  .xxxl\:text-lg-regular{
    font-size: 28px;
    line-height: 45px;
    font-weight: 400;
  }

  .xxxl\:\!leading-9{
    line-height: 2.25rem !important;
  }

  .xxxl\:leading-\[80px\]{
    line-height: 80px;
  }
}

.rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *){
  --tw-rotate: 180deg;
  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));
}

.rtl\:space-x-reverse:where([dir="rtl"], [dir="rtl"] *) > :not([hidden]) ~ :not([hidden]){
  --tw-space-x-reverse: 1;
}