/*==================================================
CENTURY CARGO
OFFICE SHIFTING FINAL CSS

PART 1
RESET + HEADER + HERO
==================================================*/


:root{

--primary:#0057D9;
--secondary:#062B63;
--blue:#00B8D9;
--orange:#FF7A00;
--green:#25D366;

--white:#ffffff;
--light:#F5FAFF;
--text:#5B6475;
--dark:#172033;

--border:#E5EDF7;

--shadow:0 15px 45px rgba(0,87,217,.12);

--radius:24px;

}





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


*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:'Poppins',sans-serif;

color:var(--dark);

overflow-x:hidden;

}



img{

max-width:100%;

}



a{

text-decoration:none;

}



ul{

list-style:none;

}





/*==============================
CONTAINER
==============================*/


.office-new-container{

width:100%;

max-width:1280px;

margin:auto;

padding:0 20px;

}







/*==============================
HEADER
==============================*/


.office-new-header{

background:#fff;

padding:18px 0;

position:relative;

z-index:999;

box-shadow:0 5px 20px rgba(0,0,0,.05);

}




.office-new-header .office-new-container{

display:flex;

align-items:center;

justify-content:space-between;

}





.office-new-logo{

font-size:30px;

font-weight:800;

color:var(--secondary);

}





.office-new-navbar ul{

display:flex;

align-items:center;

gap:28px;

}





.office-new-navbar a{

font-size:15px;

font-weight:600;

color:#344054;

transition:.3s;

}




.office-new-navbar a:hover{

color:var(--primary);

}





.office-call-btn{

background:var(--primary);

color:#fff;

padding:14px 25px;

border-radius:50px;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

}




.office-call-btn:hover{

background:var(--orange);

color:#fff;

}







/*==============================
MOBILE MENU
==============================*/


.office-menu-btn{

display:none;

background:none;

border:0;

cursor:pointer;

}



.office-menu-btn span{

display:block;

height:3px;

width:30px;

background:var(--secondary);

margin:6px 0;

}







/*==============================
BREADCRUMB
==============================*/


.office-new-breadcrumb{

background:#F7FBFF;

padding:18px 0;

}



.office-new-breadcrumb ul{

display:flex;

gap:10px;

flex-wrap:wrap;

}



.office-new-breadcrumb li{

font-size:14px;

color:#667085;

}



.office-new-breadcrumb a{

color:var(--primary);

font-weight:600;

}







/*==============================
HERO SECTION
==============================*/


.office-new-hero{

padding:100px 0;

background:

linear-gradient(
135deg,
#062B63,
#0057D9,
#00B8D9
);

position:relative;

overflow:hidden;

}





.office-new-hero:before{

content:"";

position:absolute;

width:500px;

height:500px;

right:-200px;

top:-200px;

background:rgba(255,255,255,.12);

border-radius:50%;

}





.office-hero-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:60px;

align-items:center;

position:relative;

z-index:2;

}







/*==============================
HERO CONTENT
==============================*/


.office-hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

background:rgba(255,255,255,.15);

padding:12px 22px;

border-radius:50px;

color:#fff;

font-weight:600;

margin-bottom:25px;

}



.office-hero-badge i{

color:#8EF0FF;

}





.office-hero-content h1{

font-size:60px;

line-height:1.15;

font-weight:800;

color:#fff;

margin-bottom:25px;

}



.office-hero-content h1 span{

display:block;

color:#8EF0FF;

}




.office-hero-content p{

font-size:17px;

line-height:1.8;

color:#EAF5FF;

margin-bottom:30px;

}





.office-hero-content strong{

color:#fff;

}







/*==============================
HERO POINTS
==============================*/


.office-hero-points{

display:grid;

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

gap:15px;

margin-bottom:35px;

}




.office-hero-points div{

display:flex;

align-items:center;

gap:12px;

background:rgba(255,255,255,.14);

padding:16px;

border-radius:16px;

color:#fff;

font-weight:600;

}



.office-hero-points i{

font-size:22px;

color:#8EF0FF;

}







/*==============================
HERO BUTTONS
==============================*/


.office-hero-buttons{

display:flex;

gap:18px;

flex-wrap:wrap;

}



.office-primary-btn,
.office-secondary-btn{

padding:16px 32px;

border-radius:50px;

font-weight:700;

display:flex;

align-items:center;

gap:10px;

}




.office-primary-btn{

background:var(--orange);

color:#fff;

}




.office-secondary-btn{

background:#fff;

color:var(--primary);

}



.office-primary-btn:hover,
.office-secondary-btn:hover{

transform:translateY(-5px);

}







/*==============================
HERO ICON
==============================*/


.office-hero-icon{

display:flex;

justify-content:center;

}




.office-icon-circle{

height:330px;

width:330px;

border-radius:50%;

background:rgba(255,255,255,.15);

display:flex;

align-items:center;

justify-content:center;

border:2px solid rgba(255,255,255,.25);

animation:floatOffice 4s infinite;

}



.office-icon-circle i{

font-size:140px;

color:#8EF0FF;

}




@keyframes floatOffice{

50%{

transform:translateY(-20px);

}

}







/*==============================
RESPONSIVE
==============================*/


@media(max-width:991px){


.office-new-navbar{

display:none;

}


.office-menu-btn{

display:block;

}



.office-hero-grid{

grid-template-columns:1fr;

text-align:center;

}



.office-hero-buttons{

justify-content:center;

}



.office-hero-content h1{

font-size:45px;

}


}





@media(max-width:600px){


.office-new-container{

padding:0 15px;

}



.office-new-hero{

padding:70px 0;

}



.office-hero-content h1{

font-size:34px;

}



.office-hero-points{

grid-template-columns:1fr;

}



.office-primary-btn,
.office-secondary-btn{

width:100%;

justify-content:center;

}



.office-icon-circle{

width:220px;

height:220px;

}



.office-icon-circle i{

font-size:90px;

}



}
















/*==================================================
FINAL OFFICE SHIFTING CSS

PART 2

TRUST + ABOUT + SERVICES
==================================================*/



/*==============================
SECTION HEADING
==============================*/


.office-section-heading{

text-align:center;

max-width:900px;

margin:0 auto 55px;

}



.office-section-tag{

display:inline-block;

padding:8px 22px;

background:#EAF8FF;

color:var(--primary);

border-radius:50px;

font-size:14px;

font-weight:700;

margin-bottom:15px;

}



.office-section-heading h2{

font-size:42px;

line-height:1.3;

font-weight:800;

color:var(--secondary);

margin-bottom:18px;

}



.office-section-heading p{

font-size:16px;

line-height:1.8;

color:var(--text);

}







/*==============================
TRUST SECTION
==============================*/


.office-new-trust{

padding:70px 0;

background:#F7FBFF;

}




.office-trust-grid{

display:grid;

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

gap:20px;

}




.office-trust-card{

background:#fff;

padding:30px 15px;

text-align:center;

border-radius:24px;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:.35s;

}



.office-trust-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 60px rgba(0,87,217,.18);

}



.office-trust-card i{

height:75px;

width:75px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;

background:#EAF8FF;

border-radius:50%;

font-size:32px;

color:var(--primary);

margin-bottom:18px;

}



.office-trust-card h3{

font-size:30px;

font-weight:800;

color:var(--secondary);

margin-bottom:8px;

}



.office-trust-card p{

font-size:14px;

color:var(--text);

}








/*==============================
ABOUT SECTION
==============================*/


.office-new-about{

padding:90px 0;

background:#fff;

}




.office-about-grid{

display:grid;

grid-template-columns:.8fr 1.2fr;

gap:60px;

align-items:center;

}





.office-about-circle{

height:350px;

width:350px;

border-radius:50%;

background:

linear-gradient(
135deg,
#062B63,
#0057D9
);

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 25px 70px rgba(0,87,217,.25);

}




.office-about-circle i{

font-size:130px;

color:#8EF0FF;

}





.office-about-content h2{

font-size:38px;

font-weight:800;

color:var(--secondary);

margin-bottom:20px;

}



.office-about-content p{

font-size:16px;

line-height:1.9;

color:var(--text);

margin-bottom:18px;

}





.office-about-points{

margin-top:25px;

}




.office-about-points div{

display:flex;

align-items:center;

gap:12px;

margin-bottom:15px;

font-weight:600;

color:#344054;

}



.office-about-points i{

color:var(--blue);

font-size:20px;

}








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


.office-new-services{

padding:90px 0;

background:#F7FBFF;

}




.office-service-grid{

display:grid;

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

gap:25px;

}





.office-service-card{

background:#fff;

padding:35px 25px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

}




.office-service-card:before{

content:"";

position:absolute;

height:5px;

width:100%;

top:0;

left:0;

background:

linear-gradient(
90deg,
#0057D9,
#00B8D9
);

}




.office-service-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 70px rgba(0,87,217,.18);

}





.office-service-card i{

height:85px;

width:85px;

display:flex;

align-items:center;

justify-content:center;

margin:15px auto 20px;

background:#EAF8FF;

border-radius:50%;

font-size:38px;

color:var(--primary);

}





.office-service-card h3{

font-size:22px;

color:var(--secondary);

margin-bottom:12px;

}





.office-service-card p{

font-size:15px;

line-height:1.8;

color:var(--text);

}








/*==============================
RESPONSIVE
==============================*/


@media(max-width:1100px){


.office-trust-grid{

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

}



.office-about-grid{

grid-template-columns:1fr;

text-align:center;

}



.office-about-circle{

margin:auto;

}



.office-service-grid{

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

}


}





@media(max-width:600px){


.office-trust-grid,
.office-service-grid{

grid-template-columns:1fr;

}



.office-section-heading h2{

font-size:30px;

}



.office-about-circle{

height:240px;

width:240px;

}



.office-about-circle i{

font-size:90px;

}



.office-about-content h2{

font-size:28px;

}



}













/*==================================================
FINAL OFFICE SHIFTING CSS

PART 3

IT + FURNITURE + DOCUMENTS
SPECIAL + PROCESS + SAFETY
==================================================*/



/*==============================
IT & FURNITURE SECTION
==============================*/


.office-new-it,
.office-new-furniture{

padding:90px 0;

background:#fff;

}



.office-detail-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:60px;

align-items:center;

}



.office-detail-grid.reverse{

grid-template-columns:.9fr 1.1fr;

}




.office-detail-content h2{

font-size:38px;

font-weight:800;

color:var(--secondary);

margin-bottom:20px;

}



.office-detail-content p{

font-size:16px;

line-height:1.9;

color:var(--text);

margin-bottom:18px;

}




.office-detail-list{

margin-top:25px;

}



.office-detail-list div{

display:flex;

align-items:center;

gap:15px;

margin-bottom:15px;

font-weight:600;

color:#344054;

}



.office-detail-list i{

height:45px;

width:45px;

display:flex;

align-items:center;

justify-content:center;

background:#EAF8FF;

border-radius:50%;

color:var(--primary);

}





.office-detail-icon{

display:flex;

justify-content:center;

}



.office-detail-icon div{

height:320px;

width:320px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(
135deg,
#062B63,
#0057D9
);

}




.office-detail-icon i{

font-size:120px;

color:#8EF0FF;

}







/*==============================
DOCUMENT SECTION
==============================*/


.office-new-documents{

padding:90px 0;

background:#F7FBFF;

}




.office-document-grid{

display:grid;

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

gap:25px;

}



.office-document-card{

background:#fff;

padding:35px 25px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}



.office-document-card:hover{

transform:translateY(-8px);

}



.office-document-card i{

font-size:45px;

color:var(--primary);

margin-bottom:20px;

}



.office-document-card h3{

font-size:22px;

color:var(--secondary);

margin-bottom:12px;

}



.office-document-card p{

font-size:15px;

line-height:1.8;

color:var(--text);

}







/*==============================
SPECIAL BUSINESS
==============================*/


.office-new-special{

padding:90px 0;

background:#fff;

}



.office-special-grid{

display:grid;

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

gap:22px;

}



.office-special-card{

padding:35px 20px;

background:#F7FBFF;

border-radius:22px;

text-align:center;

transition:.35s;

}



.office-special-card:hover{

background:#fff;

box-shadow:var(--shadow);

transform:translateY(-8px);

}



.office-special-card i{

font-size:42px;

color:var(--blue);

margin-bottom:18px;

}



.office-special-card h3{

font-size:20px;

color:var(--secondary);

margin-bottom:10px;

}



.office-special-card p{

font-size:14px;

line-height:1.8;

color:var(--text);

}







/*==============================
PROCESS SECTION
==============================*/


.office-new-process{

padding:90px 0;

background:#F7FBFF;

}



.office-process-grid{

display:grid;

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

gap:25px;

}




.office-process-card{

background:#fff;

padding:40px 25px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

position:relative;

}



.office-process-card span{

position:absolute;

right:15px;

top:15px;

height:45px;

width:45px;

display:flex;

align-items:center;

justify-content:center;

background:var(--primary);

color:#fff;

border-radius:50%;

font-weight:700;

}




.office-process-card i{

font-size:45px;

color:var(--blue);

margin-bottom:20px;

}



.office-process-card h3{

font-size:22px;

color:var(--secondary);

margin-bottom:12px;

}



.office-process-card p{

font-size:15px;

line-height:1.8;

color:var(--text);

}







/*==============================
SAFETY SECTION
==============================*/


.office-new-safety{

padding:90px 0;

background:#fff;

}




.office-safety-grid{

display:grid;

grid-template-columns:.8fr 1.2fr;

gap:60px;

align-items:center;

}




.office-safety-icon{

display:flex;

justify-content:center;

}



.office-safety-icon div{

height:330px;

width:330px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:

linear-gradient(
135deg,
#0057D9,
#00B8D9
);

}



.office-safety-icon i{

font-size:130px;

color:#fff;

}



.office-safety-content h2{

font-size:38px;

color:var(--secondary);

margin-bottom:20px;

}



.office-safety-content p{

font-size:16px;

line-height:1.9;

color:var(--text);

}




.office-safety-list{

margin-top:25px;

}



.office-safety-list div{

display:flex;

align-items:center;

gap:12px;

margin-bottom:15px;

font-weight:600;

}



.office-safety-list i{

color:var(--blue);

}








/*==============================
RESPONSIVE
==============================*/


@media(max-width:1100px){


.office-detail-grid,
.office-detail-grid.reverse{

grid-template-columns:1fr;

text-align:center;

}



.office-detail-icon{

order:-1;

}



.office-document-grid{

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

}



.office-special-grid{

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

}



.office-process-grid{

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

}



.office-safety-grid{

grid-template-columns:1fr;

text-align:center;

}


}





@media(max-width:600px){


.office-document-grid,
.office-special-grid,
.office-process-grid{

grid-template-columns:1fr;

}



.office-detail-icon div,
.office-safety-icon div{

height:240px;

width:240px;

}



.office-detail-icon i,
.office-safety-icon i{

font-size:90px;

}



.office-detail-content h2,
.office-safety-content h2{

font-size:28px;

}


}








/*==================================================
FINAL OFFICE SHIFTING CSS

PART 4

AREAS + ROUTE + COST + BENEFITS
==================================================*/



/*==============================
SERVICE AREAS
==============================*/


.office-new-areas{

padding:90px 0;

background:#F7FBFF;

}



.office-area-grid{

display:grid;

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

gap:30px;

}



.office-area-card{

background:#fff;

padding:40px;

border-radius:25px;

box-shadow:var(--shadow);

transition:.35s;

}



.office-area-card:hover{

transform:translateY(-8px);

}



.office-area-card i{

height:75px;

width:75px;

display:flex;

align-items:center;

justify-content:center;

background:#EAF8FF;

border-radius:50%;

color:var(--primary);

font-size:35px;

margin-bottom:20px;

}



.office-area-card h3{

font-size:26px;

color:var(--secondary);

margin-bottom:20px;

}



.office-area-card li{

padding:8px 0;

color:var(--text);

border-bottom:1px dashed var(--border);

}







/*==============================
ROUTE SECTION
==============================*/


.office-new-route{

padding:90px 0;

background:#fff;

}



.office-route-box{

display:flex;

align-items:center;

gap:40px;

padding:55px;

border-radius:35px;

background:

linear-gradient(
135deg,
#062B63,
#0057D9
);

color:#fff;

}



.office-route-icon{

height:120px;

width:120px;

flex-shrink:0;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:rgba(255,255,255,.15);

}



.office-route-icon i{

font-size:55px;

color:#8EF0FF;

}



.office-route-content h2{

font-size:36px;

margin-bottom:18px;

}



.office-route-content p{

font-size:16px;

line-height:1.9;

color:#EAF5FF;

}



.office-route-points{

display:grid;

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

gap:15px;

margin-top:25px;

}



.office-route-points i{

color:#8EF0FF;

margin-right:8px;

}







/*==============================
COST SECTION
==============================*/


.office-new-cost{

padding:90px 0;

background:#F7FBFF;

}



.office-cost-table{

background:#fff;

border-radius:25px;

overflow:auto;

box-shadow:var(--shadow);

}



.office-cost-table table{

width:100%;

min-width:750px;

border-collapse:collapse;

}



.office-cost-table th{

padding:20px;

text-align:left;

color:#fff;

background:

linear-gradient(
135deg,
#0057D9,
#00B8D9
);

}



.office-cost-table td{

padding:18px 20px;

border-bottom:1px solid var(--border);

color:var(--text);

}



.office-cost-table tr:hover td{

background:#F7FBFF;

}







/*==============================
COST FACTORS
==============================*/


.office-new-cost-factor{

padding:90px 0;

background:#fff;

}



.office-cost-factor-grid{

display:grid;

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

gap:25px;

}



.office-cost-factor-card{

background:#F7FBFF;

padding:35px 25px;

border-radius:25px;

text-align:center;

transition:.35s;

}



.office-cost-factor-card:hover{

background:#fff;

box-shadow:var(--shadow);

transform:translateY(-8px);

}



.office-cost-factor-card i{

font-size:40px;

color:var(--primary);

margin-bottom:18px;

}



.office-cost-factor-card h3{

font-size:22px;

color:var(--secondary);

margin-bottom:12px;

}



.office-cost-factor-card p{

font-size:15px;

line-height:1.8;

color:var(--text);

}







/*==============================
SAFETY DETAILS
==============================*/


.office-new-safety-detail{

padding:90px 0;

background:#F7FBFF;

}



.office-safety-detail-grid{

display:grid;

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

gap:25px;

}



.office-safety-detail-card{

background:#fff;

padding:35px 20px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}



.office-safety-detail-card:hover{

transform:translateY(-8px);

}



.office-safety-detail-card i{

font-size:42px;

color:var(--blue);

margin-bottom:18px;

}



.office-safety-detail-card h3{

font-size:21px;

color:var(--secondary);

margin-bottom:10px;

}



.office-safety-detail-card p{

font-size:14px;

line-height:1.8;

color:var(--text);

}







/*==============================
ADVANTAGES
==============================*/


.office-new-advantages{

padding:90px 0;

background:#fff;

}



.office-advantage-grid{

display:grid;

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

gap:22px;

}



.office-advantage-card{

padding:35px 20px;

background:#F7FBFF;

border-radius:22px;

text-align:center;

}



.office-advantage-card:hover{

background:#fff;

box-shadow:var(--shadow);

}



.office-advantage-card i{

font-size:40px;

color:var(--primary);

margin-bottom:15px;

}



.office-advantage-card h3{

color:var(--secondary);

margin-bottom:10px;

}



.office-advantage-card p{

font-size:14px;

line-height:1.8;

color:var(--text);

}







/*==============================
PACKING
==============================*/


.office-new-packing{

padding:90px 0;

background:#fff;

}



.office-packing-box{

display:grid;

grid-template-columns:.5fr 1.5fr;

gap:40px;

align-items:center;

padding:45px;

background:#F7FBFF;

border-radius:30px;

}



.office-packing-icon i{

font-size:100px;

color:var(--primary);

}



.office-packing-content h2{

font-size:35px;

color:var(--secondary);

}



.office-packing-list div{

margin-top:15px;

font-weight:600;

}



.office-packing-list i{

color:var(--blue);

margin-right:10px;

}







/*==============================
ADDITIONAL SERVICES
==============================*/


.office-new-additional{

padding:90px 0;

background:#fff;

}



.office-additional-grid{

display:grid;

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

gap:22px;

}



.office-additional-card{

background:#F7FBFF;

padding:30px 20px;

border-radius:22px;

text-align:center;

}



.office-additional-card i{

font-size:38px;

color:var(--primary);

margin-bottom:15px;

}



.office-additional-card h3{

color:var(--secondary);

}





/*==============================
RESPONSIVE
==============================*/


@media(max-width:1100px){


.office-safety-detail-grid{

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

}



.office-advantage-grid,
.office-additional-grid{

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

}



.office-cost-factor-grid{

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

}



.office-packing-box{

grid-template-columns:1fr;

text-align:center;

}


}




@media(max-width:600px){


.office-area-grid,
.office-safety-detail-grid,
.office-advantage-grid,
.office-additional-grid,
.office-cost-factor-grid{

grid-template-columns:1fr;

}



.office-route-box{

flex-direction:column;

padding:30px;

text-align:center;

}



.office-route-points{

grid-template-columns:1fr;

}



.office-packing-box{

padding:25px;

}



.office-route-content h2{

font-size:28px;

}

}








/*==================================================
FINAL OFFICE SHIFTING CSS

PART 5 FINAL

FAQ + REVIEWS + FORM + CTA + FOOTER
==================================================*/


/*==============================
FAQ SECTION
==============================*/


.office-new-faq{

padding:90px 0;

background:#F7FBFF;

}



.office-faq-list{

max-width:950px;

margin:auto;

}



.office-faq-item{

background:#fff;

padding:25px 30px;

border-radius:22px;

margin-bottom:18px;

box-shadow:var(--shadow);

transition:.35s;

}



.office-faq-item:hover{

transform:translateY(-5px);

}



.office-faq-item h3{

display:flex;

align-items:flex-start;

gap:12px;

font-size:19px;

color:var(--secondary);

margin-bottom:12px;

line-height:1.5;

}



.office-faq-item h3 i{

color:var(--primary);

margin-top:5px;

}



.office-faq-item p{

font-size:15px;

line-height:1.8;

color:var(--text);

}







/*==============================
REVIEWS
==============================*/


.office-new-reviews{

padding:90px 0;

background:#fff;

}



.office-review-grid{

display:grid;

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

gap:25px;

}



.office-review-card{

background:#F7FBFF;

padding:35px;

border-radius:25px;

transition:.35s;

}



.office-review-card:hover{

background:#fff;

box-shadow:var(--shadow);

transform:translateY(-8px);

}



.office-stars{

font-size:26px;

color:#FFB800;

margin-bottom:15px;

}



.office-review-card p{

font-size:15px;

line-height:1.8;

color:var(--text);

margin-bottom:20px;

}



.office-review-card h4{

font-size:20px;

color:var(--secondary);

}



.office-review-card span{

font-size:14px;

color:#667085;

}







/*==============================
QUOTE SECTION
==============================*/


.office-new-quote{

padding:90px 0;

background:

linear-gradient(
135deg,
#062B63,
#0057D9
);

}



.office-quote-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:60px;

align-items:center;

}



.office-quote-content h2{

font-size:42px;

color:#fff;

margin-bottom:20px;

}



.office-quote-content p{

font-size:16px;

line-height:1.9;

color:#EAF5FF;

}





.office-contact-features{

margin-top:30px;

}



.office-contact-features div{

color:#fff;

font-weight:600;

margin-bottom:15px;

}



.office-contact-features i{

color:#8EF0FF;

margin-right:12px;

}







/* FORM */


.office-form-box{

background:#fff;

padding:40px;

border-radius:30px;

box-shadow:0 25px 70px rgba(0,0,0,.25);

}



.office-form-box input,
.office-form-box select,
.office-form-box textarea{

width:100%;

padding:15px;

margin-bottom:15px;

border:1px solid #DCE6F2;

border-radius:12px;

font-size:15px;

font-family:inherit;

}



.office-form-box input:focus,
.office-form-box select:focus,
.office-form-box textarea:focus{

outline:none;

border-color:var(--primary);

}



.office-form-box button{

width:100%;

height:55px;

border:none;

border-radius:50px;

background:var(--orange);

color:#fff;

font-size:17px;

font-weight:700;

cursor:pointer;

}



.office-form-box button:hover{

background:var(--primary);

}







/*==============================
CTA SECTION
==============================*/


.office-new-cta{

padding:80px 0;

background:#fff;

}



.office-cta-box{

background:

linear-gradient(
135deg,
#0057D9,
#00B8D9
);

padding:60px 40px;

border-radius:35px;

text-align:center;

color:#fff;

}



.office-cta-icon i{

font-size:70px;

color:#8EF0FF;

margin-bottom:20px;

}



.office-cta-box h2{

font-size:40px;

margin-bottom:18px;

}



.office-cta-box p{

font-size:16px;

line-height:1.8;

margin-bottom:30px;

}



.office-cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}



.office-cta-buttons a{

padding:15px 35px;

border-radius:50px;

font-weight:700;

}



.office-cta-buttons a:first-child{

background:#FFB800;

color:#111;

}



.office-cta-buttons a:last-child{

background:#fff;

color:var(--primary);

}







/*==============================
CONTACT SECTION
==============================*/


.office-new-contact{

padding:70px 0;

background:#F7FBFF;

}



.office-contact-grid{

display:grid;

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

gap:22px;

}



.office-contact-card{

background:#fff;

padding:30px 20px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

}



.office-contact-card i{

font-size:38px;

color:var(--primary);

margin-bottom:15px;

}



.office-contact-card h3{

color:var(--secondary);

margin-bottom:10px;

}



.office-contact-card p{

font-size:14px;

color:var(--text);

}







/*==============================
RELATED SERVICES
==============================*/


.office-new-related{

padding:90px 0;

background:#fff;

}



.office-related-grid{

display:grid;

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

gap:25px;

}



.office-related-grid a{

background:#F7FBFF;

padding:30px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

font-weight:700;

color:var(--secondary);

text-align:center;

transition:.35s;

}



.office-related-grid i{

font-size:25px;

color:var(--primary);

}



.office-related-grid a:hover{

background:var(--primary);

color:#fff;

}



.office-related-grid a:hover i{

color:#fff;

}







/*==============================
FLOATING BUTTONS
==============================*/


.office-floating-call,
.office-floating-whatsapp{

position:fixed;

bottom:25px;

height:60px;

width:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:25px;

color:#fff !important;

z-index:9999;

box-shadow:0 15px 40px rgba(0,0,0,.25);

}



.office-floating-call{

right:90px;

background:#0057D9;

}



.office-floating-whatsapp{

right:20px;

background:#25D366;

}







/*==============================
FOOTER
==============================*/


.office-new-footer{

background:#06152F;

padding:70px 0 20px;

color:#fff;

}



.office-footer-grid{

display:grid;

grid-template-columns:1.5fr 1fr 1fr 1fr;

gap:35px;

}



.office-new-footer h3{

font-size:22px;

margin-bottom:20px;

}



.office-new-footer p,
.office-new-footer li,
.office-new-footer a{

color:#CBD5E1;

font-size:15px;

line-height:1.9;

}



.office-new-footer a:hover{

color:#fff;

}



.office-copyright{

border-top:1px solid rgba(255,255,255,.2);

margin-top:40px;

padding-top:20px;

text-align:center;

}







/*==============================
FINAL MOBILE FIX
==============================*/


@media(max-width:1100px){


.office-review-grid{

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

}



.office-contact-grid{

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

}



.office-footer-grid{

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

}



.office-related-grid{

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

}



.office-quote-grid{

grid-template-columns:1fr;

}


}





@media(max-width:600px){


.office-review-grid,
.office-contact-grid,
.office-footer-grid,
.office-related-grid{

grid-template-columns:1fr;

}



.office-quote-content h2{

font-size:30px;

}



.office-form-box{

padding:25px;

}



.office-cta-box{

padding:40px 20px;

}



.office-cta-box h2{

font-size:30px;

}



.office-floating-call,
.office-floating-whatsapp{

height:55px;

width:55px;

bottom:20px;

}



.office-floating-call{

right:85px;

}



.office-floating-whatsapp{

right:20px;

}


}








/*==================================================
FINAL OFFICE SHIFTING CSS

PART 6

MISSING HTML SECTIONS FIX
==================================================*/


/*==============================
RISK MANAGEMENT
==============================*/


.office-new-risk{

padding:90px 0;

background:#F7FBFF;

}



.office-risk-grid{

display:grid;

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

gap:25px;

}



.office-risk-card{

background:#fff;

padding:35px 20px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

}



.office-risk-card:hover{

transform:translateY(-8px);

}



.office-risk-card i{

font-size:42px;

color:var(--primary);

margin-bottom:18px;

}



.office-risk-card h3{

font-size:21px;

color:var(--secondary);

margin-bottom:12px;

}



.office-risk-card p{

font-size:14px;

line-height:1.8;

color:var(--text);

}







/*==============================
BUSINESS CONTINUITY
==============================*/


.office-new-continuity{

padding:80px 0;

background:#fff;

}



.office-continuity-box{

background:

linear-gradient(
135deg,
#062B63,
#0057D9
);

padding:55px;

border-radius:35px;

text-align:center;

color:#fff;

}



.office-continuity-box i{

font-size:70px;

color:#8EF0FF;

margin-bottom:20px;

}



.office-continuity-box h2{

font-size:38px;

margin-bottom:20px;

}



.office-continuity-box p{

font-size:16px;

line-height:1.8;

color:#EAF5FF;

max-width:850px;

margin:auto auto 30px;

}



.office-continuity-box a{

display:inline-block;

background:#FFB800;

color:#111;

padding:15px 35px;

border-radius:50px;

font-weight:700;

}







/*==============================
CHECKLIST
==============================*/


.office-new-checklist{

padding:90px 0;

background:#F7FBFF;

}



.office-check-grid{

display:grid;

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

gap:25px;

}



.office-check-card{

background:#fff;

padding:35px 20px;

border-radius:25px;

text-align:center;

box-shadow:var(--shadow);

}



.office-check-card i{

font-size:40px;

color:var(--blue);

margin-bottom:18px;

}



.office-check-card h3{

font-size:21px;

color:var(--secondary);

margin-bottom:12px;

}



.office-check-card p{

font-size:14px;

line-height:1.8;

color:var(--text);

}







/*==============================
ITEMS WE MOVE
==============================*/


.office-new-items{

padding:90px 0;

background:#fff;

}



.office-items-grid{

display:grid;

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

gap:22px;

}



.office-item-card{

background:#F7FBFF;

padding:30px 20px;

border-radius:22px;

text-align:center;

transition:.35s;

}



.office-item-card:hover{

background:#fff;

box-shadow:var(--shadow);

transform:translateY(-8px);

}



.office-item-card i{

font-size:38px;

color:var(--primary);

margin-bottom:15px;

}



.office-item-card h3{

font-size:20px;

color:var(--secondary);

margin-bottom:10px;

}



.office-item-card p{

font-size:14px;

line-height:1.8;

color:var(--text);

}







/*==============================
BENEFITS
==============================*/


.office-new-benefits{

padding:90px 0;

background:#F7FBFF;

}



.office-benefit-grid{

display:grid;

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

gap:22px;

}



.office-benefit-card{

background:#fff;

padding:35px 20px;

border-radius:22px;

text-align:center;

box-shadow:var(--shadow);

}



.office-benefit-card i{

font-size:40px;

color:var(--primary);

margin-bottom:15px;

}



.office-benefit-card h3{

font-size:20px;

color:var(--secondary);

margin-bottom:10px;

}



.office-benefit-card p{

font-size:14px;

line-height:1.8;

color:var(--text);

}







/*==============================
WHY CHOOSE
==============================*/


.office-new-why{

padding:90px 0;

background:#fff;

}



.office-why-grid{

display:grid;

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

gap:25px;

}



.office-why-card{

background:#F7FBFF;

padding:35px 25px;

border-radius:25px;

text-align:center;

transition:.35s;

}



.office-why-card:hover{

background:#fff;

box-shadow:var(--shadow);

transform:translateY(-8px);

}



.office-why-card i{

font-size:40px;

color:var(--primary);

margin-bottom:18px;

}



.office-why-card h3{

font-size:21px;

color:var(--secondary);

margin-bottom:12px;

}



.office-why-card p{

font-size:15px;

line-height:1.8;

color:var(--text);

}







/*==============================
COMMERCIAL SOLUTION
==============================*/


.office-new-commercial{

padding:80px 0;

background:#F7FBFF;

}



.office-commercial-box{

display:flex;

align-items:center;

gap:40px;

background:#fff;

padding:50px;

border-radius:35px;

box-shadow:var(--shadow);

}



.office-commercial-icon{

height:120px;

width:120px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#EAF8FF;

flex-shrink:0;

}



.office-commercial-icon i{

font-size:55px;

color:var(--primary);

}



.office-commercial-box h2{

font-size:35px;

color:var(--secondary);

margin-bottom:15px;

}



.office-commercial-box p{

font-size:16px;

line-height:1.8;

color:var(--text);

}



.office-commercial-box a{

display:inline-block;

margin-top:20px;

background:var(--primary);

color:#fff;

padding:14px 30px;

border-radius:50px;

font-weight:700;

}







/*==============================
MOBILE FIX
==============================*/


@media(max-width:1100px){


.office-risk-grid,
.office-check-grid,
.office-items-grid,
.office-benefit-grid{

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

}



.office-why-grid{

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

}



.office-commercial-box{

flex-direction:column;

text-align:center;

}


}




@media(max-width:600px){


.office-risk-grid,
.office-check-grid,
.office-items-grid,
.office-benefit-grid,
.office-why-grid{

grid-template-columns:1fr;

}



.office-continuity-box{

padding:35px 20px;

}



.office-continuity-box h2{

font-size:28px;

}



.office-commercial-box{

padding:30px 20px;

}



}