/* Willo Studies */
#willo__top-wrapper {
	position: relative;
	background: -o-linear-gradient(270.38deg, #0e032a 0, #1f76d3 100%);
	background: linear-gradient(179.62deg, #0e032a 0, #1f76d3 100%);
	height: 1000px;
	-webkit-clip-path: circle(1384px at 49.1% calc(100% - 1430px));
	clip-path: circle(1384px at 49.1% calc(100% - 1430px))
}
#willo__top-wrapper h1 {
	font-size: 43px;
	font-weight: 400;
	line-height: 36px;
	font-family: Montserrat, sans-serif
}
#willo__top-wrapper .row {
	padding-top: 9em
}
#willo__top-wrapper .container, #willo__top-wrapper .row {
	height: 100%
}
#willo__top-wrapper .container::before {
	position: absolute;
	display: block;
	content: '';
	border: 1px solid #1e6dc5;
	border-radius: 50%;
	width: 1236px;
	height: 1236px;
	z-index: 0;
	bottom: 106px;
	left: calc(50vw - 618px)
}
#willo__top-wrapper .container::after {
	position: absolute;
	display: block;
	content: '';
	border: 1px solid #1e6dc5;
	border-radius: 50%;
	width: 954px;
	height: 954px;
	z-index: 0;
	bottom: 245px;
	left: calc(50vw - 476px)
}
#willo__about-section {
	position: relative
}
#willo__about-section .willo__circle {
	position: absolute;
	z-index:0;
	top: -100px;
	right: -100px;
	max-width: 470px;
	width: 100%
}
#willo__about-section .willo__circle-macbook {
	position: absolute;
	max-width: 450px;
	right: 0;
	top: 20%
}
.about__row h3 {
	font-family: Montserrat, sans-serif;
	font-size: 43px;
	font-weight: 400;
	letter-spacing: 0;
	background-image: url(../../images/case-studies/square_big_grey.png);
	background-position: px 0;
	background-repeat: no-repeat;
	padding: .4em .6em
}
#willo__line-section {
	height: 220px;
	width: 100%;
	background: url(/images/src/willo/willo_line.png);
	background-size: 100% 80%;
	background-repeat: no-repeat
}
#willo__colors-section {
	position: relative
}
#willo__colors-section .color_blocks p.blue {
	color: #001e45;
	font-size: 24px
}
#willo__colors-section .color_blocks .purple {
	color: #5956a5
}
#willo__colors-section .color_blocks .light__blue {
	color: #48c7ed
}
#willo__gadgets-section {
	position: relative
}
#willo__gadgets-section .gadget__cirlce-1 {
	position: absolute;
	left: -8%;
	top: -7%
}
#willo__gadgets-section .gadget__cirlce-2 {
	position: absolute;
	right: -8%;
	bottom: -7%
}
.show__mobile {
	display: none;
}
#willo__top-wrapper {
	height: 155vh;
}
#willo__top-wrapper .row {
	padding-top: 4em;
}
#willo__top-wrapper .container::before {
	top: 0%;
	width: 1236px;
	height: 1236px;
}
#willo__top-wrapper .container::after {
	top: 10%;
	width: 954px;
	height: 954px;
}
.gadgets-section-mobile-img {
	max-width: 85%;
}
.top__wrapper-col {
	padding-top: 5%;
}
.color__blocks p {
	font-size: 26px;
}
.color__blocks .blue p {
	color: #001E45;
}
.color__blocks .purple p {
	color: #5956A5;
}
.color__blocks .light__blue p {
	color: #48C7ED;
}
#willo__gadgets-section .gadget__cirlce-1 {
	left: -23%!important;
}
#willo__gadgets-section .gadget__cirlce-2 {
	right: -27%!important;
}
.top__wrapper-div {
	position: absolute!important;
	left: 5%;
	right: 5%;
	bottom: 0%;
}
@media screen and ( max-width: 2560px ) {
	.top__wrapper-div img {
		width: 50%;
	}
}
@media screen and ( max-width: 2000px ) {
	.top__wrapper-div img {
		width: 75%;
	}
}
@media screen and ( max-width: 1700px ) {
	#willo__top-wrapper {
		height: 1200px;
	}
}
@media screen and ( max-width: 1600px ) {
	#willo__top-wrapper {
		height: 1200px;
	}
}
@media screen and ( max-width: 1440px ) {
	#willo__top-wrapper {
		height: 1100px;
	}
}
@media screen and ( max-width: 1370px ) {
	#willo__top-wrapper {
		height: 930px;
	}
}
@media screen and ( max-width: 1024px ) {
	.hide__mobile {
		display: none;
	}
	.show__mobile {
		display: block;
	}
	#willo__top-wrapper {
		height: 120vh;
	}
	#willo__top-wrapper .container::before {
		content: ""!important;
		width: 700px!important;
		height: 700px!important;
		bottom: 0!important;
		left: calc(50vw - 350px)!important;
		top: 0vw!important;
		opacity: .8!important;
		z-index: -1!important;
		border: 1px solid #1E6DC5!important;
		position: absolute;
	}
	#willo__top-wrapper .container::after {
		bottom: 139px;
			width: 480px;
			height: 480px;
			left: calc(50vw - 240px);
			position: absolute;
	}
	#willo__top-wrapper h1 {
		margin-bottom: 0em;
		font-size: 43px;
	}
	#willo__solution-section .container,
	#willo__about-section .container {
		padding-top: 0em!important;
	}
	.color__blocks img {
		width: 60%;
	}
	#willo__line-section {
		height: 200px;
	}
	#willo__colors-section {
		margin-top: -9em;
	}
	#willo__top-wrapper {
		height: 100vh;
	}
	.top__wrapper-div img {
		width: 100%;
	}
	.willo__macbook {
		width: 95%;
		top: 4.5%;
		left: -12%;
	}
	.gadgets-section-mobile-img {
		z-index: 2;
		position: relative;
	}
	.gadget__cirlce-1,
	.gadget__cirlce-2 {
		z-index: 1!important;
		display: block!important;
	}
}
@media screen and ( max-width: 768px ) {
	#willo__top-wrapper {
		height: 80vh;
	}
	.top__wrapper-div {
		position: absolute;
		bottom: 0;
	}
	.top__wrapper-div img {
		width: 90%!important;
	}
	#willo__top-wrapper .container::before {
		top: 20vw!important;
	}
	#willo__top-wrapper .container::after {
		top: 30vw;
	}
	.color__blocks {
		margin-top: 8em;
	}
	.color__blocks p {
		font-size: 20px;
	}
	#willo__colors-section .col-md-3 {
		width: 100%!important;
	}
	#willo__top-wrapper .row {
		padding-top: 0em!important;
	}
	.about__row {
		position: relative;
		z-index: 9;
	}
	#willo__gadgets-section .gadget__cirlce-1,
	#willo__gadgets-section .gadget__cirlce-2 {
		width: 50%;
	}
	.show__mobile {
		display: block
	}
	.hide__mobile {
		display: none
	}
	.color__blocks {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex
	}
	.color__blocks img {
		width: 70%
	}
	.row {
		margin: 0 .4em
	}
}
@media screen and ( max-width: 570px ) {
	#willo__top-wrapper .row {
		padding-top: 0em!important;
	}
	#willo__top-wrapper {
		height: 90vh;
	}
	.hexagon-wp {
		transform: scale(0.8);
	}
	#willo__top-wrapper h1 {
		margin-top: 1em;
	}
}
#willo__top-wrapper .container::after {
	z-index: -1;
}
#willo__top-wrapper .container::before {
	z-index: -1;
}
#willo__about-section .willo__circle-macbook {
	max-width: 100%;
	width: 30%;
    z-index: 2;
}
.about__row h3 {
	line-height: 45px;
}
.hexagon-new {
    width: 8.625em;
    height: 4.979em;
    position: relative;
    background-color: #fff;
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    color: #fff;
    -webkit-transition: background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, background-color .3s ease-in-out;
    transition: transform .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out;
    margin: 0.313em;
}
.hexagon-new:after {
    -webkit-transition: background-color .3s ease-in-out;
    transition: background-color .3s ease-in-out;
    content: '';
    position: absolute;
    z-index: 1;
    background-color: #fff;
    width: 8.625em;
    height: 4.979em;
    left: 0;
}
.hexagon-new-hov:hover {
    -webkit-transform: scale(.92);
    -ms-transform: scale(.92);
    transform: scale(.92);
    background-color: #e5f6ff;
  }
   .hexagon-new-hov:hover:after {
        background-color: #e5f6ff!important;
    }
    .hexagon-hov:hover:after {
        background-color: #e5f6ff!important;
    }
.hexTop {
    width: 6.099em;
    height: 6.099em;
    position: absolute;
    top: -3.049em;
    z-index: 1;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    background: inherit;
}
.hexTop:after, .hexBottom:after {
    content: "";
    position: absolute;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    background: inherit;
}
.hexBottom {
    width: 6.099em;
    height: 6.099em;
    bottom: -3.049em;
    position: absolute;
    z-index: 1;
    overflow: hidden;
    -webkit-transform: scaleY(0.5774) rotate(-45deg);
    transform: scaleY(0.5774) rotate(-45deg);
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    background: inherit;
}
.hexagon-new img {
    max-width: 100px;
    width: 70%;
    max-height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: relative;
    display: block;
    z-index: 2;
    font-size: 1.5em;
}
.hexagon-new-wrp {
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-flow: row wrap;
    padding: 3.125em 0;
    width: 24em;
}
.hexagon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    width: 138px;
    height: 79.67px;
    background-color: #fff;
    margin: 25px 7px;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
    transition: transform .3s ease-in-out, background-color .3s ease-in-out, -webkit-transform .3s ease-in-out
}
.hexagon-wrapper {
    width: 26rem
}
.hexagon-1 {
    margin-top: 9rem
}
.hexagon-2 {
    margin-left: -1rem
}
.hexagon-3 {
    margin-top: 1.1rem;
    margin-left: .9rem
}
.hexagon:hover {
    -webkit-transform: scale(.92);
    -ms-transform: scale(.92);
    transform: scale(.92);
    background-color: #e5f6ff
}
.hexagon::after, .hexagon::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 97.58px;
    height: 97.58px;
    -webkit-transform: scaleY(.5774) rotate(-45deg);
    -ms-transform: scaleY(.5774) rotate(-45deg);
    transform: scaleY(.5774) rotate(-45deg);
    background-color: inherit;
    left: 20.2096px;
    -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .2);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .2)
}
.hexagon::before {
    top: -48.7904px
}
.hexagon::after {
    bottom: -48.7904px
}
.hexagon span {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 138px;
    height: 79.6743px;
    z-index: 2;
    background: inherit
}
@media screen and ( max-width: 768px) {
	#willo__top-wrapper {
		overflow: hidden;
		height: 800px;
	}
	#willo__top-wrapper h1 {
		font-size: 34px;
	}
	#willo__top-wrapper img {
		width: 100%!important;
	}
	.top__wrapper-text {
		padding: 1em!important;
	}
	.willo__macbook-small {
		margin-top: 2.25em;
	}
	#willo__line-section {
		height: 100px;
	}
	.color__blocks p {
		font-size: 20px;
	}
	.row {
		margin: 0 0.1em;
	}
	#willo__gadgets-section>.container {
		padding-top: 0px!important;
	}
	.top__wrapper-col h1 {
		margin-top: 2em;
	}
	#willo__top-wrapper .container::before {
		width: 700px;
		height: 700px;
		left: calc(50vw - 350px);
		bottom: 0;
		border: 1px solid #1E6DC5;
		z-index: -1;
		border-radius: 50%;
		position: absolute;
		display: block;
		content: '';
		top: 20vw;
	}
	#willo__top-wrapper .container::after {
		top: 30vw;
	}
	#willo__about-section {
		background: none!important;
	}
	.willo__macbook {
		left: 0%;
	}
	#willo__colors-section {
		margin-top: -15em!important;
	}
	.willo__bg-line {
		display: none;
	}
	.hexagon:nth-child(2) {
		margin-left: 40px;
	}
}
@media screen and ( max-width: 450px) {
	.hexagon-wp {
		transform: scale(.7);
		margin-left: -4rem;
	}
	#willo__top-wrapper {
		height: 600px;
	}
	#willo__top-wrapper .container::before {
		top: 5vw!important;
		width: 700px !important;
    height: 700px !important;
	}
	.hexagon:nth-child(2) {
		margin-left: 0px;
	}
}


/* Other styles */
body {
	font-size: -apple-system, BlinkMacSystemFont, Arial, sans-serif;
	line-height: 1.65;
	color: #000;
	min-width: 320px;
	position: relative;
	overflow-x: hidden
}
.text {
	z-index: 2;
}

.laptop-text {
	font-size: 1.125rem;
	line-height: 1.5rem;
	padding: 22px 30px
}

.impact-mt {
	margin-top: 10rem;
	padding-bottom: 2rem
}

@media screen and (max-width:1200px) {
	.solution-hand {
		width: 20.625rem;
		left: 0
	}
	.header-row {
		padding-bottom: 60%
	}
	.splide__arrow {
		width: 53px;
		height: 53px
	}
	.mb-custom {
		margin-bottom: 5rem
	}
	.info-phone-height {
		margin-top: 6rem
	}
	.hexagon-nm {
		margin-left: 0;
		margin-top: 0
	}
}
@media screen and (max-width:1024px) {
	.hexagon-wrapper {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 6em 0
	}
	.hexagon-1 {
		margin: 25px 7px
	}
	.hexagon-2 {
		margin: 25px 7px
	}
	.hexagon-3 {
		margin: 25px 7px
	}
	.hexagon.hexagon-ms {
		margin-left: 0
	}
	.hexagon.hexagon-nmt {
		margin: 39.84px 5px
	}
}
@media screen and (max-width:768px) {
	.hexagon-wrapper {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		padding: 2rem 1rem
	}
	.hexagon-3 {
		margin: 25px 7px
	}
	.hexagon-4 {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		margin-left: 4.7rem
	}
	#willo__line-section {
		height: 200px;
	}
	.about__row h3 {
		margin-bottom: 0px!important;
	}
	#willo__about-section {
		z-index: 1 !important;
	}
}
#willo__colors-section {
	margin-top: -12em;
}
.willo__macbook {
	position: absolute;
	width: 60%;
	top: 0.5%;
}
#willo__about-section {
	background-image: url(../images/case-studies/willo/path.png);
	background-position: right;
	background-repeat:no-repeat;
}
@media screen and ( max-width: 980px ) {
	.color__blocks {
		display: flex;
	}
	.willo__macbook {
		top: -40.5%;
		left: 0%;
	}
}
@media screen and ( max-width: 768px ) {
	.willo__macbook {
		top: -10%;
	}
}