/* ============================================================================
   Globex — layout (site header + footer)
   ----------------------------------------------------------------------------
   Ye CSS pehle header.php aur footer.php ke andar inline thi, matlab har page
   request par dobara bhejti thi aur browser cache nahi kar pata tha. Ab ek file
   hai jo ek baar download hoti hai.

   Colours/sizes css/tokens.css se aate hain.
   ============================================================================ */

/* ─── from header.php ─────────────────────────────────────────────── */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
            background: var(--gx-bg-alt);
        }
        .contact-info {
            font-size: 14px;
            color: #1f2a44;
            line-height: 1.5;
        }
        .contact-info p {
            margin: 4px 0;
        }
        .contact-info i {
            width: 24px;
            color: #0056b3;
            margin-right: 8px;
            font-size: 14px;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @media (max-width: 480px) {
            .contact-info { font-size: 11px; }
            .contact-info i { width: 20px; font-size: 12px; }
        }

/* ─── from footer.php ─────────────────────────────────────────────── */

/* REMOVE DEFAULT PAGE MARGIN */
body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
}

/* FOOTER */
.footer{
background:#0f2b52;
color:white;
padding-top:60px;
width:100%;
}

/* CONTAINER */
.footer-container{
width:90%;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

/* COLUMN */
.footer-col h3{
margin-bottom:20px;
font-size:20px;
color: white;
}

.footer-col p{
color:#d6d6d6;
line-height:1.6;
font-size:14px;
}

.footer-col ul{
list-style:none;
padding:0;
}

.footer-col ul li{
margin-bottom:10px;
}

.footer-col ul li a{
color:#d6d6d6;
text-decoration:none;
transition:.3s;
}

.footer-col ul li a:hover{
color:#ff6a00;
padding-left:5px;
}

/* FIX: IMAGE STYLING */
.footer-col img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 15px;
    padding: 5px;
    border-radius: 8px;
}

/* FOOTER BOTTOM */
.footer-bottom{
margin-top:40px;
padding:15px 5%;
border-top:1px solid rgba(255,255,255,0.2);
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}

/* SOCIAL ICONS */
.footer-social{
display:flex;
gap:10px;
}

.footer-social a{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
background:#1e4479;
border-radius:50%;
color:white;
text-decoration:none;
transition:.3s;
}

/* FACEBOOK */
.footer-social a:nth-child(1):hover{
background:#1877f2;
}

/* INSTAGRAM */
.footer-social a:nth-child(2):hover{
background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);
}

/* YOUTUBE */
.footer-social a:nth-child(3):hover{
background:#ff0000;
}

/* LINKEDIN */
.footer-social a:nth-child(4):hover{
background:#0077b5;
}

/* COPYRIGHT */
.copyright{
flex:1;
text-align:center;
font-size:14px;
/* No colour of its own meant this <p> inherited whatever muted grey the host
   page sets on p, which then sat on the dark navy footer and failed contrast.
   The footer ground is fixed, so state the colour here. */
color:var(--gx-white);
}

/* LINKS */
.footer-links a{
color:#ddd;
text-decoration:none;
font-size:14px;
margin:0 5px;
}

.footer-links a:hover{
color:#ff6a00;
}

/* BACK TO TOP BUTTON */
.back-to-top{
position:fixed;
bottom:90px;
right:25px;
width:45px;
height:45px;
background:#1f2a44;
color:white;
border:none;
border-radius:50%;
font-size:20px;
cursor:pointer;
display:none;
z-index:9998;
box-shadow:0 4px 12px rgba(0,0,0,0.3);
transition:all 0.3s ease;
align-items:center;
justify-content:center;
}

.back-to-top:hover{
background:#ff6a00;
transform:translateY(-3px);
}

.back-to-top.show{
display:flex;
}

/* WHATSAPP FLOATING BUTTON */
.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
width:55px;
height:55px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:28px;
text-decoration:none;
z-index:9999;
box-shadow:0 4px 15px rgba(37,211,102,0.4);
transition:all 0.3s ease;
}

.whatsapp-float:hover{
background:#128C7E;
transform:scale(1.1);
box-shadow:0 6px 20px rgba(37,211,102,0.6);
}

.whatsapp-float .tooltip{
position:absolute;
right:65px;
background:#333;
color:white;
padding:6px 12px;
border-radius:6px;
font-size:13px;
white-space:nowrap;
opacity:0;
pointer-events:none;
transition:opacity 0.3s;
font-family:Arial,sans-serif;
}

.whatsapp-float:hover .tooltip{
opacity:1;
}

@media(max-width:768px) {

.footer-container{
grid-template-columns:1fr 1fr;
}

.footer-bottom{
flex-direction:column;
gap:10px;
text-align:center;
}

.footer-social{
justify-content:center;
}

.back-to-top{
bottom:80px;
right:15px;
width:40px;
height:40px;
font-size:18px;
}

.whatsapp-float{
bottom:20px;
right:15px;
width:50px;
height:50px;
font-size:24px;
}

}

@media(max-width:500px) {

.footer-container{
grid-template-columns:1fr;
}

}