/* =========================================================
SHADOBOOKS FINANCIAL SHADOW
========================================================= */

.made-india-section {
position: relative;
width: 100%;
min-height: 430px;


padding: 55px 20px 55px;

overflow: hidden;

background:
    radial-gradient(
        circle at 50% 48%,
        rgba(144, 49, 28, 0.08) 0%,
        rgba(144, 49, 28, 0.035) 25%,
        transparent 65%
    ),
    #ffffff;

text-align: center;

isolation: isolate;


}

/* =========================================================
ANIMATED GRID
========================================================= */

.made-grid {
position: absolute;
inset: 0;


background-image:
    linear-gradient(
        rgba(144, 49, 28, 0.045) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(144, 49, 28, 0.045) 1px,
        transparent 1px
    );

background-size: 65px 65px;

mask-image:
    radial-gradient(
        ellipse at center,
        black 0%,
        transparent 75%
    );

-webkit-mask-image:
    radial-gradient(
        ellipse at center,
        black 0%,
        transparent 75%
    );

opacity: 0.65;

z-index: -5;

animation: gridMove 20s linear infinite;

pointer-events: none;


}

/* =========================================================
WORLD MAP
========================================================= */

.made-map {
position: absolute;
inset: 0;


background:
    url("/assets/imgs/world-map.png")
    center center / 900px auto
    no-repeat;

opacity: 0.035;

z-index: -4;

animation:
    mapScale 15s ease-in-out infinite alternate;

pointer-events: none;


}

/* =========================================================
AMBIENT GLOWS
========================================================= */

.made-bg-glow {
position: absolute;


border-radius: 50%;

filter: blur(10px);

pointer-events: none;

z-index: -3;


}

/* Left */

.glow-one {
width: 430px;
height: 430px;


top: -300px;
left: -180px;

background:
    radial-gradient(
        circle,
        rgba(144, 49, 28, 0.14),
        transparent 70%
    );

animation:
    glowLeft 9s ease-in-out infinite alternate;


}

/* Right */

.glow-two {
width: 500px;
height: 500px;


right: -250px;
bottom: -330px;

background:
    radial-gradient(
        circle,
        rgba(144, 49, 28, 0.10),
        transparent 70%
    );

animation:
    glowRight 11s ease-in-out infinite alternate;


}

/* Center */

.glow-three {
width: 280px;
height: 280px;


top: 50%;
left: 50%;

transform: translate(-50%, -50%);

background:
    radial-gradient(
        circle,
        rgba(144, 49, 28, 0.055),
        transparent 70%
    );

animation:
    centerGlow 5s ease-in-out infinite alternate;


}

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

.made-container {
position: relative;
z-index: 5;


max-width: 900px;
margin: 0 auto;


}

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

.made-logo-wrap {
position: relative;


width: 130px;
height: 130px;

margin: 0 auto 25px;

display: flex;
align-items: center;
justify-content: center;

animation:
    logoEntrance 1.2s cubic-bezier(.16,1,.3,1) both;


}

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

.logo-core {
position: relative;
z-index: 5;


width: 82px;
height: 82px;

display: flex;
align-items: center;
justify-content: center;

border-radius: 50%;

background:
    radial-gradient(
        circle,
        rgba(255,255,255,1) 30%,
        rgba(255,255,255,0.9) 70%,
        rgba(144,49,28,0.04) 100%
    );

box-shadow:
    0 15px 35px rgba(144, 49, 28, 0.12),
    0 0 0 1px rgba(144, 49, 28, 0.08);

animation:
    coreFloat 5s ease-in-out infinite;


}

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

.made-logo {
width: 60px;
height: 60px;


object-fit: contain;

display: block;

filter:
    drop-shadow(
        0 7px 14px rgba(144, 49, 28, 0.18)
    );

transition:
    transform 0.45s ease,
    filter 0.45s ease;


}

.made-logo-wrap:hover .made-logo {
transform: scale(1.08);


filter:
    drop-shadow(
        0 12px 22px rgba(144, 49, 28, 0.28)
    );


}

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

.logo-orbit {
position: absolute;


left: 50%;
top: 50%;

border-radius: 50%;

border: 1px solid rgba(144, 49, 28, 0.12);

pointer-events: none;


}

/* Inner */

.orbit-one {
width: 98px;
height: 98px;


transform: translate(-50%, -50%);

animation:
    orbitPulse 4s ease-in-out infinite;


}

/* Middle */

.orbit-two {
width: 116px;
height: 116px;


transform: translate(-50%, -50%);

border-color: rgba(144, 49, 28, 0.08);

animation:
    orbitPulse 5s ease-in-out 0.5s infinite;


}

/* Outer rotating ring */

.orbit-three {
width: 130px;
height: 130px;


transform: translate(-50%, -50%);

border:
    1px dashed rgba(144, 49, 28, 0.14);

animation:
    orbitRotate 18s linear infinite;


}

/* =========================================================
ORBIT DOTS
========================================================= */

.logo-dot {
position: absolute;


z-index: 8;

width: 6px;
height: 6px;

border-radius: 50%;

background: #90311c;

box-shadow:
    0 0 0 4px rgba(144, 49, 28, 0.08),
    0 0 12px rgba(144, 49, 28, 0.2);


}

/* Dot 1 */

.logo-dot-one {
top: 8px;
right: 23px;


animation:
    orbitDotOne 5s ease-in-out infinite;


}

/* Dot 2 */

.logo-dot-two {
bottom: 14px;
left: 18px;


width: 4px;
height: 4px;

animation:
    orbitDotTwo 6s ease-in-out infinite;


}

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

.made-title {
margin: 0;


color: #252525;

font-size: 47px;
font-weight: 500;

line-height: 1.18;

letter-spacing: -1.5px;

opacity: 0;

animation:
    titleEntrance 1s cubic-bezier(.16,1,.3,1) 0.35s forwards;


}

/* =========================================================
FINANCIAL SHADOW
========================================================= */

.made-title span {
position: relative;


display: inline-block;

color: #90311c;

font-weight: 650;

background:
    linear-gradient(
        100deg,
        #90311c 20%,
        #b84c32 40%,
        #90311c 60%
    );

background-size: 200% auto;

-webkit-background-clip: text;
background-clip: text;

-webkit-text-fill-color: transparent;

animation:
    textShine 5s linear infinite;


}

/* Underline */

.made-title span::after {
content: "";


position: absolute;

left: 4px;
right: 4px;

bottom: -8px;

height: 2px;

background:
    linear-gradient(
        90deg,
        transparent,
        #90311c,
        transparent
    );

transform: scaleX(0);

transform-origin: center;

animation:
    underlineDraw 1.1s ease 1.1s forwards;


}

/* =========================================================
BOTTOM LINE
========================================================= */

.made-bottom-line {
display: flex;
align-items: center;
justify-content: center;


gap: 11px;

margin-top: 38px;

color: #a0a0a0;

font-size: 9px;

letter-spacing: 2px;

opacity: 0;

animation:
    bottomEntrance 1s ease 1s forwards;


}

.made-bottom-line strong {
font-size: 9px;


font-weight: 700;

color: #999;

transition:
    color 0.3s ease,
    transform 0.3s ease;


}

/* Hover */

.made-bottom-line strong:hover {
color: #90311c;


transform: translateY(-2px);


}

.made-bottom-line i {
width: 3px;
height: 3px;


display: block;

border-radius: 50%;

background: #90311c;

opacity: 0.45;


}

/* Lines */

.made-bottom-line > span {
width: 48px;
height: 1px;


background:
    linear-gradient(
        90deg,
        transparent,
        rgba(144, 49, 28, 0.25)
    );

transform: scaleX(0);

animation:
    lineDraw 1s ease 1.25s forwards;


}

.made-bottom-line > span:last-child {
background:
linear-gradient(
90deg,
rgba(144, 49, 28, 0.25),
transparent
);
}

/* =========================================================
FLOATING PARTICLES
========================================================= */

.made-particle {
position: absolute;


border-radius: 50%;

background: #90311c;

pointer-events: none;


}

.particle-one {
width: 5px;
height: 5px;


top: 25%;
left: 14%;

animation:
    particleOne 6s ease-in-out infinite;


}

.particle-two {
width: 4px;
height: 4px;


top: 30%;
right: 16%;

animation:
    particleTwo 7s ease-in-out infinite;


}

.particle-three {
width: 3px;
height: 3px;


bottom: 22%;
left: 24%;

animation:
    particleThree 5s ease-in-out infinite;


}

.particle-four {
width: 4px;
height: 4px;


bottom: 25%;
right: 23%;

animation:
    particleFour 8s ease-in-out infinite;


}

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

/* Grid */

@keyframes gridMove {


0% {
    background-position: 0 0;
}

100% {
    background-position: 65px 65px;
}


}

/* Map */

@keyframes mapScale {


0% {
    transform: scale(1);
}

100% {
    transform: scale(1.06);
}


}

/* Glows */

@keyframes glowLeft {


0% {
    transform: translate(0, 0);
}

100% {
    transform: translate(80px, 60px);
}


}

@keyframes glowRight {


0% {
    transform: translate(0, 0);
}

100% {
    transform: translate(-70px, -50px);
}


}

@keyframes centerGlow {


0% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0.4;
}

100% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
}


}

/* Logo */

@keyframes logoEntrance {


0% {
    opacity: 0;
    transform: translateY(35px) scale(0.7);
}

70% {
    transform: translateY(-5px) scale(1.03);
}

100% {
    opacity: 1;
    transform: translateY(0) scale(1);
}


}

@keyframes coreFloat {


0%,
100% {
    transform: translateY(0);
}

50% {
    transform: translateY(-6px);
}


}

/* Rings */

@keyframes orbitPulse {


0%,
100% {
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0.4;
}

50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
}


}

@keyframes orbitRotate {


from {
    transform: translate(-50%, -50%) rotate(0deg);
}

to {
    transform: translate(-50%, -50%) rotate(360deg);
}


}

/* Orbit dots */

@keyframes orbitDotOne {


0%,
100% {
    transform: translate(0, 0);
}

50% {
    transform: translate(8px, -7px);
}


}

@keyframes orbitDotTwo {


0%,
100% {
    transform: translate(0, 0);
}

50% {
    transform: translate(-7px, 6px);
}


}

/* Heading */

@keyframes titleEntrance {


from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(7px);
}

to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}


}

/* Text shine */

@keyframes textShine {


0% {
    background-position: 200% center;
}

100% {
    background-position: -200% center;
}


}

/* Underline */

@keyframes underlineDraw {


from {
    transform: scaleX(0);
}

to {
    transform: scaleX(1);
}


}

/* Bottom */

@keyframes bottomEntrance {


from {
    opacity: 0;
    transform: translateY(15px);
}

to {
    opacity: 1;
    transform: translateY(0);
}


}

/* Lines */

@keyframes lineDraw {


from {
    transform: scaleX(0);
}

to {
    transform: scaleX(1);
}


}

/* Particles */

@keyframes particleOne {


0%,
100% {
    transform: translate(0, 0);
    opacity: 0.2;
}

50% {
    transform: translate(15px, -18px);
    opacity: 0.7;
}


}

@keyframes particleTwo {


0%,
100% {
    transform: translate(0, 0);
    opacity: 0.25;
}

50% {
    transform: translate(-18px, -12px);
    opacity: 0.7;
}


}

@keyframes particleThree {


0%,
100% {
    transform: translate(0, 0);
    opacity: 0.2;
}

50% {
    transform: translate(10px, -14px);
    opacity: 0.65;
}


}

@keyframes particleFour {


0%,
100% {
    transform: translate(0, 0);
    opacity: 0.2;
}

50% {
    transform: translate(-14px, -18px);
    opacity: 0.7;
}


}

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

@media (max-width: 768px) {


.made-india-section {
    min-height: auto;

    padding: 70px 20px 65px;
}

.made-logo-wrap {
    width: 110px;
    height: 110px;

    margin-bottom: 23px;
}

.logo-core {
    width: 72px;
    height: 72px;
}

.made-logo {
    width: 54px;
    height: 54px;
}

.orbit-one {
    width: 88px;
    height: 88px;
}

.orbit-two {
    width: 100px;
    height: 100px;
}

.orbit-three {
    width: 110px;
    height: 110px;
}

.made-title {
    font-size: 33px;

    letter-spacing: -0.8px;
}

.made-bottom-line {
    margin-top: 31px;

    gap: 8px;

    font-size: 8px;

    letter-spacing: 1.5px;
}

.made-bottom-line strong {
    font-size: 8px;
}

.made-bottom-line > span {
    width: 32px;
}

.made-map {
    background-size: 650px auto;
}

.particle-one {
    left: 7%;
}

.particle-two {
    right: 7%;
}


}

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

@media (max-width: 480px) {


.made-india-section {
    padding: 58px 15px 55px;
}

.made-logo-wrap {
    width: 95px;
    height: 95px;

    margin-bottom: 20px;
}

.logo-core {
    width: 65px;
    height: 65px;
}

.made-logo {
    width: 49px;
    height: 49px;
}

.orbit-one {
    width: 78px;
    height: 78px;
}

.orbit-two {
    width: 88px;
    height: 88px;
}

.orbit-three {
    width: 95px;
    height: 95px;
}

.made-title {
    font-size: 27px;

    line-height: 1.28;

    letter-spacing: -0.5px;
}

.made-title span::after {
    bottom: -5px;

    height: 1px;
}

.made-bottom-line {
    margin-top: 28px;

    gap: 6px;

    font-size: 7px;

    letter-spacing: 1px;
}

.made-bottom-line strong {
    font-size: 7px;
}

.made-bottom-line > span {
    width: 20px;
}

.made-map {
    background-size: 500px auto;
}

.made-particle {
    transform: scale(0.7);
}


}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {


.made-india-section *,
.made-india-section::before,
.made-india-section::after {
    animation: none !important;
    transition: none !important;
}


}