@charset "UTF-8";

*{font-family: 'montserrat', sans-serif;}

::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

img,
svg {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast
}

input { 
  -webkit-appearance: none;
  border-radius: 0;
}

a,
h1,
h2,
h3,
h4,
h5,
h6,
label,
main,
p {
  color: #070606;
  font-family: montserrat, sans-serif;
  font-style: normal
}

#app {
  position: relative;
  z-index: 99
}
.mainwork section h1:first-child{padding-top: 0;}
.mainwork section h1{padding:30px 0;font-size: 60px;}

main {margin-top: 90px;
  overflow-x: hidden
}

@font-face {
  font-family: Gotham-Thin;
  src: url(/fonts/Gotham-Thin.otf)
}

@font-face {
  font-family: Gotham-Book;
  src: url(/fonts/Gotham-Book.otf)
}

@font-face {
  font-family: Gotham-Medium;
  src: url(/fonts/Gotham-Medium.otf)
}

@font-face {
  font-family: Gotham-Bold;
  src: url(/fonts/Gotham-Bold.otf)
}

@font-face {
  font-family: Mitchaella-Modern-Free;
  src: url(/fonts/Mitchaella-Modern-Free.ttf)
}

a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
  border: 0;
  font-size: 100%;
  font: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

body {
  line-height: 1;
  margin: 0
}

ol,
ul {
  list-style: none
}

blockquote,
q {
  quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

.c4-izmir {
  --text-color: #fff;
  --primary-color: #00b4db;
  --secondary-color: #0083b0;
  --padding: 1em;
  --transition-duration: 600ms;
  --border-margin: 15px;
  --border-width: 3px;
  --border-color: #fff;
  --border-radius: 3px;
  --image-opacity: .25;
  border-radius: 3px;
  border-radius: var(--border-radius);
  box-sizing: border-box;
  color: #fff;
  color: var(--text-color);
  display: inline-flex;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative
}

.c4-izmir *,
.c4-izmir :after,
.c4-izmir :before,
.c4-izmir:after,
.c4-izmir:before {
  box-sizing: border-box;
  transition: all .6s ease;
  transition: all var(--transition-duration) ease
}

.c4-izmir figcaption {
  align-items: center;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 1
}

.c4-izmir img {
  height: 100%;
  max-width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%
}

.c4-izmir h1,
.c4-izmir h2,
.c4-izmir h3,
.c4-izmir h4,
.c4-izmir h5,
.c4-izmir h6,
.c4-izmir p {
  color: #fff;
  color: var(--text-color);
  margin-top: 0
}

.c4-izmir h1:last-child,
.c4-izmir h2:last-child,
.c4-izmir h3:last-child,
.c4-izmir h4:last-child,
.c4-izmir h5:last-child,
.c4-izmir h6:last-child,
.c4-izmir p:last-child {
  margin-bottom: 0
}

[class*=" c4-border"] figcaption:after,
[class*=" c4-border"] figcaption:before,
[class*=" c4-border"]:after,
[class*=" c4-border"]:before,
[class^=c4-border] figcaption:after,
[class^=c4-border] figcaption:before,
[class^=c4-border]:after,
[class^=c4-border]:before {
  background-color: #fff;
  background-color: var(--border-color);
  content: "";
  position: absolute
}

[class*=" c4-border"]:after,
[class*=" c4-border"]:before,
[class^=c4-border]:after,
[class^=c4-border]:before {
  height: 3px;
  height: var(--border-width);
  left: 15px;
  left: var(--border-margin);
  right: 15px;
  right: var(--border-margin);
  transform: scaleX(0);
  z-index: 1
}

[class*=" c4-border"]:before,
[class^=c4-border]:before {
  top: 15px;
  top: var(--border-margin)
}

[class*=" c4-border"]:after,
[class^=c4-border]:after {
  bottom: 15px;
  bottom: var(--border-margin)
}

[class*=" c4-border"] figcaption,
[class^=c4-border] figcaption {
  z-index: 3
}

[class*=" c4-border"] figcaption:after,
[class*=" c4-border"] figcaption:before,
[class^=c4-border] figcaption:after,
[class^=c4-border] figcaption:before {
  bottom: 15px;
  bottom: var(--border-margin);
  top: 15px;
  top: var(--border-margin);
  transform: scaleY(0);
  width: 3px;
  width: var(--border-width);
  z-index: -1
}

[class*=" c4-border"] figcaption:before,
[class^=c4-border] figcaption:before {
  left: 15px;
  left: var(--border-margin)
}

[class*=" c4-border"] figcaption:after,
[class^=c4-border] figcaption:after {
  right: 15px;
  right: var(--border-margin)
}

:focus>[class*=" c4-border"] figcaption:after,
:focus>[class*=" c4-border"] figcaption:before,
:focus>[class*=" c4-border"]:after,
:focus>[class*=" c4-border"]:before,
:focus>[class^=c4-border] figcaption:after,
:focus>[class^=c4-border] figcaption:before,
:focus>[class^=c4-border]:after,
:focus>[class^=c4-border]:before,
[class*=" c4-border"].hover figcaption:after,
[class*=" c4-border"].hover figcaption:before,
[class*=" c4-border"].hover:after,
[class*=" c4-border"].hover:before,
[class*=" c4-border"]:focus figcaption:after,
[class*=" c4-border"]:focus figcaption:before,
[class*=" c4-border"]:focus:after,
[class*=" c4-border"]:focus:before,
[class*=" c4-border"]:hover figcaption:after,
[class*=" c4-border"]:hover figcaption:before,
[class*=" c4-border"]:hover:after,
[class*=" c4-border"]:hover:before,
[class^=c4-border].hover figcaption:after,
[class^=c4-border].hover figcaption:before,
[class^=c4-border].hover:after,
[class^=c4-border].hover:before,
[class^=c4-border]:focus figcaption:after,
[class^=c4-border]:focus figcaption:before,
[class^=c4-border]:focus:after,
[class^=c4-border]:focus:before,
[class^=c4-border]:hover figcaption:after,
[class^=c4-border]:hover figcaption:before,
[class^=c4-border]:hover:after,
[class^=c4-border]:hover:before {
  transform: scale(1)
}

.c4-border-vert:after,
.c4-border-vert:before {
  transition-duration: 0s
}

.c4-border-vert.hover:after,
.c4-border-vert.hover:before,
.c4-border-vert:focus:after,
.c4-border-vert:focus:before,
.c4-border-vert:hover:after,
.c4-border-vert:hover:before,
:focus>.c4-border-vert:after,
:focus>.c4-border-vert:before {
  transition-delay: .48s
}

.c4-border-horiz figcaption:after,
.c4-border-horiz figcaption:before {
  transition-duration: 0s
}

.c4-border-bottom:after,
.c4-border-horiz.hover figcaption:after,
.c4-border-horiz.hover figcaption:before,
.c4-border-horiz:focus figcaption:after,
.c4-border-horiz:focus figcaption:before,
.c4-border-horiz:hover figcaption:after,
.c4-border-horiz:hover figcaption:before,
:focus>.c4-border-horiz figcaption:after,
:focus>.c4-border-horiz figcaption:before {
  transition-delay: .48s
}

.c4-border-bottom:after,
.c4-border-bottom:before {
  transition-duration: 0s
}

.c4-border-bottom figcaption:after,
.c4-border-bottom figcaption:before {
  transform-origin: 100% 100%
}

.c4-border-bottom.hover:before,
.c4-border-bottom:focus:before,
.c4-border-bottom:hover:before,
:focus>.c4-border-bottom:before {
  transition-delay: .48s
}

.c4-border-bottom.hover:after,
.c4-border-bottom:focus:after,
.c4-border-bottom:hover:after,
:focus>.c4-border-bottom:after {
  transition-delay: 0s
}

.c4-border-top:before {
  transition-delay: .48s
}

.c4-border-top:after,
.c4-border-top:before {
  transition-duration: 0s
}

.c4-border-top figcaption:after,
.c4-border-top figcaption:before {
  transform-origin: 0 0
}

.c4-border-top.hover:after,
.c4-border-top:focus:after,
.c4-border-top:hover:after,
:focus>.c4-border-top:after {
  transition-delay: .48s
}

.c4-border-top.hover:before,
.c4-border-top:focus:before,
.c4-border-top:hover:before,
:focus>.c4-border-top:before {
  transition-delay: 0s
}

.c4-border-right:after,
.c4-border-right:before {
  transform-origin: 100% 100%
}

.c4-border-right figcaption:after {
  transition-delay: .48s
}

.c4-border-right figcaption:after,
.c4-border-right figcaption:before {
  transition-duration: 0s
}

.c4-border-right.hover figcaption:before,
.c4-border-right:focus figcaption:before,
.c4-border-right:hover figcaption:before,
:focus>.c4-border-right figcaption:before {
  transition-delay: .48s
}

.c4-border-right.hover figcaption:after,
.c4-border-right:focus figcaption:after,
.c4-border-right:hover figcaption:after,
:focus>.c4-border-right figcaption:after {
  transition-delay: 0s
}

.c4-border-left:after,
.c4-border-left:before {
  transform-origin: 0 0
}

.c4-border-left figcaption:before {
  transition-delay: .48s
}

.c4-border-left figcaption:after,
.c4-border-left figcaption:before {
  transition-duration: 0s
}

.c4-border-left.hover figcaption:after,
.c4-border-left:focus figcaption:after,
.c4-border-left:hover figcaption:after,
:focus>.c4-border-left figcaption:after {
  transition-delay: .48s
}

.c4-border-left.hover figcaption:before,
.c4-border-left:focus figcaption:before,
.c4-border-left:hover figcaption:before,
:focus>.c4-border-left figcaption:before {
  transition-delay: 0s
}

.c4-border-corners-1 figcaption:before,
.c4-border-corners-1:before {
  transform-origin: 0 0
}

.c4-border-corners-1 figcaption:after,
.c4-border-corners-1:after,
.c4-border-corners-2 figcaption:before,
.c4-border-corners-2:before {
  transform-origin: 100% 100%
}

.c4-border-corners-2 figcaption:after,
.c4-border-corners-2:after,
.c4-border-top-left figcaption:after,
.c4-border-top-left figcaption:before,
.c4-border-top-left:after,
.c4-border-top-left:before {
  transform-origin: 0 0
}

.c4-border-top-left:before {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-top-left:after {
  transition-delay: 0s
}

.c4-border-top-left figcaption:before {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-top-left figcaption:after,
.c4-border-top-left.hover:before,
.c4-border-top-left:focus:before,
.c4-border-top-left:hover:before,
:focus>.c4-border-top-left:before {
  transition-delay: 0s
}

.c4-border-top-left.hover:after,
.c4-border-top-left:focus:after,
.c4-border-top-left:hover:after,
:focus>.c4-border-top-left:after {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-top-left.hover figcaption:before,
.c4-border-top-left:focus figcaption:before,
.c4-border-top-left:hover figcaption:before,
:focus>.c4-border-top-left figcaption:before {
  transition-delay: 0s
}

.c4-border-top-left.hover figcaption:after,
.c4-border-top-left:focus figcaption:after,
.c4-border-top-left:hover figcaption:after,
:focus>.c4-border-top-left figcaption:after {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-top-right figcaption:after,
.c4-border-top-right figcaption:before,
.c4-border-top-right:after,
.c4-border-top-right:before {
  transform-origin: 100% 0
}

.c4-border-top-right:before {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-top-right figcaption:before,
.c4-border-top-right:after {
  transition-delay: 0s
}

.c4-border-top-right figcaption:after {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-top-right.hover:before,
.c4-border-top-right:focus:before,
.c4-border-top-right:hover:before,
:focus>.c4-border-top-right:before {
  transition-delay: 0s
}

.c4-border-top-right.hover figcaption:before,
.c4-border-top-right.hover:after,
.c4-border-top-right:focus figcaption:before,
.c4-border-top-right:focus:after,
.c4-border-top-right:hover figcaption:before,
.c4-border-top-right:hover:after,
:focus>.c4-border-top-right figcaption:before,
:focus>.c4-border-top-right:after {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-top-right.hover figcaption:after,
.c4-border-top-right:focus figcaption:after,
.c4-border-top-right:hover figcaption:after,
:focus>.c4-border-top-right figcaption:after {
  transition-delay: 0s
}

.c4-border-bottom-left figcaption:after,
.c4-border-bottom-left figcaption:before,
.c4-border-bottom-left:after,
.c4-border-bottom-left:before {
  transform-origin: 0 100%
}

.c4-border-bottom-left:before {
  transition-delay: 0s
}

.c4-border-bottom-left figcaption:before,
.c4-border-bottom-left:after {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-bottom-left figcaption:after {
  transition-delay: 0s
}

.c4-border-bottom-left.hover:before,
.c4-border-bottom-left:focus:before,
.c4-border-bottom-left:hover:before,
:focus>.c4-border-bottom-left:before {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-bottom-left.hover figcaption:before,
.c4-border-bottom-left.hover:after,
.c4-border-bottom-left:focus figcaption:before,
.c4-border-bottom-left:focus:after,
.c4-border-bottom-left:hover figcaption:before,
.c4-border-bottom-left:hover:after,
:focus>.c4-border-bottom-left figcaption:before,
:focus>.c4-border-bottom-left:after {
  transition-delay: 0s
}

.c4-border-bottom-left.hover figcaption:after,
.c4-border-bottom-left:focus figcaption:after,
.c4-border-bottom-left:hover figcaption:after,
:focus>.c4-border-bottom-left figcaption:after {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-bottom-right figcaption:after,
.c4-border-bottom-right figcaption:before,
.c4-border-bottom-right:after,
.c4-border-bottom-right:before {
  transform-origin: 100% 100%
}

.c4-border-bottom-right:before {
  transition-delay: 0s
}

.c4-border-bottom-right:after {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-bottom-right figcaption:before {
  transition-delay: 0s
}

.c4-border-bottom-right figcaption:after,
.c4-border-bottom-right.hover:before,
.c4-border-bottom-right:focus:before,
.c4-border-bottom-right:hover:before,
:focus>.c4-border-bottom-right:before {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-bottom-right.hover:after,
.c4-border-bottom-right:focus:after,
.c4-border-bottom-right:hover:after,
:focus>.c4-border-bottom-right:after {
  transition-delay: 0s
}

.c4-border-bottom-right.hover figcaption:before,
.c4-border-bottom-right:focus figcaption:before,
.c4-border-bottom-right:hover figcaption:before,
:focus>.c4-border-bottom-right figcaption:before {
  transition-delay: .48s;
  transition-delay: calc(var(--transition-duration)/1.25)
}

.c4-border-bottom-right.hover figcaption:after,
.c4-border-bottom-right:focus figcaption:after,
.c4-border-bottom-right:hover figcaption:after,
:focus>.c4-border-bottom-right figcaption:after {
  transition-delay: 0s
}

.c4-border-cc-1 figcaption:after,
.c4-border-cc-1 figcaption:before,
.c4-border-cc-1:after,
.c4-border-cc-1:before {
  transition-duration: .3s
}

.c4-border-cc-1 figcaption:after,
.c4-border-cc-1:before {
  transform-origin: 0 0
}

.c4-border-cc-1 figcaption:before,
.c4-border-cc-1:after {
  transform-origin: 100% 100%
}

.c4-border-cc-1:before {
  transition-delay: .6s
}

.c4-border-cc-1:after {
  transition-delay: 0s
}

.c4-border-cc-1 figcaption:before {
  transition-delay: .9s
}

.c4-border-cc-1 figcaption:after,
.c4-border-cc-1.hover:before,
.c4-border-cc-1:focus:before,
.c4-border-cc-1:hover:before,
:focus>.c4-border-cc-1:before {
  transition-delay: .3s
}

.c4-border-cc-1.hover:after,
.c4-border-cc-1:focus:after,
.c4-border-cc-1:hover:after,
:focus>.c4-border-cc-1:after {
  transition-delay: .9s
}

.c4-border-cc-1.hover figcaption:before,
.c4-border-cc-1:focus figcaption:before,
.c4-border-cc-1:hover figcaption:before,
:focus>.c4-border-cc-1 figcaption:before {
  transition-delay: 0s
}

.c4-border-cc-1.hover figcaption:after,
.c4-border-cc-1:focus figcaption:after,
.c4-border-cc-1:hover figcaption:after,
:focus>.c4-border-cc-1 figcaption:after {
  transition-delay: .6s
}

.c4-border-ccc-1 figcaption:after,
.c4-border-ccc-1 figcaption:before,
.c4-border-ccc-1:after,
.c4-border-ccc-1:before {
  transition-duration: .4s
}

.c4-border-ccc-1 figcaption:after,
.c4-border-ccc-1:before {
  transform-origin: 100% 100%
}

.c4-border-ccc-1 figcaption:before,
.c4-border-ccc-1:after {
  transform-origin: 0 0
}

.c4-border-ccc-1:before {
  transition-delay: 0s
}

.c4-border-ccc-1:after {
  transition-delay: .6s
}

.c4-border-ccc-1 figcaption:before {
  transition-delay: .9s
}

.c4-border-ccc-1 figcaption:after {
  transition-delay: .3s
}

.c4-border-ccc-1.hover:before,
.c4-border-ccc-1:focus:before,
.c4-border-ccc-1:hover:before,
:focus>.c4-border-ccc-1:before {
  transition-delay: .9s
}

.c4-border-ccc-1.hover:after,
.c4-border-ccc-1:focus:after,
.c4-border-ccc-1:hover:after,
:focus>.c4-border-ccc-1:after {
  transition-delay: .3s
}

.c4-border-ccc-1.hover figcaption:before,
.c4-border-ccc-1:focus figcaption:before,
.c4-border-ccc-1:hover figcaption:before,
:focus>.c4-border-ccc-1 figcaption:before {
  transition-delay: 0s
}

.c4-border-ccc-1.hover figcaption:after,
.c4-border-ccc-1:focus figcaption:after,
.c4-border-ccc-1:hover figcaption:after,
:focus>.c4-border-ccc-1 figcaption:after {
  transition-delay: .6s
}

.c4-border-cc-2 figcaption:after,
.c4-border-cc-2:before {
  transform-origin: 0 0
}

.c4-border-cc-2 figcaption:before,
.c4-border-cc-2:after,
.c4-border-ccc-2 figcaption:after,
.c4-border-ccc-2:before {
  transform-origin: 100% 100%
}

.c4-border-cc-3 figcaption:after,
.c4-border-cc-3:before,
.c4-border-ccc-2 figcaption:before,
.c4-border-ccc-2:after {
  transform-origin: 0 0
}

.c4-border-cc-3 figcaption:before,
.c4-border-cc-3:after {
  transform-origin: 100% 100%
}

.c4-border-cc-3:before {
  left: 0;
  right: 33px;
  right: calc(var(--border-margin) + var(--border-margin) + var(--border-width))
}

.c4-border-cc-3:after {
  left: 33px;
  left: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  right: 0
}

.c4-border-cc-3 figcaption:before {
  bottom: 0;
  top: 33px;
  top: calc(var(--border-margin) + var(--border-margin) + var(--border-width))
}

.c4-border-cc-3 figcaption:after {
  bottom: 33px;
  bottom: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  top: 0
}

.c4-border-ccc-3 figcaption:after,
.c4-border-ccc-3:before {
  transform-origin: 100% 100%
}

.c4-border-ccc-3 figcaption:before,
.c4-border-ccc-3:after {
  transform-origin: 0 0
}

.c4-border-ccc-3:before {
  left: 33px;
  left: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  right: 0
}

.c4-border-ccc-3:after {
  left: 0;
  right: 33px;
  right: calc(var(--border-margin) + var(--border-margin) + var(--border-width))
}

.c4-border-ccc-3 figcaption:before {
  bottom: 33px;
  bottom: calc(var(--border-margin) + var(--border-margin) + var(--border-width));
  top: 0
}

.c4-border-ccc-3 figcaption:after {
  bottom: 0;
  top: 33px;
  top: calc(var(--border-margin) + var(--border-margin) + var(--border-width))
}

.c4-border-fade figcaption:after,
.c4-border-fade figcaption:before,
.c4-border-fade:after,
.c4-border-fade:before {
  opacity: 0;
  transform: scale(1)
}

.c4-border-fade.hover figcaption:after,
.c4-border-fade.hover figcaption:before,
.c4-border-fade.hover:after,
.c4-border-fade.hover:before,
.c4-border-fade:focus figcaption:after,
.c4-border-fade:focus figcaption:before,
.c4-border-fade:focus:after,
.c4-border-fade:focus:before,
.c4-border-fade:hover figcaption:after,
.c4-border-fade:hover figcaption:before,
.c4-border-fade:hover:after,
.c4-border-fade:hover:before,
:focus>.c4-border-fade figcaption:after,
:focus>.c4-border-fade figcaption:before,
:focus>.c4-border-fade:after,
:focus>.c4-border-fade:before {
  opacity: 1
}

.c4-image-zoom-in.hover img,
.c4-image-zoom-in:focus img,
.c4-image-zoom-in:hover img,
.c4-image-zoom-out img,
:focus>.c4-image-zoom-in img {
  transform: scale(1.25)
}

.c4-image-zoom-out.hover img,
.c4-image-zoom-out:focus img,
.c4-image-zoom-out:hover img,
:focus>.c4-image-zoom-out img {
  transform: scale(1)
}

.c4-image-pan-up img {
  transform: scale(1.2) translate(0);
  transform-origin: top
}

.c4-image-pan-up.hover img,
.c4-image-pan-up:focus img,
.c4-image-pan-up:hover img,
:focus>.c4-image-pan-up img {
  transform: scale(1.2) translateY(-15%)
}

.c4-image-pan-down img {
  transform: scale(1.2) translate(0);
  transform-origin: bottom
}

.c4-image-pan-down:focus img,
.c4-image-pan-down:hover img,
:focus>.c4-image-pan-down img {
  transform: scale(1.2) translateY(15%)
}

.c4-image-pan-left img {
  transform: scale(1.2) translate(0);
  transform-origin: left
}

.c4-image-pan-left.hover img,
.c4-image-pan-left:focus img,
.c4-image-pan-left:hover img,
:focus>.c4-image-pan-left img {
  transform: scale(1.2) translate(-15%)
}

.c4-image-pan-right img {
  transform: scale(1.2) translate(0);
  transform-origin: right
}

.c4-image-pan-right.hover img,
.c4-image-pan-right:focus img,
.c4-image-pan-right:hover img,
:focus>.c4-image-pan-right img {
  transform: scale(1.2) translate(15%)
}

.c4-image-blur.hover img,
.c4-image-blur:focus img,
.c4-image-blur:hover img,
:focus>.c4-image-blur img {
  filter: blur(4px);
  transform: scale(1.1)
}

.c4-image-rotate-left img {
  transform: scale(1.1) translate(0)
}

.c4-image-rotate-left.hover img,
.c4-image-rotate-left:focus img,
.c4-image-rotate-left:hover img,
:focus>.c4-image-rotate-left img {
  transform: scale(1.3) rotate(-15deg)
}

.c4-image-rotate-right img {
  transform: scale(1.1) translate(0)
}

.c4-image-rotate-right.hover img,
.c4-image-rotate-right:focus img,
.c4-image-rotate-right:hover img,
:focus>.c4-image-rotate-right img {
  transform: scale(1.3) rotate(15deg)
}

.c4-delay-100,
.c4-delay-100>* {
  transition-delay: .1s
}

.c4-delay-200,
.c4-delay-200>* {
  transition-delay: .2s
}

.c4-delay-300,
.c4-delay-300>* {
  transition-delay: .3s
}

.c4-delay-400,
.c4-delay-400>* {
  transition-delay: .4s
}

.c4-delay-500,
.c4-delay-500>* {
  transition-delay: .5s
}

.c4-delay-600,
.c4-delay-600>* {
  transition-delay: .6s
}

.c4-delay-700,
.c4-delay-700>* {
  transition-delay: .7s
}

.c4-delay-800,
.c4-delay-800>* {
  transition-delay: .8s
}

.c4-delay-900,
.c4-delay-900>* {
  transition-delay: .9s
}

.c4-delay-1000,
.c4-delay-1000>* {
  transition-delay: 1s
}

[class*=" c4-fade"],
[class*=" c4-fade"]>*,
[class*=" c4-reveal"],
[class*=" c4-reveal"]>*,
[class*=" c4-rotate"],
[class*=" c4-rotate"]>*,
[class^=c4-fade],
[class^=c4-fade]>*,
[class^=c4-reveal],
[class^=c4-reveal]>*,
[class^=c4-rotate],
[class^=c4-rotate]>* {
  display: inline-block
}

[class*=" c4-fade"]>:last-child,
[class*=" c4-reveal"]>:last-child,
[class*=" c4-rotate"]>:last-child,
[class^=c4-fade]>:last-child,
[class^=c4-reveal]>:last-child,
[class^=c4-rotate]>:last-child {
  margin-bottom: 0
}

[class*=" c4-reveal"],
[class*=" c4-rotate"],
[class^=c4-reveal],
[class^=c4-rotate] {
  opacity: 1;
  overflow: hidden
}

[class*=" c4-fade"],
[class^=c4-fade] {
  opacity: 0
}

.c4-izmir.hover [class*=" c4-fade"],
.c4-izmir.hover [class^=c4-fade],
.c4-izmir:focus [class*=" c4-fade"],
.c4-izmir:focus [class^=c4-fade],
.c4-izmir:hover [class*=" c4-fade"],
.c4-izmir:hover [class^=c4-fade],
:focus>.c4-izmir [class*=" c4-fade"],
:focus>.c4-izmir [class^=c4-fade] {
  opacity: 1;
  transform: translate(0)
}

.c4-izmir.hover [class*=" c4-reveal"],
.c4-izmir.hover [class*=" c4-rotate"],
.c4-izmir.hover [class^=c4-reveal],
.c4-izmir.hover [class^=c4-rotate],
.c4-izmir:focus [class*=" c4-reveal"],
.c4-izmir:focus [class*=" c4-rotate"],
.c4-izmir:focus [class^=c4-reveal],
.c4-izmir:focus [class^=c4-rotate],
.c4-izmir:hover [class*=" c4-reveal"],
.c4-izmir:hover [class*=" c4-rotate"],
.c4-izmir:hover [class^=c4-reveal],
.c4-izmir:hover [class^=c4-rotate],
:focus>.c4-izmir [class*=" c4-reveal"],
:focus>.c4-izmir [class*=" c4-rotate"],
:focus>.c4-izmir [class^=c4-reveal],
:focus>.c4-izmir [class^=c4-rotate] {
  opacity: 1
}

.c4-izmir.hover [class*=" c4-reveal"]>*,
.c4-izmir.hover [class*=" c4-rotate"]>*,
.c4-izmir.hover [class^=c4-reveal]>*,
.c4-izmir.hover [class^=c4-rotate]>*,
.c4-izmir:focus [class*=" c4-reveal"]>*,
.c4-izmir:focus [class*=" c4-rotate"]>*,
.c4-izmir:focus [class^=c4-reveal]>*,
.c4-izmir:focus [class^=c4-rotate]>*,
.c4-izmir:hover [class*=" c4-reveal"]>*,
.c4-izmir:hover [class*=" c4-rotate"]>*,
.c4-izmir:hover [class^=c4-reveal]>*,
.c4-izmir:hover [class^=c4-rotate]>*,
:focus>.c4-izmir [class*=" c4-reveal"]>*,
:focus>.c4-izmir [class*=" c4-rotate"]>*,
:focus>.c4-izmir [class^=c4-reveal]>*,
:focus>.c4-izmir [class^=c4-rotate]>* {
  transform: translate(0) rotate(0deg)
}

.c4-fade-up {
  transform: translateY(1.5rem)
}

.c4-fade-down {
  transform: translateY(-1.5rem)
}

.c4-fade-left {
  transform: translateX(1.5rem)
}

.c4-fade-right {
  transform: translateX(-1.5rem)
}

.c4-reveal-up>* {
  transform: translateY(100%)
}

.c4-reveal-down>* {
  transform: translateY(-100%)
}

.c4-reveal-left>* {
  transform: translateX(100%)
}

.c4-reveal-right>* {
  transform: translateX(-100%)
}

.c4-rotate-up-right>* {
  transform: rotate(90deg);
  transform-origin: bottom left
}

.c4-rotate-up-left>* {
  transform: rotate(-90deg);
  transform-origin: bottom right
}

.c4-rotate-down-right>* {
  transform: rotate(-90deg);
  transform-origin: top left
}

.c4-rotate-down-left>* {
  transform: rotate(90deg);
  transform-origin: top right
}

.c4-gradient-top {
  background-image: linear-gradient(180deg, #00b4db, #0083b0);
  background-image: linear-gradient(180deg, var(--primary-color) 0, var(--secondary-color) 100%)
}

.c4-gradient-left {
  background-image: linear-gradient(90deg, #00b4db, #0083b0);
  background-image: linear-gradient(90deg, var(--primary-color) 0, var(--secondary-color) 100%)
}

.c4-gradient-right {
  background-image: linear-gradient(270deg, #00b4db, #0083b0);
  background-image: linear-gradient(270deg, var(--primary-color) 0, var(--secondary-color) 100%)
}

.c4-gradient-bottom {
  background-image: linear-gradient(0deg, #00b4db, #0083b0);
  background-image: linear-gradient(0deg, var(--primary-color) 0, var(--secondary-color) 100%)
}

.c4-gradient-top-left {
  background-image: linear-gradient(135deg, #00b4db, #0083b0);
  background-image: linear-gradient(135deg, var(--primary-color) 0, var(--secondary-color) 100%)
}

.c4-gradient-top-right {
  background-image: linear-gradient(225deg, #00b4db, #0083b0);
  background-image: linear-gradient(225deg, var(--primary-color) 0, var(--secondary-color) 100%)
}

.c4-gradient-bottom-left {
  background-image: linear-gradient(45deg, #00b4db, #0083b0);
  background-image: linear-gradient(45deg, var(--primary-color) 0, var(--secondary-color) 100%)
}

.c4-gradient-bottom-right {
  background-image: linear-gradient(315deg, #00b4db, #0083b0);
  background-image: linear-gradient(315deg, var(--primary-color) 0, var(--secondary-color) 100%)
}

.c4-izmir .c4-layout-top-left {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left
}

.c4-izmir .c4-layout-top-center {
  justify-content: flex-start
}

.c4-izmir .c4-layout-top-right {
  align-items: flex-end;
  justify-content: flex-start;
  text-align: right
}

.c4-izmir .c4-layout-center-left {
  align-items: flex-start;
  text-align: left
}

.c4-izmir .c4-layout-center-right {
  align-items: flex-end;
  text-align: right
}

.c4-izmir .c4-layout-bottom-left {
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left
}

.c4-izmir .c4-layout-bottom-center {
  justify-content: flex-end
}

.c4-izmir .c4-layout-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right
}

.c4-izmir {
  background-color: #00b4db;
  background-color: var(--primary-color)
}

.c4-izmir figcaption {
  padding: 2em;
  padding: calc(var(--padding)*2)
}

.c4-izmir figcaption>* {
  opacity: 0
}

.c4-izmir.hover>img,
.c4-izmir:focus>img,
.c4-izmir:hover>img,
:focus>.c4-izmir>img {
  opacity: .25;
  opacity: var(--image-opacity)
}

.c4-izmir.hover figcaption>*,
.c4-izmir:focus figcaption>*,
.c4-izmir:hover figcaption>*,
:focus>.c4-izmir figcaption>* {
  opacity: 1
}

@keyframes caret {
  50% {
    opacity: .1;
    transform: scaleY(.8)
  }
}

.fancyInput {
  display: inline-block;
  font-family: Fjalla One, sans-serif;
  letter-spacing: -1px;
  position: relative;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .6);
  white-space: nowrap;
  width: auto
}

.fancyInput ::-webkit-input-placeholder {
  color: transparent
}

.fancyInput :-moz-placeholder,
.fancyInput ::-moz-placeholder {
  color: transparent
}

.fancyInput :-ms-input-placeholder {
  color: transparent
}

.fancyInput.textarea {
  overflow: auto;
  white-space: normal
}

.fancyInput input,
.fancyInput textarea {
  background: none;
  border: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  color: transparent;
  font-family: Fjalla One, sans-serif;
  font-size: inherit;
  left: 0;
  letter-spacing: -1px;
  outline: 0;
  padding: inherit;
  padding-bottom: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2
}

.fancyInput input {
  left: -1px;
  padding-right: 0;
  top: 1px
}

.fancyInput textarea {
  height: 100%;
  overflow: hidden;
  word-break: break-all
}

.fancyInput>div {
  display: inline-block;
  position: relative
}

.fancyInput>div:before {
  content: attr(data-placeholder);
  left: -20px;
  opacity: 0;
  position: absolute;
  transition: .3s ease-out
}

.fancyInput>div.empty:before {
  left: 0;
  opacity: .2
}

.fancyInput input:focus~div.empty:before {
  opacity: .1
}

.fancyInput.textarea>div {
  width: 99.9%
}

.fancyInput :focus~.caret,
.fancyInput :focus~div .caret {
  animation: caret .4s 40ms infinite;
  box-shadow: 0 0 8px #fff;
  opacity: .8
}

.fancyInput .caret {
  background: #fff;
  border-radius: 4px;
  display: inline-block;
  font-weight: 400;
  margin-left: -3px;
  opacity: 0;
  -moz-user-select: none;
  width: 3px
}

.fancyInput span:not(.deleted)~.caret {
  margin: 0;
  position: absolute
}

.fancyInput>div span {
  display: inline-block;
  position: relative;
  transition: .1s cubic-bezier(0, .6, .55, 1.4)
}

.fancyInput>input[type=password]+div span:empty:after {
  content: "●";
  display: inline
}

.fancyInput>div .deleted {
  opacity: 0;
  transform: translateX(12px);
  transition: .14s
}

.fancyInput>div span.state1 {
  transform: translateY(-25px) rotateX(90deg)
}

.fancyInput>div span.state2 {
  transform: translateY(25px) rotateX(90deg)
}

.effect2 .fancyInput>div span.state1,
.effect2 .fancyInput>div span.state2 {
  transform: translateX(10px) scale(1.8)
}

.effect3 .fancyInput>div span {
  transition: .2s cubic-bezier(0, .6, .55, 1.4)
}

.effect3 .fancyInput>div span.state1,
.effect3 .fancyInput>div span.state2 {
  -webkit-filter: blur(2px);
  opacity: 0;
  transform: scale(.4)
}

.effect4 .fancyInput>div span {
  transition-duration: .15s
}

.effect4 .fancyInput>div span.state1,
.effect4 .fancyInput>div span.state2 {
  opacity: 0;
  transform: translateY(-60px)
}

.effect5 .fancyInput>div span {
  transition-duration: .15s
}

.effect5 .fancyInput>div span.state1,
.effect5 .fancyInput>div span.state2 {
  opacity: 0;
  transform: translateX(-30px)
}

@font-face {
  font-family: swiper-icons;
  font-style: normal;
  font-weight: 400;
  src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA")
}

:root {
  --swiper-theme-color: #007aff
}

.swiper {
  list-style: none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0;
  position: relative;
  z-index: 1
}

.swiper-vertical>.swiper-wrapper {
  flex-direction: column
}

.swiper-wrapper {
  box-sizing: content-box;
  display: flex;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%;
  z-index: 1
}

.swiper-android .swiper-slide,
.swiper-wrapper {
  transform: translateZ(0)
}

.swiper-pointer-events {
  touch-action: pan-y
}

.swiper-pointer-events.swiper-vertical {
  touch-action: pan-x
}

/* .mt30:first-child{margin-top:0;} */

.swiper-slide {
  flex-shrink: 0;
  height: 100%;
  position: relative;
  transition-property: transform;
  width: 100%
}

.swiper-slide-invisible-blank {
  visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto
}

.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0)
}

.swiper-3d,
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide,
.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 10
}

.swiper-3d .swiper-slide-shadow {
  background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-css-mode>.swiper-wrapper {
  -ms-overflow-style: none;
  overflow: auto;
  scrollbar-width: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
  display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: start start
}

.swiper-horizontal.swiper-css-mode>.swiper-wrapper {
  scroll-snap-type: x mandatory
}

.swiper-vertical.swiper-css-mode>.swiper-wrapper {
  scroll-snap-type: y mandatory
}

.swiper-centered>.swiper-wrapper:before {
  content: "";
  flex-shrink: 0;
  order: 9999
}

.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
  -webkit-margin-start: var(--swiper-centered-offset-before);
  margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
  height: 100%;
  min-height: 1px;
  width: var(--swiper-centered-offset-after)
}

.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
  -webkit-margin-before: var(--swiper-centered-offset-before);
  margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-centered.swiper-vertical>.swiper-wrapper:before {
  height: var(--swiper-centered-offset-after);
  min-width: 1px;
  width: 100%
}

.swiper-centered>.swiper-wrapper>.swiper-slide {
  scroll-snap-align: center center
}

.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0)
}

.swiper-virtual.swiper-css-mode .swiper-wrapper:after {
  content: "";
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0
}

.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper:after {
  height: 1px;
  width: var(--swiper-virtual-size)
}

.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper:after {
  height: var(--swiper-virtual-size);
  width: 1px
}

:root {
  --swiper-navigation-size: 44px
}

.swiper-button-next,
.swiper-button-prev {
  align-items: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  cursor: pointer;
  display: flex;
  height: var(--swiper-navigation-size);
  justify-content: center;
  margin-top: calc(0px - var(--swiper-navigation-size)/2);
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size)/44*27);
  z-index: 10
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  cursor: auto;
  opacity: .35;
  pointer-events: none
}

.swiper-button-next.swiper-button-hidden,
.swiper-button-prev.swiper-button-hidden {
  cursor: auto;
  opacity: 0;
  pointer-events: none
}

.swiper-navigation-disabled .swiper-button-next,
.swiper-navigation-disabled .swiper-button-prev {
  display: none !important
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  font-variant: normal;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none !important
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 10px;
  right: auto
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "prev"
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  left: auto;
  right: 10px
}

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "next"
}

.swiper-button-lock {
  display: none
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  transform: translateZ(0);
  transition: opacity .3s;
  z-index: 10
}

.swiper-pagination.swiper-pagination-hidden {
  opacity: 0
}

.swiper-pagination-disabled>.swiper-pagination,
.swiper-pagination.swiper-pagination-disabled {
  display: none !important
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 10px;
  left: 0;
  width: 100%
}

.swiper-pagination-bullets-dynamic {
  font-size: 0;
  overflow: hidden
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  position: relative;
  transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(.33)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(.66)
}

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(.33)
}

.swiper-pagination-bullet {
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  border-radius: 50%;
  display: inline-block;
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px))
}

button.swiper-pagination-bullet {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  box-shadow: none;
  margin: 0;
  padding: 0
}

.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer
}

.swiper-pagination-bullet:only-child {
  display: none !important
}

.swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  opacity: var(--swiper-pagination-bullet-opacity, 1)
}

.swiper-pagination-vertical.swiper-pagination-bullets,
.swiper-vertical>.swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0, -50%, 0)
}

.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  display: block;
  margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px
}

.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: transform .2s, top .2s
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px)
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap
}

.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, left .2s
}

.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: transform .2s, right .2s
}

.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, .25);
  position: absolute
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: scale(0);
  transform-origin: left top;
  width: 100%
}

.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top
}

.swiper-horizontal>.swiper-pagination-progressbar,
.swiper-pagination-progressbar.swiper-pagination-horizontal,
.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,
.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  height: 4px;
  left: 0;
  top: 0;
  width: 100%
}

.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,
.swiper-pagination-progressbar.swiper-pagination-vertical,
.swiper-vertical>.swiper-pagination-progressbar {
  height: 100%;
  left: 0;
  top: 0;
  width: 4px
}

.swiper-pagination-lock {
  display: none
}

.swiper-scrollbar {
  background: rgba(0, 0, 0, .1);
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none
}

.swiper-scrollbar-disabled>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-disabled {
  display: none !important
}

.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
  bottom: 3px;
  height: 5px;
  left: 1%;
  position: absolute;
  width: 98%;
  z-index: 50
}

.swiper-scrollbar.swiper-scrollbar-vertical,
.swiper-vertical>.swiper-scrollbar {
  height: 98%;
  position: absolute;
  right: 3px;
  top: 1%;
  width: 5px;
  z-index: 50
}

.swiper-scrollbar-drag {
  background: rgba(0, 0, 0, .5);
  border-radius: 10px;
  height: 100%;
  left: 0;
  position: relative;
  top: 0;
  width: 100%
}

.swiper-scrollbar-cursor-drag {
  cursor: move
}

.swiper-scrollbar-lock {
  display: none
}

.swiper-zoom-container {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  text-align: center;
  width: 100%
}

.swiper-zoom-container>canvas,
.swiper-zoom-container>img,
.swiper-zoom-container>svg {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain
}

.swiper-slide-zoomed {
  cursor: move
}

.swiper-lazy-preloader {
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top: 4px solid transparent;
  box-sizing: border-box;
  height: 42px;
  left: 50%;
  margin-left: -21px;
  margin-top: -21px;
  position: absolute;
  top: 50%;
  transform-origin: 50%;
  width: 42px;
  z-index: 10
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
  animation: swiper-preloader-spin 1s linear infinite
}

.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg)
  }

  to {
    transform: rotate(1turn)
  }
}

.swiper .swiper-notification {
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1000
}

.swiper-free-mode>.swiper-wrapper {
  margin: 0 auto;
  transition-timing-function: ease-out
}

.swiper-grid>.swiper-wrapper {
  flex-wrap: wrap
}

.swiper-grid-column>.swiper-wrapper {
  flex-direction: column;
  flex-wrap: wrap
}

.swiper-fade.swiper-free-mode .swiper-slide {
  transition-timing-function: ease-out
}

.swiper-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity
}

.swiper-fade .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-fade .swiper-slide-active,
.swiper-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-cube {
  overflow: visible
}

.swiper-cube .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 100%;
  pointer-events: none;
  transform-origin: 0 0;
  visibility: hidden;
  width: 100%;
  z-index: 1
}

.swiper-cube .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-cube.swiper-rtl .swiper-slide {
  transform-origin: 100% 0
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-cube .swiper-slide-active,
.swiper-cube .swiper-slide-next,
.swiper-cube .swiper-slide-next+.swiper-slide,
.swiper-cube .swiper-slide-prev {
  pointer-events: auto;
  visibility: visible
}

.swiper-cube .swiper-slide-shadow-bottom,
.swiper-cube .swiper-slide-shadow-left,
.swiper-cube .swiper-slide-shadow-right,
.swiper-cube .swiper-slide-shadow-top {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 0
}

.swiper-cube .swiper-cube-shadow {
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: .6;
  position: absolute;
  width: 100%;
  z-index: 0
}

.swiper-cube .swiper-cube-shadow:before {
  background: #000;
  bottom: 0;
  content: "";
  filter: blur(50px);
  left: 0;
  position: absolute;
  right: 0;
  top: 0
}

.swiper-flip {
  overflow: visible
}

.swiper-flip .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: none;
  z-index: 1
}

.swiper-flip .swiper-slide .swiper-slide {
  pointer-events: none
}

.swiper-flip .swiper-slide-active,
.swiper-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto
}

.swiper-flip .swiper-slide-shadow-bottom,
.swiper-flip .swiper-slide-shadow-left,
.swiper-flip .swiper-slide-shadow-right,
.swiper-flip .swiper-slide-shadow-top {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 0
}

.swiper-creative .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transition-property: transform, opacity, height
}

.swiper-cards {
  overflow: visible
}

.swiper-cards .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  transform-origin: center bottom
}

header {
  align-items: center;
  background: #fff;
  display: flex;
  height: 90px;
  justify-content: space-between;
  padding: 0 40px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999
}

header .left .logo {
  margin-top:10px;
  width: 120px
}

header .right {
  align-items: flex-end;
  display: flex
}

header .right ul {
  margin-bottom:0;
  align-items: flex-end;
  display: flex
}

header .right ul li {
  width: 70px
}

header .right ul li a {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-decoration: none
}

header .right ul li a .popsicle {
  height: 25px;
  transform: translateY(-25px);
  transition: all .3s ease-in-out;
  visibility: hidden
}

header .right ul li a label {
  color: #070606;
  cursor: pointer;
  font-family: montserrat, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  margin-top: 5px;
  transition: all .3s ease-in-out
}

header .right ul li.active a .popsicle {
  transform: translateY(0);
  transition-delay: .3s;
  visibility: visible
}

header .right ul li.active a label {
  color: #1eaeef;
  transition-delay: .4s
}

header .right .say_hello {
  margin-left: 40px
}

header .right .say_hello a {
  color: #1eaeef;
  font-family: montserrat, sans-serif;
  font-style: normal;
  font-weight: 700
}

header .right .social {
  align-self: flex-end;
  margin-bottom: -5px;
  margin-left: 40px
}

header .right .social a {
  text-decoration: none
}

header .right .social a .social_icon {
  width: 25px
}

header .right_mobile {
  align-items: center;
  display: none;
}

header .right_mobile i {
  color: #1eaeef;
  font-size: 25px
}

header .right_mobile .close_mobile_menu {
  display: none;
  font-size: 35px
}

.invisivle_height {
  display: flex;
  overflow: hidden
}

.invisivle_height .height {
  height: 25px
}

.mobile_menu {
  background: #fff;
  border-top: 1px solid #1eaeef;
  box-sizing: border-box;
  display: none;
  position: fixed;
  top: 90px;
  z-index: 999
}

.mobile_menu,
.mobile_menu .wrapper {
  height: calc(100% - 90px);
  width: 100%
}

.mobile_menu .wrapper {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 40px
}

.mobile_menu .wrapper ul {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px
}

.mobile_menu .wrapper ul li {
  margin-top: 10px;
  width: 70px
}

.mobile_menu .wrapper ul li a {
  align-items: center;
  display: flex;
  flex-direction: column;
  text-decoration: none
}

.mobile_menu .wrapper ul li a .popsicle {
  height: 30px;
  transform: translateY(-40px);
  transition: all .3s ease-in-out;
  visibility: hidden
}

.mobile_menu .wrapper ul li a label {
  color: #070606;
  cursor: pointer;
  font-family: montserrat, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  margin-top: 5px;
  text-align: center;
  transition: all .3s ease-in-out;
  width: 200px
}

.mobile_menu .wrapper ul li.active a .popsicle {
  transform: translateY(0);
  transition-delay: .3s;
  visibility: visible
}

.mobile_menu .wrapper ul li.active a label {
  color: #1eaeef;
  transition-delay: .4s
}

.mobile_menu .wrapper .say_hello {
  margin-top: 10px
}

.mobile_menu .wrapper .say_hello a {
  color: #1eaeef;
  font-family: montserrat, sans-serif;
  font-style: normal;
  font-weight: 700
}

.mobile_menu .wrapper .social {
  bottom: 20px;
  position: absolute
}

.mobile_menu .wrapper .social a {
  text-decoration: none
}

.mobile_menu .wrapper .social a .social_icon {
  image-rendering: unset;
  width: 25px
}

footer {
  font-family: montserrat, sans-serif;
  font-style: normal;
  padding: 50px 0;
}

footer .flex .left img {
  width: 165px
}

footer .flex .right p {
  letter-spacing: 0.2px;
    font-size: 13px;
    font-weight: 400;
  line-height: 20px
}

footer .flex .right .info {
  display: flex;
  flex-direction: column;
  margin-top: 10px
}

footer .flex .right .info a {
  color: #1eaeef;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none
}

footer .flex .right .info a.tel {
  margin-left: 0;
  margin-top: 10px
}

footer .download_wrapper{padding-top: 3rem;}

footer .download_wrapper .download {
  background: #1eaeef;
  border-radius: 20px;
  color: #fff;
  display: inline-block;
  padding: 10px 20px;
  position: relative;
  text-decoration: none
}
footer .copyright {
  font-size: 11px;
    letter-spacing: 0.25px;
    font-weight: 400;
    margin: 25px auto 0;
}
h1 {
  letter-spacing: -3px
}

.home .hero_landing {
  background: #1eaeef;
  height: calc(100% - 90px);
  margin-top: 0px;
  position: relative
}

.home .hero_landing .animate-arrow-video {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  width: -moz-fit-content;
  width: fit-content
}

.home .hero_landing .animate-arrow-video p {
  font-size: 18px !important;
  font-weight: 400 !important;
  margin-top: 5px
}

.home .hero_landing .hero_landing_wrapper {
  height: calc(100% - 90px) !important;
    max-height: calc(100% - 90px) !important;
    top: 90px !important;
}

.home .hero_landing .context_after {
  padding-top: 60px;
  position: absolute;
  right: 10%;
  top: 35%;
  transform: translateY(-70%);
  width: 500px;
  z-index: 3
}

.home .hero_landing .context_after .wrapper p {
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 33px;
  text-align: left
}

.home .hero_landing video {
  border-bottom-right-radius: 100px !important;
  /* display: none; */
  height: 100%;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 2
}
.home .hero_landing .mobile-header-img {
  border-bottom-right-radius: 100px;
  height: calc(100vh - 60px);
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  position: relative;
  top: 0;
  width: 100%;
  z-index: 2
}

.home .about {
  background: #1eaeef;
  border-bottom-right-radius: 100px;
  position: relative;
  z-index: 10
}

.home .about:after {
  background: #fff;
  bottom: 0;
  content: "";
  height: 40%;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: -1
}

.home .about .container .wrapper {
  align-items: flex-end;
  display: flex;
  margin: 0 auto;
  max-width: 1200px;
  width: 80%
}

.home .about .container .wrapper .left {
  width: 55%
}
.home .about .container .wrapper .left h1 {
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -1px
}
.home .about .container .wrapper .left h1.dark {
  color: #070606
}

.home .about .container .wrapper .left h1.light {
  color: #fff
}

.home .about .container .wrapper .right {
  opacity: 0;
  padding-left: 20px;
  width: 45%
}
.home .about .container .wrapper .right p {
  color: #fff;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 20px
}

.home .about .container .wrapper .right p:last-child {
  margin-bottom: 0
}

.home .about .container.blue {
  background: #1eaeef;
  border-bottom-right-radius: 100px;
  padding: 50px 0;
  position: relative
}

.home .about .container.blue:after {
  background: #fff;
  bottom: 0;
  content: "";
  height: 40%;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: -1
}

.home .about .container.light {
  background: #fff;
  border-bottom-right-radius: 100px;
  padding-bottom: 50px;
  padding-top: 50px
}
.approachlight{
    border-bottom-right-radius:0 !important;
}
.home .about .container.light .wrapper {
  align-items: flex-end;
  display: flex;
  margin: 0 auto;
  max-width: 1200px;
  width: 80%
}

.home .about .container.light .wrapper .left h1.dark {
  color: #070606
}

.home .about .container.light .wrapper .left h1.light {
  color: #1eaeef
}

.home .about .container.light .wrapper .right {
  opacity: 0
}

.home .about .container.light .wrapper .right p {
  color: #070606
}

.home .about .container.light .logosSwiper_container {
  margin: 0 auto;
  position: relative;
  width: 70%
}
.home .about .container.light .logosSwiper_container .logosSwiper {
  margin-top: 60px;
  padding: 20px 0;
  width: 85%
}

.home .about .container.light .logosSwiper_container .logosSwiper .swiper-wrapper {
  transition-timing-function: linear !important
}

.home .about .container.light .logosSwiper_container .logosSwiper .swiper-slide {
  align-items: center;
  display: flex;
  height: 80px;
  justify-content: center;
  width: 120px
}

.home .about .container.light .logosSwiper_container .logosSwiper .swiper-slide .logos {
  transition: all .5s ease-in-out;
  width: 100%
}

.home .about .container.light .logosSwiper_container .logosSwiper .swiper-slide .logos.logo_13 {
  width: 50%
}

.home .about .container.light .logosSwiper_container .arrows {
  cursor: pointer;
  position: absolute;
  width: 35px
}
.home .about .container.light .logosSwiper_container .arrows.right_arrow {
  right: 0;
  top: 50%;
  transform: translateY(-50%)
}

.home .about .container.light .logosSwiper_container .arrows.left_arrow {
  left: 0;
  top: 50%;
  transform: translateY(-50%)
}

.home .career {
  padding:50px 0;
  border-bottom-right-radius: 100px;
  position: relative;
  z-index: 10
}

.home .career:after {
  background: #fff;
  bottom: 0;
  content: "";
  height: 40%;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: -1
}

.home .career .container .wrapper {
  align-items: center;
  display: flex;
  margin: 0 auto;
  max-width: 1200px;
  width: 80%
}

.home .career .container .wrapper .left {
  width: 70%
}

.home .career .container .wrapper .left h1 {
  font-size: 67px;
  font-weight: 700;
  letter-spacing: -1px
}
.home .career .container .wrapper .left h1.dark {
  color: #070606
}

.home .career .container .wrapper .left h1.light {
  color: #fff
}

.home .career .container .wrapper .left p {
  color: #070606;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 20px
}

.home .career .container .wrapper .left p:last-child {
  margin-bottom: 0
}

.home .career .container .wrapper .left .padding-blue {
  padding-top: 40px
}

.home .career .container .wrapper .left .padding-blue-bottom {
  line-height: 1.4;
  max-width: 600px;
  padding-top: 30px;
  width: 100%
}

.home .career .container .wrapper .left .padding-blue-bottom-bottom {
  line-height: 1.4;
  margin-bottom: 20px;
  max-width: 600px;
  width: 100%
}


.home .career .container .wrapper .left .padding-blue-bottom-bottom .view_cta {
  align-items: center;
  display: flex;
  height: 100%
}

.home .career .container .wrapper .left .padding-blue-bottom-bottom .view_cta a {
  background: #1eaeef;
  border-radius: 30px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 35px;
  text-decoration: none
}

.home .career .container .wrapper .left .blue {
  color: #1eaeef;
  font-size: 22px;
  font-weight: 700
}

.home .career .container .wrapper .left .black {
  color: #070606;
  max-width: 650px;
  width: 100%
}

.home .career .container .wrapper .left .email-black {
  margin-bottom: 0 !important
}

.home .career .container .wrapper .right-container {
  justify-content: flex-end;
  display: flex;
  width: 100%
}

.home .career .container .wrapper .right-container .right {
  opacity: 1 !important;
  padding-left: 20px
}
.home .career .container .wrapper .right-container .right .desktop-only {
  display: none
}

.home .career .container .wrapper .right-container .right p {
  color: #1eaeef !important;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  margin-bottom: 20px
}

.home .career .container .wrapper .right-container .right p:last-child {
  margin-bottom: 0
}

.home .career .container.blue {
  border-bottom-right-radius: 100px;
  padding: 50px 0;
  position: relative
}

.home .career .container.blue:after {
  background: #fff;
  bottom: 0;
  content: "";
  height: 40%;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: -1
}

.home .career .container.light {
  background: #fff;
  border-bottom-right-radius: 100px;
}

.home .career .container.light .wrapper {
  align-items: center;
  display: flex;
  margin: 0 auto;
  max-width: 1200px;
  width: 80%
}

.home .career .container.light .wrapper .left h1.dark {
  color: #070606
}

.home .career .container.light .wrapper .left h1.light {
  color: #1eaeef
}

.home .career .container.light .wrapper .right {
  opacity: 0
}

.home .career .container.light .wrapper .right p {
  color: #070606
}

.home .our_work {
  background: #fff;
  /*padding-top: 40px;*/
  position: relative;
  z-index: 10
}

.home .our_work h1 {
  font-size: 50px;
  color: #070606;
  font-weight: 700;
}
.home .our_work .mobile-only {
  display: block
}
.home .our_work .mobile-only .splt {
  margin: 0 auto 14px
}

.home .our_work .desktop-only {
  display: block
}

.home .our_work .projects .project {
  height: 275px;
  opacity: 1;
  position: relative
}

.home .our_work .projects .project .bg {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%
}

.home .our_work .projects .project figure {
  background: #1eaeef;
  border-radius: 0;
  height: 100%;
  width: 100%
}

.home .our_work .projects .project figure:after,
.home .our_work .projects .project figure:before {
  display: none
}

.home .our_work .projects .project figure .project_logo {
  height: auto;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all .3s ease-in-out;
  width: 260px
}

.home .our_work .projects .project figure .project_logo.farmstead,
.home .our_work .projects .project figure .project_logo.ndstry,
.home .our_work .projects .project figure .project_logo.ntry {
  width: 150px
}

.home .our_work .projects .project figure .project_logo.arthur,
.home .our_work .projects .project figure .project_logo.artisan {
  width: 130px
}

.home .our_work .projects .project figure:hover .project_logo {
  opacity: 0
}

.home .our_work .projects .project figure figcaption {
  border-radius: 0;
  justify-content: center
}

.home .our_work .projects .project figure figcaption .project_logo_hover {
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  position: absolute;
  right: 0px;
  top: 10px;
  transform: unset;
  width: 150px
}

.home .our_work .projects .project figure figcaption .project_logo_hover.farmstead,
.home .our_work .projects .project figure figcaption .project_logo_hover.ndstry,
.home .our_work .projects .project figure figcaption .project_logo_hover.ntry,
.home .our_work .projects .project figure figcaption .project_logo_hover.sappahire {
  width: 110px
}

.home .our_work .projects .project figure figcaption p {
  display: block;
  line-height: 22px;
  text-transform: lowercase
}

.home .our_work .projects .project figure figcaption .c4-reveal-right {
  width: 100%
}

.home .our_work .projects .project figure figcaption .product,
.home .our_work .projects .project figure figcaption .project_name {
  font-size: 22px;
  font-weight: 700;
  width: 75%
}

.home .our_work .projects .project figure figcaption .builder,
.home .our_work .projects .project figure figcaption .location {
  font-size: 18px;
  font-weight: 600
}

.home .our_work .projects .project figure figcaption a {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-top: 20px
}

.home .our_work .projects .project figure figcaption:after,
.home .our_work .projects .project figure figcaption:before {
  display: none
}

.home .our_work .back_top {
  display: flex;
  justify-content: center;
  margin: 60px 0
}

.home .our_work .back_top a {
  color: #070606;
  font-size: 15px;
  font-weight: 600
}

.features .features_title, .home .blog .blog_title {
  color: #070606;
  font-size: 50px;
  font-weight: 700;
  margin: 0 auto 30px;
  width: 80%
}

.title
{
    color: #070606;
  font-size: 67px;
  font-weight: 700;
  margin: 0 auto 40px;
  width: 90%
}

.home .blog .mobile-only {
  display: block
}

.home .blog .mobile-only .splt {
  margin: 0 auto 14px
}

.home .blog .desktop-only {
  display: none
}

.home .blog-main {
  background: #1eaeef;
  border-bottom-right-radius: 100px;
  padding: 40px 0
}

.home .blog-main .wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  
  text-align: center;
  
  width: 500px
}

.home .blog-main .wrapper h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 40px
}

.home .blog-main .wrapper p {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px
}

.home .blog-main .wrapper .light {
  color: #fff
}

.home .blog-main .blogSwiper_container {
  margin: 40px auto 0;
  position: relative;
  width: 80%
}

.home .blog-main .blogSwiper_container .blogSwiper {
  height: 300px
}

.home .blog-main .blogSwiper_container .blogSwiper .swiper-slide a {
  justify-content: flex-start;
  flex-direction: column;
  background-color: transparent;
    top: 0!important;
    bottom: 0!important;
    right: 0!important;
    left: 0!important;
    font-size: large;
  display: flex;
  height: 100%;
  position: relative;
  text-decoration: none;
  width: 100%;
  border-radius: 0!important;
}
.home .blog-main .blogSwiper_container .blogSwiper .swiper-slide a .caption span{color:#fff!important;line-height: normal!important;}

.home .blog-main .blogSwiper_container .blogSwiper .swiper-slide a:after {
  content: "";
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1
}

.home .blog-main .blogSwiper_container .blogSwiper .swiper-slide a img {
  border-radius: 0px !important;
  height: 220px!important;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%!important;
  z-index: -1;
}

.home .blog-main .blogSwiper_container .blogSwiper .swiper-slide a .caption {
  margin-top: 15px;
    color: #fff !important;
    height: auto;
    line-height: normal;
    z-index: 2;
}
.home .blog-main .blogSwiper_container .swiper-pagination-blogSwiper {
  display: flex;
  justify-content: center;
  margin-top: 15px
}

.home .blog-main .blogSwiper_container .swiper-pagination-blogSwiper .swiper-pagination-bullet {
  background: #fff
}

.home .ig {
  margin: 0 auto;
  padding: 50px 0;
}
.blogtitle {
  align-items: center;
  color: #fff;
  display: flex;
  font-size: 22px!important;
  font-weight: 700!important;
  justify-content: center;
  text-decoration: none
}

.home .ig .headline {
  align-items: center;
  color: #1eaeef;
  display: flex;
  font-size: 22px;
  font-weight: 700;
  justify-content: center;
  text-decoration: none
}

.home .ig .headline img {
  height: 36px;
  margin-right: 15px
}

.home .ig .ig_container {
  margin: 30px auto 0;
  width: 80%
}

.home .ig .view_cta {
  display: flex;
  justify-content: center;
  margin-top: 30px
}

.home .ig .view_cta a {
  background: #1eaeef;
  border-radius: 30px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  padding: 15px 35px;
  text-decoration: none
}

.home .hello {
  background: #323030;
  border-bottom-right-radius: 100px;
  padding: 50px 0;
  position: relative
}

.home .hello .container {
  display: inline-block;
  position: relative
}

.home .hello .thank_you_msg {
  align-items: center;
  display: flex !important;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: all .5s ease-in-out;
  visibility: hidden;
  width: 100%
}

.home .hello .thank_you_msg.active {
  opacity: 1;
  visibility: visible
}

.home .hello .thank_you_msg .msg_container {
  align-items: center;
  background: #fff;
  border: 1px solid #070606;
  border-bottom-right-radius: 100px;
  display: flex;
  padding: 60px 40px;
  position: relative
}

.home .hello .thank_you_msg .msg_container .close_msg {
  cursor: pointer;
  font-size: 30px;
  position: absolute;
  right: 10px;
  top: 10px
}

.home .hello .thank_you_msg .msg_container .left .pop {
  width: 100px
}

.home .hello .thank_you_msg .msg_container .right {
  margin-left: 10px
}

.home .hello .thank_you_msg .msg_container .right h1 {
  font-size: 60px;
  font-weight: 700;
  line-height: .8
}

.home .hello .thank_you_msg .msg_container .right h2 {
  font-size: 30px;
  font-weight: 700;
  line-height: .8
}

.home .hello .wrap {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 1200px;
  width: 80%
}

.home .hello .wrap .coolaid {
  align-self: flex-end;
  margin-right: -5%;
  width: 200px
}

.home .hello .wrap h1 {
  color: #fff;
  font-size: 70px;
  font-weight: 700;
  margin-top: 60px
}

.home .hello .wrap form {
  margin-top: 50px
}

.home .hello .wrap form .row {
  align-items: center;
  display: flex;
  margin-bottom: 30px
}

.home .hello .wrap form .row input {
  -webkit-appearance: none;
  background: none;
  border: 1px solid #fff;
  box-sizing: border-box;
  color: #fff;
  font-family: montserrat, sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  margin-left: 10px;
  outline: none;
  padding: 0 10px
}

.home .hello .wrap form .row p,
.home .hello .wrap form input {
  color: #fff;
  font-size: 22px;
  font-weight: 700
}

.hello_form .wpcf7-form-control.consent label span {
  display: none;
}

.home .hello .wrap form input {
  -webkit-appearance: none;
  background: none;
  border: none;
  font-family: montserrat, sans-serif;
  font-style: normal;
  margin: 15px 0 0;
  outline: none
}

.home .hello .wrap form input::-moz-placeholder {
  color: #fff;
  font-family: montserrat, sans-serif;
  font-style: normal
}

.home .hello .wrap form input::placeholder {
  color: #fff;
  font-family: montserrat, sans-serif;
  font-style: normal
}

.home .hello .wrap form input#email {
  width: 305px
}

.home .hello .wrap form input.name {
  border: none;
  border-bottom: 1px solid #fff;
  font-size: 18px;
  margin: 0 0 0 10px;
  padding: 0;
  width: 300px
}

.home .hello .wrap form input.submit {
  -webkit-appearance: none;
  background: #1eaeef;
  border-radius: 30px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  margin-top: 20px;
  padding: 10px 30px
}

.home .hello .wrap form textarea {
  background: none;
  border: 1px solid #fff;
  color: #fff;
  display: block;
  font-family: montserrat, sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  margin-top: 13px;
  outline: none;
  resize: none;
  width: 472px
}

.home .hello .wrap form textarea::-moz-placeholder {
  color: #fff;
  font-family: montserrat, sans-serif;
  font-style: normal
}

.home .hello .wrap form textarea::placeholder {
  color: #fff;
  font-family: montserrat, sans-serif;
  font-style: normal
}

.home .hello .wrap form .parsley-errors-list {
  display: block
}

.home .hello .wrap form .parsley-errors-list .parsley-required,
.home .hello .wrap form .parsley-errors-list .parsley-type {
  color: #ff9494;
  font-size: 14px
}

.char {
  overflow: visible !important
}

.toggle-box {
  display: flex;
  margin-bottom: 10px;
  margin-top: 20px
}

.toggle-box .toggle-text {
  color: #fff;
  margin-left: 15px;
  width: 300px
}

.blog-paragraph-title {
  color: #fff;
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 20px;
  max-width: 1300px;
  text-align: left
}

.down_arrow {
  -webkit-animation: downarrow .9s ease-in-out infinite alternate
}

.blog {
  margin: 0 auto;
  overflow-y: hidden
}

.blog .back-arrow {
  align-items: center;
  color: #000;
  display: flex;
  font-family: montserrat, sans-serif;
  font-size: 16px;
  font-weight: 500;
  left: 60px;
  letter-spacing: 2px;
  padding-left: 10px;
  text-decoration: none;
  text-transform: uppercase;
  z-index: 9999
}

.blog .back-arrow img {
  width: 18px
}

.blog .hero {
  align-items: center;
  display: flex;
  height: 40vw;
  justify-content: center;
  max-height: 350px;
  min-height: 250px;
  padding-top: 90px;
  position: relative
}
.blog .hero:after {
  content: ""
}

.blog .hero img,
.blog .hero:after {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%
}

.blog .hero img {
  -o-object-fit: cover;
  object-fit: cover
}

.blog .container {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 850px;
  padding-bottom: 40px;
  text-align: center;
  width: 80%
}

.blog .container .display-flex-popsicle {
  display: flex;
  justify-content: center;
  padding-top: 30px
}

.blog .container .display-flex-popsicle .popsicle {
  margin: 20px auto;
  width: 20px
}

/*.blog .container .desktop-only-blog {*/
/*  display: none !important*/
/*}*/
.blog .container .caption {
  color: #000;
  font-size: 29px;
  font-weight: 600;
  line-height: 45px;
  margin: 0 auto;
  text-align: center;
  z-index: 2
}

.blog .container .caption span {
  display: block;
  font-size: 24px;
  font-weight: 400
}

.blog .container .headline_text .headline_text_p {
  font-size: 16px !important;
  font-weight: 600 !important;
  padding-bottom: 30px;
  text-align: left
}

.blog .container p {
  font-size: 15px;
  font-weight: 500;
  line-height: 20px
}

.blog .container .wrapper {
  margin: 10px auto 0;
  text-align: left
}
.blog .container .wrapper .row {
  margin-bottom: 40px
}

.blog .container .wrapper .row .wrap_img {
  width: 100%;
}

.blog .container .wrapper .row .subhead {
  color: #1eaeef;
  font-size: 22px;
  font-weight: 700;
  margin: 20px 0
}

.blog .container .wrapper .row ul {
  list-style: circle;
  margin-left: 15px
}

.blog .container .wrapper .row ul li {
  font-family: montserrat, sans-serif;
  font-size: 14px;
  font-weight: 200;
  line-height: 20px;
  margin: 15px 0
}

.blog .container .wrapper .row p {
  font-size: 14px;
  font-weight: 200;
  line-height: 20px;
  margin-bottom: 20px;
  width:100%;
}

.blog .container .wrapper .row a {
  color: #1eaeef;
  text-decoration: none;
  transition: all .3s ease-in-out
}

.blog .container .wrapper .row a:hover {
  color: #136e98
}

.blog .container .wrapper .back_top {
  font-size: 15px;
  font-weight: 600;
  margin: 60px 0;
  text-align: center
}

.blog .container .wrapper .more_articles {
  text-align: center
}

.blog .container .wrapper .more_articles h1 {
  color: #1eaeef;
  font-size: 22px;
  font-weight: 700
}

.blog .container .wrapper .more_articles ul {
  margin-top: 20px
}

.blog .container .wrapper .more_articles ul li {
  margin: 10px 0
}

.blog .container .wrapper .more_articles ul li a {
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: all .3s ease-in-out
}

.blog .container .wrapper .more_articles ul li a:hover {
  color: #1eaeef
}

.display-flex-desktop-blog .padding-top-mobile-blog {
  padding-top: 30px
}

.blog2 .hero {
  height: 60vw
}

.blog2 .row .caption {
  display: block;
  font-size: 35px
}

.blog2 .row .caption span {
  display: block;
  font-size: 24px;
  font-weight: 400
}

.blog2 .row p {
  font-size: 13px;
  line-height: 21px;
}

.blog2 .row p.header {
  font-size: 17px;
}

.blog2 .row .bold {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px
}

.blog2 .row .img {
  width: 100%
}

.blog2 .row .title {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 15px
}

.blog2 .row .flex {
  display: flex;
  justify-content: center
}

.blog2 .row .flex .left {
  width: 50%
}

.blog2 .row .flex .right {
  align-self: center;
  margin-left: 30px;
  width: 50%
}

.blog2 .row .flex .right .col {
  font-size: 13px;
  line-height: 21px;
  margin-bottom: 20px
}

.blog2 .row .flex .right .col:last-child {
  margin-bottom: 0
}

.blog2 .row .flex .right .col span {
  color: #1eaeef;
  display: block;
  font-style: italic
}

.blog2 .row .flex_download {
  display: flex;
  justify-content: center
}

.blog2 .row .flex_download .download {
  background: #1eaeef;
  border-radius: 20px;
  color: #fff !important;
  margin-top: 25px;
  padding: 10px 20px;
  text-decoration: none
}

.blog-4-img {
  width: 100% !important;
}
.home .hero_landing .context_after .wrapper .text-padding-top {
  padding-top: 20px;
  width: 100%
}

.home .hero_landing .context_after .wrapper .down_arrow {
  height: 55px;
  margin-top: 30px
}

.consent input {
  -webkit-appearance: auto !important;
  margin: 0 !important;
}
.blog-desc{
  width: 100%;
}
.display-flex-desktop-blog img{
  width: 100%;
}
/* Iframe container */
.iframe-container {
  position: relative;
  width: 100%; /* Full width of the parent */
  height: 100%; /* Full height of its parent */
}

.element{
  overflow: hidden;
}

/* Iframe styles */
#responsive-iframe {
  width: 100%; /* Full width of its container */
  height: 100%; /* Full height of its container */
  margin-top: -10rem; /* Move the iframe 10rem upwards */
  border: none; /* Remove any iframe border */
  display: block; /* Ensure it's treated as a block element */
}

/* Features */
.containerbook {
  padding-bottom:0px;
  display: flex;
  justify-content: space-between;   /* Aligns the books in the center horizontally */
  align-items: center;       /* Vertically centers the books */
  position: relative;
  height: 55vh;             /* Full viewport height */
  gap: 10px;                 /* Space between books */
}

.book {
  box-shadow: -2px 8px 14px 3px rgb(0 0 0 / 40%);
  position: relative;
  transition: all 0.3s ease;
  z-index: 1;
  flex: 0 0 auto;            /* Prevent books from stretching */
}

.book .front {
  width: 100%;              /* Set width of the book */
  position: relative;
}

.book .cover {
  width: 100%;
  height: 300px;       
  position: relative;
  overflow: hidden;
}

.book .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* Make sure image covers the container */
}

/* Swiper Container */

/* Individual Swiper Slide */
.custom-swiper-container .swiper-slide-active {opacity: 1!important;}
.custom-swiper-container .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.custom-swiper-container .swiper-slide:hover .overlay {
  opacity: 1;
}

.custom-swiper-container .overlay a {
  font-weight:700;
  position: static;
  color: white;
  text-decoration: none;
  font-size: 20px;
  padding: 10px 20px;
  background-color: transparent;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.custom-swiper-container .overlay a:hover {
  background-color: rgba(255, 255, 255, 0.6);
}

.custom-swiper-container .swiper-slide-active img{height: fit-content!important;}
.custom-swiper-container .swiper-slide .book {
  box-shadow: none;
  height: 100%;
  width: 100%;
}
.custom-swiper-container .swiper-slide, .custom-swiper-container .swiper-slide .book .cover {height:100%!important;}
.custom-swiper-container .swiper-slide {
  opacity: 0.5;
  width: 200px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border-radius: 0px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.custom-swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0px;
}

.custom-swiper-container .book .front{height:100%;}
.custom-swiper-container .swiper-slide-active img
{
  width:100%!important;
}

/* Swiper Navigation (Next/Previous Buttons) */
.custom-swiper-container .swiper-button-next,
.custom-swiper-container .swiper-button-prev {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.custom-swiper-container .swiper-button-next:hover,
.custom-swiper-container .swiper-button-prev:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Swiper Pagination (optional, if needed) */
.custom-swiper-container .swiper-pagination-bullet {
  background-color: #fff;
  opacity: 0.5;
}

.custom-swiper-container .swiper-pagination-bullet-active {
  background-color: #ff6f61;
  opacity: 1;
}

/* Style for hiding the swiper initially and showing on click */
.custom-swiper-container {
  display: none; /* Initially hidden */
  width: 100%; /* Ensure it takes full width */
  height: 100%; /* Set height if necessary */
  position: relative;
  top: 0;
  left: 0;
  background-color: transparent; /* Optional dimming background */
  z-index: 9999;
  padding: 0px;
  box-sizing: border-box;
}

/* -------------------------------------------------------------- New -------------------------------------------------------------------- */

.mb22{margin-bottom: 50px;}
.clientlogo{
    display: flex;
    justify-content: flex-start;
}

.experiencelogo{
    display: flex;
    justify-content: center;
}
.clientlogo img, .experiencelogo img {
  width: 70%;
}

.aboutimage .content h3{font-weight: 500;
    letter-spacing: -0.2px;
    font-size: 18px;}
.aboutimage .content h4{margin-bottom: 0;font-size: 17px;}
.width70{width:45%!important;}
.aboutcontent .right h3:first-child{margin-top: 0;}
.aboutcontent .right h3{margin-bottom: 8px;align-items: center;
    color: #1eaeef;
    display: flex;
    font-size: 22px;
    font-weight: 700;
    justify-content: flex-start;
    text-decoration: none;
}
.aboutcontent .right p{
  font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
}
.aboutimage{width:100%;}
.aboutimage img{width:70%;}
.aboutimage h3{font-weight: 600;}
.aboutimage .content{display: flex;
    gap: 5px;
    padding: 1.5rem 0;
    flex-wrap: wrap;}

.right p{
  font-size: 16px;
    line-height: 22px;
    letter-spacing: 0.25px;
}

.accordion {
  background-color: transparent;
}
.mtt20{margin-top:20px;}
.accordion-item1:first-child{border-top: 1px solid #00aeef;
  margin-bottom: 0px;
}

.accordion-button1 {
  border: none;
    width: 100%;
    padding: 10px 0 5px;
    text-align: left;
    background-color: transparent;
    font-size: 16px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
}

.accordion-content {
  display: none;
  padding: 10px 0;
}

.accordion-button1.active {
  background-color: transparent;
}

.accordion-button1.active::before {
  content: "-";
}
.accordion-button1.none{display: block;}
.accordion-button1.none::before {display:none;}
.accordion-button1::before {
  line-height: 25px;
    display: grid;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    padding: 0.2rem;
    border: 1px solid #00aeef;
    color: #00aeef;
    content: "+";
    font-size: 18px;
    justify-items: center;
    align-items: center;
    align-content: center;
    justify-content: center;
}

.linkedin{display: grid!important;
      height: 35px;
      width: 35px;
      background-color: #1eaeef;
      border-radius: 50%;
      margin-left: 8px;
      justify-items: center;
      align-items: center;
      align-content: center;}
      .fa-linkedin:before {
        padding: 0.5rem 0.25rem;
        color: #fff;}

        .imgcontent{
          gap: 15px;
    display: flex;
    align-items: center;
    margin:30px 0;
        }
.qacontent p{margin-bottom:0;padding:1rem;}
.qacontent {
  filter:grayscale(1);
  opacity: 0.75;
  text-align: center;
  border-radius: 50%;
  display: grid;
  background-color: #ececec;
  align-items: center;
  justify-items: center;
  transition: transform 1s ease, opacity 0.3s ease, box-shadow 0.3s ease; /* Add transitions */
}
.questionanswer .right h6{padding-bottom:3px;}
.questionanswer{
  gap:15px;
  display: flex;
  flex-direction: column;
}

.qacontent.show {
  /*margin-bottom:45px;*/
  /*margin-top:15px;*/
  filter:grayscale(0)!important;
  opacity: 1;
  border: 2px solid #fff;
  box-shadow: -2px 9px 15px rgb(0 0 0 / 35%);
  transform: scale(1.1); 
  opacity: 1;
}
/* -------------------- New ------------------------------------ */

/* work detail */
/* Services Detail */
.home .about .container.blue {
  max-width: 100%;
  width: 100%;
}
.home .about .container.light {
  max-width: 100%;
  width: 100%;
}
.home .career .container.light
{
  max-width: 100%;
  width: 100%;
}
.bottomlogoimages{margin-top: 20px!important;}
.widthp{width:100%!important;}
.width100{width: 100%;}
.worksdetails .width .images {gap:40px;}
.workdetailsimages .flex {gap:25px;justify-content: end;}
.bottomlogoimages .flex{gap:15px;}
.bottomlogoimages .flex img, .workdetailsimages .flex img{padding-top: 0!important;}
.worksdetails .width .images img:first-child{padding-top:0rem;}
.worksdetails .width .images img{padding-top: 0rem;}
.worksdetails .width .images{display: grid;}
.wmobile100{padding:0;}
.left10{padding:0;}
.worksdetails .content h1
{
  padding: 0;
    color: #fff;
    font-size: 55px;
    letter-spacing: -0.75px;
    font-weight: 700;  
}
.worksdetails .content p
{
    line-height: 22px;
    max-width: 100%;
    font-weight: 400;
    width: 100%;
    letter-spacing: 0px;
    color: #fff;
    font-size: 16px;
}
.worksdetails
{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 10;
    position: relative;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/workdetail_bg.png);
}

.worksdetails::before
{
  content:'';
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height:60%;
  background-image: linear-gradient(to top, rgb(0 0 0 / 30%), rgba(0, 0, 0, 0));
  z-index: -1;
}
.worksdetails .width
{
  height: 100%;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
}

.multipage img {
  width: 80%;
}

/* width */
.width
{
  
  margin: 0 auto;
}
/* Services Detail */
.servicesdetailsection
{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 10;
  position: relative;
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../img/services/services_bg.png');
  height: 40vh;
  padding-top: 120px;
}

.servicesdetailsection::before
{
  content:'';
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height:100%;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: -1;
}
.servicesdetailsection .width
{
    height: 100%;
    display: flex;
    
    margin: 0 auto;
    flex-direction: column;
    justify-content: space-between;
}

/*#Communityvideo .mainvideosclass{*/
/*  width:40%*/
/*}*/
/*#Communityvideo .mainvideosclass .play-btn{*/
/*  background:unset;display:none;*/
/*}*/
.serviceIcon
{
    text-transform: uppercase;
}

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

.newwidth .serviceIcon i
{
  height: 26px;
  width: 26px;
  font-size: 18px;
  display: flex;
  border-radius: 100%;
  border: 2px solid #000;
  align-items: center;
  justify-content: center;
}

.newwidth h3
{
  margin-bottom: 3rem;
  letter-spacing: -0.75px;
  font-weight: 700;
  font-size:35px;
}

/* Services */
.servicessection
{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 10;
  position: relative;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../img/services/services_bg.png');
  height: calc(70vh - 90px);
  padding-top: 90px;
}
.servicessection::before
{
  content:'';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: -1;
}
.servicessection .mobile-only{display: none;}
.servicessection .desktop-only
{
  display: block;
  width:80%;
  margin:0 auto;
}
.servicessection .our_work_title
{
    font-size: 58px;
    font-weight: 700;
    letter-spacing: -1px;
    color: #fff;
		margin-bottom: 0;
}
.servicessection .pclass
{
    margin-bottom: 2rem;
		margin-top: 2rem;
		text-align: left;
		color: #fff;
		width: 45%;
		font-size: 18px;
		line-height: 25px;
}
.servicessection ul
{
  padding-bottom: 3rem;
  display: grid;
  gap: 15px;
  list-style: none;
}
.servicessection ul li{
  letter-spacing: -0.85px;
  font-weight: 700;
  font-size: 30px;
  transition: transform 0.2s ease, padding-left 0.2s ease; /* Add transition for smooth effect */
}
.servicessection ul li a
{
  text-decoration: none;
  color: #54bae6;
}

.servicessection ul li:hover{
  cursor: pointer;
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.4); /* Add text-shadow with bottom black shadow */
  padding-left: 15%;
  width: 100%;
  transform: scale(1.45);
}
.servicessection ul li:hover a{ color:#fff;}



/* Extra */
.item
{
  text-align: center;
    font-weight: 600;
    border: 1px solid #8c8c8c;
    display: grid;
    height: 155px;
    background-color: transparent;
    border-radius: 50%;
    /* padding: 2rem; */
    width: 170px;
    margin-top: 3rem;
    justify-items: center;
    align-content: center;
}
.item.backshow:hover{transition: transform 0.2s ease;transform: scale(1.2);cursor:pointer;border:none;background-color: #1eaeef;}
.item.backshow:hover .front{display: none;}
.item.backshow:hover .back
{
    line-height: normal;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 400;
    color: #fff;
    display: block;
}

.item .front h3{margin-bottom:5px;color:#1eaeef;}
.item .front h4{font-weight: 500;}

.item.backshow .back{display: none;}

.aboutaccordation .accordion-button1{display: block;}

.aboutaccordation .accordion-content
{
  display:block;
}
.aboutaccordation .accordion-item1:last-child{border-bottom: 0;}
.aboutaccordation .accordion-button1::before{display:none;}

.details h3{letter-spacing: -0.45px;}
.details p{font-size:16px;line-height:normal;letter-spacing: 0.055px;}

.detailssection h3
{
    margin-bottom:0.55rem;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
}
.fullbg
{
    display: grid;
    width: 100%;
    height: 100%;
    justify-items: center;
}
.fullbg img
{
    width: 65%;
    height: 100%;
}
.aclass {
  opacity: 0.5;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transition for transform and opacity */
}

.aclass:hover {
  opacity: 1; /* Full opacity on hover */
  transform: scale(1.1); /* Small zoom effect on hover */
}
.detailswebsite a{
  z-index: 10;
  font-size: 50px;
    position: absolute;
    width: auto;
    height: auto;
}
.displayiframe{display:none;}
.detailscommunityvideo .mainthumb
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 10;
    position: relative;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/workdetail_bg.png);
}
.detailswebsite .firstimage::before
{
  content: '';
  position: absolute;
    top: 30px;
    right: 110px;
    bottom: 60px;
    left: 100px;
    width: calc(100% - 210px);
    height: calc(100% - 90px);
    background-color: rgba(0, 0, 0, 0.2);
}

.detailswebsite .firstimage.hide::before
{
  content: '';
   opacity: 0!important; 
}
.displayiframe1{display:none;}
.presentation a
{
    margin-bottom: 10px;
  position: relative;
}
    .width200 .video-wrapper {
        display: grid;
        align-items: center;
        justify-items: center;
    }
.width200{margin: auto;width:80%;}
.width200 .detailssocialmedia .secondimage {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 100%;
    display: flex;
    overflow: hidden;
    z-index: -1;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.width20 .detailssocialmedia .secondimage {
    top: 10px;
    bottom: 10px;
    right: 10px;
    left: 10px;
    height: calc(100% - 20px);
    display: flex;
    overflow: hidden;
    z-index: -1;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: calc(100% - 20px);
}
.detailssocialmedia .secondimage img {
  border-radius: 15px;
  object-fit: contain;
  width: 100%;
    height: 100%;
}
.detailssocialmedia .firstimage{margin: auto;position: relative;}
.detailssocialmedia .firstimage img {
  width: 100%;
}
.detailssocialmedia a{
  z-index: 10;
  font-size: 50px;
  position: absolute;
  width: auto;
  height: auto;
}
.detailssocialmedia .mainthumb
{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 10;
    position: relative;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(../img/workdetail_bg.png);
}
.detailssocialmedia .firstimage::before {
    border-radius: 20px;
    height: calc(100% - 30px);
    width: calc(100% - 30px);
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    background-color: rgba(0, 0, 0, 0.2);
}

.detailssocialmedia .firstimage.hide::before
{
  content: '';
  opacity: 0!important;
}
.detailscommunityvideo .mainthumb::before
{
  content:'';
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: -1;
}
.detailswebsite .secondimage img
{
  object-fit: contain;
    width: 100%;
    height: 100%;}
.detailswebsite .firstimage{position: relative;}
.detailswebsite .firstimage img{width:100%;height:auto;}
.detailswebsite .secondimage {
    height: calc(100% - 70px);
    width: calc(100% - 100px);
    bottom: 40px;
    top: 30px;
    right: 50px;
    left: 50px;
    display: flex;
    overflow: hidden;
    z-index: -1;
    position: absolute;
    align-items: center;
    justify-content: center;
}
a{cursor:pointer;}
.overflow{overflow: hidden;}
.gap15{gap:15px;}

/* .w100{width:100%!important;} */
.mauto {margin: auto;}

.h50vh{height:50vh;}
.h60vh{height:60vh;}
.h70vh{height:70vh;}
.h80o{
object-position: center;
    overflow: hidden;
    object-fit: cover;
    height: 100%;}

    /* .swiper-backface-hidden .swiper-slide {
      margin-right: 40px;} */

      .swiper-slide-active .iphoneImage{display: none;}

.font20{font-size: 20px;}
.font22{font-size: 22px;}
.font16{font-size:16px;}

.fontw500{font-weight: 500;}
.fontw600{font-weight: 600;}
.fontw700{font-weight: 700;}

.width90
{
  margin-right:auto;
  margin-left:auto;
  width: 90%;
}
.width70{width: 85%;}
.width30{
  padding-left: 25px;
    border-left: 1px solid #1eaeef;
    width: 15%;
}
.brandcontent{justify-content: space-between;}
.rightcontent{
    display:grid;
    align-items: flex-end!important;}

.thebrand .width img{object-fit: cover;
    height: 30dvw;
    padding: 0;
    width: 100%;
    object-position: center;}
.color
{
    font-family: 'montserrat';
    color: #1eaeef;
    font-weight: 700;
    text-decoration: none;
}

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

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

.justifycenter
{
  justify-content: center;
}

.servicedetails .accordion-button1{cursor: pointer;}

.newborder
{display: flex;
justify-content: center;
    padding-top: 2rem;
    padding-bottom: 4rem;
    border-bottom: 2px solid #d3d3d3;
}
.imagename{display: flex;
    height: 100%;
    width: auto;}

.award
{
    transform: translateY(30%);
    z-index: 2;
    font-size: 18px;
    line-height: normal;
    color: #fff;
    font-weight: 600;
    text-align: center;
    position: absolute;
}

.signage img{width:100%;}

.swiper-slide{position:relative;}
.swiper-slide .secondimage
{
    /* width: auto;
    border-radius: 60px;
    height: 95%;
    bottom: auto;
    right: auto;
    z-index: -1;
    top: auto;
    left: auto;
    position: absolute; */
    width: 100%;
    border-radius: 60px;
    height: 95%;
    bottom: auto;
    right: 55px;
    z-index: -1;
    top: auto;
    left: 55px;
    position: absolute;
}

.swiper-slide img {
  width: 85%;
  transition: transform 0.5s ease;
  border-radius: 20px;
  opacity: 1;
  min-height: 350px;
  object-fit: cover;
}

.swiper-container {
  overflow: hidden;
}

.df-popup-thumb:hover .df-book-wrapper, .df-popup-thumb:hover .df-book-page1, .df-popup-thumb:hover .df-book-page2, .df-popup-thumb:hover .df-book-cover
{
  transform: none !important;
}

.option2digitalmarketing
{
  padding-left: 5rem;
  margin-top: 2rem;
  gap: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.option2digitalmarketing .left
{
  display: flex;
    position: relative;
    align-items: center;
}
.option2digitalmarketing .left .iphoneImage{width: 100%;
    height: 100%;}
.option2digitalmarketing .left .leftimage
{
  width: 100%;
    border-radius: 60px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    position: absolute;
}

.option2digitalmarketing .right
{
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
}

.option2digitalmarketing .right .rightimage
{
 height: 85%;
    border-radius: 25px;
    top: 20px;
    bottom: 20px;
    right: 20px;
    left: 20px;
    z-index: -1;
    width: 94%;
    position: absolute;
}

.df-container .df-bg{background-color: transparent!important;}
.df-popup-thumb{width: auto!important;}

.h100{height:75vh;}

.ytp-pause-overlay-container {
  display: none !important;
}

.ytp-chrome-top.ytp-show-cards-title {
  display: none !important;
}

.multipage img{}

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.presentation a{display: flex;}
.presenattionbanner img{width:60%;}

.pt3auto{padding: 3rem 0 0;}
.pt120{padding-top:120px}
.mt4{margin-top:4rem!important;}
.mb2{margin-bottom:2rem;}
.mb4{margin-bottom:4rem;}

.aboutrightcontent{gap: 22px;
    display: flex;
    flex-direction: column;}

.width250{width: 250px;}

.awards{
  border-bottom: 2px solid #d3d3d3;
  padding: 30px 0;
}

.custom1{
  display: grid;
  padding-left: 5rem;
  align-items: center;
}

.noflexwrap{flex-wrap: nowrap;}

.swiper-slide-active{overflow: auto!important;}
/* .swiper-slide-active a
{
  border-radius: 0!important;
  bottom: 0px!important;
  right: 25px!important;
  top: 0px!important;
  left: 30px!important;
} */
.swiper-slide a
{
  bottom: 20px;
  right: 50px;
  top: 20px;
  left: 50px;
  border-radius: 25px;
  z-index: 0;
  height: auto;
  width: auto;
  background-color: #00000080;
  display: flex;
  font-size: 50px;
  position: absolute;
  justify-content: center;
  align-items: center;
}
.swiper-slide a img{
  min-height: auto;
    height: 80px !important;
    width: 80px !important;
}

.swiper-slide {
  justify-content: center!important;
  align-items: center!important;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: flex!important;
}

.hideoverlay::before{content: none!important;}

.servicesmaintitle
{
  padding-top:4rem;font-family: 'montserrat';margin-bottom:2rem;
								color: #1eaeef;
								font-size: 20px;
								font-weight: 700;
								text-decoration: none;
}

.accordationservicedetailsh3
{
  font-family: 'montserrat';margin-bottom:0px;
									color: #000;
									font-size: 18px;
									font-weight: 500;
									text-decoration: none;
}

.custom2
{
  margin: 0 auto;
  justify-content: flex-start;
  padding: 0;
}

.custom3
{font-size: 22px;
  margin-bottom:10px;
	align-items: center;
    color: #1eaeef;
    display: flex;
    font-weight: 700;
    justify-content: flex-start;
    text-decoration: none;
}

.custom4
{
  font-size: calc(12px + 0.55rem);
    line-height: 22px;
    letter-spacing: 0.25px;
}

.custom5
{
  margin: auto;
  justify-content: flex-start;
  border-bottom: 2px solid #d3d3d3;
}

.home .career .container .wrapper .right-container .verticalLine {
  border-left: 2px solid #070606
}
/*.servicesnew .row{border-bottom: 1px solid #999;}*/
.servicesnew ul li
{
  margin-bottom:20px;
 letter-spacing: -0.85px;
    font-weight: 700;
    font-size: 35px;
    transition: transform 0.2s ease, padding-left 0.2s ease;
}
.servicesnew ul li p
{
  line-height: normal;
  letter-spacing: 0px;
  margin-top:20px;
  font-weight: 500;
  font-size: 15px;
}

.servicesnew .title
{
  font-size: 65px;
    font-weight: 700;
    letter-spacing: -1px;
    margin-bottom: 0;
}

.servicesnew ul li a{ color: #1eaeef;text-decoration: none;}
.servicesnew .line{margin: 2.5rem 0;
    background-color: #999;
    height: 1px;}

/* Font Sizes 
.smallf{font-size: 25px!important;}
.semimedium{font-size: 40px!important;}
.medium{font-size: 45px!important;}
.large{font-size: 55px!important;}
.extralarge{font-size: 60px!important;}*/

/* Qa Images
.smallqi{width:70px;height:70px;}
.semimediumqi{width:90px;height:90px;}
.mediumqi{width:120px;height:120px;}
.largeqi{width:180px;height:180px;}
.extralargeqi{width:180px;height:180px;} */

/* Other */
.smallfo{}
.semimediumo{}
.mediumo{}
.largeo{}
.extralargeo{}

.lineheightnormal{line-height: normal; gap:5px !important}

.serviceIcon a{font-weight:600;color:#000;text-decoration: none;}
.worksdetails .content h1{margin-bottom: 0;}
.home .hello .wrap form .row {
  margin-bottom: 0;
  flex-wrap: nowrap;
  width: min-content;
}
.home .hello .wrap form .row p, .home .hello .wrap form input {
  width: fit-content;
}
.toggle-box .toggle-text, .home .hello .wrap form textarea
{width:42%;}

/* Apply to all AOS animations */
[data-aos] {
  opacity: 0;  /* Start elements as invisible */
  transition: opacity 0.2s ease, transform 0.2s ease;  /* Smooth fade and slide effect */
}

/* For fade-in and slide-in effect */
[data-aos="fade-right"] {
  transform: translateX(20px);  /* Start from the right */
}

[data-aos="fade-left"] {
  transform: translateX(-20px);  /* Start from the left */
}

[data-aos].aos-animate {
  opacity: 1;  /* Make visible after animation */
  transform: translateX(0);  /* Reset position after animation */
}

/* Ensure the image is responsive and has smooth transitions */
.aboutimagemain {
  width: 100%;  /* Make the image responsive */
  transition: transform 0.3s ease;  /* Smooth zoom transition */
    border-radius: 2px;  /* Optional: rounded corners for the image */
}

/* Hover effect: Zoom in and adjust brightness */
.aboutimagemain:hover {
  transform: scale(1.01)!important;  /* Zoom in by 10% */
}

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

.fade-down {
  animation: fadeDown 0.5s ease-out;
}

.qacontent:hover
{
  cursor:pointer;
  filter: grayscale(0.5);
}

.linkedinicon{text-decoration: none;}

h3{font-size: 25px;}



/* Features */
.list {
    justify-content: space-between;
  display: flex;
  padding: 3rem 0;
  overflow-x: scroll;
}
.list::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.list::-webkit-scrollbar-thumb {
  background: #201c29;
  border-radius: 10px;
}
.cardfeature {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 450px;
  width: 450px;
  min-width: 250px;
  border-radius: 1rem;
  background: #17141d;
  box-shadow: -2rem 0px 1rem 0px #0000009c;
  transition: 0.3s ease-in-out;
}
.card__header a{font-size:20px;font-weight:700;color:#fff;text-decoration: none;}
.card__header{display:none;position:absolute;width:100%;height:100%;}
.cardfeature img{object-position: left;object-fit: cover;
  height: 100%;
  width: 100%;}
.cardfeature h2 {
  transition: 0.3s ease-in-out;
}
.cardfeature:hover {
  transform: translateY(-1rem);
}
.cardfeature:hover .card__header{
  background-color: #0000006b;
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cardfeature:hover ~ .cardfeature {
  transform: translateX(100px);
}
.h100{height:100%!important;}
.cardfeature:hover h2 {
  background: linear-gradient(90deg, orange, red);
  text-shadow: none;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/*.cardfeature:not(:first-child) {*/
/*  margin-left: -100px;*/
/*}*/

.carousel-container {
    display: none;
    width: 100%;
    height: 100%;
}
.carousel-container .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}

.carousel-container .swiper-pagination {
    position: absolute;
    bottom: 20px;
    width: 100%;
    text-align: center;
}

.carousel-container .swiper-button-next, .carousel-container .swiper-button-prev {
    color: #fff;
}

.carousel-container .swiper-slide-active{z-index:1;transform: scale(1.1);overflow: visible!important;}

.firstchild{display: none;}
.firstchild:nth-child(1){display: block!important;}

.flex2{justify-content: space-evenly;margin:auto;width:65%;display: flex;}
.slide
{
  position: relative;
}
.slide .secondimage
{
  border-radius: 60px;
    height: auto;
    width: auto;
    position: absolute;
    left: 20px;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.swiper-slide-active a{top: 0 !important; }
.slide a
{
  position: absolute;
  display: flex;
    left: 15px;
    background-color: #0000005e;
    width: auto;
    height: auto;
    right: 15px;
    top: 15px;
    bottom: 15px;
    border-radius: 60px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wmobile100:first-child img{margin-left:-5%;}
.wmobile100:last-child{padding-left:0%;}
.tworightimages{width:100px;}
.paddingright:nth-child(2) {
  margin-top: 20px;
}
.w100class img{width:100%;}
.scroll-btn {
    font-size:14px;
    font-family: 'montserrat';
  align-items: baseline;
  display:none;
  gap: 15px;
  border: none;
  color: #fff;
  border-radius: 60px;
  padding: 0.5rem 1rem;
  background-color: #1eaeef;
  z-index: 999;
  position: fixed;
  bottom: 20px;
  right: 20px;
  transition: background-color 0.3s ease; /* Add this line */
}
/* Hide overflow when carousel active */
#customers-testimonials .owl-prev, #customers-testimonials .owl-next{border-radius: 4px;color:#fff;background-color:#000;padding:0.5rem 1rem;}
#customers-testimonials .owl-prev:hover, #customers-testimonials .owl-next:hover{background-color:#03A9F4;}
#customers-testimonials .owl-nav{margin: 2rem 0 0;
    gap: 15px;
    display: flex;
    justify-content: center;}
.threeitems .owl-stage-outer {
  overflow: hidden;
}
#customers-testimonials .owl-item.active.center .item .shadow-effect{overflow: visible;}

.scrolltop:hover {
  background-color: #000;
}
#customers-testimonials .owl-dot{border-radius:50%;background-color:black;height:8px;width:8px;}
#customers-testimonials .owl-item.active.center .item .img-circle{position:relative;z-index:0;border-radius: 0px;}
#customers-testimonials .owl-item.active.center .item .iphoneImage{display:none;}
#customers-testimonials .owl-stage-outer{overflow: visible;}
.shadow-effect {border-radius: 0px;
    overflow: hidden;
		    position: relative;
		}
		#customers-testimonials .item{height: 100% !important;
    width: 100%;
    border: none;border:none;}
		#customers-testimonials .item .img-circle{border-radius: 20px;
    bottom: 15px;
    right: 15px;
    left: 15px;
    z-index: -1;
    top: 15px;position:absolute;height:calc(100% - 30px);width:calc(100% - 30px);}
		#customers-testimonials .item {margin: 0;
		    text-align: center;
		    opacity: .2;
		    -webkit-transform: scale3d(0.8, 0.8, 1);
		    transform: scale3d(0.8, 0.8, 1);
		    -webkit-transition: all 0.3s ease-in-out;
		    -moz-transition: all 0.3s ease-in-out;
		    transition: all 0.3s ease-in-out;
		}
		#customers-testimonials .owl-item.active.center .item {
		    height: 100% !important;
    width: 100%;
    border: none;
		    opacity: 1;
		    -webkit-transform: scale3d(1.0, 1.0, 1);
		    transform: scale3d(1.0, 1.0, 1);
		}
		.owl-carousel .owl-item img {
		    transform-style: preserve-3d;
		}
		#customers-testimonials.owl-carousel .owl-dots .owl-dot.active,
#customers-testimonials.owl-carousel .owl-dots .owl-dot:hover {
		    background: #1eaeef;
		}
#customers-testimonials.owl-carousel .owl-dots{
    cursor:pointer;
    justify-content: center;
    gap:5px;
	display: flex;
	width: 100%;
	text-align: center;
}
#customers-testimonials.owl-carousel .owl-dots .owl-dot{
	display: inline-block;
}
.threeitems
{
    padding: 1rem 0;
    margin: auto;
    width: 50%;
    gap: 40px;
    display: flex;
}
.threeitems .iphoneImage{
    height: 100%;
    width: 100%;
    z-index: 0;
    position: relative;
}
.threeitems .img-circle {
    height: calc(100% - 30px);
    border-radius: 30px;
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    z-index: -1;
    width: calc(100% - 30px);
}
/* .mediaqisize{width:160px;} */

.bgbackgroundworkdetails .width{
  display: flex;
    justify-content: space-between;
}
.videotop{overflow:hidden;}
.paddingbottom{gap: 12px;
    display: flex;
    flex-direction: column;}
.relative{position:relative;
}
.p50{padding: 50px 0;}
.p50h1, .p50 h1{font-size:50px;}
.qamaintitle, .aboutcontent{padding-top: 15px;}
.home .our_work .projects .project:nth-child(-n+4) {
  margin-top: 0;
}
.projects{padding:30px 0;}
.p5{padding: 3px 0;}
.p7{padding-top: 7px;}

.nav_item.active label {
    color: #ff0; /* Active color */
}
.nav_item.active .popsicle {
    opacity: 1; /* Optional active state effect */
}
.detailscommunityvideo .mainthumb {width:100%;}
.datadetails{padding-top:3rem;}

#customers-testimonials .owl-prev
{top: 0%;
margin-top:20%;
    display: flex;
    width: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    left: 5%;
    position: absolute;}
    #customers-testimonials .owl-next{
        top: 0%;
    margin-top:20%;
    display: flex;
    width: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    right: 5%;
    position: absolute;}
    
    .video-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    position: relative;
}

/*.video-wrapper {display: grid;*/
/*    width: 100%;*/
/*    position: relative;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    object-fit: cover;*/
/*    object-position: center;*/
/*    justify-items: center;*/
/*    align-items: center;*/
/*}*/

.width20 .video-wrapper {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    
    .width20 .secondimage {
    top: auto;
    bottom: auto;
    right: auto;
    left: auto;
    height: 100%;
    display: flex;
    overflow: hidden;
    z-index: -1;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 100%;
}

    .video-control {
        height: 45px;
        width: 45px;
        position: absolute;
        z-index: 10;
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        border-radius: 50%;
    }

.width20 .video-wrapper video{
    border-radius: 60px;
    bottom: 15px;
    top: 15px;
    left: 15px;
    z-index: -1;
    position: absolute;
    right: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    display: block;
}

.width200 .video-wrapper video {
    object-position: center;
    object-fit: cover;
    border-radius: 50px;
    bottom: 15px;
    top: 15px;
    left: 15px;
    z-index: -1;
    position: absolute;
    right: 15px;
    width: calc(100% - 30px);
    height: calc(100% - 30px);
}

.video-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.play-btn,
.pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    background-size: 60px 60px;
    border: none;
    width: 60px;
    height: 60px;
    cursor: pointer;
}

.play-btn {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.pause-btn {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.video-player {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.videohoverpause:hover .pause-btn {
    display: block;
}
.top{padding-top:10px;}
.oneimageone{padding-bottom: 2.5rem;}
.secondimagebrochure{height: 100%;width:70%;}
#videoToggleBtn i {
    font-size: 20px;
    color: white;
}
#videoToggleBtn {
    background: rgba(0,0,0,0.6);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.top00{padding-top: 5px;}
.top:first-child{padding-top: 0px;}
/* .width20::before{border-radius: 55px;
    content: '';
    position: absolute;
    top: 15px;
    right: 15px;
    bottom: 10px;
    left: 25px;
    width: calc(100% - 40px);
    height: calc(100% - 25px);
    background-color: rgba(0, 0, 0, 0.2);} */
.width200{width:40%;}
.videoc{position: absolute;
    width: 100%;
    height: 100%;}
#brochureVideo{right: -90%;
    left: -90%;
    position: absolute;
    z-index: -1;
    width: calc(460% - 180%);
    height: 100%;}
    .ww100{width:100%!important;}
    .leftone{width:100%;}
    .presenattionbanner1 a{width:100%;}
    .ig_container1{margin: auto;
    overflow: hidden;
    width: 80%;}
    .mtt50{margin: 0px auto -50px auto;}