/*banner Css*/ .overlay, .banner-video__wrp, .brand-three-area, .case__image, .banner__inner-page, .header__main .main-menu ul li .sub-menu.menu-image .image { position: relative; } .banner__inner-page { overflow: hidden; z-index: 1; text-transform: capitalize; } .banner__inner-page::before { background: linear-gradient(270.07deg, #002b98 0.07%, #00060c 99.95%); z-index: -1; opacity: 0.75; } .banner__inner-page .shape2 { position: absolute; left: 0; bottom: 0; z-index: -1; } .overlay::before, .banner-video__wrp::before, .brand-three-area::before, .case__image::before, .banner__inner-page::before, .header__main .main-menu ul li .sub-menu.menu-image .image::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } .shape1 img { position: relative; top: 91px; } .bg-image { background-position: center; background-repeat: no-repeat; background-size: cover; } .pb-50 { padding-bottom: 90px; } .pt-50 { padding-top: 90px; } .djajaa-am-ee0-ami { position: absolute; bottom: 24%; left: 15%; } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .banner__inner-page .shape3 { position: absolute; right: 0; bottom: 0; z-index: -1; } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .sway__animationX { animation: swayX 3s linear infinite alternate; } @keyframes swayX { 0% { transform: translateX(20px); } 100% { transform: translateX(0px); } } .banner__inner-page h2 { margin-bottom: 10px; color: #ffffff; } .banner__inner-page a { color: #ffffff; font-weight: 500; } .banner__inner-page span i { color: #ffffff; } .banner__inner-page span { color: #ffffff; font-weight: 500; } /*banner Css*/ .all-services { padding: 52px 0px; } .kaaaoana-ami { font-size: 40px; font-weight: 500; } .dakakaka-ami-newo { color: #1b4280; } .djajaaa-ami-new { font-size: 18px; /* font-style: italic; */ } .dakakaa-ama-ew { display: flex; flex-wrap: wrap; align-items: start; gap: 8px; } .dmaaaa-am-mop { background: #1b5184; color: white; /* margin: 7px 5px; */ font-size: 15px; width: 49%; padding: 10px 21px; border-radius: 30px; } .dkanaaa-aa-ami { height: 100%; display: flex; flex-direction: column; justify-content: center; } .bg-gradient-ami { color: black; } .pad-com-am { /* padding: 40px 0px 50px; */ } .dhbjajaa-am-new { font-size: 16px; font-weight: 500; line-height: 30px; margin-bottom: 0; /* color: #000000; */ } .dnaaaa-am-ami-p { font-size: 12.5px; line-height: 27px; margin-bottom: 0; color: #1e1e1e; padding-right: 29px; } .djajajja-ami-new-p { margin-bottom: 0px; font-size: 18px; font-style: italic; } .knaaakka-am-new { padding-right: 0; /* position: sticky; */ /* top: 115px; */ } .dbjaaaa-amai-am { padding-left: 0; } .dbjajaja-ami-new { font-size: 13px; color: #000000; margin-bottom: 15px; display: flex; font-weight: 600; } .dhahahaa-ami-new-l { margin-top: 20px; } .dkankaka-ami-new-k { display: flex; gap: 10px; margin-top: 0; flex-wrap: wrap; /* flex-direction: column; */ padding-left: 0; margin: 0; } .dnaaka-amikl { position: relative; padding: 5px 12px; font-size: 12.5px; /* margin-bottom: 10px; */ /* width: 100%; */ color: #1e1e1e; font-weight: 500; display: flex; align-items: center; box-shadow: 0 2px 3px #00000042; border-radius: 30px; background: #fff; /* width: 24%; */ } .dnaaka-amikl:before { content: ''; /* position: absolute; */ /* top: 3px; */ /* left: 0; */ /* bottom: 0; */ /* height: 18px; */ /* width: 3px; */ /* background-image: linear-gradient(to bottom, #1c7980, #1c7980); */ /* background: #1b428094; */ /* width: 5px; */ /* height: 5px; */ display: block; border-radius: 50px; /* margin-right: 10px; */ } img.djbajajaa-a-new { width: 100%; /* animation: gradient1 3s ease infinite, rocking 3s ease infinite; */ height: 100%; object-fit: contain; } .efuiguy_tri { display: flex; flex-wrap: wrap; } .grghtrhy_tri { width: 100%; padding: 0; position: relative; overflow: hidden; } h4.dbjajaja-ami-new:before { content:""; position: relative; top: 0; /* left: 0; */ bottom: 0; /* height: 100%; */ width: 3px; background: #249ea3; margin-right: 10px; } .efthtyguy_tri { /* background: #ffffff; */ height: 100%; padding: 35px 8%; border-radius: 5px; /* transition: 0.3s; */ /* box-shadow: -2px 10px 22px -16px #000000; */ /* border: 1px solid #d3d3d3; */ /* box-shadow: 0 2px 3px #00000042; */ position: relative; border: 1px solid #ffffff00; display: flex; align-items: flex-start; gap: 25px; } /* ===== CTA STRIP ===== */ .cta-strip { background: var(--white); /* border-top: 1px solid var(--border); */ padding: 0 0 50px; } .cta-inner { background: linear-gradient(135deg, #0a2342 0%, #143560 100%); border-radius: 20px; padding: 35px; display: flex; align-items: center; justify-content: center; /* gap: 2rem; */ flex-wrap: wrap; position: relative; overflow: hidden; /* box-shadow: var(--shadow-lg); */ } .cta-inner::after { content: ''; position: absolute; right: -60px; top: -60px; width: 250px; height: 250px; background: rgba(200,150,46,.12); border-radius: 50%; } .cta-text h2 {font-size: 30px;font-weight: 500;color: #ffffff;margin-bottom: 13px;} .cta-text p {color: rgba(255,255,255,.7);font-size: 15px;} .cta-actions {display: flex;gap: 10px;/* flex-wrap: wrap; */position: relative;z-index: 1;/* width: 32%; */} .btn {display: inline-flex;align-items: center;gap: .5rem;padding: 9px 35px;border-radius: 3px;font-weight: 500;font-size: 15px;cursor: pointer;transition: all var(--transition);border: none;} .btn-accent {background: #ffffff;color: #0c2748;box-shadow: unset;} .btn-accent:hover {/* transform: translateY(-2px); *//* box-shadow: 0 8px 24px rgba(200,150,46,.5); */background: gainsboro;color: #0c2748;} .btn-outline-white {background: transparent;color: #fff;border: 1.5px solid rgba(255,255,255,.45);} .btn-outline-white:hover {background: rgba(255,255,255,.1);color: #fff;} .cta-text { margin-bottom: 20px; width: 100%; text-align: center; } @media screen and (max-width: 991px) { .grghtrhy_tri { width: 100%; } } .efthtyguy_tri:hover { /* transform: translateY(-5px); */ } section.bg-gradient-ami.pad-com-am .container { padding: 0; width: 100%; max-width: 100%; } section.bg-gradient-ami.pad-com-am:nth-child(even) { padding: 40px 0; background-color: #1c468e; background-image: url(../images/vps_bg.webp); position: relative; } section.bg-gradient-ami.pad-com-am:nth-child(even):before { content: ""; position: absolute; left: 0; width: 100%; top: 0; height: 100%; background: radial-gradient(rgb(0, 55, 111), rgb(0, 18, 42)); opacity: .8; } section.bg-gradient-ami.pad-com-am:nth-child(even) .efthtyguy_tri { background: no-repeat; border: 1px solid #ffffff78; } .grghtrhy_tri:nth-child(1) .efthtyguy_tri { /* background: #F7F3D7; */ color: #b97a09; } .grghtrhy_tri:nth-child(2) .efthtyguy_tri { /* background: #fee7eb; */ color: #a90000; } .grghtrhy_tri:nth-child(3) .efthtyguy_tri { /* background: #CDE9F6; */ color: #00577f; } .grghtrhy_tri:nth-child(4) .efthtyguy_tri { /* background: #daf1e9; */ color: #00892c; } .grghtrhy_tri:nth-child(5) .efthtyguy_tri { /* background: #f5f0e5; */ color: #764d00; } .grghtrhy_tri:nth-child(6) .efthtyguy_tri { /* background: #ece2fd; */ color: #472978; } .grghtrhy_tri:nth-child(7) .efthtyguy_tri { /* background: #e5f9f9; */ color: #00abab; } .grghtrhy_tri:nth-child(8) .efthtyguy_tri { /* background: #ffeded; */ color: #a30000; } .grghtrhy_tri:nth-child(5) .efthtyguy_tri .dnaaka-amikl, .grghtrhy_tri:nth-child(7) .efthtyguy_tri .dnaaka-amikl, .grghtrhy_tri:nth-child(8) .efthtyguy_tri .dnaaka-amikl { padding: 5px 15px 5px 15px; } .f9yhui_tri { width: 40px; margin-bottom: 6px; background: #ffffff; height: 40px; animation: gradient1 3s ease infinite, rocking 3s ease infinite; border-radius: 50px; overflow: hidden; padding: 5px; box-shadow: 2px 2px #0000003b; } @media (max-width: 767.98px) { section.bg-gradient-ami.pad-com-am .container { max-width: 100%; margin-left: 0; } .efuiguy_tri { max-height: unset; min-height: unset; } .efthtyguy_tri { display: block; padding: 35px 45px 35px 15px; } .efthtyguy_tri .ind-card-img { width: 100%; height: auto; } .efthtyguy_tri .rgrjg_tri { padding-top: 15px; width: 100%; } .efthtyguy_tri .dnaaka-amikl { width: 100%; padding: 6px 12px; } } .grghtrhy_tri.active::before, .grghtrhy_tri.active::after { content: ""; position: absolute; inset: -0.2rem; z-index: -1; animation: rotate 1s linear infinite; left: 7px; right: 7px; bottom: 7px; top: 7px; border-radius: 5px; } .grghtrhy_tri.active::after { filter: blur(0px); } @keyframes rotate { 0%     { --angle: 0deg; } 100%   { --angle: 360deg; } }@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; } li.dnaaka-amikl:nth-child(1) { background: #F7F3D7; color: #b97a09; } li.dnaaka-amikl:nth-child(2) { background: #fee7eb; color: #a90000; } li.dnaaka-amikl:nth-child(3) { background: #CDE9F6; color: #00577f; } li.dnaaka-amikl:nth-child(4) { background: #daf1e9; color: #00892c; } li.dnaaka-amikl:nth-child(5) { background: #f5f0e5; color: #764d00; } li.dnaaka-amikl:nth-child(6) { background: #ece2fd; color: #472978; } .ind-card-img { width: 20%; height: 260px; border-radius: 5px; overflow: hidden; } .ind-card-img img { width: 100%; object-fit: cover; height: 100%; } .rgrjg_tri { padding-top: 15px; width: 78%; } .grghtrhy_tri:nth-child(even) .efthtyguy_tri { flex-direction: row-reverse; } .grghtrhy_tri:nth-child(odd) .efthtyguy_tri { background: linear-gradient(#2361a31a, #ffffff, #2361a31a); } .grghtrhy_tri:nth-child(even):before { content: ""; left: 0; } .red-tri { width: 350px; height: 700px; background-color: rgb(255, 0, 0); opacity: 35%; transform-origin: center; animation: 15s linear infinite turn2; position: absolute; top: 0; left: 0; z-index: -1; } .blue-tri { width: 350px; height: 700px; background-color: rgb(0, 0, 133); opacity: 35%; transform-origin: center; animation: 15s linear infinite turn2; position: absolute; bottom: 0; left: 25%; z-index: -1; } .yellow-tri { width: 350px; height: 700px; background-color: rgb(255, 255, 0); opacity: 35%; transform-origin: center; animation: 15s linear infinite turn3; position: absolute; top: 0; right: 25%; z-index: -1; } .pink-tri { width: 350px; height: 700px; background-color: rgb(255, 50, 100); opacity: 35%; transform-origin: center; animation: 15s linear infinite turn3; position: absolute; bottom: 0%; right: 0; z-index: -1; } @keyframes turn { 50% { transform: rotate(270deg) scaleX(-1) skew(45deg); } } @keyframes turn2 { 50% { transform: rotate(-90deg) scaleX(-1) skew(45deg); } } @keyframes turn3 { 50% { transform: rotate(90deg) scaleX(-1) skew(-45deg); } }.bg-tri { opacity: .1; }