* {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        @font-face {
            font-family: 'Sadaf Unicode';
            src: url('/assets/fonts/dd-fonts/SadafUnicode.woff2') format('woff2'),
                url('/assets/fonts/dd-fonts/SadafUnicode.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Nafees Web Naskh';
            src: url('/assets/fonts/dd-fonts/NafeesWebNaskh.woff2') format('woff2'),
                url('/assets/fonts/dd-fonts/NafeesWebNaskh.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Orbitron';
            src: url('/assets/fonts/dd-fonts/Orbitron-ExtraBold.woff2') format('woff2'),
                url('/assets/fonts/dd-fonts/Orbitron-ExtraBold.woff') format('woff');
            font-weight: bold;
            font-style: normal;
            font-display: swap;
        }

        .bg-gradientt {
            background: linear-gradient(180deg,
                    #0b1015 0%,
                    #1c242d 18%,
                    #4b3d35 42%,
                    #8a5838 70%,
                    #3a322d 88%,
                    #171717 100%);
        }

        .moon-glow {
            position: absolute;
            top: 35px;
            right: 95px;

            width: 220px;
            height: 220px;
            border-radius: 50%;

            background: radial-gradient(circle,
                    rgba(255, 255, 255, .20) 0%,
                    rgba(255, 255, 255, .10) 45%,
                    transparent 75%);

            filter: blur(20px);
        }

        /* Moon */
        .moon {
            position: absolute;
            top: 70px;
            right: 130px;

            width: 140px;
            height: 140px;
            border-radius: 50%;

            background:
                radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .88) 10%, transparent 11%),
                radial-gradient(circle at 60% 40%, rgba(175, 175, 175, .45) 0%, transparent 8%),
                radial-gradient(circle at 42% 68%, rgba(170, 170, 170, .40) 0%, transparent 9%),
                radial-gradient(circle at 72% 72%, rgba(140, 140, 140, .30) 0%, transparent 7%),
                radial-gradient(circle at 25% 62%, rgba(180, 180, 180, .35) 0%, transparent 6%),
                radial-gradient(circle at 65% 22%, rgba(190, 190, 190, .22) 0%, transparent 5%),
                radial-gradient(circle at 35% 35%,
                    #ffffff 0%,
                    #ececec 45%,
                    #d6d6d6 72%,
                    #a3a3a3 100%);

            box-shadow:
                0 0 20px rgba(255, 255, 255, .35),
                0 0 45px rgba(255, 255, 255, .25),
                0 0 80px rgba(255, 255, 255, .15);
        }

        .iqbal-poetry.urdu {
            font-family: 'Sadaf Unicode';
            max-width: 600px;
            z-index: 10;
        }

        .iqbal-poetry.urdu h4 {
            font-size: 32px;
            font-weight: 800;
            direction: ltr;
        }

        .ppra-slogan h2 {
            font-family: 'Orbitron';
            font-size: 65px;
            margin-bottom: 0;
            font-weight: 800;
            color: transparent;
            background-image: url('/assets/img/flag.jpg');
            background-size: 200%;
            background-position: 0 50%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: animate-background 5s infinite alternate linear;
            line-height: 3rem;
        }

        .principles {
            display: flex;
            flex-wrap: wrap;
            align-items: stretch;
        }

        .principle {
            text-align: center;
            padding: 0 23px;
        }

        .principle:first-child {
            padding-left: 0;
        }

        .principle .urdu-nafees {
            display: block;
            color: #ce8b62;
            font-size: 30px;
            line-height: 1.9;
            text-align: center;
            font-family: 'Nafees Web Naskh' !important;
        }

        .principle small {
            display: block;
            letter-spacing: 2.56px;
            font-size: 9.12px;
            font-size: 10px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 0.8px;
        }

        .principle+.principle {
            border-left: 1px solid rgba(238, 217, 137, .28);
        }

        .transparency {
            left: 42px;
            bottom: 30px;
            z-index: 10;
        }

        .airspace {
            position: relative;
            overflow: hidden;
            height: 100%;
            min-height: inherit;
            pointer-events: none
        }

        .cloud {
            position: absolute;
            left: 0;
            will-change: transform;
            animation-name: cloudDrift;
            animation-timing-function: linear;
            animation-iteration-count: infinite
        }

        .puffs {
            position: relative;
            width: 300px;
            height: 96px;
            filter: blur(9px);
            animation: cloudSwell 34s ease-in-out infinite;
            will-change: transform
        }

        .puffs i {
            position: absolute;
            display: block;
            border-radius: 50%;
            background: rgba(255, 255, 255, var(--o))
        }

        .puffs i:nth-child(1) {
            left: 2%;
            top: 44%;
            width: 44%;
            height: 46%
        }

        .puffs i:nth-child(2) {
            left: 20%;
            top: 12%;
            width: 40%;
            height: 74%
        }

        .puffs i:nth-child(3) {
            left: 42%;
            top: 26%;
            width: 36%;
            height: 62%
        }

        .puffs i:nth-child(4) {
            left: 60%;
            top: 46%;
            width: 38%;
            height: 44%
        }

        .puffs i:nth-child(5) {
            left: 32%;
            top: 52%;
            width: 46%;
            height: 40%
        }

        @keyframes cloudDrift {
            from {
                transform: translate3d(-34vw, 0, 0)
            }

            to {
                transform: translate3d(134vw, 0, 0)
            }
        }

        @keyframes cloudSwell {

            0%,
            100% {
                transform: scale(var(--s)) translateY(0)
            }

            50% {
                transform: scale(calc(var(--s) * 1.06)) translateY(5px)
            }
        }

        .cl-1 {
            top: 7%;
            animation-duration: 172s;
            animation-delay: -40s;
            --s: 1.45;
            --o: 0.3
        }

        .cl-2 {
            top: 19%;
            animation-duration: 238s;
            animation-delay: -150s;
            --s: 2.1;
            --o: 0.2
        }

        .cl-3 {
            top: 3%;
            animation-duration: 196s;
            animation-delay: -95s;
            --s: 1.05;
            --o: 0.24
        }

        .cl-4 {
            top: 29%;
            animation-duration: 268s;
            animation-delay: -30s;
            --s: 2.6;
            --o: 0.14
        }

        .cl-5 {
            top: 13%;
            animation-duration: 148s;
            animation-delay: -120s;
            --s: 0.8;
            --o: 0.34
        }

        .craft {
            position: absolute;
            left: 0;
            top: 0;
            will-change: transform;
            animation-timing-function: linear;
            animation-iteration-count: infinite
        }

        .alt,
        .bank {
            will-change: transform
        }

        .craft svg {
            display: block;
            height: auto
        }

        /* flight paths — off-screen at both ends so the loop point never shows */
        @keyframes flyRight {
            from {
                transform: translate3d(-30vw, 0, 0)
            }

            to {
                transform: translate3d(130vw, 0, 0)
            }
        }

        @keyframes flyLeft {
            from {
                transform: translate3d(130vw, 0, 0)
            }

            to {
                transform: translate3d(-30vw, 0, 0)
            }
        }

        /* jets cross fast, then hold off-screen -> they arrive at intervals */
        @keyframes jetRight {
            0% {
                transform: translate3d(-35vw, 0, 0)
            }

            26% {
                transform: translate3d(135vw, 0, 0)
            }

            100% {
                transform: translate3d(135vw, 0, 0)
            }
        }

        @keyframes jetLeft {
            0% {
                transform: translate3d(135vw, 0, 0)
            }

            24% {
                transform: translate3d(-35vw, 0, 0)
            }

            100% {
                transform: translate3d(-35vw, 0, 0)
            }
        }

        /* altitude — first and last value match, so the loop doesn't snap */
        @keyframes altA {

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

            22% {
                transform: translateY(-26px)
            }

            47% {
                transform: translateY(14px)
            }

            74% {
                transform: translateY(-10px)
            }
        }

        @keyframes altB {

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

            18% {
                transform: translateY(18px)
            }

            43% {
                transform: translateY(-22px)
            }

            70% {
                transform: translateY(11px)
            }
        }

        /* banking */
        @keyframes bankA {

            0%,
            100% {
                transform: rotate(-2.5deg)
            }

            30% {
                transform: rotate(3deg)
            }

            62% {
                transform: rotate(-1deg)
            }
        }

        @keyframes bankB {

            0%,
            100% {
                transform: rotate(-5deg)
            }

            26% {
                transform: rotate(6deg)
            }

            58% {
                transform: rotate(-3deg)
            }
        }

        @keyframes rotorspin {
            0% {
                transform: scaleX(1)
            }

            12.5% {
                transform: scaleX(.71)
            }

            25% {
                transform: scaleX(0)
            }

            37.5% {
                transform: scaleX(-.71)
            }

            50% {
                transform: scaleX(-1)
            }

            62.5% {
                transform: scaleX(-.71)
            }

            75% {
                transform: scaleX(0)
            }

            87.5% {
                transform: scaleX(.71)
            }

            100% {
                transform: scaleX(1)
            }
        }

        .rotor {
            transform-box: fill-box;
            will-change: transform;
            animation: rotorspin var(--rev) linear infinite
        }

        .blur1 {
            opacity: .34;
            animation-delay: calc(var(--rev) / -3)
        }

        .blur2 {
            opacity: .34;
            animation-delay: calc(var(--rev) / -1.5)
        }

        /* ---- the six aircraft: top = height, duration = speed, --rev = rotor ---- */
        .satellite-a {
            top: 10%;
            animation:
                30s infinite alternate slideinSet,
                35s infinite linear rotationSet;
        }

        .satellite-a svg {
            width: 45px;
            opacity: 0.7;
            transform: rotate(3deg);
        }


        .heli-a {
            top: 12%;
            animation-name: flyRight;
            animation-duration: 66s;
            --rev: .78s
        }

        .heli-a .alt {
            animation: altA 13.9s ease-in-out infinite
        }

        .heli-a .bank {
            animation: bankA 19.1s ease-in-out infinite
        }

        .heli-a svg {
            width: 86px;
            opacity: 0.7;
            color: #8e4522;
            transform: rotate(3deg)
        }

        .heli-a .rotor {
            transform-origin: 46.05% 50%
        }

        .jet-a {
            top: 7%;
            animation-name: jetLeft;
            animation-duration: 34s
        }

        .jet-a .alt {
            animation: altB 9.1s ease-in-out infinite
        }

        .jet-a .bank {
            animation: bankA 11.3s ease-in-out infinite
        }

        .jet-a svg {
            width: 96px;
            opacity: 0.7;
            color: #8f4320;
            transform: rotate(2deg)
        }

        .heli-b {
            top: 30%;
            animation-name: flyLeft;
            animation-duration: 40s;
            --rev: .62s
        }

        .heli-b .alt {
            animation: altB 8.7s ease-in-out infinite
        }

        .heli-b .bank {
            animation: bankA 12.3s ease-in-out infinite
        }

        .heli-b svg {
            width: 132px;
            opacity: 0.9;
            color: #6f2a13;
            transform: scaleX(-1) rotate(3deg)
        }

        .heli-b .rotor {
            transform-origin: 49.7% 50%
        }

        .jet-b {
            top: 22%;
            animation-name: jetRight;
            animation-duration: 26s
        }

        .jet-b .alt {
            animation: altA 5.9s ease-in-out infinite
        }

        .jet-b .bank {
            animation: bankB 7.7s ease-in-out infinite
        }

        .jet-b svg {
            width: 124px;
            opacity: 0.9;
            color: #783819;
            transform: scaleX(-1) rotate(2deg)
        }

        .heli-c {
            top: 52%;
            animation-name: flyRight;
            animation-duration: 33s;
            --rev: .50s
        }

        .heli-c .alt {
            animation: altA 6.5s ease-in-out infinite
        }

        .heli-c .bank {
            animation: bankB 9.7s ease-in-out infinite
        }

        .heli-c svg {
            width: 186px;
            opacity: 1.0;
            color: #58200d;
            transform: rotate(3deg)
        }

        .heli-c .rotor {
            transform-origin: 46.23% 50%
        }

        .jet-c {
            top: 40%;
            animation-name: jetLeft;
            animation-duration: 18s
        }

        .jet-c .alt {
            animation: altB 4.3s ease-in-out infinite
        }

        .jet-c .bank {
            animation: bankB 6.1s ease-in-out infinite
        }

        .jet-c svg {
            width: 168px;
            opacity: 1.0;
            color: #5c2911;
            transform: rotate(2deg)
        }


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

            .craft,
            .alt,
            .bank,
            .rotor,
            .cloud,
            .puffs,
            .flock,
            .drift,
            .wing,
            .bird svg {
                animation: none !important
            }

            .blur1,
            .blur2 {
                display: none
            }

            .puffs {
                transform: scale(var(--s))
            }
        } */

        .ppra-slogan {
            color: #ffffff;
        }

        .ppra-slogan h4 {
            color: #ffffff;
            font-size: 45px;
            font-weight: 900;
            font-family: "Inter", sans-serif;
        }

        .ppra-slogan h2 {
            font-family: 'Orbitron';
            font-size: 65px;
            margin-bottom: 0;
            font-weight: 800;
            color: transparent;
            background-image: url('/assets/img/flag.jpg');
            background-size: 200%;
            background-position: 0 50%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: animate-background 5s infinite alternate linear;
            line-height: 3rem;
        }

        @keyframes animate-background {
            0% {
                background-position: 0 50%;
            }

            100% {
                background-position: 100% 50%;
            }
        }

        .ppra-slogan small {
            font-size: 14px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #FFFCF2;
            font-weight: 600;
            padding: 9px 0;
            border-top: 1px solid rgba(238, 217, 137, .28);
            border-bottom: 1px solid rgba(238, 217, 137, .28);
            display: inline-block;
            margin-top: 20px;
        }

        .tank-to .svg {
            width: 550px;
            left: 45px;
            bottom: 99px;
            transform: rotateY(0);
        }

        .assetsvg .svg {
            position: absolute;
            bottom: 0;
        }

        .tank-to .svg {
            position: absolute;
        }

        .english-tagline h4 {
            font-family: 'Sadaf Unicode';
            color: transparent;
            background-image: url('/assets/img/flag.jpg');
            background-size: 200%;
            background-position: 0 50%;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: animate-background 5s infinite alternate linear;
            line-height: 6rem;
        }

        .english-tagline h4::before {
            position: absolute;
            content: '';
            width: 100%;
            background-color: #9ebca0;
            height: 1px;
            bottom: 0;
            left: 0;
            right: 0;
        }

        /* Drone css Start  */
        .drone {
            position: absolute;
            top: 30vh;
            left: 0;
            width: clamp(76px, 10vw, 300px);
            color: #16201c;
            animation: cross 15s ease-in-out 0s infinite;
            will-change: transform;
        }

        .drone-glide {
            animation: glide 15s linear 0s infinite;
        }

        .drone-bob {
            animation: bob 7.7s ease-in-out 0s alternate infinite;
        }

        .drone-roll {
            animation: roll 11s ease-in-out 0s alternate infinite;
        }

        .drone-craft {
            display: block;
            width: 50%;
            height: auto;
            overflow: visible;
            transform: scaleX(-1);
        }

        .drone-craft path {
            fill: #200e0b;
        }

        @keyframes cross {
            0% {
                transform: translate3d(110vw, 0, 0);
            }

            50% {
                transform: translate3d(30vw, 0, 0);
            }

            100% {
                transform: translate3d(110vw, 0, 0);
            }
        }

        @keyframes glide {
            from {
                transform: translate3d(0, -3vh, 0);
            }

            to {
                transform: translate3d(0, 4vh, 0);
            }
        }

        @keyframes bob {
            from {
                transform: translateY(-.9vh);
            }

            to {
                transform: translateY(.9vh);
            }
        }

        @keyframes roll {
            from {
                transform: rotate(-2.1deg);
            }

            to {
                transform: rotate(2.1deg);
            }
        }

        .blade {
            transform-box: view-box;
            animation: blade-cw .30s linear infinite;
        }

        .blade2,
        .blade4 {
            animation-name: blade-ccw;
        }

        .blade2 {
            animation-delay: -.033s;
        }

        .blade3 {
            animation-delay: -.062s;
        }

        .blade4 {
            animation-delay: -.015s;
        }

        @keyframes blade-cw {
            from {
                transform: scaleY(.26) rotate(0deg);
            }

            to {
                transform: scaleY(.26) rotate(360deg);
            }
        }

        @keyframes blade-ccw {
            from {
                transform: scaleY(.26) rotate(0deg);
            }

            to {
                transform: scaleY(.26) rotate(-360deg);
            }
        }

        .drone-craft--a .blade1 {
            transform-origin: 1494px 120px;
        }

        .drone-craft--a .blade2 {
            transform-origin: 333px 418px;
        }

        .drone-craft--a .blade3 {
            transform-origin: 1561px 416px;
        }

        .drone-craft--a .blade4 {
            transform-origin: 420px 92px;
        }

        @media (max-width: 767.98px) {

            .drone {
                opacity: calc(var(--ink) * .8);
            }
        }

        @media (min-width: 1600px) {
            .drone {
                width: clamp(76px, calc(var(--w) * .85), 340px);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .sky * {
                animation-play-state: paused !important;
            }
        }

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

            .craft,
            .alt,
            .bank,
            .rotor,
            .cloud,
            .puffs,
            .flock,
            .drift,
            .wing,
            .bird svg {
                animation: none !important
            }

            .blur1,
            .blur2 {
                display: none
            }

            .puffs {
                transform: scale(var(--s))
            }

            .sky * {
                animation-play-state: paused !important;
            }
        }

        @keyframes slideinSet {
            from {
                margin-left: 70%;
                /* width: 15%; */
            }

            to {
                margin-left: 0%;
                /* width: 15%; */
            }
        }

        @keyframes rotationSet {
            50% {
                transform: rotate(360deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Drone css End  */



        :root {


            /* One place to retune the whole animation */
            --orbit-time: 15s;
            /* one traverse: left edge to right edge */
            --bob-time: 6.5s;
            /* vertical float */
            --tilt-time: 11s;
            /* attitude wobble */
            --sat-size: clamp(150px, 26vmin, 340px);

            /* Where the arc begins and ends, and how high it rises between them */
            --lane-top: 22%;
            /* height of the two endpoints */
            --arc-rise: 15vh;
            /* extra height at the apex, mid-screen */
            --edge-gap: 3vw;
            /* breathing room at the left and right edges */
        }

        .orbit {
            position: absolute;
            top: var(--lane-top);
            left: 0;
            width: var(--sat-size);
            aspect-ratio: 2 / 1;
            animation: traverse var(--orbit-time) ease-in-out infinite alternate;
            will-change: transform;
            z-index: 9;
        }

        /* 100% here is the satellite's own width, so it never overruns the edge */
        @keyframes traverse {
            from {
                transform: translateX(3vw);
            }

            to {
                transform: translateX(calc(72vw - 100% - 4vw));
            }
        }

        .depth {
            animation: arc calc(var(--orbit-time) / 2) ease-in-out infinite alternate;
        }

        @keyframes arc {
            from {
                transform: translateY(-50%) scale(1);
                opacity: .97;
            }

            to {
                transform: translateY(calc(-50% - var(--arc-rise))) scale(.9);
                opacity: .82;
            }
        }

        .bob {
            animation: bob var(--bob-time) ease-in-out infinite alternate;
        }

        @keyframes bob {
            from {
                transform: translateY(-1.6%);
            }

            to {
                transform: translateY(1.6%);
            }
        }

        .tilt {
            animation: tilt var(--tilt-time) ease-in-out infinite alternate;
        }

        @keyframes tilt {
            from {
                transform: rotate(-3.2deg);
            }

            to {
                transform: rotate(2.4deg);
            }
        }

        .satellite {
            display: block;
            width: 100%;
            height: auto;
            overflow: visible;
            filter: drop-shadow(0 0 18px rgba(120, 170, 255, .22));
            z-index: 999 !important;
        }

        /* A slow sheen crossing the arrays — the one detail that sells "sunlit metal" */
        .glint {
            animation: glint 9s ease-in-out infinite;
            transform-box: fill-box;
        }

        @keyframes glint {

            0%,
            62% {
                transform: translateX(-115%);
                opacity: 0;
            }

            72% {
                opacity: .55;
            }

            88% {
                transform: translateX(115%);
                opacity: 0;
            }

            100% {
                transform: translateX(115%);
                opacity: 0;
            }
        }

        /* Slow drift of the dish, as if tracking a ground station */
        .dish {
            transform-box: fill-box;
            transform-origin: 60% 60%;
            animation: track 17s ease-in-out infinite alternate;
        }

        @keyframes track {
            from {
                transform: rotate(-4deg);
            }

            to {
                transform: rotate(5deg);
            }
        }

        /* ------------------------------------------------------------------
   MOTION PREFERENCES — park it at the left endpoint, keep the scene intact
------------------------------------------------------------------ */
        @media (prefers-reduced-motion: reduce) {

            .orbit,
            .depth,
            .bob,
            .tilt,
            .glint,
            .dish {
                animation: none;
            }

            .orbit {
                transform: translateX(var(--edge-gap));
            }

            .depth {
                transform: translateY(-50%);
            }
        }

        @media (max-width: 620px) {
            :root {
                --orbit-time: 13s;
                --sat-size: clamp(110px, 34vmin, 200px);
                --arc-rise: 9vh;
                --edge-gap: 3vw;
            }
        }

        .orbit .svg {
            width: 75px;
            rotate: 60deg;
        }

        .signal-large,
        .signal-medium,
        .signal-small {
            fill: #fff !important;
        }

        .navy-ship svg {
            width: 350px;
            height: 350px;
            position: absolute;
            bottom: -64px;
            right: -30px;
            transform: rotateY(150deg);
        }

        /* satellite Css Ends */



        /* Media Query Start*/
        @media (min-width: 1399.98px) and (max-width: 1600px) {
            body {
                background-color: lightblue;
            }
        }

        @media (min-width: 1600px) {
            .drone {
                width: clamp(76px, calc(var(--w) * .85), 340px);
            }
        }

        @media (max-width: 1399.98px) {
            .tank-to .svg {
                width: 340px;
                left: 23px;
                bottom: 65px;
            }

            .english-tagline h4 {
                font-size: 36px !important;
                line-height: 5rem;
            }

            .iqbal-poetry.urdu h4 {
                font-size: 28px;
                line-height: 1.5rem;
            }

            .navy-ship svg {
                width: 273px;
                height: 273px;
                position: absolute;
                bottom: -73px;
                right: -34px;
                transform: rotateY(150deg);
            }
        }

        @media (max-width: 1199.98px) {
            .navy-ship svg {
                display: none;
            }

            .principle {
                padding: 0 13px;
            }

            .principle small {
                letter-spacing: 2px;
                font-size: 9px;
                margin-top: 0.8px;
            }

            .ppra-slogan h4 {
                font-size: 23px;
                margin-bottom: 0;
            }

            .ppra-slogan h2 {
                font-size: 35px;
                line-height: 2rem;
            }

            .ppra-slogan small {
                font-size: 9px;
                letter-spacing: 4px;
                text-transform: uppercase;
                color: #FFFCF2;
                font-weight: 600;
                padding: 9px 0;
                border-top: 1px solid rgba(238, 217, 137, .28);
                border-bottom: 1px solid rgba(238, 217, 137, .28);
                display: inline-block;
                margin-top: 13px;
            }

            .moon {
                top: 20px;
                right: 25px;
                width: 80px;
                height: 80px;
            }

            .moon-glow {
                top: 20px;
                right: 25px;
                width: 110px;
                height: 110px;
            }

            .orbit .svg {
                width: 50px;
                rotate: 60deg;
            }

            .heli-a svg {
                width: 60px;
            }

            .tank-to .svg {
                width: 220px;
                left: 23px;
                bottom: 65px;
            }

            .heli-b svg {
                width: 100px;
            }

            .jet-b svg {
                width: 70px;
            }

            .jet-a svg {
                width: 70px;
            }

            .jet-c svg {
                width: 70px;
            }
        }

        @media (max-width: 991.98px) {
            .wrap-cover {
                display: none;
            }

            .principle .urdu-nafees {
                font-size: 27px;
                line-height: 1.9;
            }

            .principle small {
                font-size: 10px;
            }

            .transparency {
                left: 0;
                bottom: 30px;
                z-index: 10;
                right: 0;
                padding: 0 30px;
            }

            .principle {
                padding: 0 13px;
                flex: 1;
            }
        }

        @media (max-width: 767.98px) {
            .drone {
                opacity: calc(var(--ink) * .8);
            }

            .principle .urdu-nafees {
                font-size: 19px;
                line-height: 1.9;
            }

            .principle small {
                font-size: 7px;
            }
        }

        @media(max-width:575.98px) {

            .heli-a,
            .jet-a,
            .cl-4 {
                display: none
            }

            .heli-b svg {
                width: 84px
            }

            .heli-c svg {
                width: 112px
            }

            .jet-b svg {
                width: 78px
            }

            .jet-c svg {
                width: 104px
            }

            .bird svg {
                width: 18px
            }

            .flock-near .bird svg {
                width: 22px
            }

            .principle .urdu-nafees {
                font-size: 19px;
                line-height: 1.9;
            }

            .principle small {
                display: none
            }

            .principles {
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            }

            .principle {
                padding: 0 0;
            }

            .principle+.principle {
                border-left: 0;
            }
        }


        @media (min-width: 300px) and (max-width: 992px) {


            .navy-ship svg {
                display: none;
            }


            .ppra-slogan h4 {
                font-size: 23px;
                margin-bottom: 0;
            }

            .ppra-slogan h2 {
                font-size: 35px;
                line-height: 2rem;
            }

            .ppra-slogan small {
                font-size: 9px;
                letter-spacing: 4px;
                text-transform: uppercase;
                color: #FFFCF2;
                font-weight: 600;
                padding: 9px 0;
                border-top: 1px solid rgba(238, 217, 137, .28);
                border-bottom: 1px solid rgba(238, 217, 137, .28);
                display: inline-block;
                margin-top: 13px;
            }

        }

        @media (min-width: 1400px) and (max-width: 1800px) {
            .tank-to .svg {
                width: 380px;
                left: 45px;
                bottom: 99px;
                transform: rotateY(0);
            }

            .navy-ship svg {
                width: 295px;
                height: 350px;
                position: absolute;
                bottom: -64px;
                right: -30px;
                transform: rotateY(150deg);
            }
        }

        /* satellite Css Start */