/* ==========================================
   VWORKER SERVICE PAGE CSS
   NAVBAR + SERVICE SECTION
========================================== */


/* ==========================================
   GLOBAL RESET
========================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* font-family: "Inter", sans-serif; */
}


html {
  scroll-behavior: smooth;
}


body {
  width:100%;
  overflow-x:hidden;
  font-family:"Segoe UI", Arial, sans-serif;
}


/* ==========================================
   NAVBAR
========================================== */


.navbar {

  height:80px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:0 8%;

  background:rgba(255,255,255,0.92);

  backdrop-filter:blur(15px);

  border-bottom:1px solid rgba(37,99,235,0.08);

  position:sticky;

  top:0;

  z-index:999;

}


/* LOGO */

.navbar .logo img {

  width:70px;

  height:auto;

  display:block;

  transition:0.3s;

}


.navbar .logo img:hover {

  transform:scale(1.08);

}



/* NAVIGATION */


.navbar nav {

  display:flex;

  gap:35px;

}


.navbar nav a {

  text-decoration:none;

  color:#374151;

  font-weight:600;

  transition:0.3s;

}


.navbar nav a:hover {

  color:#2563eb;

}



/* BUTTON */


.navbar .btn-primary {

  display:inline-flex;

  align-items:center;

  justify-content:center;


  background:linear-gradient(135deg,#2563eb,#3b82f6);


  color:#fff;

  border:none;

  padding:14px 30px;

  border-radius:50px;

  cursor:pointer;

  font-weight:600;

  text-decoration:none;

  transition:0.35s;

}



.navbar .btn-primary:hover {

  transform:translateY(-5px);

  box-shadow:0 20px 35px rgba(37,99,235,0.25);

}



.btn-outline {

  display:inline-flex;

  align-items:center;

  justify-content:center;


  background:#fff;

  color:#2563eb;

  border:2px solid #2563eb;

  padding:14px 30px;

  border-radius:50px;

  text-decoration:none;

}



/* HAMBURGER */


.menu-toggle {

  display:none;

  font-size:28px;

  color:#2563eb;

  cursor:pointer;

  z-index:1001;

}




/* ==========================================
   TECHNOLOGY SEARCH
========================================== */


.technology-search {

  width:100%;

  max-width:600px;

  margin:35px auto 50px;

  position:relative;

}


.technology-search i {

  position:absolute;

  left:20px;

  top:50%;

  transform:translateY(-50%);

  color:#8b5cf6;

  font-size:18px;

}


.technology-search input {

  width:100%;

  height:58px;

  padding:0 20px 0 55px;

  border:1px solid #dbe4f0;

  border-radius:50px;

}



/* ==========================================
   SERVICE SECTION
========================================== */


.services-page {

  padding:10px 8%;

  background:

  radial-gradient(
  circle at top right,
  rgba(37,99,235,0.08),
  transparent 30%
  ),

  radial-gradient(
  circle at bottom left,
  rgba(99,102,241,0.08),
  transparent 35%
  ),

  linear-gradient(
  180deg,
  #f8fbff 0%,
  #ffffff 100%
  );


  overflow:hidden;

  position:relative;

}



/* TITLE */


.section-title {

 text-align:center;

 max-width:900px;

 margin:0 auto 70px;

}



.section-title h1 {

 font-size:56px;

 font-weight:800;

 line-height:1.15;

 letter-spacing:-2px;


 background:linear-gradient(
 90deg,
 #111827,
 #374151,
 #6b7280
 );


 -webkit-background-clip:text;

 -webkit-text-fill-color:transparent;


 margin-bottom:22px;

}



.section-title h1::after {

 content:"";

 display:block;

 width:90px;

 height:5px;

 margin:22px auto 0;

 border-radius:20px;

 background:linear-gradient(
 90deg,
 #8b5cf6,
 #c084fc
 );

}



.section-title p {

 max-width:720px;

 margin:auto;

 font-size:20px;

 line-height:1.8;

 color:#64748b;

}

/* ==========================================
   SERVICE GRID
========================================== */


.service-container {

  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:30px;

  text-align:center;

  align-items:center;

}



/* ==========================================
   SERVICE CARD
========================================== */


.service-card {

  position:relative;

  background:#ffffff;

  border:1px solid #e5e7eb;

  border-radius:22px;

  padding:35px 28px;

  text-align:center;

  overflow:hidden;

  transition:0.35s ease;

  box-shadow:
  0 10px 30px rgba(15,23,42,0.05);


  display:flex;

  flex-direction:column;

}



.service-card::before {

  content:"";

  position:absolute;

  top:0;

  left:0;

  width:100%;

  height:4px;

  background:
  linear-gradient(
  90deg,
  #8b5cf6,
  #c084fc
  );


  transform:scaleX(0);

  transform-origin:left;

  transition:0.35s;

}



.service-card::after {

  content:"";

  position:absolute;

  width:220px;

  height:220px;


  background:
  rgba(139,92,246,0.05);


  border-radius:50%;


  top:-120px;

  right:-120px;

}



.service-card:hover {

  transform:translateY(-12px);


  border-color:#8b5cf6;


  box-shadow:
  0 18px 45px rgba(139,92,246,0.18);

}



.service-card:hover::before {

  transform:scaleX(1);

}




/* TITLE */


.service-card h3 {

  font-size:23px;

  color:#111827;

  margin-bottom:15px;

  font-weight:700;

  position:relative;

  z-index:2;

}



/* DESCRIPTION */


.service-card p {


  color:#64748b;

  font-size:15px;

  line-height:1.8;

  margin-bottom:28px;


  position:relative;

  z-index:2;

}



/* CARD BUTTON */


.service-card a {


  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;


  text-decoration:none;


  padding:12px 24px;


  border-radius:50px;


  background:
  linear-gradient(
  90deg,
  #885896,
  #3f8694
  );


  color:#fff;


  font-size:14px;

  font-weight:600;


  transition:0.3s;


  margin-top:auto;

  align-self:center;

}



.service-card a:hover {


  transform:translateX(6px);


  box-shadow:
  0 10px 25px rgba(139,92,246,0.3);

}




/* ==========================================
   TABLET LARGE
========================================== */


@media(max-width:1200px){


.service-container{

grid-template-columns:repeat(3,1fr);

gap:26px;

}


}




/* ==========================================
   TABLET
========================================== */


@media(max-width:992px){


.services-page{

padding:80px 40px;

}



.service-container{

grid-template-columns:repeat(2,1fr);

gap:24px;

}



.section-title h1{

font-size:46px;

}



.section-title p{

font-size:18px;

}



}




/* ==========================================
   MOBILE NAVBAR
========================================== */


@media(max-width:768px){



.navbar{

height:70px;

padding:0 20px;

position:relative;

}



.navbar .logo img{

width:55px;

}




.navbar .btn-primary{

display:none;

}




.menu-toggle{

display:block;

}



/* MOBILE MENU */


.navbar nav{


position:absolute;


top:70px;


left:0;


width:100%;


display:flex;


flex-direction:column;


align-items:center;


gap:0;


background:#fff;


max-height:0;


overflow:hidden;


transition:0.35s;


box-shadow:
0 8px 25px rgba(0,0,0,0.08);

}




.navbar nav.active{


max-height:450px;


padding:15px 0;


}




.navbar nav a{


width:100%;


padding:16px 20px;


text-align:center;


font-size:16px;


border-bottom:1px solid #f1f1f1;


}



.navbar nav a:hover{


background:#f5f9ff;


color:#2563eb;


}




/* SERVICE MOBILE */


.services-page{

padding:60px 20px;

}



.section-title{

margin-bottom:40px;

}



.section-title h1{

font-size:34px;

line-height:1.25;

letter-spacing:-1px;

}



.section-title h1::after{

width:70px;

margin-top:18px;

}



.section-title p{

font-size:16px;

line-height:1.7;

}



.service-container{

grid-template-columns:1fr;

gap:20px;

}



.service-card{

padding:26px 22px;

}



.service-card h3{

font-size:21px;

}



.service-card p{

font-size:14px;

margin-bottom:22px;

}



.service-card a{

padding:12px 22px;

}



.technology-search input{

height:55px;

}



.technology-search i{

left:38px;

font-size:16px;

}


}




/* ==========================================
   SMALL MOBILE
========================================== */


@media(max-width:480px){



.section-title h1{

font-size:30px;

}



.section-title p{

font-size:15px;

}



.service-card{

padding:22px 18px;

}



.service-card h3{

font-size:20px;

}



.technology-search i{

left:32px;

font-size:15px;

}



}