/* ── INDUSTRIES GRID ── */
.ind-section{max-width: 100%;margin:0 auto;padding: 0;} .ind-grid{ display:grid; grid-template-columns: repeat(1,1fr); /* gap:30px; */ margin-top: 14px; margin-bottom: 39px; } .efgyu_tri:nth-child(even) .ind-card.visible { flex-direction: row-reverse; } .efgyu_tri:nth-child(odd) { background: linear-gradient(#2361a31a, #ffffff, #2361a31a); padding: 40px 0; position: relative; overflow: hidden; } .efgyu_tri:nth-child(even) { padding: 40px 0; position: relative; background: radial-gradient(rgb(0, 55, 111), rgb(0, 18, 42)); } .efgyu_tri:last-child {    background: linear-gradient(#2361a31a, #ffffff, #ffffff1a);} .ind-card{ display:flex; transition:transform 0.45s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s ease,opacity 0.45s ease; align-items: self-start; border-radius: 5px; } .ind-card.visible{opacity:1;transform:translateY(0)} /* Image */ .ind-card-img{ position:relative; /*height: 100%;*/ overflow:hidden; flex-shrink:0; width: 22%; height: 285px; box-shadow: -13px 13px 0px 1px #1a46872e; border-radius: 5px; } .ind-card-img img{ width:100%;height:100%;object-fit:cover; transition:transform 0.7s cubic-bezier(0.16,1,0.3,1);display:block; } .ind-card:hover .ind-card-img img{transform:scale(1.07)} .ind-card-img-overlay{ position:absolute;inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,0.5) 100%); transition:opacity 0.4s ease; } .ind-card:hover .ind-card-img-overlay{opacity:0.8} .ind-card-category{ position:absolute;bottom:16px;left:16px; display:flex;align-items:center;gap:8px; } .cat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0} .cat-label{font-size:10px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,0.4)} /* Body */ .ind-card-body{ padding: 20px 0 10px 30px; flex:1; display:flex; flex-direction:column; /* width: 63%; */ } .ind-card-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom: 5px; /* gap:12px; */ position: relative; } .ind-card-icon{ width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform 0.3s ease; position: absolute; top: 0; right: 0; display: none; } .ind-card:hover .ind-card-icon{transform:scale(1.1) rotate(-4deg)} .ind-card-icon img{width:35px;height:35px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation: gradient1 3s ease infinite, rocking 3s ease infinite;} .ind-card-title{ font-size: 20px; font-weight: 600; color: #000000; line-height: 26px; margin-bottom: 0; } .ind-card-desc{margin-bottom: 0px;font-size: 13px;line-height: 27px;width: 100%;font-weight: 300;} .ind-card-arrow{ width:34px;height:34px;border-radius:50%; border:1.5px solid var(--sand); display:flex;align-items:center;justify-content:center; transition:background 0.3s,border-color 0.3s,transform 0.3s; } .ind-card:hover .ind-card-arrow{background:var(--navy);border-color:var(--navy);transform:rotate(45deg)} .ind-card-arrow svg{width:13px;height:13px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.3s} .ind-card:hover .ind-card-arrow svg{stroke:#fff} .efuihui_tri { width: 40%; } span.egrgh_tri {font-size: 15px;color: #249ea3;/* color: #1b4280; */margin-bottom: 15px;display: flex;align-items: center;font-weight: 500;/* background: #ffffff; */position: relative;display: inline-flex;/* padding: 0 15px; */white-space: nowrap;width: 100%;} span.egrgh_tri:before { content: ""; position: relative; top: 0; bottom: 0; height: 16px; width: 3px; /* background: #249ea3; */ /* margin-right: 10px; */ } span.ind-card-tag { position: relative; padding: 10px 8px 10px 33px; font-size: 13px; /* margin-bottom: 10px; */ width: 32%; color: #1e1e1e; font-weight: 500; display: flex; /* align-items: center; */ border-radius: 5px; box-shadow: 0 2px 3px #00000042; background: #fff; border: 1px solid #e5e5e5; } span.ind-card-tag:before { content: "01"; content: "\f0a4"; display: inline-block; font: normal normal normal 14px / 1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; position: absolute; left: 12px; top: 13px; color: #249ea3; } .ind-card-tags { display: flex; flex-wrap: wrap; gap: 12px; } .hthth_tri { margin-top: 25px; position: relative; /* padding: 0 18px 12px; */ } @media screen and (max-width: 991px) { .section-intro { padding: 0; } .si-right { width: 100%; }.efuihui_tri { width: auto; padding-top: 40px; }    .ind-section { padding: 0; } .ind-card { display: flex; flex-direction: column!important; } } h2.si-title:before { content: ""; position: absolute; left: 0; width: 65px; height: 3px; background: #1b4280; border-radius: 10px; bottom: 0; } h2.si-title:after { content: ""; position: absolute; left: 16.5%; width: 11px; height: 3px; background: #1b4280; border-radius: 10px; bottom: 0; } section.efuu_tri { padding: 40px 0 0; /* background: linear-gradient(#2361a31a, #ffffff, #2361a31a); */ position: relative; overflow: hidden; }
/*animate course bg*/
.a-one { width: 100px; height: 100px; background-color: #0030602e; opacity: 0.5; border-radius: 50%; position: absolute; bottom: 0; left: 150px; animation: MoveUpDown 5s linear infinite; } 
.a-two { width: 150px; height: 150px; background-color: #ff61001c; opacity: 0.7; border-radius: 50%; position: absolute; bottom: 10px; left: 200px; animation: MoveUpDownTwo 9s linear infinite; } 
.a-three { width: 120px; height: 120px; background-color: #0030602e; opacity: 0.2; border-radius: 50%; position: absolute; bottom: 120px; left: 300px; animation: MoveUpDownThree 5s linear infinite; } 
.a-four { width: 80px; height: 80px; background-color: #ff61001c; opacity: 0.4; border-radius: 50%; position: absolute; bottom: 0; right: 0; animation: MoveUpDownFour 15s linear infinite; } 
.a-five { width: 50px; height: 50px; background-color: #f7eef7; opacity: 0.9; border-radius: 50%; position: absolute; bottom: 200px; right: 0; animation: MoveUpDownFive 8s linear infinite; } 
.a-six { width: 175px; height: 175px; background-color: #ff61001c; opacity: 0.6; border-radius: 50%; position: absolute; bottom: 250px; right: 200px; animation: MoveUpDownSix 7s linear infinite; } 
.a-seven { width: 250px; height: 250px; background-color: #ff61001c; opacity: 0.3; border-radius: 50%; position: absolute; bottom: 0; left: 450px; right: 0; animation: MoveUpDownSeven 6s linear infinite; } 
.a-eight { width: 75px; height: 75px; background-color: #ff61001c; opacity: 0.4; border-radius: 50%; position: absolute; bottom: 0; left: 350px; animation: MoveUpDownEight 11s linear infinite; } 
.a-nine { width: 45px; height: 45px; background-color: #f7eef7; opacity: 0.7; border-radius: 50%; position: absolute; bottom: 0; left: 450px; animation: MoveUpDownNine 12s linear infinite; } 
.a-ten { width: 150px; height: 150px; background-color: #ff61001c; opacity: 0.6; border-radius: 50%; position: absolute; bottom: 0; right: 0; animation: MoveUpDownTen 14s linear infinite; } 
@keyframes a-one { from { top: 0; left: 0; } to { top: 100px; left: 100px; } } 
@keyframes MoveUpDown { 0%, 100% { bottom: 0; } 50% { bottom: 500px; } } 
@keyframes MoveUpDownTwo { 0%, 100% { left: 0; } 50% { bottom: 900px; } } 
@keyframes MoveUpDownThree { 0%, 100% { bottom: 0; } 50% { bottom: 1100px; } } 
@keyframes MoveUpDownFour { 0%, 100% { bottom: 0; } 50% { bottom: 750px; } } 
@keyframes MoveUpDownFive { 0%, 100% { bottom: 0; } 50% { bottom: 250px; } } 
@keyframes MoveUpDownSix { 0%, 100% { bottom: 0; } 50% { bottom: 800px; } } 
@keyframes MoveUpDownSeven { 0%, 100% { bottom: 0; } 50% { bottom: 375px; } } 
@keyframes MoveUpDownEight { 0%, 100% { bottom: 0; } 50% { bottom: 570px; } } 
@keyframes MoveUpDownNine { 0%, 100% { bottom: 0; } 50% { bottom: 875px; } } 
@keyframes MoveUpDownTen { 0%, 100% { bottom: 0; } 50% { bottom: 900px; } }
p.si-right { font-size: 13px; line-height: 27px; text-align: center; width: 75%; margin: 10px auto 30px; }
/*animate course bg*/
.hthth_tri:before { content:""; /* border: 1px dotted #b3b3b3; */ position: absolute; left: 0; top: 11px; width: 100%; height: 100%; } .efgyu_tri:nth-child(even):before { content:""; background-image: url(../images/vps_bg.webp); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .2; } .efgyu_tri:nth-child(even) span.ind-card-tag { background: no-repeat; color: #fff; border: 1px solid #ffffff2e; } .efgyu_tri:nth-child(even) .ind-card-header h3.ind-card-title { color: #fff; } .efgyu_tri:nth-child(even) p.ind-card-desc { color: #fff; } .efgyu_tri:nth-child(even) span.egrgh_tri { color: #88faff; } .efgyu_tri:nth-child(even) span.ind-card-tag:before { color: #88faff; } .efgyu_tri:nth-child(odd) span.egrgh_tri:after { content: ""; border-bottom: 1px solid; border-image: linear-gradient(91deg, #0000004d, #00000008, #ffffff00) 1; width: 90%; margin-left: 10px; } .efgyu_tri:nth-child(even) span.egrgh_tri:after { content: ""; border-bottom: 1px solid; border-image: linear-gradient(91deg, #ffffff7a, #ffffff26, #ffffff00) 1; width: 90%; margin-left: 10px; } .efgyu_tri .ind-card:hover .ind-card-img { box-shadow: 0px 0px 0px 0px #ffffff36; } .efgyu_tri:nth-child(even) .ind-card-img { box-shadow: 13px 13px 0px 1px #ffffff36; } .efgyu_tri:nth-child(odd) span.ind-card-tag:hover { background: #d1d1d11c; } .efgyu_tri:nth-child(even) span.ind-card-tag:hover { background: #ffffff1c; } @media (max-width: 767.98px) { .ind-card-img { width: 90%; margin: 0 auto 0 0; box-shadow: none!important; } .ind-card-tags span.ind-card-tag { width: 100%; } .ind-card-body { padding: 18px 36px 12px 12px; } .hthth_tri { margin-top: 12px; } }