/* ===== CSS VARIABLES ===== */
    :root {
      --primary:       #0a2342;
      --primary-light: #143560;
      --accent:        #c8962e;
      --accent-light:  #e8b84b;
      --white:         #ffffff;
      --off-white:     #f7f8fc;
      --text-dark:     #0d1b2a;
      --text-mid:      #3d5168;
      --text-light:    #6b7f96;
      --border:        #dce3ed;
      --shadow-sm:     0 2px 12px rgba(10,35,66,.08);
      --shadow-md:     0 8px 32px rgba(10,35,66,.13);
      --shadow-lg:     0 20px 60px rgba(10,35,66,.18);
      --radius:        12px;
      --transition:    .35s cubic-bezier(.4,0,.2,1);
    } 
    /* ===== SECTION BASE ===== */
    section {/* padding: 5rem 0; */}
    .section-label {font-size: 14px;font-weight: 500;text-transform: uppercase;color: #7c7c7c;margin-bottom: 5px;}
    .section-title {font-size: 32px;font-weight: 500;line-height: 44px;}
    .section-title span {color: #ffffff;}
    .section-desc {/* color: var(--text-mid); *//* font-size: 1.02rem; *//* max-width: 600px; *//* line-height: 1.8; */}
    .divider { width: 52px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); border-radius: 3px; margin: 1.25rem 0; }
    /* ===== COMPANY OVERVIEW ===== */
.how-we-work h2.eff_tri {color: #fff;}
section.overview:before { content: ''; background-image: url('../images/About-VPS-Elite.webp'); /*background-image: url(https://png.pngtree.com/png-vector/20240918/ourmid/pngtree-burj-khalifa-dubai-uae-view-png-image_13868386.png);*/ position: absolute; right: -160px; bottom: 0; width: 500px; height: 500px; background-size: contain; background-repeat: no-repeat; background-position: right; opacity: .2; } .fiugyu_tri:after { content:""; border-bottom: 1px solid; border-image: linear-gradient(91deg, #0000004d, #00000008, #ffffff00) 1; width: 90%; margin-left: 10px; } span.rhg_tri { font-weight: 700; } .fiugyu_tri { color: #000; display: flex; font-weight: 600; align-items: center; width: 100%; margin-left: 9px; position: relative; top: 2px; font-size: 16px; white-space: nowrap; } .gigrthrfgutgyu_tri { margin-top: 28px; } img.ftyggfgfty_tri { transform: rotate(132deg); width: 26px; } .gigrrfgutgyu_tri { display: flex; align-items: center; margin-bottom: 10px; } .gigrthrfgutgyu_tri p { font-size: 13.5px; margin-bottom: 0; margin-left: 36px; position: relative; top: 3px; } .overview-content h2.eff_tri:before {left:0!important} .giutgyu_tri { font-size: 13.5px; line-height: 26px; margin-bottom: 5px; text-align: justify; color: #000; } .fuyg_tri { color: #249ea3; font-weight: 500; margin-bottom: 10px; /* text-align: center; */ margin-top: 15px; }
    .overview {background: linear-gradient(#2361a31a, #ffffff, #2361a31a);padding: 40px 0;position: relative;overflow: hidden;}
    .overview-grid {/* display: grid; *//* grid-template-columns: 1fr 1fr; *//* gap: 4rem; *//* align-items: center; */text-align: left;padding-top: 5px;padding-left: 20px;}
    .overview-image { position: relative; }
   .overview-image .img-box { border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); height: 440px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-lg); }
    .img-placeholder { text-align: center; color: rgba(255,255,255,.6); }
    .img-placeholder i { font-size: 4rem; margin-bottom: 1rem; color: var(--accent-light); }
    .img-placeholder p { font-size: .9rem; }
    .badge-float { position: absolute; bottom: -1.5rem; right: -1.5rem; background: var(--accent); color: var(--white); border-radius: 16px; padding: 1.25rem 1.5rem; box-shadow: var(--shadow-md); text-align: center; min-width: 130px; }
    .badge-float .num { font-size: 2.4rem; font-weight: 800; line-height: 1; }
    .badge-float .lbl { font-size: .75rem; font-weight: 500; opacity: .9; margin-top: .25rem; }
    .stat-row { display: flex; gap: 2rem; margin-top: 2.5rem; }
    .stat-item .val { font-size: 2rem; font-weight: 700; color: var(--primary); }
    .stat-item .lbl { font-size: .82rem; color: var(--text-light); font-weight: 500; }

    /* ===== CTA STRIP ===== */
    .cta-strip { background: var(--white); /* border-top: 1px solid var(--border); */ padding: 0 0 50px; } .cta-inner { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); border-radius: 20px; padding: 35px; display: flex; align-items: center; justify-content: center; /* gap: 2rem; */ flex-wrap: wrap; position: relative; overflow: hidden; /* box-shadow: var(--shadow-lg); */ } .cta-inner::after { content: ''; position: absolute; right: -60px; top: -60px; width: 250px; height: 250px; background: rgba(200,150,46,.12); border-radius: 50%; }
    .cta-text h2 {font-size: 30px;font-weight: 500;color: #ffffff;margin-bottom: 13px;}
    .cta-text p {color: rgba(255,255,255,.7);font-size: 15px;}
    .cta-actions {display: flex;gap: 10px;/* flex-wrap: wrap; */position: relative;z-index: 1;/* width: 32%; */}
    .btn {display: inline-flex;align-items: center;gap: .5rem;padding: 9px 35px;border-radius: 3px;font-weight: 500;font-size: 15px;cursor: pointer;transition: all var(--transition);border: none;}
    .btn-accent {background: #ffffff;color: #0c2748;box-shadow: unset;}
    .btn-accent:hover {/* transform: translateY(-2px); *//* box-shadow: 0 8px 24px rgba(200,150,46,.5); */background: gainsboro;color: #0c2748;}
    .btn-outline-white { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,.45); }
    .btn-outline-white:hover {background: rgba(255,255,255,.1);color: #fff;}
    .cta-text {margin-bottom: 20px;width: 100%;text-align: center;}
    /* ===== ANIMATIONS ===== */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
    .fade-up { animation: fadeUp .7s var(--transition) both; }
    .delay-1 { animation-delay: .1s; }
    .delay-2 { animation-delay: .2s; }
    .delay-3 { animation-delay: .3s; }
    /* ===== RESPONSIVE ===== */
    @media (max-width: 1024px) {
      .overview-grid {padding: 0;width: 90%;}
      .values-grid { grid-template-columns: repeat(2, 1fr); }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    }
    @media (max-width: 768px) {
      section { padding: 3.5rem 0; }
      .vm-grid, .why-grid { grid-template-columns: 1fr; }
      .values-grid { grid-template-columns: 1fr; }
      .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--white); padding: 1rem; box-shadow: var(--shadow-md); border-top: 1px solid var(--border); }
      .nav-links.open { display: flex; }
      .hamburger { display: flex; }
      .cta-inner { flex-direction: column; text-align: center; }
      .footer-grid { grid-template-columns: 1fr; }
      .step { grid-template-columns: 60px 1fr; gap: 1rem; }
      .stat-row { gap: 1.25rem; }
      .badge-float { bottom: -.75rem; right: -.75rem; }
    }
    img.eiouj_tri {width: 100%;}
.overview-content h2.eff_tri {text-align: left;margin-bottom: 20px;}
  /* ===== RECRUITMENT APPROACH ===== */
  .recruitment {background: #ffffff;padding: 50px 0;background: linear-gradient(to bottom, #ebeaea85, #fff);} .approach-header { margin-bottom: 16px; position: sticky; top: 180px; padding-right: 35px; } .steps-wrap { display: grid; gap: 0; } .step { display: grid; grid-template-columns: 75px 1fr; /* gap: 1rem; */ align-items: start; padding: 0 0 28px; /* border-bottom: 1px solid #e3e3e3; */ transition: .35s cubic-bezier(.4,0,.2,1); position: relative; } .step:last-child { border-bottom: none; } .step:hover .step-num {background: #1b4280;color: #fff;border: 2px solid #1b4280;} .step-num { width: 50px; height: 50px; min-width: 50px; border-radius: 50%; border: 2px solid #e5e5e5; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 400; font-size: 18px; color: #1b4280; transition: .35s cubic-bezier(.4,0,.2,1); box-shadow: 0 2px 12px rgba(10,35,66,.08); position: relative; } .step-content {padding-top: 0;width: 100%;border-bottom: 1px solid #e3e3e3;padding: 15px 0 22px;} .step-content h4 {font-size: 16px;font-weight: 500;color: #000;margin-bottom: 5px;} .step-content p {color: #4d4d4d;font-size: 14px;line-height: 25px;margin-bottom: 0;} .step-tag { display: inline-block; /* background: rgba(200,150,46,.12); */ color: #1b4280; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; /* padding: .25rem .75rem; */ border-radius: 100px; margin-bottom: .65rem; } .approach-side { position: sticky; top: 6rem; align-self: start; } .steps-wrap .step:before { content:""; position: absolute; left: 4.2%; border-left: 1px dotted #1b428096; top: 0; height: 100%; } .steps-wrap .step:last-child:before { content:""; position: absolute; left: 4.2%; border-left: 0px dotted #1b428096; top: 0; height: 100%; }
  /* ===== RECRUITMENT APPROACH ===== */
/* SECTION */
.how-we-work { padding: 50px 0 40px; background: linear-gradient(135deg, #0b0f2a, #10194a); /* background: linear-gradient(to bottom, #ebeaea, #fff); */ /* background: linear-gradient(#2361a31a, #f5faff, #2361a31a); */ position: relative; background: radial-gradient(rgb(0, 55, 111), rgb(0, 18, 42)); } .subtitle { color: #e4e4e4; margin-bottom: 25px; text-align: center; font-size: 13px; margin-top: 14px; } .highlight { font-size: 18px; margin-bottom: 5px; font-weight: 600; text-align: center; color: #88faff; margin-top: 26px; } .desc { max-width: 60%; margin: 0 auto 35px; color: #f0f0f0; font-size: 12.5px; line-height: 26px; text-align: center; }
/* PROCESS */ .process-title { font-size: 24px; margin: 0 0 20px; text-align: center; font-weight: 600; color: #ffffff; } .process-grid { /* display: grid; */ /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */ /* gap: 20px; */ width: 68%; margin: auto; margin-top: 30px; } /* CARDS */ .efiugyu_tri { /* background: #fff; */ border-radius: 3px; text-align: left; transition: 0.3s; /* border: 1px solid #e8e8e8; */ /* box-shadow: -2px 10px 22px -16px #00000075; */ margin-top: 8px; padding: 0 2px 20px; width: 45%; /* margin-top: -38px; */ } .efiugyu_tri:hover { transform: translateY(-5px); border-color: #249ea3; /* background: linear-gradient(126deg, rgb(35, 80, 138), rgb(5, 139, 203)) !important; */ } .card h4 { font-size: 15px; line-height: 23px; /* width: 73%; */ margin: 0 auto 5px; color: #88faff; } .card p { font-size: 12.5px; color: #ffffff; line-height: 26px; margin-bottom: 0; } /* NUMBER BADGE */ .number {width: 33px;min-width: 33px;height: 33px;text-align: center;font-size: 16px;color: rgb(31, 89, 148);border: 1px solid #fff;border-radius: 50%;margin: 0px auto;line-height: 32px;color: #fff;transition: all 0.2s linear 0s;z-index: 1;position: relative;background: #003266;/* position: absolute; */}
/* WHY SECTION */
.benefits { margin-top: 20px; list-style: none; margin-left: auto; margin-right: auto; text-align: left; /* display: flex; */ padding: 0; /* flex-wrap: wrap; */ gap: 15px; } ul.benefits li:hover .gyu_tri { padding-left: 0; } .benefits li:hover .gyu_tri:before{ width: 0; } .benefits li .gyu_tri {    transition: all 500ms ease; padding: 22px; /* border-bottom: 1px solid #dbdbdb; */ position: relative; padding-left: 55px; width: 100%; /*background: #ffffff;*/ border-radius: 5px; transition: 0.3s; font-size: 14px; line-height: 24px; font-weight: 600; border-bottom: 1px solid; border-image: linear-gradient(91deg, #0000001f, #0000001a, #ffffff00) 1; }
.benefits .gyu_tri::before {content: "✔";position: absolute;left: 0;/* color: #4caf50; */content: "";width: 45px;height: 45px;background-size: contain;background-repeat: no-repeat;top: 12px;transition: all 500ms ease;}
.benefits .gfuy1_tri::before {background-image: url('../images/Process-Works/faster-hiring-cycles.webp');}
.benefits .gfuy2_tri::before {background-image: url('../images/Process-Works/pre-screened-quality-candidates.webp');}
.benefits .gfuy3_tri::before {background-image: url('../images/Process-Works/ai-ats.webp');}
.benefits .gfuy4_tri::before {background-image: url('../images/Process-Works/transparent-communication.webp');}
.benefits .gfuy5_tri::before {background-image: url('../images/Process-Works/high-success-rate.webp');}
span.efuighgrf_tri { font-weight: 600; } span.dhgu_tri { font-weight: 600; } ul.benefits li:hover { transform: translateY(-5px); } ul.benefits li:nth-child(1), ul.benefits li:nth-child(5) {/* padding-right: 50px; */} .separator { position: absolute; /* top: 15px; */ /* height: 100%; */ background: #ffffff5c; height: 100%; left: 50%; z-index: 0; width: 1px; } .process-grid .card:nth-child(even) { flex-direction: row; } .process-grid .card:nth-child(odd) { flex-direction: row-reverse; } .process-grid .card:nth-child(odd) .number {margin-left: 20px;} .process-grid .card:nth-child(odd) .efiugyu_tri { text-align: right; /* padding-top: 0; */ /* margin-top: -38px; */ } .process-grid .card:nth-child(even) .number {margin-right: 20px;} .process-grid .card:nth-child(odd) .efgyu_tri { margin-left: auto; } .card:hover span.number { color: rgb(255, 255, 255); box-shadow: rgba(95, 81, 251, 0.5) 0px 10px 30px 0px; background: linear-gradient(126deg, #1b478e, #4cb8bd) !important; } .separator:before { content: ""; position: absolute; top: 0px; width: 0px; background: rgb(9, 78, 145); height: 1px; left: 0px; z-index: 0; transition: width 0.3s linear 0s; } .card:hover .separator:before {width:100%;} .card:first-child .separator {/* display:none; */} .efgyu_tri { width: 35px; min-width: 35px; height: 40px; margin: 0 0 10px; } img.efiug_tri { width: 100%;    animation: gradient1 3s ease infinite, rocking 3s ease infinite; } .card { background: no-repeat; border: 0; box-shadow: none; display: flex; /* margin-bottom: 3rem; */ position: relative; }
/*==================*/
img.efuih_tri {width: 100%;/* height: 460px; */object-fit: cover;/* position: absolute; */left: 0;top: 0;/* object-position: 0px -175px; */} .efiuguy_tri { width: 50%; } .fiugu_tri { width: 50%; padding-top: 10px; padding-left: 50px; } .feyugyu_tri { display: flex; } section.efuhguyi_tri { padding: 50px 0; position: relative; } section.how-we-work:before { content:""; /* background-color: #1c468e; */ background-image: url(../images/vps_bg.webp); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .2; } section.efuhguyi_tri h2.eff_tri:before {left:0!important} section.efuhguyi_tri h2.eff_tri { text-align: left; margin-bottom: 20px; }
ul.benefits li:hover:nth-child(1) .gyu_tri { color: #1685b9; } 
ul.benefits li:hover:nth-child(2) .gyu_tri { color: #095d3a; } 
ul.benefits li:hover:nth-child(3) .gyu_tri { color: #7c1212; } 
ul.benefits li:hover:nth-child(4) .gyu_tri { color: #7b5510; } 
ul.benefits li:hover:nth-child(5) .gyu_tri { color: #404040; }
.company-overview-tagline { font-size: 13.5px; color: #333333; text-align: center; margin-top: 35px; font-style: italic; position: relative; display: inline-flex; font-weight: 700; background: #ffffff; padding: 0 30px 0 0; line-height: 37px; } .company-overview-tagline:before { content: ""; background: #249ea3; width: 4px; position: relative; display: block; margin-right: 15px; } @media (max-width: 767.98px) { .separator {        left: 5%; } .feyugyu_tri { flex-wrap: wrap; } .efiuguy_tri { width: 100%; height: 320px; margin-bottom: 20px; } .fiugu_tri { width: 100%; padding-top: 0; padding-left: 0; } p.desc { max-width: 100%; } .how-we-work { padding: 50px 40px 40px 0; } img.efuih_tri {height: 100%;object-position: unset;} .how-we-work .process-grid .card { flex-direction: unset; } .how-we-work  .process-grid .card .efgyu_tri { margin: 0 0 10px; } .process-grid { width: 100%; } .how-we-work .process-grid .card .number { margin: 0 15px 0 0; } .how-we-work .process-grid .card .efiugyu_tri { text-align: left;width: 100%;           padding: 0 0 35px;     margin-top: 0; } h2.eff_tri { text-align: left; margin-bottom: 20px; } h2.eff_tri:before { left: 0 !important; } .highlight { text-align: left; } .desc { text-align: left; } .process-title { text-align: left; } }