/* hero section  */
#hero .container{
display: grid;
}
#hero{
  position: relative;
  overflow: visible;
}
#hero::before {
  content: '';
  width: 100%;
  min-height: 1129px;
  position: absolute;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  background-image: url('../img/backgrounds/hero-bg.webp');
  background-size: cover;
  background-position: center;
  z-index: -1;
  user-select: none;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#hero .container{
width: 1000px;
}
h1{
margin: 210px 0 25px 0;
}
/*  */
/*  */
/*  */



/* choose section  */
.scroll-text span{
  color: transparent;
  background: #A9A9A9;
  background-clip: text;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image: linear-gradient(90deg, #0C2139, #0C2139);
  animation: scroll-reveal linear forwards;
  animation-timeline: view();
  
}
.scroll-text span{
animation-range-start: cover 20vh;
animation-range-end: cover 40vh;
}
@keyframes scroll-reveal {
  to{
    background-size: 100% 100%;
  }
}



#choose_section{
  display: flex;
  align-items: center;
}

#choose_section h2{
/* color: #A9A9A9; */
font-size: 3rem;
font-style: normal;
font-weight: 700;
line-height: 5.8rem;
padding-right: 80px;
letter-spacing: 0;
}

#stats{
  min-width: 280px;
  padding-left: 80px;
  border-left: 1px solid #D9D9D9;
  display: grid;
  gap: 25px;
}
#stats h3{
font-size: 3.6rem;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: capitalize;
}
#stats p{
font-size: 2rem;
}
/*  */
/*  */
/*  */



/* services section  */
/* service box  */
#services{
margin-top: 40px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
}
.service_box{
display: flex;
padding: 25px;
align-items: flex-start;
position: relative;
overflow: hidden;
background: white;

border-radius: 20px;
border: 1px solid #EDEDED;
}
.service_box img{
  width: 120px;
}
.service_box_content{
display: flex;
align-items: flex-start;
height: 100%;
flex-direction: column;
justify-content: flex-end;
}
.service_box h3{
font-size: 2.4rem;
font-style: normal;
font-weight: 700;
line-height: 3.36rem;
}
.service_box p{
color: rgba(255, 255, 255, 0.70);
font-size: 1.4rem;
line-height: 2.4rem;
margin-top: 7px;
}
.service_box button{
border-radius: 9999px;
border: 1px solid rgba(143, 144, 146, 0.24);
background: #F8FAFC;
padding: 4px 12px;
color: #374049;
font-size: 1.2rem;
font-style: normal;
font-weight: 700;
line-height: 1.9rem;
}
/*  */
/*  */
/*  */


/* our work */
#work {  
  display: grid;
  gap: 30px;
  margin-top: 40px;
}
#work div{
  overflow: hidden;
  border-radius: 20px;
}
/*  */
/*  */
/*  */


/* our digital solutions */
#solutions {  
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 40px;
}

#solutions li{
position: relative;
/*height: 370px;*/
}
#solutions img{
width: 100%;
height: 100%;
}
#solutions h3{
color: rgba(255, 255, 255, 0.70);
font-size: 1.6rem;
font-weight: 400;
line-height: 3.2rem;

position: absolute;
top: 20px;
left: 25px;
right: 25px;
}
#solutions h3 span{
color: #FFF;
font-weight: 700;
}
#solutions h3.text_bottom{
top: unset;
bottom: 25px;
}
/*  */
/*  */
/*  */







/* desktop view */
@media screen and (min-width:767px){
  
/* magnetic images  */
.magnetic-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}
.magnetic-images {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.magnetic-item {
  transition: transform 0.15s ease-out;
  will-change: transform;
  transform: translate(var(--magnetic-offsetX), var(--magnetic-offsetY));
}
.magnetic-item:not(:last-child) {
  margin-right: -8%;
}
.magnetic-item img {
  display: block;
  width: 340px;
  height: 340px;
  border-radius: 24px;
  box-shadow: var(--magnetic-shadow);
  animation: float-shift 3s ease-in-out infinite;
}
.magnetic-images .magnetic-item:nth-child(1) img {
  rotate: calc(2deg - var(--magnetic-velocity) * 0.25deg);
  transform: translateY(calc(5% + var(--float-shift)));
}
.magnetic-images .magnetic-item:nth-child(2) img {
  rotate: calc(-3deg - var(--magnetic-velocity) * 0.25deg);
  transform: translateY(calc(-6% - var(--float-shift)));
}
.magnetic-images .magnetic-item:nth-child(3) img {
  rotate: calc(6deg - var(--magnetic-velocity) * 0.25deg);
  transform: translateY(calc(5% + var(--float-shift)));
}
.magnetic-images .magnetic-item:nth-child(4) img {
  rotate: calc(-2deg - var(--magnetic-velocity) * 0.25deg);
  transform: translateY(calc(-4% - var(--float-shift)));

}
.magnetic-images .magnetic-item:nth-child(5) img {
  rotate: calc(4deg - var(--magnetic-velocity) * 0.25deg);
  transform: translateY(calc(6% + var(--float-shift)));
}



/* services section  */
.service_box{
height: 340px;
flex-direction: column;
}

/* hover animation */
#services *{
  transition: all 0.3s;
}
.service_box:hover{
color: white;
background-color: transparent;
}
.service_box:hover img{
  width: 74px;
}
.service_box:not(:hover) :is(h3, p){ 
  transform: translateY(80px);
}
.service_box:not(:hover) p{
  opacity: 0; 
  z-index: -999;
}
.service_box:hover button{
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(255, 255, 255, 0.10);
color: white;
margin-top: 20px;
}

.service_box::before{
content: "";
background: linear-gradient(90deg, #0040A2 0%, #002362 100%);
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
opacity: 0;
transition: all 0.3s;
}
.service_box:hover::before{
opacity: 1;
}
/*  */
/*  */
/*  */


/* our work */
#work {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 370px);
grid-auto-flow: row;
grid-template-areas:
    "work_img_1 work_img_1 work_img_4"
    "work_img_2 work_img_3 work_img_4"
    "work_img_5 work_img_6 work_img_7"
    "work_img_5 work_img_8 work_img_9";
}
.work_img_1 { grid-area: work_img_1; }
.work_img_2 { grid-area: work_img_2; }
.work_img_3 { grid-area: work_img_3; }
.work_img_4 { grid-area: work_img_4; }
.work_img_5 { grid-area: work_img_5; }
.work_img_6 { grid-area: work_img_6; }
.work_img_7 { grid-area: work_img_7; }
.work_img_8 { grid-area: work_img_8; }
.work_img_9 { grid-area: work_img_9; }
#work img{
  width: 100%;
  height: 100%;
}
/*  */
/*  */
/*  */

}
/*  */
/*  */
/*  */
/*  */















/* mobail view */
@media screen and (max-width:767px){

/* choose section  */
#choose_section{
  flex-direction: column;
  margin-top: 90px;
  padding-left: 20px;
  padding-right: 20px;
}
#choose_section h2{
font-size: 2.1rem;
line-height: 4rem;
padding: 0 0 35px 0;
}
#stats{
grid-template-columns: repeat(3, 1fr);
justify-items: center;
border-left: none;
border-top: 1px solid #D9D9D9;
padding: 35px 0 0 0;
text-align: center;
}
#stats h3{
font-size: 2.5rem;
}
#stats p{
font-size: 1.4rem;
}
/*  */
/*  */
/*  */



/* services section  */
#services{
  margin-top: 30px;
  grid-template-columns: 1fr;
  gap: 20px;
}

.service_box{
padding: 20px;
gap: 16px;
}
.service_box img{
width: 64px;
}
.service_box p{
color: rgba(99, 99, 94, 0.70);
}
.service_box button{
  display: none;
}
/*  */
/*  */
/*  */


/* our work */
#work div{
max-width: 400px;
max-height: 400px;
}
#work img{
  width: 100%;
}
/*  */
/*  */
/*  */





/* our digital solutions */
#digital_solution.container{
    padding-left: 10px !important;
    padding-right: 10px !important;
}
#solution_box_1{height: 400px;}
#solution_box_2{height: 370px;}
#solution_box_3{height: 370px;}
#solution_box_4{height: 370px;}
#solutions {
  margin-top: 30px;
}
#solutions li{
  width: 100% !important;
}
#solutions h3{
line-height: 30px;
}
/*  */
/*  */
/*  */
}