/*------------------------------------------------------------------ [Animations & Hover Effects] Author: Custom Animations Usage: Add after style.css in --------------------------------------------------------------------*/ /* ============================================ Keyframes ============================================ */ @keyframes gly-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes gly-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(240, 119, 5, 0.45); } 70% { box-shadow: 0 0 0 12px rgba(240, 119, 5, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 119, 5, 0); } } @keyframes gly-icon-bounce { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-6px) scale(1.12); } 60% { transform: translateY(-3px) scale(1.06); } } @keyframes gly-line-grow { from { width: 0; } to { width: 100%; } } @keyframes gly-slide-right { from { transform: translateX(-6px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================ Service Cards — .services-single-item ============================================ */ .services-single-item { transition: transform 0.38s ease, box-shadow 0.38s ease, background-color 0.38s ease; will-change: transform; position: relative; overflow: hidden; } /* Subtle top-border accent that slides in on hover */ .services-single-item::before { content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 0; background-color: #f07705; border-radius: 15px 15px 0 0; transition: width 0.4s ease; } .services-single-item:hover { transform: translateY(-8px); box-shadow: 0 20px 45px rgba(240, 119, 5, 0.13); background-color: #fff; } .services-single-item:hover::before { width: 100%; } /* Icon bounce */ .services-single-item:hover .icon img, .services-single-item:hover .icon svg { animation: gly-icon-bounce 0.55s ease forwards; } /* ============================================ Service Cards — .services-single-item-three ============================================ */ .services-single-item-three { transition: transform 0.35s ease, box-shadow 0.35s ease, border-left-color 0.35s ease; border-left: 3px solid transparent; will-change: transform; } .services-single-item-three:hover { transform: translateX(6px); box-shadow: 0 12px 35px rgba(10, 25, 47, 0.10); border-left-color: #f07705; background-color: #fff; } .services-single-item-three:hover .icon { background-color: #f07705; transition: background-color 0.35s ease; } .services-single-item-three:hover .icon img, .services-single-item-three:hover .icon svg { filter: brightness(0) invert(1); transition: filter 0.35s ease; } .services-single-item-three:hover h3, .services-single-item-three:hover .h3 { color: #f07705; transition: color 0.35s ease; } /* ============================================ Buttons — .default-btn ============================================ */ .default-btn { position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease; z-index: 1; } /* Shimmer sweep on hover */ .default-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 40%, rgba(255, 255, 255, 0.22) 50%, transparent 60% ); background-size: 200% 100%; background-position: -200% center; transition: background-position 0s; pointer-events: none; border-radius: inherit; z-index: -1; } .default-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(240, 119, 5, 0.38); } .default-btn:hover::after { animation: gly-shimmer 0.55s ease forwards; } .default-btn:active { transform: translateY(0); box-shadow: 0 3px 10px rgba(240, 119, 5, 0.25); } /* Pulse ring on focus (accessibility) */ .default-btn:focus-visible { animation: gly-pulse-ring 1s ease; outline: none; } /* ============================================ Section Labels — .top-title ============================================ */ .top-title { position: relative; transition: color 0.3s ease, background 0.3s ease, padding-left 0.3s ease; } /* Animated dot before the label */ .top-title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background-color: #f07705; margin-right: 8px; vertical-align: middle; transform: scale(0); transition: transform 0.3s ease; } /* Trigger: parent section or wrapper hovered, OR the title itself hovered */ .top-title:hover::before, [data-cues]:hover .top-title::before, .section-title:hover .top-title::before { transform: scale(1); } /* ============================================ Section Main Titles — .main-title ============================================ */ .main-title { position: relative; display: inline-block; } /* Underline that grows on hover */ .main-title::after { content: ""; position: absolute; bottom: -4px; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, #f07705, #FFA826); border-radius: 2px; transition: width 0.45s ease; } .main-title:hover::after, .section-title:hover .main-title::after { width: 60%; } /* ============================================ Read-more links inside service cards ============================================ */ .services-single-item .read-more, .services-single-item-three .read-more { display: inline-flex; align-items: center; gap: 6px; transition: gap 0.3s ease, color 0.3s ease; } .services-single-item:hover .read-more, .services-single-item-three:hover .read-more { gap: 10px; color: #f07705; } /* ============================================ Reduced-motion safety ============================================ */ @media (prefers-reduced-motion: reduce) { .services-single-item, .services-single-item-three, .default-btn, .top-title, .main-title { transition: none !important; animation: none !important; } .services-single-item::before, .main-title::after, .default-btn::after { display: none; } } /* ============================================ Paint Brush Stroke Backgrounds — Pure CSS using SVG data URIs — Raw, gestural, irregular brush marks ============================================ */ /* ------ Shared pseudo-element base ------ */ .what-we-do-area, .services-area, .working-process-area, .fun-fact-area, .about-us-area { position: relative; overflow: hidden; } /* ============================================ 1. What We Do Area Ragged torn-edge horizontal swipe, top-right ============================================ */ .what-we-do-area::before { content: ""; position: absolute; top: -10px; right: -100px; width: 820px; height: 310px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 820 310'%3E%3Cpath d='M 60,185 C 95,148 73,112 140,88 C 193,68 247,74 310,62 C 388,47 435,28 512,18 C 583,8 648,12 720,5 C 775,0 810,8 820,22 C 800,35 768,42 718,50 C 648,62 575,55 502,68 C 428,82 372,100 295,115 C 228,128 178,122 138,140 C 108,153 88,172 80,198 C 72,183 62,190 60,185 Z' fill='%23C69E42' opacity='0.11'/%3E%3Cpath d='M 40,210 C 68,168 90,138 155,110 C 210,86 268,91 332,78 C 412,62 458,40 538,28 C 608,17 668,20 735,14 C 782,9 816,16 820,30 C 798,45 762,53 706,62 C 632,74 556,67 480,82 C 402,97 344,118 264,133 C 195,146 142,140 105,160 C 78,174 58,196 52,222 C 44,207 38,215 40,210 Z' fill='%23C69E42' opacity='0.06'/%3E%3Cpath d='M 820,55 C 790,62 745,58 688,68 C 615,80 540,88 458,102 C 385,115 320,130 248,144 C 185,156 128,152 88,172 C 62,186 44,210 38,238 C 30,218 35,200 55,185 C 85,162 144,154 210,140 C 284,124 352,108 428,94 C 512,78 590,70 666,58 C 722,48 772,42 808,35 Z' fill='%23f07705' opacity='0.05'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } /* Jagged splatter stroke, bottom-left corner */ .what-we-do-area::after { content: ""; position: absolute; bottom: -30px; left: -80px; width: 580px; height: 270px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 580 270'%3E%3Cpath d='M 0,195 C 18,158 42,132 88,108 C 118,93 152,88 195,82 C 248,74 285,55 338,42 C 390,28 440,18 500,12 C 540,7 568,10 580,22 C 560,38 528,46 488,56 C 432,70 378,80 322,95 C 268,110 228,130 175,144 C 138,154 102,155 72,172 C 48,186 28,208 12,238 C 5,220 -3,208 0,195 Z' fill='%23f07705' opacity='0.08'/%3E%3Cpath d='M 0,220 C 22,178 50,152 98,126 C 132,108 166,100 212,93 C 268,83 308,62 364,48 C 418,34 468,22 528,16 C 558,12 578,16 580,28 C 556,44 520,54 478,65 C 420,80 364,92 306,108 C 250,124 208,145 152,160 C 112,170 74,170 46,188 C 24,202 8,225 2,252 C -4,232 -2,222 0,220 Z' fill='%23f07705' opacity='0.04'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } .what-we-do-area > * { position: relative; z-index: 1; } /* ============================================ 2. Services Area Frayed diagonal slash from top-left, + bristle-edged sweep bottom-right ============================================ */ .services-area::before { content: ""; position: absolute; top: -20px; left: -60px; width: 500px; height: 480px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 480'%3E%3Cpath d='M 80,0 C 108,28 118,65 112,112 C 105,162 85,198 78,248 C 70,300 72,345 58,390 C 46,428 22,458 0,478 C 8,455 18,428 26,395 C 38,348 35,302 44,250 C 52,198 72,162 80,112 C 86,68 78,32 62,5 Z' fill='%230A192F' opacity='0.06'/%3E%3Cpath d='M 112,0 C 138,30 148,68 142,116 C 134,168 112,205 104,258 C 95,314 96,360 80,408 C 66,448 40,472 18,480 C 28,456 40,428 50,394 C 64,345 62,298 72,246 C 82,192 104,155 112,104 C 118,60 110,25 92,2 Z' fill='%230A192F' opacity='0.04'/%3E%3Cpath d='M 52,0 C 82,32 94,72 88,122 C 80,174 58,212 50,266 C 42,320 44,368 28,415 C 15,452 -5,472 -18,478 C -8,453 4,425 12,390 C 26,340 24,292 34,240 C 44,186 66,148 74,98 C 80,54 72,18 55,0 Z' fill='%23C69E42' opacity='0.05'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } .services-area::after { content: ""; position: absolute; bottom: -10px; right: -50px; width: 660px; height: 260px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 660 260'%3E%3Cpath d='M 660,58 C 628,42 582,36 528,34 C 462,31 392,38 318,52 C 250,65 185,82 122,98 C 72,110 30,120 0,138 C 14,125 34,112 68,100 C 118,84 182,67 252,53 C 328,38 400,30 472,26 C 534,22 592,28 638,44 C 650,48 658,54 660,62 Z' fill='%23C69E42' opacity='0.10'/%3E%3Cpath d='M 660,82 C 625,64 576,56 518,54 C 448,50 374,58 298,74 C 228,88 160,108 96,126 C 48,140 12,152 0,170 C 16,155 38,140 75,126 C 128,108 196,88 268,72 C 348,55 424,46 498,42 C 560,38 618,44 658,62 C 660,68 662,76 660,82 Z' fill='%23C69E42' opacity='0.06'/%3E%3Cpath d='M 660,106 C 620,86 568,78 506,76 C 433,72 356,82 278,99 C 206,114 136,136 70,155 C 28,168 -2,180 0,196 C 18,180 44,164 84,149 C 140,129 212,107 286,90 C 366,72 446,62 522,58 C 584,54 638,62 662,82 C 664,90 664,98 660,106 Z' fill='%23f07705' opacity='0.05'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } .services-area > * { position: relative; z-index: 1; } /* ============================================ 3. Working Process Area Explosive wide smear top-center, + torn bristle trail bottom-right ============================================ */ .working-process-area::before { content: ""; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 1100px; height: 220px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 220'%3E%3Cpath d='M 0,135 C 55,88 138,58 248,42 C 332,28 428,22 528,18 C 618,14 715,20 808,38 C 882,52 948,72 1004,94 C 1048,110 1082,130 1100,150 C 1078,140 1042,125 992,110 C 934,92 864,74 784,60 C 692,44 592,38 498,42 C 400,46 304,58 218,76 C 145,91 85,112 40,140 C 20,152 5,164 0,178 C -5,162 -3,148 0,135 Z' fill='%23f07705' opacity='0.07'/%3E%3Cpath d='M 0,158 C 48,108 135,76 248,58 C 335,43 432,36 534,32 C 625,28 722,34 815,52 C 890,67 956,88 1012,110 C 1055,127 1085,146 1100,166 C 1075,155 1038,138 985,122 C 924,103 852,84 768,70 C 672,54 568,48 470,52 C 370,56 270,70 182,90 C 108,107 50,130 10,158 C 5,162 0,168 0,174 C -3,168 -2,162 0,158 Z' fill='%23f07705' opacity='0.04'/%3E%3Cpath d='M 55,108 C 110,72 200,52 310,40 C 400,30 498,26 598,24 C 688,22 782,28 868,46 C 938,60 1000,82 1052,106 C 1080,118 1098,132 1100,148 C 1068,136 1025,118 968,102 C 895,83 818,66 728,52 C 632,38 532,32 435,36 C 335,40 236,52 150,72 C 88,86 38,106 10,130 C 5,114 20,112 55,108 Z' fill='%23C69E42' opacity='0.06'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } .working-process-area::after { content: ""; position: absolute; bottom: -20px; right: -40px; width: 440px; height: 340px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 340'%3E%3Cpath d='M 440,10 C 412,40 378,65 338,95 C 295,128 248,155 200,185 C 158,212 115,238 78,265 C 48,288 22,310 5,335 C 2,315 8,295 25,272 C 52,240 90,215 132,188 C 180,158 228,130 272,98 C 315,67 352,38 382,5 C 398,-5 420,2 440,10 Z' fill='%23C69E42' opacity='0.09'/%3E%3Cpath d='M 415,0 C 388,32 354,58 314,89 C 270,123 222,151 172,182 C 130,209 86,235 50,264 C 22,287 2,310 -5,336 C -8,315 -2,293 16,270 C 44,237 84,212 128,184 C 178,153 228,124 273,92 C 317,60 355,30 386,-3 C 398,-12 408,-5 415,0 Z' fill='%23C69E42' opacity='0.05'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } .working-process-area > * { position: relative; z-index: 1; } /* ============================================ 4. Fun Fact Area Rough impasto block left, + chaotic bristle fan right ============================================ */ .fun-fact-area::before { content: ""; position: absolute; top: -20px; left: -70px; width: 680px; height: 280px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 680 280'%3E%3Cpath d='M 0,148 C 22,105 62,75 118,55 C 162,38 210,30 265,24 C 330,17 395,18 458,25 C 515,31 565,44 610,62 C 645,76 668,95 680,118 C 658,108 628,95 588,82 C 538,66 480,53 418,46 C 352,38 285,37 222,44 C 168,50 118,62 78,82 C 46,98 22,120 5,148 C 2,154 0,160 0,168 C -3,160 -2,154 0,148 Z' fill='%230A192F' opacity='0.05'/%3E%3Cpath d='M 0,172 C 25,125 68,93 128,72 C 174,54 224,44 282,37 C 348,28 415,29 478,36 C 536,42 586,55 632,75 C 660,87 678,104 680,125 C 655,114 622,100 578,86 C 524,68 462,56 395,48 C 326,40 255,38 190,46 C 135,52 84,66 45,88 C 18,104 2,126 0,152 C -3,144 -2,158 0,172 Z' fill='%23C69E42' opacity='0.08'/%3E%3Cpath d='M 0,196 C 28,145 75,110 138,88 C 186,70 238,59 298,52 C 366,43 435,44 498,52 C 558,59 608,73 650,95 C 668,104 680,116 680,132 C 652,120 616,106 566,92 C 508,75 442,62 372,54 C 300,45 228,44 160,52 C 104,58 52,74 18,98 C 6,107 -3,118 0,138 C -3,128 -2,212 0,196 Z' fill='%23f07705' opacity='0.05'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } .fun-fact-area::after { content: ""; position: absolute; bottom: -25px; right: -55px; width: 520px; height: 250px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 250'%3E%3Cpath d='M 520,30 C 492,22 455,18 410,18 C 355,18 294,26 232,42 C 175,56 120,76 72,100 C 35,118 8,140 0,165 C 18,150 45,132 85,114 C 135,93 192,74 252,58 C 316,41 380,32 438,30 C 474,28 502,32 520,42 Z' fill='%23C69E42' opacity='0.10'/%3E%3Cpath d='M 520,55 C 490,46 450,41 402,42 C 344,42 280,52 215,70 C 155,86 98,108 52,134 C 18,154 -5,176 0,198 C 20,182 48,162 90,142 C 142,118 202,96 265,78 C 330,59 396,49 455,48 C 490,47 512,53 520,65 Z' fill='%23f07705' opacity='0.06'/%3E%3Cpath d='M 520,80 C 486,70 444,64 393,65 C 332,65 265,76 197,96 C 135,114 76,138 30,165 C 2,182 -15,204 0,225 C 22,208 52,186 95,164 C 150,138 212,114 278,94 C 345,74 412,62 472,62 C 500,62 516,68 520,80 Z' fill='%23C69E42' opacity='0.05'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } .fun-fact-area > * { position: relative; z-index: 1; } .contact-us-area-three.ptb-120::before { content: ""; position: absolute; top: 800px; right: 0px; width: 380px; height: 100%; min-height: 600px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 900'%3E%3Cpath d='M 340,0 C 325,45 308,105 315,178 C 322,248 345,308 350,385 C 355,455 342,518 330,590 C 318,660 298,725 295,798 C 293,848 302,878 310,900 C 298,875 282,842 280,792 C 276,718 296,650 308,578 C 320,505 332,440 326,368 C 320,292 295,230 288,158 C 282,88 295,38 315,0 Z' fill='%23C69E42' opacity='0.09'/%3E%3Cpath d='M 368,0 C 350,48 330,112 338,188 C 346,262 370,322 374,402 C 378,474 362,540 348,615 C 334,688 312,755 308,832 C 305,875 315,898 325,908 C 312,882 295,848 292,798 C 288,722 310,652 324,578 C 338,502 352,435 348,360 C 344,282 318,218 310,142 C 302,70 315,22 338,0 Z' fill='%23C69E42' opacity='0.05'/%3E%3Cpath d='M 308,0 C 295,38 280,96 288,165 C 296,232 320,292 325,365 C 330,432 318,495 308,565 C 296,638 275,702 272,775 C 270,822 280,856 290,880 C 276,855 260,820 258,768 C 254,692 275,625 288,552 C 300,478 312,412 308,338 C 302,262 278,198 270,128 C 262,62 272,20 295,0 Z' fill='%23f07705' opacity='0.06'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 0; } .sidebar-info.offcanvas.offcanvas-end.show::before { content: ""; position: absolute; top: 0px; right: 0px; width: 380px; height: 100%; min-height: 600px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 900'%3E%3Cpath d='M 340,0 C 325,45 308,105 315,178 C 322,248 345,308 350,385 C 355,455 342,518 330,590 C 318,660 298,725 295,798 C 293,848 302,878 310,900 C 298,875 282,842 280,792 C 276,718 296,650 308,578 C 320,505 332,440 326,368 C 320,292 295,230 288,158 C 282,88 295,38 315,0 Z' fill='%23C69E42' opacity='0.09'/%3E%3Cpath d='M 368,0 C 350,48 330,112 338,188 C 346,262 370,322 374,402 C 378,474 362,540 348,615 C 334,688 312,755 308,832 C 305,875 315,898 325,908 C 312,882 295,848 292,798 C 288,722 310,652 324,578 C 338,502 352,435 348,360 C 344,282 318,218 310,142 C 302,70 315,22 338,0 Z' fill='%23C69E42' opacity='0.05'/%3E%3Cpath d='M 308,0 C 295,38 280,96 288,165 C 296,232 320,292 325,365 C 330,432 318,495 308,565 C 296,638 275,702 272,775 C 270,822 280,856 290,880 C 276,855 260,820 258,768 C 254,692 275,625 288,552 C 300,478 312,412 308,338 C 302,262 278,198 270,128 C 262,62 272,20 295,0 Z' fill='%23f07705' opacity='0.06'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 0; } .projects-area.ptb-120::before{ content: ""; position: absolute; top: 50%; left: 0; width: 500px; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 480'%3E%3Cpath d='M 80,0 C 108,28 118,65 112,112 C 105,162 85,198 78,248 C 70,300 72,345 58,390 C 46,428 22,458 0,478 C 8,455 18,428 26,395 C 38,348 35,302 44,250 C 52,198 72,162 80,112 C 86,68 78,32 62,5 Z' fill='%230A192F' opacity='0.06'/%3E%3Cpath d='M 112,0 C 138,30 148,68 142,116 C 134,168 112,205 104,258 C 95,314 96,360 80,408 C 66,448 40,472 18,480 C 28,456 40,428 50,394 C 64,345 62,298 72,246 C 82,192 104,155 112,104 C 118,60 110,25 92,2 Z' fill='%230A192F' opacity='0.04'/%3E%3Cpath d='M 52,0 C 82,32 94,72 88,122 C 80,174 58,212 50,266 C 42,320 44,368 28,415 C 15,452 -5,472 -18,478 C -8,453 4,425 12,390 C 26,340 24,292 34,240 C 44,186 66,148 74,98 C 80,54 72,18 55,0 Z' fill='%23C69E42' opacity='0.05'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } .details-content::before { content: ""; position: absolute; top: 800px; right: 0px; width: 380px; height: 100%; min-height: 600px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 900'%3E%3Cpath d='M 340,0 C 325,45 308,105 315,178 C 322,248 345,308 350,385 C 355,455 342,518 330,590 C 318,660 298,725 295,798 C 293,848 302,878 310,900 C 298,875 282,842 280,792 C 276,718 296,650 308,578 C 320,505 332,440 326,368 C 320,292 295,230 288,158 C 282,88 295,38 315,0 Z' fill='%23C69E42' opacity='0.09'/%3E%3Cpath d='M 368,0 C 350,48 330,112 338,188 C 346,262 370,322 374,402 C 378,474 362,540 348,615 C 334,688 312,755 308,832 C 305,875 315,898 325,908 C 312,882 295,848 292,798 C 288,722 310,652 324,578 C 338,502 352,435 348,360 C 344,282 318,218 310,142 C 302,70 315,22 338,0 Z' fill='%23C69E42' opacity='0.05'/%3E%3Cpath d='M 308,0 C 295,38 280,96 288,165 C 296,232 320,292 325,365 C 330,432 318,495 308,565 C 296,638 275,702 272,775 C 270,822 280,856 290,880 C 276,855 260,820 258,768 C 254,692 275,625 288,552 C 300,478 312,412 308,338 C 302,262 278,198 270,128 C 262,62 272,20 295,0 Z' fill='%23f07705' opacity='0.06'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 0; } /* ============================================ 5. About Us Area Wild angled strokes cutting diagonally ============================================ */ .about-us-area::before { content: ""; position: absolute; top: 0; right: -30px; width: 380px; height: 100%; min-height: 600px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 900'%3E%3Cpath d='M 340,0 C 325,45 308,105 315,178 C 322,248 345,308 350,385 C 355,455 342,518 330,590 C 318,660 298,725 295,798 C 293,848 302,878 310,900 C 298,875 282,842 280,792 C 276,718 296,650 308,578 C 320,505 332,440 326,368 C 320,292 295,230 288,158 C 282,88 295,38 315,0 Z' fill='%23C69E42' opacity='0.09'/%3E%3Cpath d='M 368,0 C 350,48 330,112 338,188 C 346,262 370,322 374,402 C 378,474 362,540 348,615 C 334,688 312,755 308,832 C 305,875 315,898 325,908 C 312,882 295,848 292,798 C 288,722 310,652 324,578 C 338,502 352,435 348,360 C 344,282 318,218 310,142 C 302,70 315,22 338,0 Z' fill='%23C69E42' opacity='0.05'/%3E%3Cpath d='M 308,0 C 295,38 280,96 288,165 C 296,232 320,292 325,365 C 330,432 318,495 308,565 C 296,638 275,702 272,775 C 270,822 280,856 290,880 C 276,855 260,820 258,768 C 254,692 275,625 288,552 C 300,478 312,412 308,338 C 302,262 278,198 270,128 C 262,62 272,20 295,0 Z' fill='%23f07705' opacity='0.06'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: 0; } .about-us-area > * { position: relative; z-index: 1; } /* ============================================ Dark sections (bg-secondary = #0A192F) — golden bristle strokes ============================================ */ .projects-area-three, .testimonial-area-two { position: relative; overflow: hidden; } /* Scraped multi-bristle sweep across top */ .projects-area-three::before, .testimonial-area-two::before { content: ""; position: absolute; top: -20px; right: -80px; width: 860px; height: 280px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 860 280'%3E%3Cpath d='M 860,30 C 818,14 762,8 698,6 C 620,4 535,12 448,28 C 365,43 282,65 205,90 C 140,112 82,136 38,162 C 12,178 -5,194 0,212 C 18,196 46,178 88,160 C 145,138 208,115 278,92 C 355,68 438,46 524,31 C 604,17 686,12 755,18 C 802,22 840,32 860,48 Z' fill='%23C69E42' opacity='0.14'/%3E%3Cpath d='M 860,58 C 815,40 756,32 688,30 C 606,28 518,38 428,56 C 342,72 255,96 175,122 C 108,145 48,170 10,198 C -8,210 -10,228 0,242 C 20,224 52,204 96,184 C 156,160 222,135 295,110 C 375,84 460,61 548,45 C 628,30 712,24 782,30 C 826,34 856,46 860,62 Z' fill='%23C69E42' opacity='0.08'/%3E%3Cpath d='M 860,86 C 812,66 750,56 678,54 C 592,51 500,62 408,82 C 320,100 230,126 148,154 C 80,178 20,204 0,232 C 18,216 52,194 98,172 C 160,146 230,120 306,94 C 388,67 476,44 566,28 C 648,13 734,7 806,15 C 838,19 858,32 860,50 C 862,62 862,76 860,86 Z' fill='%23f07705' opacity='0.06'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } /* Rough angled smear bottom-left */ .projects-area-three::after, .testimonial-area-two::after { content: ""; position: absolute; bottom: -15px; left: -50px; width: 560px; height: 260px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 560 260'%3E%3Cpath d='M 0,80 C 28,55 68,38 118,28 C 165,18 215,16 268,20 C 325,24 380,36 430,55 C 472,70 505,90 525,114 C 505,102 475,86 435,70 C 384,50 326,38 265,34 C 208,29 152,32 105,44 C 65,54 32,72 10,98 C 5,88 0,84 0,80 Z' fill='%23C69E42' opacity='0.12'/%3E%3Cpath d='M 0,108 C 30,80 72,60 125,48 C 175,37 228,34 282,38 C 342,42 398,55 448,76 C 490,92 520,114 535,138 C 514,125 480,108 435,92 C 380,72 320,58 256,54 C 196,50 138,54 90,68 C 50,80 20,100 2,128 C -2,118 -1,112 0,108 Z' fill='%23C69E42' opacity='0.07'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; pointer-events: none; z-index: 0; } .projects-area-three > *, .testimonial-area-two > * { position: relative; z-index: 1; }