/* =====================================================
   ROBOTCO ENGINEERING SERVICES
   GLOBAL STYLE SYSTEM
   PART 1/3
===================================================== */


/* =====================================================
   ROOT VARIABLES
===================================================== */

:root{

--robotco-blue:#002b63;
--robotco-blue-light:#0055a5;
--robotco-cyan:#00a6e8;

--robotco-dark:#061426;
--robotco-dark-2:#0a1c30;

--robotco-text:#142438;
--robotco-gray:#64748b;

--robotco-light:#f4f7fb;

--robotco-white:#ffffff;

}



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


*,
*::before,
*::after{

box-sizing:border-box;

margin:0;

padding:0;

}



html{

scroll-behavior:smooth;

}



body{

font-family:'Montserrat',Arial,sans-serif;

color:#222;

overflow-x:hidden;

background:white;

}



a{

text-decoration:none;

transition:.3s;

}



button{

font-family:'Montserrat',Arial,sans-serif;

cursor:pointer;

}



img{

max-width:100%;

height:auto;

display:block;

}






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


.container,
.header-container,
.robotco-footer-container{


width:min(1400px,calc(100% - 90px));

margin:auto;

}








/* =====================================================
   TOP BAR
   MATCHES header.php
===================================================== */


.top-bar{


height:40px;

background:var(--robotco-dark);

color:white;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 45px;

font-size:13px;

font-weight:500;

}





.top-left,
.top-right{


display:flex;

align-items:center;

gap:22px;

}





.top-left span{


display:flex;

align-items:center;

gap:8px;

}





.top-bar i{


color:var(--robotco-cyan);

}





.top-right a{


color:white;

}



.top-right a:hover{


color:var(--robotco-cyan);

}








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


.robotco-header{


height:95px;

background:white;

border-bottom:1px solid #e5eaf2;

position:relative;

z-index:9999;

}






.header-container{


height:100%;

display:flex;

align-items:center;

gap:30px;

padding:0 45px;

}







/* =====================================================
   LOGO
===================================================== */


.logo{


display:flex;

align-items:center;

flex-shrink:0;

}



.logo img{


width:190px;

height:auto;

}







/* =====================================================
   MAIN NAVIGATION
===================================================== */


.main-nav{


display:flex;

align-items:center;

justify-content:center;

gap:24px;

flex:1;

}





.main-nav>a,
.nav-dropdown>a{


font-size:14px;

font-weight:700;

color:var(--robotco-text);

display:flex;

align-items:center;

gap:7px;

white-space:nowrap;

}





.main-nav>a:hover,
.nav-dropdown>a:hover{


color:var(--robotco-cyan);

}







/* =====================================================
   DROPDOWN MENU
===================================================== */


.nav-dropdown{


position:relative;

}





.dropdown-menu{


position:absolute;

top:38px;

left:0;

width:240px;

background:white;

border-radius:12px;

padding:10px;

box-shadow:

0 20px 40px rgba(0,0,0,.15);

opacity:0;

visibility:hidden;

transform:translateY(10px);

transition:.3s;

z-index:99999;

}





.nav-dropdown:hover .dropdown-menu{


opacity:1;

visibility:visible;

transform:translateY(0);

}





.dropdown-menu a{


display:block;

padding:12px;

font-size:14px;

font-weight:600;

color:var(--robotco-text);

border-radius:8px;

}





.dropdown-menu a:hover{


background:#eef7ff;

color:var(--robotco-blue);

}








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


.header-actions{


display:flex;

align-items:center;

gap:10px;

flex-shrink:0;

}







/* CART */


.cart-icon{


width:42px;

height:42px;

border-radius:50%;

background:#f2f6fb;

display:flex;

align-items:center;

justify-content:center;

color:var(--robotco-blue);

font-size:18px;

position:relative;

}





.cart-count{


position:absolute;

right:-5px;

top:-5px;

width:20px;

height:20px;

border-radius:50%;

background:var(--robotco-cyan);

color:white;

font-size:11px;

font-weight:700;

display:flex;

align-items:center;

justify-content:center;

}







/* LOGIN */


.login-btn{


width:42px;

height:42px;

border-radius:50%;

background:#f2f6fb;

display:flex;

align-items:center;

justify-content:center;

color:var(--robotco-blue);

}





.login-btn:hover{

background:#e8f5ff;

}







/* USER MENU */


.user-menu{


position:relative;

}




.user-button{


height:42px;

border:0;

background:#f2f6fb;

padding:0 15px;

border-radius:25px;

display:flex;

align-items:center;

gap:8px;

color:var(--robotco-blue);

font-weight:700;

}





.user-dropdown{


position:absolute;

right:0;

top:50px;

width:220px;

background:white;

border-radius:12px;

padding:10px 0;

box-shadow:

0 20px 40px rgba(0,0,0,.15);

display:none;

}





.user-menu:hover .user-dropdown{


display:block;

}





.user-dropdown a{


display:flex;

gap:10px;

padding:12px 20px;

font-size:14px;

color:var(--robotco-text);

}





.user-dropdown a:hover{


background:#eef7ff;

}







/* TRACK BUTTON */


.track-btn{


height:44px;

padding:0 18px;

border-radius:8px;

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

display:flex;

align-items:center;

gap:8px;

font-size:13px;

font-weight:700;

color:var(--robotco-blue);

}




.track-btn:hover{


background:var(--robotco-blue);

color:white;

}







/* QUOTE BUTTON */


.quote-btn{


height:44px;

padding:0 22px;

border-radius:8px;

background:

linear-gradient(
135deg,
var(--robotco-blue),
var(--robotco-cyan)
);

color:white;

display:flex;

align-items:center;

gap:10px;

font-size:13px;

font-weight:800;

}




.quote-btn:hover{


color:white;

transform:translateY(-2px);

}





/* =====================================================
   MOBILE BUTTON
===================================================== */


.mobile-menu-btn{


display:none;

width:42px;

height:42px;

border-radius:8px;

border:1px solid #ddd;

background:white;

align-items:center;

justify-content:center;

}

/* =====================================================
   ROBOTCO FOOTER SYSTEM
   PART 2/3
===================================================== */



.robotco-footer{

background:var(--robotco-dark);

color:white;

font-family:'Montserrat',Arial,sans-serif;

}





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


.robotco-footer-cta{


background:

linear-gradient(
135deg,
#002b63,
#0055a5
);

padding:45px 0;

}





.robotco-footer-cta-inner{


display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}





.robotco-footer-eyebrow{


font-size:12px;

font-weight:800;

letter-spacing:2px;

color:#7bdcff;

}





.robotco-footer-cta h2{


font-size:36px;

font-weight:900;

margin:10px 0;

color:white;

}





.robotco-footer-cta p{


font-size:15px;

color:#d8e8f6;

margin:0;

}





/* CTA BUTTONS */


.robotco-footer-cta-actions{


display:flex;

gap:15px;

}





.robotco-footer-primary-btn,
.robotco-footer-secondary-btn{


height:46px;

padding:0 24px;

border-radius:8px;

display:flex;

align-items:center;

justify-content:center;

gap:10px;

font-size:13px;

font-weight:800;

}





.robotco-footer-primary-btn{


background:white;

color:var(--robotco-blue);

}





.robotco-footer-primary-btn:hover{


background:var(--robotco-cyan);

color:white;

}





.robotco-footer-secondary-btn{


border:1px solid white;

color:white;

}





.robotco-footer-secondary-btn:hover{


background:white;

color:var(--robotco-blue);

}







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


.robotco-footer-main{


padding:65px 0 45px;

}





.robotco-footer-grid{


display:grid;

grid-template-columns:

1.5fr
1fr
1fr
1fr
1fr;

gap:40px;

}





/* BRAND */


.robotco-footer-logo img{


width:190px;

margin-bottom:20px;

}





.robotco-footer-brand p{


max-width:330px;

font-size:14px;

line-height:1.8;

color:#c6d3e3;

}






/* SOCIAL */


.robotco-footer-social{


display:flex;

gap:12px;

margin-top:25px;

}





.robotco-footer-social a{


width:42px;

height:42px;

border-radius:50%;

background:#102744;

color:white;

display:flex;

align-items:center;

justify-content:center;

transition:.3s;

}





.robotco-footer-social a:hover{


background:var(--robotco-cyan);

transform:translateY(-3px);

}








/* FOOTER COLUMNS */


.robotco-footer-column h3{


font-size:17px;

font-weight:800;

margin-bottom:22px;

color:white;

}





.robotco-footer-column a{


display:block;

font-size:14px;

color:#cbd5e1;

margin-bottom:13px;

}





.robotco-footer-column a:hover{


color:var(--robotco-cyan);

padding-left:5px;

}








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


.robotco-footer-contact a,
.robotco-contact-item{


display:flex;

align-items:flex-start;

gap:12px;

margin-bottom:18px;

color:white;

}





.robotco-contact-icon{


width:38px;

height:38px;

border-radius:50%;

background:#102744;

display:flex;

align-items:center;

justify-content:center;

color:var(--robotco-cyan);

flex-shrink:0;

}





.robotco-footer-contact small{


display:block;

font-size:11px;

font-weight:800;

color:var(--robotco-cyan);

margin-bottom:3px;

text-transform:uppercase;

}







/* =====================================================
   FOOTER TRUST BAR
===================================================== */


.robotco-footer-trust{


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

border-bottom:1px solid rgba(255,255,255,.12);

padding:18px 0;

text-align:center;

}





.robotco-footer-trust p{


margin:0;

font-size:14px;

font-weight:600;

color:#b8c7db;

}







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


.robotco-footer-bottom{


background:#04101f;

padding:25px 0;

}





.robotco-footer-bottom-inner{


display:flex;

align-items:center;

justify-content:space-between;

gap:20px;

}





.robotco-footer-bottom p{


margin:0;

font-size:13px;

color:#aab8ca;

}





.robotco-footer-bottom-links{


display:flex;

gap:25px;

}





.robotco-footer-bottom-links a{


font-size:13px;

color:#aab8ca;

}







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


.robotco-whatsapp{


position:fixed;

right:25px;

bottom:25px;

width:58px;

height:58px;

border-radius:50%;

background:#25d366;

color:white;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

z-index:9999;

box-shadow:

0 10px 30px rgba(0,0,0,.25);

}





.robotco-whatsapp:hover{


color:white;

transform:translateY(-5px);

}







.robotco-scroll-top{


position:fixed;

right:25px;

bottom:95px;

width:45px;

height:45px;

border-radius:50%;

background:var(--robotco-blue);

color:white;

display:flex;

align-items:center;

justify-content:center;

z-index:9999;

opacity:0;

visibility:hidden;

transition:.3s;

}





.robotco-scroll-top.show{


opacity:1;

visibility:visible;

}

/* =====================================================
   RESPONSIVE SYSTEM
   PART 3/3
===================================================== */



@media(max-width:1200px){


.header-container{

padding:0 25px;

}



.main-nav{


gap:15px;

}



.main-nav>a,
.nav-dropdown>a{


font-size:13px;

}



.logo img{


width:160px;

}



.track-btn,
.quote-btn{


padding:0 15px;

}



.robotco-footer-grid{


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

}


}







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


@media(max-width:900px){



.top-bar{


display:none;

}





.robotco-header{


height:80px;

}





.header-container{


padding:0 20px;

justify-content:space-between;

}





.logo img{


width:150px;

}






.main-nav{


display:none;

position:absolute;

top:80px;

left:0;

width:100%;

background:white;

flex-direction:column;

align-items:flex-start;

padding:20px;

box-shadow:

0 20px 40px rgba(0,0,0,.15);

}





.main-nav.active{


display:flex;

}





.main-nav>a,
.nav-dropdown>a{


width:100%;

padding:15px 0;

}





.nav-dropdown{


width:100%;

}





.dropdown-menu{


position:relative;

top:0;

width:100%;

display:none;

opacity:1;

visibility:visible;

transform:none;

box-shadow:none;

}





.nav-dropdown:hover .dropdown-menu{


display:block;

}





.mobile-menu-btn{


display:flex;

}





.header-actions{


gap:8px;

}



.header-actions .track-btn,
.header-actions .quote-btn{


display:none;

}




.robotco-footer-grid{


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

}





.robotco-footer-cta-inner{


flex-direction:column;

align-items:flex-start;

}





}








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


@media(max-width:600px){



.container{


width:calc(100% - 30px);

}





.header-container{


padding:0 15px;

}





.logo img{


width:135px;

}





.header-actions{


gap:5px;

}





.cart-icon,
.login-btn{


width:38px;

height:38px;

}




.user-button{


padding:0 10px;

}





.user-button span{


display:none;

}






.robotco-footer-container{


padding:0 20px;

}





.robotco-footer-grid{


grid-template-columns:1fr;

gap:35px;

}





.robotco-footer-cta h2{


font-size:28px;

}





.robotco-footer-cta-actions{


flex-direction:column;

width:100%;

}





.robotco-footer-primary-btn,
.robotco-footer-secondary-btn{


width:100%;

}





.robotco-footer-bottom-inner{


flex-direction:column;

text-align:center;

}





.robotco-footer-bottom-links{


flex-wrap:wrap;

justify-content:center;

}



}








/* =====================================================
   PAGE ISOLATION PROTECTION
===================================================== */


/*
   Homepage has its own CSS.
   Do not allow global styles
   to affect it.
*/


.rc-home,
.rc-home *{


box-sizing:border-box;

}



.rc-home img{


max-width:100%;

height:auto;

}





.rc-home h1,
.rc-home h2,
.rc-home h3,
.rc-home h4,
.rc-home p,
.rc-home a{


font-family:'Montserrat',Arial,sans-serif;

}







/* =====================================================
   SAFE BUTTON RESET
===================================================== */


.rc-home button,
.rc-home a{


text-decoration:none;

}





/* =====================================================
   REMOVE OLD HEADER CONFLICTS
   (ONLY IF OLD CLASSES EXIST)
===================================================== */


.old-header,
.old-navbar{


display:none!important;

}

/* ROBOTCO Engineering Intelligence floating access */
.robotco-ai-float{position:fixed;right:22px;bottom:158px;z-index:9990;display:flex;align-items:center;gap:9px;height:46px;padding:0 15px;border-radius:24px;background:linear-gradient(135deg,#061426,#004c8f);color:#fff!important;text-decoration:none!important;font-family:Montserrat,Arial,sans-serif;font-size:10px;font-weight:800;letter-spacing:.4px;box-shadow:0 12px 30px rgba(0,43,99,.27);border:1px solid rgba(255,255,255,.14);transition:.25s ease}.robotco-ai-float i{color:#35c8f5;font-size:15px}.robotco-ai-float:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,43,99,.34)}@media(max-width:720px){.robotco-ai-float{right:16px;bottom:151px;width:46px;padding:0;justify-content:center}.robotco-ai-float span{display:none}}