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

.top-header{
    width:100%;
    background:#ffffff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    padding:10px 5%;
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
    flex-wrap:wrap;
}

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

.header-left{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

/* =========================
   COMPANY DETAILS
========================= */

.company-details h1{
    font-size:clamp(24px,4vw,34px);
    color:#2f54eb;
    font-weight:700;
    line-height:1.0;
}

.company-details p{
    margin-top:4px;
    color:#666;
    font-size:14px;
}

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

.logo-ring{
    width:90px;
    height:90px;
    border:4px solid #2f54eb;
    border-radius:50%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:white;

    box-shadow:
        0 0 25px rgba(47,84,235,0.35),
        0 0 50px rgba(47,84,235,0.15);

    animation:ringGlow 3s ease-in-out infinite;
}

.logo-ring img{
    width:60px;
    height:60px;
    object-fit:contain;
    z-index:2;
}

/* =========================
   ROTATING DOTS
========================= */

.dot{
    width:10px;
    height:10px;
    background:red;
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-5px;
    margin-left:-5px;

    box-shadow:0 0 10px red;
}

.dot1{
    animation:rotateDot1 12s linear infinite;
}

.dot2{
    animation:rotateDot2 12s linear infinite;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes rotateDot1{

    from{
        transform:
            rotate(0deg)
            translateX(45px)
            rotate(0deg);
    }

    to{
        transform:
            rotate(360deg)
            translateX(45px)
            rotate(-360deg);
    }
}

@keyframes rotateDot2{

    from{
        transform:
            rotate(180deg)
            translateX(45px)
            rotate(-180deg);
    }

    to{
        transform:
            rotate(540deg)
            translateX(45px)
            rotate(-540deg);
    }
}

@keyframes ringGlow{

    0%{
        box-shadow:
            0 0 25px rgba(47,84,235,0.35),
            0 0 50px rgba(47,84,235,0.15);
    }

    50%{
        box-shadow:
            0 0 40px rgba(47,84,235,0.50),
            0 0 70px rgba(47,84,235,0.25);
    }

    100%{
        box-shadow:
            0 0 25px rgba(47,84,235,0.35),
            0 0 50px rgba(47,84,235,0.15);
    }
}

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

.header-menu{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.header-menu a{
    color:#333;
    font-size:16px;
    font-weight:500;
    position:relative;
    transition:0.3s ease;
}

/* ACTIVE + HOVER */

.header-menu a:hover,
.header-menu a.active{
    color:#2f54eb;
}

/* UNDERLINE EFFECT */

.header-menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:2px;
    background:#2f54eb;
    transition:0.3s ease;
}

.header-menu a:hover::after,
.header-menu a.active::after{
    width:100%;
}

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

.header-right{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

/* =========================
   PHONE
========================= */

.phone{
    background:#2f54eb;
    color:white;
    padding:5px 20px;
    border-radius:40px;
    font-weight:600;

    box-shadow:
        0 5px 15px rgba(47,84,235,0.35);

    white-space:nowrap;
}

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

@media(max-width:992px){

    .top-header{
        justify-content:center;
        text-align:center;
    }

    .header-left,
    .header-right{
        justify-content:center;
    }

    .header-menu{
        width:100%;
        gap:18px;
    }
}

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

@media(max-width:768px){

    .top-header{
        padding:15px 20px;
    }

    .header-menu{
        gap:14px;
    }

    .header-menu a{
        font-size:15px;
    }
	
 	
    .phone{
        width:100%;
        text-align:center;
		display:none;
		    }
}

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

@media(max-width:480px){

    .logo-ring{
        width:75px;
        height:75px;
    }

    .logo-ring img{
        width:50px;
        height:50px;
    }

    .company-details h1{
        font-size:24px;
    }

    .header-menu{
        gap:10px;
    }

    .header-menu a{
        font-size:14px;
    }
}