Department of Civil Engineering Technologies<\/title>\r\n\r\n <style>\r\n \/* ===== Scoped only inside .civ-hero ===== *\/\r\n .civ-hero *{box-sizing:border-box}\r\n .civ-hero{\r\n font-family: Tajawal, system-ui, -apple-system, \"Segoe UI\", sans-serif;\r\n --maroon:#8B1E2D;\r\n --maroon2:#A32536;\r\n --sky:#2C8C97;\r\n --sky2:#3AA6B1;\r\n\r\n --ink:#0b1220;\r\n --muted:#4b5563;\r\n\r\n --glass: rgba(255,255,255,.10);\r\n --stroke: rgba(255,255,255,.18);\r\n --shadow: 0 20px 80px rgba(2,6,23,.35);\r\n\r\n background:\r\n radial-gradient(900px 420px at 12% 18%, rgba(44,140,151,.26) 0%, transparent 55%),\r\n radial-gradient(820px 380px at 88% 26%, rgba(139,30,45,.26) 0%, transparent 55%),\r\n linear-gradient(135deg, #0b1220 0%, #0a0f1c 45%, #0b1220 100%);\r\n color:#fff;\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden;\r\n }\r\n\r\n \/* \u062e\u0644\u0641\u064a\u0629 \u0632\u062e\u0631\u0641\u064a\u0629 \u062e\u0641\u064a\u0641\u0629 *\/\r\n .civ-hero::before{\r\n content:\"\";\r\n position:absolute; inset:-2px;\r\n background:\r\n linear-gradient(90deg, rgba(139,30,45,.12), rgba(44,140,151,.12)),\r\n radial-gradient(circle at 30% 30%, rgba(58,166,177,.12), transparent 55%),\r\n radial-gradient(circle at 70% 70%, rgba(163,37,54,.10), transparent 55%);\r\n filter: blur(0px);\r\n pointer-events:none;\r\n z-index:0;\r\n opacity:.9;\r\n }\r\n\r\n .civ-hero .hero-carousel{\r\n position:relative;\r\n width:100%;\r\n min-height: min(92vh, 880px);\r\n display:flex;\r\n align-items:center;\r\n overflow:hidden;\r\n z-index:1;\r\n }\r\n\r\n .civ-hero .carousel-container{\r\n width:100%;\r\n height:100%;\r\n display:flex;\r\n align-items:center;\r\n gap:44px;\r\n padding: clamp(22px, 3.5vw, 70px);\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ===== Image side ===== *\/\r\n .civ-hero .carousel-image-wrapper{\r\n flex:0 0 46%;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n position:relative;\r\n }\r\n\r\n .civ-hero .image-frame{\r\n position:relative;\r\n width:100%;\r\n max-width: 560px;\r\n height: 520px;\r\n border-radius: 28px;\r\n overflow:hidden;\r\n background: rgba(255,255,255,.06);\r\n border: 1px solid rgba(255,255,255,.14);\r\n box-shadow: var(--shadow);\r\n transform: translateZ(0);\r\n }\r\n\r\n \/* \u0625\u0637\u0627\u0631 \u0644\u0627\u0645\u0639 *\/\r\n .civ-hero .image-frame::before{\r\n content:\"\";\r\n position:absolute; inset:0;\r\n background:\r\n linear-gradient(135deg, rgba(255,255,255,.14), transparent 35%),\r\n radial-gradient(circle at 20% 20%, rgba(44,140,151,.18), transparent 55%),\r\n radial-gradient(circle at 80% 80%, rgba(139,30,45,.16), transparent 55%);\r\n pointer-events:none;\r\n z-index:2;\r\n }\r\n\r\n \/* \u062e\u0637 \u062a\u0645\u064a\u064a\u0632 \u0645\u0627\u0631\u0648\u0646\u064a\/\u0633\u0645\u0627\u0626\u064a \u0623\u0639\u0644\u0649 \u0627\u0644\u0625\u0637\u0627\u0631 *\/\r\n .civ-hero .image-frame::after{\r\n content:\"\";\r\n position:absolute; top:0; left:0; right:0;\r\n height:4px;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky), var(--maroon2));\r\n z-index:3;\r\n opacity:.95;\r\n }\r\n\r\n .civ-hero .carousel-slide{\r\n position:absolute;\r\n inset:0;\r\n opacity:0;\r\n transition: opacity .65s ease;\r\n }\r\n .civ-hero .carousel-slide.active{opacity:1; z-index:1}\r\n .civ-hero .carousel-slide img{\r\n width:100%; height:100%;\r\n object-fit:cover;\r\n transform: scale(1.02);\r\n filter: saturate(1.05) contrast(1.02);\r\n }\r\n\r\n .civ-hero .carousel-slide.active img{\r\n animation: civImageIn .9s cubic-bezier(.22,1,.36,1);\r\n }\r\n @keyframes civImageIn{\r\n from{transform:scale(.96) translateX(-18px); opacity:.0}\r\n to{transform:scale(1.02) translateX(0); opacity:1}\r\n }\r\n\r\n \/* ===== Content side ===== *\/\r\n .civ-hero .content-wrapper{\r\n flex:1;\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:center;\r\n position:relative;\r\n min-width: 280px;\r\n }\r\n\r\n .civ-hero .kicker{\r\n display:inline-flex;\r\n gap:10px;\r\n align-items:center;\r\n font-weight:800;\r\n letter-spacing:.2px;\r\n color: rgba(255,255,255,.92);\r\n margin-bottom: 10px;\r\n }\r\n .civ-hero .kicker .chip{\r\n padding:6px 10px;\r\n border-radius: 999px;\r\n background: linear-gradient(135deg, rgba(139,30,45,.28), rgba(44,140,151,.28));\r\n border: 1px solid rgba(255,255,255,.18);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n font-size: 12px;\r\n font-weight:900;\r\n }\r\n\r\n .civ-hero .slide-content{\r\n display:none;\r\n animation: civTextIn .85s ease-out .12s both;\r\n }\r\n .civ-hero .slide-content.active{display:block}\r\n @keyframes civTextIn{\r\n from{opacity:0; transform: translateX(26px)}\r\n to{opacity:1; transform: translateX(0)}\r\n }\r\n\r\n .civ-hero .slide-content h1{\r\n font-size: clamp(30px, 4.1vw, 62px);\r\n line-height: 1.12;\r\n margin:0 0 12px 0;\r\n font-weight: 900;\r\n letter-spacing: -.5px;\r\n background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,.92) 40%, rgba(255,255,255,.78) 100%);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color: transparent;\r\n }\r\n\r\n .civ-hero .accent-line{\r\n width: 68px;\r\n height: 6px;\r\n border-radius: 999px;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky));\r\n box-shadow: 0 0 22px rgba(44,140,151,.30);\r\n margin: 18px 0 22px 0;\r\n animation: civLine .8s ease-out .25s both;\r\n }\r\n @keyframes civLine{from{width:0; opacity:.2} to{width:68px; opacity:1}}\r\n\r\n .civ-hero .slide-content p{\r\n font-size: clamp(14px, 1.25vw, 18px);\r\n color: rgba(255,255,255,.76);\r\n line-height: 1.9;\r\n margin: 0 0 26px 0;\r\n max-width: 560px;\r\n font-weight: 600;\r\n }\r\n\r\n \/* \u0632\u0631 \u0627\u062e\u062a\u064a\u0627\u0631\u064a (\u0625\u0630\u0627 \u062a\u062d\u0628 \u062a\u0636\u064a\u0641 \u0631\u0627\u0628\u0637 \u0645\u0633\u062a\u0642\u0628\u0644\u0627\u064b) *\/\r\n .civ-hero .cta{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n width: fit-content;\r\n padding: 12px 16px;\r\n border-radius: 16px;\r\n text-decoration:none;\r\n font-weight: 900;\r\n color:#fff;\r\n background: linear-gradient(135deg, var(--maroon), var(--sky));\r\n border:1px solid rgba(255,255,255,.22);\r\n box-shadow: 0 14px 36px rgba(2,6,23,.26);\r\n transition: transform .2s ease, filter .2s ease;\r\n }\r\n .civ-hero .cta:active{transform: scale(.98)}\r\n .civ-hero .cta:hover{filter: brightness(1.04)}\r\n .civ-hero .cta svg{width:18px;height:18px}\r\n\r\n \/* ===== Controls ===== *\/\r\n .civ-hero .carousel-controls{\r\n position:absolute;\r\n bottom: 26px;\r\n left: clamp(18px, 4vw, 70px);\r\n display:flex;\r\n gap:10px;\r\n z-index:5;\r\n padding:10px 12px;\r\n border-radius: 999px;\r\n background: rgba(255,255,255,.08);\r\n border:1px solid rgba(255,255,255,.14);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n }\r\n\r\n .civ-hero .dot{\r\n width:10px;height:10px;border-radius:50%;\r\n background: rgba(255,255,255,.35);\r\n border:none;\r\n cursor:pointer;\r\n transition: all .25s cubic-bezier(.22,1,.36,1);\r\n }\r\n .civ-hero .dot.active{\r\n width:32px;\r\n border-radius: 999px;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky));\r\n box-shadow: 0 0 22px rgba(44,140,151,.32);\r\n }\r\n .civ-hero .dot:hover{transform: scale(1.18)}\r\n\r\n .civ-hero .carousel-nav{\r\n position:absolute;\r\n top:50%;\r\n transform: translateY(-50%);\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 16px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n cursor:pointer;\r\n user-select:none;\r\n z-index:5;\r\n color: rgba(255,255,255,.86);\r\n background: rgba(255,255,255,.08);\r\n border: 1px solid rgba(255,255,255,.16);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n transition: transform .2s ease, background .2s ease, border-color .2s ease;\r\n font-size: 26px;\r\n line-height: 1;\r\n }\r\n .civ-hero .carousel-nav:hover{\r\n background: rgba(255,255,255,.12);\r\n border-color: rgba(44,140,151,.34);\r\n transform: translateY(-50%) scale(1.06);\r\n }\r\n .civ-hero .prev{left: 14px}\r\n .civ-hero .next{right: 14px}\r\n\r\n \/* Progress bar *\/\r\n .civ-hero .progress-bar{\r\n position:absolute;\r\n bottom:0; left:0;\r\n height:4px;\r\n width:0%;\r\n z-index:6;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky), var(--maroon2));\r\n box-shadow: 0 0 24px rgba(44,140,151,.26);\r\n }\r\n @keyframes progress{\r\n from{width:0%}\r\n to{width:100%}\r\n }\r\n\r\n \/* Glows *\/\r\n .civ-hero .glow{\r\n position:absolute;\r\n pointer-events:none;\r\n z-index:0;\r\n filter: blur(0px);\r\n opacity:.9;\r\n }\r\n .civ-hero .glow.g1{\r\n top: -60px;\r\n right: -60px;\r\n width: 360px; height: 360px;\r\n background: radial-gradient(circle, rgba(44,140,151,.22), transparent 60%);\r\n border-radius: 50%;\r\n }\r\n .civ-hero .glow.g2{\r\n bottom: -80px;\r\n left: -80px;\r\n width: 420px; height: 420px;\r\n background: radial-gradient(circle, rgba(139,30,45,.20), transparent 62%);\r\n border-radius: 50%;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width:1024px){\r\n .civ-hero .carousel-container{gap:28px}\r\n .civ-hero .carousel-image-wrapper{flex:0 0 44%}\r\n .civ-hero .image-frame{height: 440px}\r\n }\r\n @media (max-width:820px){\r\n .civ-hero .hero-carousel{align-items:flex-start}\r\n .civ-hero .carousel-container{\r\n flex-direction:column;\r\n padding: 26px 18px 70px;\r\n gap:18px;\r\n }\r\n .civ-hero .carousel-image-wrapper{width:100%}\r\n .civ-hero .image-frame{max-width: 640px; height: 320px}\r\n .civ-hero .carousel-controls{left: 18px}\r\n .civ-hero .carousel-nav{top: 160px}\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .civ-hero .carousel-slide,\r\n .civ-hero .slide-content{animation:none !important; transition:none !important}\r\n .civ-hero .carousel-slide.active img{animation:none !important}\r\n .civ-hero .progress-bar{animation:none !important}\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"civ-hero\" aria-label=\"Introduction to Civil Engineering Technologies Department\">\r\n <div class=\"hero-carousel\">\r\n <div class=\"glow g1\"><\/div>\r\n <div class=\"glow g2\"><\/div>\r\n\r\n <div class=\"carousel-container\">\r\n\r\n <div class=\"carousel-image-wrapper\">\r\n <div class=\"image-frame\">\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/bti.stu.edu.iq\/wp-content\/uploads\/2025\/11\/\u2014Pngtree\u2014constraction-site-civil-engeneer-silhouette_15721326-scaled.jpg\" alt=\"Project Management\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/bti.stu.edu.iq\/wp-content\/uploads\/2025\/11\/\u0633\u062a\u0648\u062f\u064a-\u0634\u0648\u0648\u062a-67ca1d129ee76.png\" alt=\"Building and Construction\">\r\n <\/div>\r\n <div class=\"carousel-slide active\">\r\n <img decoding=\"async\" src=\"https:\/\/bti.stu.edu.iq\/wp-content\/uploads\/2024\/10\/civil123.jpg\" alt=\"Civil Engineering\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"content-wrapper\">\r\n <div class=\"kicker\">\r\n <span class=\"chip\">Department of Civil Engineering Technologies<\/span>\r\n <span style=\"opacity:.85;font-weight:800\">Technical Technological Institute - Basra<\/span>\r\n <\/div>\r\n\r\n <div class=\"slide-content\">\r\n <h1>Project Management<\/h1>\r\n <div class=\"accent-line\"><\/div>\r\n <p>Developing essential skills for efficient planning, supervision, and financial monitoring of major engineering projects.<\/p>\r\n <\/div>\r\n\r\n <div class=\"slide-content\">\r\n <h1>Engineering Design<\/h1>\r\n <div class=\"accent-line\"><\/div>\r\n <p>Utilizing state-of-the-art software and advanced techniques to design civil projects with high precision and professionalism.<\/p>\r\n <\/div>\r\n\r\n <div class=\"slide-content active\">\r\n <h1>Department of Civil Engineering Technologies<\/h1>\r\n <div class=\"accent-line\"><\/div>\r\n <p>Shaping the future through modern methodologies and advanced technical skills in the field of civil engineering.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <span class=\"carousel-nav prev\" aria-label=\"Previous\" role=\"button\">\u2039<\/span>\r\n <span class=\"carousel-nav next\" aria-label=\"Next\" role=\"button\">\u203a<\/span>\r\n\r\n <div class=\"carousel-controls\" aria-label=\"Slide Navigation\">\r\n <button class=\"dot\" aria-label=\"Go to slide 1\"><\/button>\r\n <button class=\"dot\" aria-label=\"Go to slide 2\"><\/button>\r\n <button class=\"dot\" aria-label=\"Go to slide 3\"><\/button>\r\n <\/div>\r\n\r\n <div class=\"progress-bar\" id=\"progress\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n const wrapper = document.querySelector('.civ-hero');\r\n if(!wrapper) return;\r\n\r\n const imageSlides = wrapper.querySelectorAll('.carousel-image-wrapper .carousel-slide');\r\n const contentSlides = wrapper.querySelectorAll('.content-wrapper .slide-content');\r\n const dots = wrapper.querySelectorAll('.dot');\r\n const progress = wrapper.querySelector('#progress');\r\n const prevBtn = wrapper.querySelector('.prev');\r\n const nextBtn = wrapper.querySelector('.next');\r\n\r\n let current = 0;\r\n const total = imageSlides.length;\r\n let timer = null;\r\n const AUTO_MS = 5500;\r\n\r\n const initialIndexImg = Array.from(imageSlides).findIndex(s=>s.classList.contains('active'));\r\n const initialIndexTxt = Array.from(contentSlides).findIndex(s=>s.classList.contains('active'));\r\n current = (initialIndexImg >= 0 ? initialIndexImg : 0);\r\n\r\n if (initialIndexTxt !== current){\r\n contentSlides.forEach(s=>s.classList.remove('active'));\r\n contentSlides[current].classList.add('active');\r\n }\r\n\r\n function setDots(i){\r\n dots.forEach(d=>d.classList.remove('active'));\r\n if(dots[i]) dots[i].classList.add('active');\r\n }\r\n\r\n function show(i){\r\n imageSlides.forEach(s=>s.classList.remove('active'));\r\n contentSlides.forEach(s=>s.classList.remove('active'));\r\n imageSlides[i].classList.add('active');\r\n contentSlides[i].classList.add('active');\r\n setDots(i);\r\n resetProgress();\r\n }\r\n\r\n function change(delta){\r\n current = (current + delta + total) % total;\r\n show(current);\r\n }\r\n\r\n function goTo(i){\r\n current = i % total;\r\n show(current);\r\n }\r\n\r\n function resetProgress(){\r\n progress.style.width = '0%';\r\n progress.style.animation = 'none';\r\n void progress.offsetWidth;\r\n progress.style.animation = 'progress ' + (AUTO_MS\/1000) + 's linear';\r\n startAuto();\r\n }\r\n\r\n function startAuto(){\r\n clearInterval(timer);\r\n timer = setInterval(()=> change(1), AUTO_MS);\r\n }\r\n\r\n prevBtn.addEventListener('click', ()=> change(-1));\r\n nextBtn.addEventListener('click', ()=> change(1));\r\n dots.forEach((d,idx)=> d.addEventListener('click', ()=> goTo(idx)));\r\n\r\n document.addEventListener('keydown', e=>{\r\n if(e.key === 'ArrowLeft') change(-1);\r\n if(e.key === 'ArrowRight') change(1);\r\n });\r\n\r\n setDots(current);\r\n resetProgress();\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c0ccb01 e-flex e-con-boxed e-con e-parent\" data-id=\"c0ccb01\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0253cd elementor-widget elementor-widget-html\" data-id=\"f0253cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"vmgo-scope\" dir=\"ltr\">\r\n <style>\r\n :root {\r\n --primary-blue: #004680;\r\n --light-blue: #ADD8E6;\r\n --dark-red: #B22222;\r\n --light-grey: #F0F0F0;\r\n --background-dark: #1a1a2e;\r\n --text-light: #ffffff;\r\n --text-dark: #333333;\r\n }\r\n \r\n .vmgo-scope *{box-sizing:border-box}\r\n .vmgo-wrap{\r\n max-width:1200px;margin:0 auto;padding:40px 20px;\r\n font-family:'Cairo',system-ui,-apple-system,\"Segoe UI\",sans-serif;\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n border-radius: 25px;\r\n box-shadow: 0 20px 60px rgba(0, 70, 128, 0.15);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .vmgo-wrap::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(173, 216, 230, 0.1) 0%, transparent 70%);\r\n animation: float 15s ease-in-out infinite;\r\n pointer-events: none;\r\n }\r\n \r\n @keyframes float {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n 50% { transform: translate(-30px, -30px) rotate(180deg); }\r\n }\r\n \r\n .vmgo-header{\r\n text-align:center;margin-bottom:32px;position: relative;z-index: 2;\r\n }\r\n .vmgo-title{\r\n font-size:clamp(1.6rem,3vw,2.2rem);\r\n font-weight:900;letter-spacing:.3px;\r\n background:linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n -webkit-background-clip:text;background-clip:text;color:transparent;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\r\n margin-bottom: 8px;\r\n }\r\n .vmgo-sub{color:var(--primary-blue);font-size:1rem;margin-top:8px;font-weight:500}\r\n\r\n .vmgo-grid{\r\n display:grid;gap:24px;\r\n grid-template-columns:repeat(12,1fr);\r\n position: relative;z-index: 2;\r\n }\r\n \r\n \/* \u0631\u0624\u064a\u0640\u0629 + \u0631\u0633\u0627\u0644\u0629 \u0643\u0628\u0637\u0627\u0642\u0627\u062a *\/\r\n .vmgo-card{\r\n grid-column:span 6;\r\n background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,240,240,.95));\r\n border: 2px solid rgba(0, 70, 128, 0.15);\r\n border-radius: 20px;padding:28px;position:relative;overflow:hidden;\r\n transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n box-shadow:0 12px 40px rgba(0, 70, 128, 0.12);\r\n backdrop-filter: blur(10px);\r\n }\r\n \r\n .vmgo-card:hover{\r\n transform:translateY(-8px) scale(1.02);\r\n box-shadow:0 20px 50px rgba(0, 70, 128, 0.2);\r\n border-color: rgba(178, 34, 34, 0.3);\r\n }\r\n \r\n .vmgo-card::before{\r\n content:\"\";position:absolute;inset:0;pointer-events:none;\r\n background:radial-gradient(1200px 200px at 100% 0, rgba(173, 216, 230, 0.12), transparent 60%);\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .vmgo-card:hover::before {\r\n opacity: 0.8;\r\n }\r\n \r\n .vmgo-icon{\r\n width:52px;height:52px;border-radius:16px;margin-bottom:16px;\r\n display:flex;align-items:center;justify-content:center;\r\n background:linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n color:#fff;\r\n box-shadow:0 8px 25px rgba(0, 70, 128, 0.3);\r\n font-size: 1.5rem;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .vmgo-card:hover .vmgo-icon {\r\n transform: scale(1.1) rotate(5deg);\r\n box-shadow:0 12px 30px rgba(178, 34, 34, 0.4);\r\n }\r\n \r\n .vmgo-card h3{\r\n margin:8px 0 16px;\r\n font-size:1.3rem;\r\n font-weight:900;\r\n color:var(--primary-blue);\r\n background: linear-gradient(45deg, var(--primary-blue), var(--dark-red));\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n }\r\n \r\n .vmgo-card p{\r\n margin:0;\r\n color:var(--text-dark);\r\n line-height:1.9;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n }\r\n\r\n \/* \u0627\u0644\u0623\u0647\u062f\u0627\u0641 \u0643\u0642\u0627\u0626\u0645\u0629 *\/\r\n .vmgo-goals{\r\n grid-column:span 12;\r\n background:linear-gradient(145deg, rgba(0, 70, 128, 0.95), rgba(178, 34, 34, 0.85));\r\n color:#fff;\r\n border-radius: 20px;\r\n padding:32px;\r\n border: 2px solid rgba(173, 216, 230, 0.3);\r\n box-shadow:0 15px 45px rgba(0, 70, 128, 0.25);\r\n position: relative;\r\n overflow: hidden;\r\n backdrop-filter: blur(15px);\r\n }\r\n \r\n .vmgo-goals::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--light-blue), var(--dark-red), var(--light-blue));\r\n animation: shimmer 3s ease-in-out infinite;\r\n }\r\n \r\n @keyframes shimmer {\r\n 0%, 100% { opacity: 0.5; }\r\n 50% { opacity: 1; }\r\n }\r\n \r\n .vmgo-goals h3{\r\n margin:0 0 20px;\r\n font-size:1.3rem;\r\n font-weight:900;\r\n text-align: center;\r\n background: linear-gradient(45deg, #fff, var(--light-blue));\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n }\r\n \r\n .vmgo-list{\r\n list-style:none;\r\n display:grid;gap:16px;\r\n margin:0;padding:0;\r\n }\r\n \r\n .vmgo-item{\r\n display:grid;\r\n grid-template-columns:auto 1fr;\r\n gap:16px;\r\n align-items:start;\r\n background:rgba(173, 216, 230, 0.15);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n border-radius:16px;\r\n padding:18px 20px;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(5px);\r\n }\r\n \r\n .vmgo-item:hover {\r\n transform: translateX(8px);\r\n background: rgba(255, 255, 255, 0.2);\r\n border-color: rgba(173, 216, 230, 0.4);\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .vmgo-badge{\r\n width:36px;height:36px;border-radius:12px;\r\n background:linear-gradient(135deg, var(--dark-red), var(--primary-blue));\r\n display:flex;align-items:center;justify-content:center;\r\n font-weight:900;\r\n font-size: 1rem;\r\n box-shadow: 0 4px 15px rgba(178, 34, 34, 0.3);\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .vmgo-item:hover .vmgo-badge {\r\n transform: scale(1.1) rotate(5deg);\r\n box-shadow: 0 6px 20px rgba(178, 34, 34, 0.5);\r\n }\r\n \r\n .vmgo-text{\r\n line-height:1.9;\r\n font-weight: 500;\r\n font-size: 1rem;\r\n }\r\n\r\n @media (max-width:900px){\r\n .vmgo-card{grid-column:span 12}\r\n .vmgo-wrap{padding:30px 15px;}\r\n .vmgo-goals{padding:24px 20px;}\r\n }\r\n \r\n @media (max-width:600px){\r\n .vmgo-wrap{padding:20px 10px;margin:10px;}\r\n .vmgo-card{padding:20px;}\r\n .vmgo-item{padding:14px 16px;gap:12px;}\r\n .vmgo-badge{width:32px;height:32px;}\r\n }\r\n <\/style>\r\n\r\n <div class=\"vmgo-wrap\">\r\n <header class=\"vmgo-header\">\r\n <h2 class=\"vmgo-title\">Vision \u2022 Mission \u2022 Objectives<\/h2>\r\n <p class=\"vmgo-sub\">The core strategic pillars of our academic and technical framework.<\/p>\r\n <\/header>\r\n\r\n <div class=\"vmgo-grid\">\r\n <article class=\"vmgo-card\" aria-labelledby=\"v-title\">\r\n <div class=\"vmgo-icon\" aria-hidden=\"true\">\ud83d\udc41\ufe0f<\/div>\r\n <h3 id=\"v-title\">Vision<\/h3>\r\n <p>\r\n Providing engineering education and training to prepare mid-level technical personnel, supplying state institutions, the private sector, and joint ventures with practical cadres to elevate the service sector in the governorate. Additionally, enriching them with professional ethics lectures and communication skills to interact with all segments of society, as it is a profession that directly impacts the lives of all citizens.\r\n <\/p>\r\n <\/article>\r\n\r\n <article class=\"vmgo-card\" aria-labelledby=\"m-title\">\r\n <div class=\"vmgo-icon\" aria-hidden=\"true\">\ud83c\udfaf<\/div>\r\n <h3 id=\"m-title\">Mission<\/h3>\r\n <p>\r\n Advancing the specialization of building and construction in technical education to the highest quality standards by keeping pace with the ongoing developments in the utilization of modern construction materials, and by actively responding to the development of academic curricula to enhance the scientific rigor of technical education.\r\n <\/p>\r\n <\/article>\r\n\r\n <section class=\"vmgo-goals\" aria-labelledby=\"g-title\">\r\n <h3 id=\"g-title\">Objectives<\/h3>\r\n <ol class=\"vmgo-list\">\r\n <li class=\"vmgo-item\">\r\n <span class=\"vmgo-badge\">1<\/span>\r\n <span class=\"vmgo-text\">Preparing qualified technical personnel capable of executing various civil works components using modern construction materials while conducting laboratory and field tests.<\/span>\r\n <\/li>\r\n <li class=\"vmgo-item\">\r\n <span class=\"vmgo-badge\">2<\/span>\r\n <span class=\"vmgo-text\">Qualifying technical cadres to participate in the execution of engineering drawings, blueprints, and land surveys.<\/span>\r\n <\/li>\r\n <li class=\"vmgo-item\">\r\n <span class=\"vmgo-badge\">3<\/span>\r\n <span class=\"vmgo-text\">Training personnel in quantity surveying, estimation, and site measurements for civil engineering projects.<\/span>\r\n <\/li>\r\n <\/ol>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b4319f e-con-full e-flex e-con e-parent\" data-id=\"1b4319f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdcd935 elementor-widget elementor-widget-html\" data-id=\"bdcd935\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"bti-dept-hub\" aria-label=\"Department Services Hub\" dir=\"ltr\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* =========================\r\n Scoped Styles\r\n ========================== *\/\r\n .bti-dept-hub {\r\n --bti-teal: #2f8f9b;\r\n --bti-teal-2: #3aa7b4;\r\n --bti-maroon: #9b2b2f;\r\n --bti-maroon-2: #b23a40;\r\n --bti-ink: #0f172a;\r\n --bti-muted: #5b677a;\r\n --bti-surface: #ffffff;\r\n --bti-surface-2: #f6f8fb;\r\n --bti-border: rgba(47, 143, 155, .16);\r\n\r\n direction: ltr;\r\n font-family: \"Tajawal\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n box-sizing: border-box;\r\n width: 100%;\r\n margin: 0;\r\n padding: 20px 0;\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n min-height: 100vh;\r\n }\r\n\r\n .bti-dept-hub *,\r\n .bti-dept-hub *::before,\r\n .bti-dept-hub *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n .bti-dept-hub .bti-wrap {\r\n width: 100%;\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n padding: 0 30px;\r\n }\r\n\r\n \/* Header *\/\r\n .bti-dept-hub .bti-head {\r\n position: relative;\r\n background: linear-gradient(135deg, rgba(47, 143, 155, .10), rgba(155, 43, 47, .08));\r\n padding: 30px 40px;\r\n border-radius: 20px;\r\n box-shadow: 0 4px 20px rgba(2, 12, 27, .08);\r\n margin-bottom: 40px;\r\n overflow: hidden;\r\n text-align: center;\r\n }\r\n\r\n .bti-dept-hub .bti-head::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: -2px;\r\n background:\r\n radial-gradient(circle at 18% 25%, rgba(47, 143, 155, .22) 0%, transparent 45%),\r\n radial-gradient(circle at 82% 70%, rgba(155, 43, 47, .18) 0%, transparent 46%);\r\n pointer-events: none;\r\n border-radius: 20px;\r\n }\r\n\r\n .bti-dept-hub .bti-title-row {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n .bti-dept-hub .bti-title {\r\n margin: 0;\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n color: var(--bti-ink);\r\n letter-spacing: .2px;\r\n }\r\n\r\n .bti-dept-hub .bti-badge {\r\n flex-shrink: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(255, 255, 255, .72);\r\n border: 1px solid rgba(47, 143, 155, .20);\r\n border-radius: 999px;\r\n padding: 10px 12px;\r\n box-shadow: 0 10px 20px rgba(2, 12, 27, .06);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n }\r\n\r\n .bti-dept-hub .bti-dot {\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--bti-teal), var(--bti-maroon));\r\n box-shadow: 0 0 0 4px rgba(47, 143, 155, .12);\r\n }\r\n\r\n \/* Two Column Layout *\/\r\n .bti-dept-hub .bti-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n @media (min-width: 968px) {\r\n .bti-dept-hub .bti-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n\r\n \/* Section *\/\r\n .bti-dept-hub .bti-section {\r\n background: var(--bti-surface);\r\n border-radius: 20px;\r\n box-shadow: 0 4px 20px rgba(2, 12, 27, .08);\r\n overflow: hidden;\r\n border: 1px solid rgba(47, 143, 155, .1);\r\n }\r\n\r\n .bti-dept-hub .bti-sec-head {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 10px;\r\n padding: 24px 28px;\r\n background: linear-gradient(135deg, rgba(47, 143, 155, .08), rgba(155, 43, 47, .06));\r\n border-bottom: 2px solid rgba(47, 143, 155, .1);\r\n }\r\n\r\n .bti-dept-hub .bti-sec-title {\r\n margin: 0;\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n color: var(--bti-ink);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .bti-dept-hub .bti-sec-title i {\r\n color: var(--bti-teal);\r\n font-size: 1.3rem;\r\n }\r\n\r\n .bti-dept-hub .bti-sec-note {\r\n font-size: .9rem;\r\n color: var(--bti-muted);\r\n margin: 8px 0 0;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Tiles *\/\r\n .bti-dept-hub .bti-tiles {\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n background: var(--bti-surface);\r\n }\r\n\r\n .bti-dept-hub .bti-tile {\r\n background: linear-gradient(180deg, var(--bti-surface), var(--bti-surface-2));\r\n border-bottom: 1px solid rgba(15, 23, 42, .06);\r\n padding: 20px 28px;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n gap: 20px;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all .2s ease;\r\n }\r\n\r\n .bti-dept-hub .bti-tile:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .bti-dept-hub .bti-tile::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n left: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--bti-teal), var(--bti-maroon));\r\n opacity: 0;\r\n transition: opacity .2s ease;\r\n }\r\n\r\n .bti-dept-hub .bti-tile:hover {\r\n background: linear-gradient(180deg, rgba(47, 143, 155, .04), rgba(155, 43, 47, .02));\r\n transform: translateX(5px);\r\n }\r\n\r\n .bti-dept-hub .bti-tile:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .bti-dept-hub .bti-tile-left {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 16px;\r\n min-width: 0;\r\n flex: 1;\r\n }\r\n\r\n .bti-dept-hub .bti-ico {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n background: linear-gradient(135deg, rgba(47, 143, 155, .16), rgba(155, 43, 47, .12));\r\n border: 1px solid rgba(47, 143, 155, .18);\r\n transition: transform .2s ease;\r\n }\r\n\r\n .bti-dept-hub .bti-tile:hover .bti-ico {\r\n transform: scale(1.1) rotate(5deg);\r\n }\r\n\r\n .bti-dept-hub .bti-ico i {\r\n font-size: 1.2rem;\r\n color: var(--bti-teal);\r\n opacity: .95;\r\n }\r\n\r\n .bti-dept-hub .bti-txt {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .bti-dept-hub .bti-name {\r\n margin: 0;\r\n font-size: 1.05rem;\r\n font-weight: 800;\r\n color: var(--bti-ink);\r\n line-height: 1.4;\r\n }\r\n\r\n .bti-dept-hub .bti-desc {\r\n margin: 8px 0 0;\r\n font-size: .95rem;\r\n color: var(--bti-muted);\r\n line-height: 1.7;\r\n }\r\n\r\n .bti-dept-hub .bti-act {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding-top: 2px;\r\n }\r\n\r\n .bti-dept-hub .bti-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n font-weight: 800;\r\n font-size: .9rem;\r\n padding: 12px 16px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(47, 143, 155, .22);\r\n background: rgba(47, 143, 155, .06);\r\n color: var(--bti-ink);\r\n white-space: nowrap;\r\n line-height: 1.35;\r\n transition: all .2s ease;\r\n }\r\n\r\n .bti-dept-hub .bti-link i {\r\n color: var(--bti-teal);\r\n font-size: .85rem;\r\n }\r\n\r\n .bti-dept-hub .bti-link:hover {\r\n transform: translateY(-2px);\r\n border-color: rgba(47, 143, 155, .35);\r\n background: rgba(47, 143, 155, .12);\r\n box-shadow: 0 4px 12px rgba(47, 143, 155, .15);\r\n }\r\n\r\n .bti-dept-hub .bti-link[data-empty=\"true\"] {\r\n border-style: dashed;\r\n border-color: rgba(155, 43, 47, .35);\r\n background: rgba(155, 43, 47, .06);\r\n cursor: not-allowed;\r\n }\r\n\r\n .bti-dept-hub .bti-link[data-empty=\"true\"]:hover {\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .bti-dept-hub .bti-link[data-empty=\"true\"] .bti-hint {\r\n color: var(--bti-maroon);\r\n font-weight: 900;\r\n }\r\n\r\n .bti-dept-hub .bti-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n cursor: pointer;\r\n border: 0;\r\n padding: 12px 18px;\r\n border-radius: 12px;\r\n font-weight: 900;\r\n font-size: .9rem;\r\n background: linear-gradient(135deg, var(--bti-teal), var(--bti-maroon));\r\n color: #fff;\r\n box-shadow: 0 10px 18px rgba(47, 143, 155, .18);\r\n transition: all .2s ease;\r\n white-space: nowrap;\r\n font-family: \"Tajawal\", system-ui;\r\n line-height: 1.35;\r\n }\r\n\r\n .bti-dept-hub .bti-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 14px 24px rgba(155, 43, 47, .25);\r\n filter: saturate(1.06);\r\n }\r\n\r\n\r\n \/* Mobile Responsive *\/\r\n @media (max-width: 768px) {\r\n .bti-dept-hub .bti-wrap {\r\n padding: 0 20px;\r\n }\r\n\r\n .bti-dept-hub .bti-head {\r\n padding: 24px 20px;\r\n }\r\n\r\n .bti-dept-hub .bti-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .bti-dept-hub .bti-title-row {\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n\r\n .bti-dept-hub .bti-sec-head {\r\n padding: 20px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .bti-dept-hub .bti-sec-title {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .bti-dept-hub .bti-tile {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 15px;\r\n padding: 18px 20px;\r\n }\r\n\r\n .bti-dept-hub .bti-act {\r\n width: 100%;\r\n justify-content: flex-start;\r\n padding-top: 0;\r\n }\r\n\r\n .bti-dept-hub .bti-link,\r\n .bti-dept-hub .bti-btn {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n\r\n .bti-dept-hub .bti-link {\r\n white-space: normal;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .bti-dept-hub * {\r\n transition: none !important;\r\n }\r\n }\r\n\r\n <\/style>\r\n\r\n <div class=\"bti-wrap\">\r\n <div class=\"bti-head\">\r\n <div class=\"bti-title-row\">\r\n <h2 class=\"bti-title\">Department Services & Content Hub<\/h2>\r\n <div class=\"bti-badge\" aria-label=\"General Indicator\">\r\n <span class=\"bti-dot\" aria-hidden=\"true\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-grid\">\r\n <div class=\"bti-section\">\r\n <div class=\"bti-sec-head\">\r\n <div>\r\n <h3 class=\"bti-sec-title\">\r\n <i class=\"fa-solid fa-graduation-cap\" aria-hidden=\"true\"><\/i>\r\n Academic Services\r\n <\/h3>\r\n <p class=\"bti-sec-note\">Links related to the curriculum, lectures, and schedules.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tiles\">\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-book-open-reader\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Academic Description<\/p>\r\n <p class=\"bti-desc\">View courses, core competencies, and educational objectives<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"https:\/\/bti.stu.edu.iq\/%d8%a7%d9%84%d9%88%d8%b5%d9%81-%d8%a7%d9%84%d8%a7%d9%83%d8%a7%d8%af%d9%8a%d9%85%d9%8a-%d9%84%d9%82%d8%b3%d9%85-%d8%aa%d9%82%d9%86%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%af%d9%86%d9%8a\/\">\r\n View Details <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-list-check\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Course Descriptions<\/p>\r\n <p class=\"bti-desc\">Detailed course profiles (syllabi, learning outcomes, requirements)<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-chalkboard-user\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Lectures<\/p>\r\n <p class=\"bti-desc\">Educational resources and course materials provided by faculty members<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"https:\/\/bti.stu.edu.iq\/%d9%85%d8%ad%d8%a7%d8%b6%d8%b1%d8%a7%d8%aa-%d8%aa%d9%82%d9%86%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%af%d9%86%d9%8a%d8%a9\/\">\r\n View Lectures <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-calendar-days\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Lecture & Examination Schedules<\/p>\r\n <p class=\"bti-desc\">Timetables for academic lectures, assessments, and finals<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-briefcase\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Educational Portfolio<\/p>\r\n <p class=\"bti-desc\">Supporting materials and academic activities enhancing the learning process<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"https:\/\/bti.stu.edu.iq\/%d8%ad%d9%82%d9%8a%d8%a8%d8%a9-%d8%aa%d9%82%d9%86%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%af%d9%86%d9%8a%d8%a9\/\">\r\n View Portfolio <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-section\">\r\n <div class=\"bti-sec-head\">\r\n <div>\r\n <h3 class=\"bti-sec-title\">\r\n <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"><\/i>\r\n Department Content & Documentation\r\n <\/h3>\r\n <p class=\"bti-sec-note\">Research, laboratories, student projects, and organizational chart.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tiles\">\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-flask\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Scientific Research<\/p>\r\n <p class=\"bti-desc\">Structured research works dedicated to advancing academic knowledge<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"https:\/\/bti.stu.edu.iq\/%d8%a7%d9%84%d8%a8%d8%ad%d9%88%d8%ab-%d8%a7%d9%84%d8%b5%d9%84%d9%85%d9%8a%d8%a9-%d9%84%d9%82%d8%b3%d9%85-%d8%aa%d9%82%d9%86%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%af%d9%86%d9%8a\/\">\r\n View Research <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-microscope\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Laboratories<\/p>\r\n <p class=\"bti-desc\">An overview of specialized laboratory facilities and equipment<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-diagram-project\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Student Projects<\/p>\r\n <p class=\"bti-desc\">Showcase profiles and prototypes of undergraduate projects<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-clipboard-check\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Self-Assessment<\/p>\r\n <p class=\"bti-desc\">Self-evaluation documentation and academic quality assurance standards<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-sitemap\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Organizational Structure<\/p>\r\n <p class=\"bti-desc\">Department hierarchy, administrative positions, and academic committees<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <script>\r\n (function(){\r\n 'use strict';\r\n\r\n \/\/ Scope to this widget only\r\n var hub = document.querySelector('.bti-dept-hub');\r\n if(!hub) return;\r\n\r\n \/\/ Prevent empty links from jumping page\r\n var emptyLinks = hub.querySelectorAll('.bti-link[data-empty=\"true\"]');\r\n emptyLinks.forEach(function(a){\r\n a.addEventListener('click', function(e){ e.preventDefault(); });\r\n });\r\n })();\r\n <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-018341d e-con-full e-flex e-con e-parent\" data-id=\"018341d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7b9af8 elementor-widget elementor-widget-html\" data-id=\"a7b9af8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"custom-section bti-staff-modern\" dir=\"ltr\" lang=\"en\" aria-label=\"Academic Staff\">\r\n\r\n <style>\r\n .custom-section.bti-staff-modern{\r\n font-family: Tajawal, system-ui, -apple-system, \"Segoe UI\", sans-serif;\r\n --maroon:#8B1E2D;\r\n --maroon2:#A32536;\r\n --sky:#2C8C97;\r\n --sky2:#3AA6B1;\r\n --ink:#0f172a;\r\n --muted:#475569;\r\n --card: rgba(255,255,255,.78);\r\n --stroke: rgba(15,23,42,.10);\r\n --shadow: 0 16px 50px rgba(2,6,23,.10);\r\n --shadow2: 0 22px 70px rgba(2,6,23,.16);\r\n --radius:18px;\r\n --radius2:24px;\r\n --gap:14px;\r\n\r\n width:100%;\r\n box-sizing:border-box;\r\n padding:18px;\r\n margin:0;\r\n isolation:isolate;\r\n contain:content;\r\n }\r\n\r\n .custom-section.bti-staff-modern *{box-sizing:border-box}\r\n\r\n .custom-section.bti-staff-modern .staff-shell{\r\n max-width:1100px;\r\n margin:0 auto;\r\n padding:18px;\r\n border-radius:var(--radius2);\r\n background:\r\n radial-gradient(900px 300px at 20% -10%, rgba(44,140,151,.18) 0%, transparent 60%),\r\n radial-gradient(700px 280px at 90% 10%, rgba(139,30,45,.16) 0%, transparent 55%),\r\n linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58));\r\n border:1px solid rgba(255,255,255,.7);\r\n box-shadow: var(--shadow);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n position:relative;\r\n overflow:hidden;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-shell::before{\r\n content:\"\";\r\n position:absolute; inset:0;\r\n background:\r\n linear-gradient(135deg, rgba(139,30,45,.10), rgba(44,140,151,.10));\r\n pointer-events:none;\r\n opacity:.7;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-head{\r\n position:relative;\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:12px;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n padding:10px 10px 14px;\r\n border-bottom:1px solid rgba(15,23,42,.08);\r\n }\r\n\r\n .custom-section.bti-staff-modern .title-wrap{\r\n display:flex;\r\n flex-direction:column;\r\n gap:6px;\r\n min-width:240px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-title{\r\n margin:0;\r\n font-size:20px;\r\n font-weight:800;\r\n color:var(--ink);\r\n letter-spacing:.2px;\r\n display:flex;\r\n align-items:center;\r\n gap:10px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n padding:4px 10px;\r\n border-radius:999px;\r\n font-size:12px;\r\n font-weight:800;\r\n color:#fff;\r\n background: linear-gradient(135deg, var(--maroon), var(--sky));\r\n box-shadow: 0 10px 24px rgba(2,6,23,.10);\r\n transform: translateY(-1px);\r\n white-space:nowrap;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-sub{\r\n margin:0;\r\n font-size:13px;\r\n color:var(--muted);\r\n line-height:1.6;\r\n max-width:560px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .controls{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px;\r\n align-items:center;\r\n justify-content:flex-end;\r\n min-width:260px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .search{\r\n position:relative;\r\n flex: 1 1 240px;\r\n min-width:220px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .search input{\r\n width:100%;\r\n padding:12px 12px 12px 40px;\r\n border-radius:14px;\r\n border:1px solid rgba(15,23,42,.12);\r\n background: rgba(255,255,255,.70);\r\n outline:none;\r\n font-weight:600;\r\n color:var(--ink);\r\n transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;\r\n }\r\n\r\n .custom-section.bti-staff-modern .search input:focus{\r\n border-color: rgba(44,140,151,.55);\r\n box-shadow: 0 0 0 4px rgba(44,140,151,.14);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .custom-section.bti-staff-modern .search .icon{\r\n position:absolute;\r\n left:12px;\r\n top:50%;\r\n transform: translateY(-50%);\r\n width:18px;height:18px;\r\n opacity:.85;\r\n pointer-events:none;\r\n color: var(--sky);\r\n }\r\n\r\n .custom-section.bti-staff-modern .view-toggle{\r\n display:flex;\r\n gap:6px;\r\n padding:6px;\r\n border-radius:14px;\r\n background: rgba(255,255,255,.62);\r\n border:1px solid rgba(15,23,42,.10);\r\n box-shadow: 0 10px 24px rgba(2,6,23,.06);\r\n }\r\n\r\n .custom-section.bti-staff-modern .vt-btn{\r\n border:0;\r\n cursor:pointer;\r\n padding:10px 12px;\r\n border-radius:12px;\r\n background: transparent;\r\n color: var(--ink);\r\n font-weight:800;\r\n font-size:12px;\r\n transition: transform .18s ease, background .18s ease, color .18s ease;\r\n user-select:none;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .vt-btn[aria-pressed=\"true\"]{\r\n background: linear-gradient(135deg, rgba(139,30,45,.16), rgba(44,140,151,.16));\r\n color: var(--ink);\r\n }\r\n\r\n .custom-section.bti-staff-modern .vt-btn:active{transform: scale(.98)}\r\n\r\n .custom-section.bti-staff-modern .staff-body{\r\n position:relative;\r\n padding:14px 10px 10px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .grid{\r\n display:grid;\r\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n gap: var(--gap);\r\n }\r\n\r\n .custom-section.bti-staff-modern .card{\r\n position:relative;\r\n border-radius: var(--radius);\r\n padding:14px 14px 12px;\r\n background: var(--card);\r\n border: 1px solid var(--stroke);\r\n box-shadow: 0 10px 26px rgba(2,6,23,.06);\r\n overflow:hidden;\r\n transform: translateY(8px);\r\n opacity:0;\r\n animation: btiIn .55s ease forwards;\r\n }\r\n\r\n .custom-section.bti-staff-modern .card::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n height:3px;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky), var(--maroon2));\r\n opacity:.95;\r\n }\r\n\r\n .custom-section.bti-staff-modern .card::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:-60px auto auto -60px;\r\n width:140px;height:140px;\r\n background: radial-gradient(circle, rgba(44,140,151,.18), transparent 60%);\r\n transform: rotate(15deg);\r\n pointer-events:none;\r\n }\r\n\r\n .custom-section.bti-staff-modern .card:hover{\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow2);\r\n border-color: rgba(44,140,151,.25);\r\n transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;\r\n }\r\n\r\n .custom-section.bti-staff-modern .row{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:12px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .person{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n min-width:0;\r\n }\r\n\r\n .custom-section.bti-staff-modern .avatar{\r\n width:42px;height:42px;\r\n border-radius:14px;\r\n background: linear-gradient(135deg, rgba(139,30,45,.22), rgba(44,140,151,.22));\r\n border:1px solid rgba(15,23,42,.10);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n flex:0 0 auto;\r\n box-shadow: 0 10px 22px rgba(2,6,23,.06);\r\n }\r\n\r\n .custom-section.bti-staff-modern .avatar svg{\r\n width:20px;height:20px;\r\n color: var(--ink);\r\n opacity:.9;\r\n }\r\n\r\n .custom-section.bti-staff-modern .name{\r\n margin:0;\r\n font-size:14px;\r\n font-weight:900;\r\n color: var(--ink);\r\n line-height:1.35;\r\n white-space:nowrap;\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n max-width: 100%;\r\n }\r\n\r\n .custom-section.bti-staff-modern .meta{\r\n margin:4px 0 0;\r\n font-size:12px;\r\n color: var(--muted);\r\n }\r\n\r\n .custom-section.bti-staff-modern .go{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:10px 12px;\r\n border-radius:14px;\r\n text-decoration:none;\r\n font-weight:900;\r\n font-size:12px;\r\n color:#fff;\r\n background: linear-gradient(135deg, var(--maroon), var(--sky));\r\n box-shadow: 0 12px 26px rgba(2,6,23,.10);\r\n border:1px solid rgba(255,255,255,.35);\r\n white-space:nowrap;\r\n flex:0 0 auto;\r\n transition: transform .18s ease, filter .18s ease;\r\n }\r\n\r\n .custom-section.bti-staff-modern .go:hover{filter: brightness(1.03)}\r\n .custom-section.bti-staff-modern .go:active{transform: scale(.98)}\r\n\r\n .custom-section.bti-staff-modern .go svg{width:16px;height:16px}\r\n\r\n .custom-section.bti-staff-modern .list{\r\n display:none;\r\n flex-direction:column;\r\n gap:10px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .list .line{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:12px;\r\n padding:12px 12px;\r\n border-radius: 16px;\r\n background: rgba(255,255,255,.66);\r\n border: 1px solid rgba(15,23,42,.10);\r\n box-shadow: 0 10px 26px rgba(2,6,23,.05);\r\n transform: translateY(8px);\r\n opacity:0;\r\n animation: btiIn .55s ease forwards;\r\n }\r\n\r\n .custom-section.bti-staff-modern .list .line:hover{\r\n box-shadow: 0 20px 50px rgba(2,6,23,.10);\r\n border-color: rgba(139,30,45,.22);\r\n transform: translateY(-2px);\r\n transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;\r\n }\r\n\r\n .custom-section.bti-staff-modern .list .lname{\r\n font-weight:900;\r\n color: var(--ink);\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n white-space:nowrap;\r\n }\r\n\r\n .custom-section.bti-staff-modern .empty{\r\n display:none;\r\n text-align:center;\r\n padding:22px 12px;\r\n color: var(--muted);\r\n font-weight:800;\r\n }\r\n\r\n @keyframes btiIn{\r\n to{opacity:1; transform: translateY(0)}\r\n }\r\n\r\n .custom-section.bti-staff-modern .sr-only{\r\n position:absolute!important;\r\n width:1px;height:1px;\r\n padding:0;margin:-1px;\r\n overflow:hidden;clip:rect(0,0,0,0);\r\n white-space:nowrap;border:0;\r\n }\r\n\r\n @media (max-width:520px){\r\n .custom-section.bti-staff-modern{padding:12px}\r\n .custom-section.bti-staff-modern .staff-shell{padding:14px}\r\n .custom-section.bti-staff-modern .go{padding:10px 10px}\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .custom-section.bti-staff-modern .card,\r\n .custom-section.bti-staff-modern .list .line{animation:none; opacity:1; transform:none}\r\n .custom-section.bti-staff-modern .card:hover,\r\n .custom-section.bti-staff-modern .list .line:hover{transform:none}\r\n }\r\n <\/style>\r\n\r\n <div class=\"staff-shell\">\r\n <div class=\"staff-head\">\r\n <div class=\"title-wrap\">\r\n <h2 class=\"staff-title\">\r\n Academic Staff\r\n <span class=\"staff-badge\" id=\"btiCount\">8<\/span>\r\n <\/h2>\r\n <p class=\"staff-sub\">\r\n A comprehensive directory of the department's faculty members with direct access links to individual academic profiles, showcasing profiles, scientific credentials, qualifications, and academic experience.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"controls\" role=\"group\" aria-label=\"Display Controls\">\r\n <div class=\"search\">\r\n <span class=\"sr-only\" id=\"btiSearchLabel\">Search<\/span>\r\n <input id=\"btiSearch\" type=\"search\" aria-labelledby=\"btiSearchLabel\" placeholder=\"Search by name...\">\r\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M21 21l-4.35-4.35\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div class=\"view-toggle\" aria-label=\"Toggle View\">\r\n <button class=\"vt-btn\" type=\"button\" id=\"btiGridBtn\" aria-pressed=\"true\" title=\"Grid View\">\r\n <span>Grid<\/span>\r\n <\/button>\r\n <button class=\"vt-btn\" type=\"button\" id=\"btiListBtn\" aria-pressed=\"false\" title=\"List View\">\r\n <span>List<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"staff-body\">\r\n <div class=\"grid\" id=\"btiGrid\" aria-live=\"polite\">\r\n \r\n <article class=\"card\" data-name=\"Hanadi Abdul-Razzaq Lateef Ali\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Hanadi Abdul-Razzaq Lateef Ali<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=240\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Iyad Abdul-Khaliq Yahya Al-Youssef\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Iyad Abdul-Khaliq Yahya Al-Youssef<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=300\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Abeer Sabri Bishara Majbour\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Abeer Sabri Bishara Majbour<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=243\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Hussein Hamid Khudhair Ali Al-Suhail\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Hussein Hamid Khudhair Ali Al-Suhail<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=283\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Hayder Abdul-Hussein Oudah Al-Diwan\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Hayder Abdul-Hussein Oudah Al-Diwan<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=198\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Doaa Khalid Nasser Mazloum\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Doaa Khalid Nasser Mazloum<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=201\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Dr. Marwan Adel Hassan Awwad\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Dr. Marwan Adel Hassan Awwad<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=964\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Mohamed Khalil Ismail Mohamed\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Mohamed Khalil Ismail Mohamed<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=725\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <div class=\"list\" id=\"btiList\" aria-live=\"polite\">\r\n <div class=\"line\" data-name=\"Hanadi Abdul-Razzaq Lateef Ali\">\r\n <div class=\"lname\">Hanadi Abdul-Razzaq Lateef Ali<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=240\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Iyad Abdul-Khaliq Yahya Al-Youssef\">\r\n <div class=\"lname\">Iyad Abdul-Khaliq Yahya Al-Youssef<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=300\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Abeer Sabri Bishara Majbour\">\r\n <div class=\"lname\">Abeer Sabri Bishara Majbour<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=243\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Hussein Hamid Khudhair Ali Al-Suhail\">\r\n <div class=\"lname\">Hussein Hamid Khudhair Ali Al-Suhail<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=283\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Hayder Abdul-Hussein Oudah Al-Diwan\">\r\n <div class=\"lname\">Hayder Abdul-Hussein Oudah Al-Diwan<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=198\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Doaa Khalid Nasser Mazloum\">\r\n <div class=\"lname\">Doaa Khalid Nasser Mazloum<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=201\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Dr. Marwan Adel Hassan Awwad\">\r\n <div class=\"lname\">Dr. Marwan Adel Hassan Awwad<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=964\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Mohamed Khalil Ismail Mohamed\">\r\n <div class=\"lname\">Mohamed Khalil Ismail Mohamed<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=725\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"empty\" id=\"btiEmpty\">No matching names found.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n 'use strict';\r\n var root = document.querySelector('.custom-section.bti-staff-modern');\r\n if(!root) return;\r\n\r\n var search = root.querySelector('#btiSearch');\r\n var gridBtn = root.querySelector('#btiGridBtn');\r\n var listBtn = root.querySelector('#btiListBtn');\r\n var grid = root.querySelector('#btiGrid');\r\n var list = root.querySelector('#btiList');\r\n var empty = root.querySelector('#btiEmpty');\r\n var count = root.querySelector('#btiCount');\r\n\r\n function setView(view){\r\n var isGrid = view === 'grid';\r\n grid.style.display = isGrid ? 'grid' : 'none';\r\n list.style.display = isGrid ? 'none' : 'flex';\r\n gridBtn.setAttribute('aria-pressed', isGrid ? 'true' : 'false');\r\n listBtn.setAttribute('aria-pressed', isGrid ? 'false' : 'true');\r\n filter();\r\n }\r\n\r\n function norm(s){\r\n return (s || '')\r\n .toString()\r\n .trim()\r\n .toLowerCase()\r\n .replace(\/\\s+\/g,' ');\r\n }\r\n\r\n function getItems(container, sel){\r\n return Array.prototype.slice.call(container.querySelectorAll(sel));\r\n }\r\n\r\n function filter(){\r\n var q = norm(search.value);\r\n var gridItems = getItems(grid, '.card');\r\n var listItems = getItems(list, '.line');\r\n var visible = 0;\r\n\r\n function apply(items){\r\n items.forEach(function(it){\r\n var name = norm(it.getAttribute('data-name') || it.textContent);\r\n var ok = !q || name.indexOf(q) !== -1;\r\n it.style.display = ok ? '' : 'none';\r\n if(ok) visible++;\r\n });\r\n }\r\n\r\n visible = 0;\r\n if(grid.style.display !== 'none') apply(gridItems);\r\n else apply(listItems);\r\n\r\n empty.style.display = visible ? 'none' : 'block';\r\n count.textContent = String(visible);\r\n }\r\n\r\n gridBtn.addEventListener('click', function(){ setView('grid'); });\r\n listBtn.addEventListener('click', function(){ setView('list'); });\r\n search.addEventListener('input', filter);\r\n\r\n \/\/ init\r\n setView('grid');\r\n filter();\r\n })();\r\n <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0696381 e-con-full e-flex e-con e-parent\" data-id=\"0696381\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0da9104 elementor-widget elementor-widget-html\" data-id=\"0da9104\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div class=\"top-students-section\" dir=\"ltr\">\r\n\r\n<style>\r\n.top-students-section{\r\n --maroon:#6b0f1a;\r\n --maroon-light:#8a1c2b;\r\n --sky:#00b4d8;\r\n --sky-light:#48cae4;\r\n\r\n font-family:'Tajawal','Segoe UI',sans-serif;\r\n direction:ltr;\r\n padding:80px 20px;\r\n background:linear-gradient(135deg,#ffffff,#f5fafd);\r\n}\r\n\r\n\/* \u0627\u0644\u0639\u0646\u0648\u0627\u0646 *\/\r\n.top-students-section .main-title{\r\n text-align:center;\r\n margin-bottom:70px;\r\n}\r\n\r\n.top-students-section .main-title h1{\r\n font-size:40px;\r\n font-weight:900;\r\n background:linear-gradient(90deg,var(--maroon),var(--sky));\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n}\r\n\r\n\/* \u0627\u0644\u0633\u0646\u0629 *\/\r\n.top-students-section .year-block{\r\n margin-bottom:70px;\r\n}\r\n\r\n\/* \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0633\u0646\u0629 *\/\r\n.top-students-section .year-title{\r\n font-size:30px;\r\n font-weight:900;\r\n color:var(--maroon);\r\n margin-bottom:30px;\r\n border-left:7px solid var(--sky);\r\n padding-left:14px;\r\n}\r\n\r\n\/* \u0635\u0628\u0627\u062d\u064a \u0648\u0645\u0633\u0627\u0626\u064a *\/\r\n.top-students-section .study-title{\r\n font-size:20px;\r\n font-weight:800;\r\n color:white;\r\n background:linear-gradient(90deg,var(--maroon),var(--sky));\r\n padding:10px 20px;\r\n border-radius:40px;\r\n display:inline-block;\r\n margin-bottom:25px;\r\n}\r\n\r\n\/* \u0627\u0644\u0634\u0628\u0643\u0629 *\/\r\n.top-students-section .students-grid{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit,minmax(280px,1fr));\r\n gap:22px;\r\n margin-bottom:40px;\r\n}\r\n\r\n\/* \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n.top-students-section .student-card{\r\n background:white;\r\n border-radius:18px;\r\n padding:24px;\r\n border-top:5px solid var(--maroon);\r\n box-shadow:0 10px 25px rgba(0,0,0,0.08);\r\n transition:.4s;\r\n position:relative;\r\n}\r\n\r\n.top-students-section .student-card:hover{\r\n transform:translateY(-10px);\r\n box-shadow:0 20px 45px rgba(0,0,0,0.15);\r\n}\r\n\r\n\/* \u0631\u0642\u0645 *\/\r\n.top-students-section .rank{\r\n position:absolute;\r\n top:-16px;\r\n right:16px;\r\n width:42px;\r\n height:42px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg,var(--maroon),var(--sky));\r\n color:white;\r\n font-weight:900;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n}\r\n\r\n\/* \u0627\u0644\u0627\u0633\u0645 *\/\r\n.top-students-section .student-name{\r\n font-size:19px;\r\n font-weight:900;\r\n color:var(--maroon);\r\n margin-top:8px;\r\n margin-bottom:12px;\r\n}\r\n\r\n\/* \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 label *\/\r\n.top-students-section .project-label{\r\n font-size:13px;\r\n font-weight:800;\r\n color:var(--sky);\r\n margin-bottom:5px;\r\n}\r\n\r\n\/* \u0627\u0644\u0645\u0634\u0631\u0648\u0639 *\/\r\n.top-students-section .student-project{\r\n font-size:15px;\r\n color:#444;\r\n line-height:1.6;\r\n}\r\n\r\n\/* animation *\/\r\n.top-students-section .student-card{\r\n opacity:0;\r\n transform:translateY(30px);\r\n animation:fadeUp .7s forwards;\r\n}\r\n\r\n@keyframes fadeUp{\r\n to{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n}\r\n<\/style>\r\n\r\n<div class=\"main-title\">\r\n<h1>Top Students & Graduation Project Titles<\/h1>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"year-block\">\r\n\r\n<div class=\"year-title\">2024 \u2013 2025<\/div>\r\n\r\n<div class=\"study-title\">Evening Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Muslim Ashour Hammoud Hassan<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Defects in Reinforced Concrete Structures and Remedial Measures<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Hassan Jaber Abdul-Hussein Zaher<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Design and Construction of Pedestrian Bridges<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Ali Nasser Hamdan Mohsen<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Properties and Applications of Shotcrete in Structural Works<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"study-title\">Morning Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Zainab Emad Mohammed Jarrah<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">A Analytical Study of Seismic-Resistant Buildings subjected to Earthquake Loads<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Jaafar Mohammed Shareef Khalaf<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">A Study on Utilizing Organic Materials as an Alternative to Aggregates in Concrete Mixes<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Abdullah Qaisar Sami Salem<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">The Impact of Sea Spray and Marine Environment on Concrete Buildings<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"year-block\">\r\n\r\n<div class=\"year-title\">2023 \u2013 2024<\/div>\r\n\r\n<div class=\"study-title\">Morning Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Ali Hussein Hani Hussein<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Restoration and Rehabilitation Methods for Heritage Walls: Basra Shanasheel Houses<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Mustafa Abbas Makki Radhi<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">A Laboratory Investigation and Assessment of Expansive Soils in Four Selected Areas within Basra Governorate<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Redha Hani Mohammed Jaber<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Asphalt Pavement Distress: Classification of Defects and Maintenance Strategies<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"study-title\">Evening Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Abdul-Khaliq Abboud Hassan Hussein<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Geotechnical Site Investigations and Soil Testing<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Hussein Ali Ibrahim Jaseb<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Stages and Methodologies of Roof Waterproofing and Insulation for Buildings<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Khairallah Raad Hussein Dhumayd<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Enhancing Thermal Performance and Moisture Management in Modern Buildings<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"year-block\">\r\n\r\n<div class=\"year-title\">2022 \u2013 2023<\/div>\r\n\r\n<div class=\"study-title\">Morning Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Ali Ziad Tariq Abboud<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Structural Behavior Analysis of a Hospital Building under Wind Loads Using Autodesk Robot Software<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Abul-Fadhel Adel Rabia Laftah<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Structural Behavior Analysis of a Hospital Building under Wind Loads Using Autodesk Robot Software<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Rasha Taleb Fares<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Earthwork Quantity Surveying and Volume Estimation for Engineering Projects<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"study-title\">Evening Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Jaber Hussein Jaber Hussein<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">The Impact of Sea Spray and Marine Environment on Concrete Buildings<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Youssef Abdullah Ahmed Ali<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Mechanical Properties and Characteristics of Precast Concrete Structures<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Aliaa Khudhair Radhi Taher<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">An Evaluation Study on the Maintenance Strategies of Flexible (Asphalt) and Rigid (Concrete) Pavements<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bf1ac01 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bf1ac01\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a106579\" data-id=\"a106579\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6d162a1f elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"6d162a1f\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"stretch_section":"section-stretched"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1d2e589b\" data-id=\"1d2e589b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fa3c064 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fa3c064\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a3a66d4\" data-id=\"a3a66d4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1284bc7 elementor-widget elementor-widget-spacer\" data-id=\"1284bc7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-3bd895b e-con-full e-flex e-con e-parent\" data-id=\"3bd895b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49cf4fc elementor-widget elementor-widget-html\" data-id=\"49cf4fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"bti-platform-container\" dir=\"ltr\">\r\n <style>\r\n .bti-platform-container {\r\n --primary-blue: #004680;\r\n --light-blue: #00b4d8;\r\n --maroon: #8B1E2D;\r\n --text-dark: #1e293b;\r\n --text-muted: #64748b;\r\n --glass-bg: rgba(255, 255, 255, 0.85);\r\n --stroke: rgba(0, 70, 128, 0.12);\r\n --shadow: 0 20px 50px rgba(0, 70, 128, 0.08);\r\n --shadow-hover: 0 30px 60px rgba(0, 70, 128, 0.15);\r\n\r\n font-family: 'Tajawal', system-ui, -apple-system, sans-serif;\r\n padding: 40px 20px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n }\r\n\r\n .bti-platform-container * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .bti-platform-card {\r\n max-width: 850px;\r\n width: 100%;\r\n background: var(--glass-bg);\r\n border: 1px solid var(--stroke);\r\n border-top: 6px solid var(--primary-blue);\r\n border-radius: 24px;\r\n padding: 40px;\r\n box-shadow: var(--shadow);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n position: relative;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease;\r\n }\r\n\r\n \/* Decorative background glow inside card *\/\r\n .bti-platform-card::before {\r\n content: '';\r\n position: absolute;\r\n top: -150px;\r\n right: -150px;\r\n width: 300px;\r\n height: 300px;\r\n background: radial-gradient(circle, rgba(0, 180, 216, 0.15) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .bti-platform-card::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -150px;\r\n left: -150px;\r\n width: 300px;\r\n height: 300px;\r\n background: radial-gradient(circle, rgba(139, 30, 45, 0.1) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .bti-platform-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: var(--shadow-hover);\r\n border-color: rgba(0, 180, 216, 0.3);\r\n }\r\n\r\n \/* Header: Icon & Badge *\/\r\n .bti-platform-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .bti-platform-icon {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 16px;\r\n background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n color: #ffffff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 26px;\r\n box-shadow: 0 8px 20px rgba(0, 70, 128, 0.2);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .bti-platform-card:hover .bti-platform-icon {\r\n transform: scale(1.1) rotate(5deg);\r\n }\r\n\r\n .bti-platform-badge {\r\n font-size: 13px;\r\n font-weight: 800;\r\n color: var(--maroon);\r\n background: rgba(139, 30, 45, 0.08);\r\n padding: 6px 14px;\r\n border-radius: 999px;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* Title & Description *\/\r\n .bti-platform-title {\r\n font-size: clamp(22px, 3.5vw, 28px);\r\n font-weight: 900;\r\n color: var(--primary-blue);\r\n margin: 0 0 16px 0;\r\n line-height: 1.3;\r\n }\r\n\r\n .bti-platform-desc {\r\n font-size: clamp(15px, 1.8vw, 17px);\r\n color: var(--text-dark);\r\n line-height: 1.8;\r\n margin: 0 0 32px 0;\r\n font-weight: 500;\r\n text-align: justify;\r\n }\r\n\r\n \/* Call to Action Button *\/\r\n .bti-platform-action {\r\n display: flex;\r\n justify-content: flex-start;\r\n }\r\n\r\n .bti-platform-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 14px 28px;\r\n border-radius: 14px;\r\n background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n color: #ffffff;\r\n text-decoration: none;\r\n font-weight: 800;\r\n font-size: 16px;\r\n box-shadow: 0 10px 25px rgba(0, 70, 128, 0.2);\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .bti-platform-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: currentColor;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .bti-platform-btn:hover {\r\n box-shadow: 0 15px 30px rgba(0, 180, 216, 0.3);\r\n filter: brightness(1.05);\r\n }\r\n\r\n .bti-platform-btn:hover svg {\r\n transform: translateX(4px); \/* Moves right since direction is LTR *\/\r\n }\r\n\r\n .bti-platform-btn:active {\r\n transform: scale(0.98);\r\n }\r\n\r\n \/* Responsive for small screens *\/\r\n @media (max-width: 576px) {\r\n .bti-platform-card {\r\n padding: 24px;\r\n }\r\n .bti-platform-header {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 12px;\r\n }\r\n .bti-platform-btn {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n }\r\n <\/style>\r\n\r\n <div class=\"bti-platform-card\">\r\n <div class=\"bti-platform-header\">\r\n <div class=\"bti-platform-icon\" aria-hidden=\"true\">\ud83d\udcbb<\/div>\r\n <span class=\"bti-platform-badge\">Educational Digital Transformation<\/span>\r\n <\/div>\r\n\r\n <h2 class=\"bti-platform-title\">Integrated Platform for E-Lecture Delivery & Management<\/h2>\r\n \r\n <p class=\"bti-platform-desc\">\r\n In alignment with modern educational and technological advancements, this comprehensive digital platform is designed to support faculty members and students in delivering and engaging with e-lectures interactively and effectively. It provides all the essential tools for curriculum content creation, academic management, and achieving the highest possible educational outcomes.\r\n <\/p>\r\n\r\n <div class=\"bti-platform-action\">\r\n <a class=\"bti-platform-btn\" href=\"https:\/\/gadmission.stu.edu.iq\/OER\/table\/examples\/dep_table.php?id=0705&collage=%D8%A7%D9%84%D9%85%D8%B9%D9%87%D8%AF%20%D8%A7%D9%84%D8%AA%D9%82%D9%86%D9%8A%20\/%D8%A7%D9%84%D8%A8%D8%B5%D8%B1%D8%A9\" target=\"_blank\" rel=\"noopener\">\r\n <span>Access the Platform<\/span>\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M5 13h11.17l-4.59 4.59L13 19l8-8-8-8-1.41 1.41L16.17 11H5v2z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57331f3 elementor-widget elementor-widget-html\" data-id=\"57331f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"bti-outcomes-container\" dir=\"ltr\">\r\n <style>\r\n .bti-outcomes-container {\r\n --primary-blue: #004680;\r\n --light-blue: #00b4d8;\r\n --maroon: #8B1E2D;\r\n --text-dark: #1e293b;\r\n --text-muted: #64748b;\r\n --card-bg: #ffffff;\r\n --stroke: rgba(0, 70, 128, 0.08);\r\n --shadow: 0 15px 35px rgba(2, 6, 23, 0.05);\r\n --shadow-hover: 0 25px 50px rgba(0, 70, 128, 0.12);\r\n\r\n font-family: 'Tajawal', system-ui, -apple-system, sans-serif;\r\n padding: 60px 20px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);\r\n }\r\n\r\n .bti-outcomes-container * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .bti-outcomes-wrap {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Section Header *\/\r\n .bti-outcomes-header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .bti-outcomes-header h2 {\r\n font-size: clamp(28px, 4vw, 36px);\r\n font-weight: 900;\r\n color: var(--primary-blue);\r\n margin: 0 0 12px 0;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .bti-outcomes-header h2::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -8px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 60px;\r\n height: 4px;\r\n background: linear-gradient(90deg, var(--primary-blue), var(--light-blue));\r\n border-radius: 2px;\r\n }\r\n\r\n \/* Outcomes Grid *\/\r\n .bti-outcomes-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n gap: 30px;\r\n }\r\n\r\n \/* Learning Outcome Card *\/\r\n .bti-outcomes-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--stroke);\r\n border-radius: 20px;\r\n padding: 32px;\r\n box-shadow: var(--shadow);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .bti-outcomes-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 4px;\r\n height: 100%;\r\n background: var(--primary-blue);\r\n transition: width 0.3s ease;\r\n }\r\n\r\n \/* Side borders animation colors per card *\/\r\n .bti-outcomes-card:nth-child(1)::before { background: var(--primary-blue); }\r\n .bti-outcomes-card:nth-child(2)::before { background: var(--light-blue); }\r\n .bti-outcomes-card:nth-child(3)::before { background: var(--maroon); }\r\n\r\n .bti-outcomes-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: var(--shadow-hover);\r\n border-color: rgba(0, 180, 216, 0.2);\r\n }\r\n\r\n .bti-outcomes-card:hover::before {\r\n width: 8px;\r\n }\r\n\r\n \/* Icons Box *\/\r\n .bti-outcomes-icon-box {\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n background: #f1f5f9;\r\n color: var(--primary-blue);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .bti-outcomes-card:nth-child(1) .bti-outcomes-icon-box { color: var(--primary-blue); background: rgba(0, 70, 128, 0.06); }\r\n .bti-outcomes-card:nth-child(2) .bti-outcomes-icon-box { color: var(--light-blue); background: rgba(0, 180, 216, 0.06); }\r\n .bti-outcomes-card:nth-child(3) .bti-outcomes-icon-box { color: var(--maroon); background: rgba(139, 30, 45, 0.06); }\r\n\r\n .bti-outcomes-card:hover .bti-outcomes-icon-box {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Card Content Typography *\/\r\n .bti-outcomes-card h3 {\r\n font-size: 20px;\r\n font-weight: 800;\r\n color: var(--text-dark);\r\n margin: 0;\r\n line-height: 1.4;\r\n }\r\n\r\n .bti-outcomes-card p {\r\n font-size: 15px;\r\n color: var(--text-muted);\r\n line-height: 1.7;\r\n margin: 0;\r\n text-align: justify;\r\n font-weight: 500;\r\n }\r\n\r\n \/* Responsive Adjustments *\/\r\n @media (max-width: 576px) {\r\n .bti-outcomes-container {\r\n padding: 40px 16px;\r\n }\r\n .bti-outcomes-card {\r\n padding: 24px;\r\n }\r\n }\r\n <\/style>\r\n\r\n <div class=\"bti-outcomes-wrap\">\r\n <div class=\"bti-outcomes-header\">\r\n <h2>Department Learning Outcomes<\/h2>\r\n <\/div>\r\n\r\n <div class=\"bti-outcomes-grid\">\r\n <div class=\"bti-outcomes-card\">\r\n <div class=\"bti-outcomes-icon-box\" aria-hidden=\"true\">\ud83c\udfd7\ufe0f<\/div>\r\n <h3>Practical Education in Building & Construction<\/h3>\r\n <p>\r\n Advanced academic curricula integrated with comprehensive hands-on field training in civil engineering methodologies to ensure full workforce readiness and fulfillment of modern construction sector requirements.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bti-outcomes-card\">\r\n <div class=\"bti-outcomes-icon-box\" aria-hidden=\"true\">\ud83c\udfe2<\/div>\r\n <h3>Civil Technologies in Modern Buildings<\/h3>\r\n <p>\r\n Encompasses the study of smart structural systems, sustainable building materials, advanced insulation methodologies, and automated environmental controls, significantly optimizing energy efficiency, load-bearing capacity, and structural integrity while ensuring safety and comfort.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bti-outcomes-card\">\r\n <div class=\"bti-outcomes-icon-box\" aria-hidden=\"true\">\ud83c\udf31<\/div>\r\n <h3>Fostering Sustainable Engineering Projects<\/h3>\r\n <p>\r\n Instilling a profound understanding of sustainable design principles and leveraging cutting-edge resource management practices to reduce material waste, achieving infrastructure developments that responsibly serve community and environmental standards.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-93504bd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"93504bd\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d385d1b\" data-id=\"d385d1b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b7dd1be elementor-widget elementor-widget-spacer\" data-id=\"b7dd1be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a43f995 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a43f995\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0496a49\" data-id=\"0496a49\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-485f46a elementor-widget elementor-widget-spacer\" data-id=\"485f46a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-6576429 e-con-full e-flex e-con e-parent\" data-id=\"6576429\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fea1c39 elementor-widget elementor-widget-html\" data-id=\"fea1c39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div class=\"bti-email-container\" dir=\"ltr\">\r\n <style>\r\n .bti-email-container {\r\n --primary-blue: #004680;\r\n --light-blue: #00b4d8;\r\n --maroon: #8B1E2D;\r\n --text-dark: #1e293b;\r\n --text-muted: #64748b;\r\n --card-bg: #ffffff;\r\n --stroke: rgba(0, 70, 128, 0.08);\r\n --shadow: 0 15px 40px rgba(0, 70, 128, 0.06);\r\n\r\n font-family: 'Tajawal', system-ui, -apple-system, sans-serif;\r\n padding: 40px 20px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);\r\n }\r\n\r\n .bti-email-container * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .bti-email-card {\r\n max-width: 550px;\r\n width: 100%;\r\n background: var(--card-bg);\r\n border: 1px solid var(--stroke);\r\n border-radius: 20px;\r\n padding: 32px;\r\n text-align: center;\r\n box-shadow: var(--shadow);\r\n position: relative;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .bti-email-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 20px 50px rgba(0, 70, 128, 0.12);\r\n }\r\n\r\n .bti-email-icon {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: rgba(0, 70, 128, 0.06);\r\n color: var(--primary-blue);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n margin: 0 auto 20px auto;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .bti-email-card:hover .bti-email-icon {\r\n transform: scale(1.1);\r\n }\r\n\r\n .bti-email-title {\r\n font-size: 20px;\r\n font-weight: 800;\r\n color: var(--text-dark);\r\n margin: 0 0 8px 0;\r\n }\r\n\r\n .bti-email-subtitle {\r\n font-size: 14px;\r\n color: var(--text-muted);\r\n margin: 0 0 24px 0;\r\n font-weight: 500;\r\n }\r\n\r\n .bti-email-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 12px 24px;\r\n border-radius: 12px;\r\n background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n color: #ffffff;\r\n text-decoration: none;\r\n font-weight: 700;\r\n font-size: 15px;\r\n box-shadow: 0 8px 20px rgba(0, 70, 128, 0.15);\r\n transition: all 0.2s ease;\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n .bti-email-link:hover {\r\n box-shadow: 0 12px 25px rgba(0, 180, 216, 0.25);\r\n filter: brightness(1.05);\r\n }\r\n\r\n .bti-email-link:active {\r\n transform: scale(0.98);\r\n }\r\n\r\n .bti-email-link svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n }\r\n <\/style>\r\n\r\n <div class=\"bti-email-card\">\r\n <div class=\"bti-email-icon\" aria-hidden=\"true\">\u2709\ufe0f<\/div>\r\n <h3 class=\"bti-email-title\">Contact via Email<\/h3>\r\n <p class=\"bti-email-subtitle\">For academic inquiries and official communication<\/p>\r\n \r\n <a class=\"bti-email-link\" href=\"mailto:civil.bti@stu.edu.iq\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/>\r\n <\/svg>\r\n <span>civil.bti@stu.edu.iq<\/span>\r\n <\/a>\r\n <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Department of Civil Engineering Technologies Department of Civil Engineering Technologies Technical Technological Institute – Basra Project Management Developing essential skills for efficient planning, supervision, and financial monitoring of major engineering projects. Engineering Design Utilizing state-of-the-art software and advanced techniques to design civil projects with high […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-20688","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/pages\/20688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/comments?post=20688"}],"version-history":[{"count":28,"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/pages\/20688\/revisions"}],"predecessor-version":[{"id":38368,"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/pages\/20688\/revisions\/38368"}],"wp:attachment":[{"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/media?parent=20688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Department of Civil Engineering Technologies<\/title>\r\n\r\n <style>\r\n \/* ===== Scoped only inside .civ-hero ===== *\/\r\n .civ-hero *{box-sizing:border-box}\r\n .civ-hero{\r\n font-family: Tajawal, system-ui, -apple-system, \"Segoe UI\", sans-serif;\r\n --maroon:#8B1E2D;\r\n --maroon2:#A32536;\r\n --sky:#2C8C97;\r\n --sky2:#3AA6B1;\r\n\r\n --ink:#0b1220;\r\n --muted:#4b5563;\r\n\r\n --glass: rgba(255,255,255,.10);\r\n --stroke: rgba(255,255,255,.18);\r\n --shadow: 0 20px 80px rgba(2,6,23,.35);\r\n\r\n background:\r\n radial-gradient(900px 420px at 12% 18%, rgba(44,140,151,.26) 0%, transparent 55%),\r\n radial-gradient(820px 380px at 88% 26%, rgba(139,30,45,.26) 0%, transparent 55%),\r\n linear-gradient(135deg, #0b1220 0%, #0a0f1c 45%, #0b1220 100%);\r\n color:#fff;\r\n position:relative;\r\n isolation:isolate;\r\n overflow:hidden;\r\n }\r\n\r\n \/* \u062e\u0644\u0641\u064a\u0629 \u0632\u062e\u0631\u0641\u064a\u0629 \u062e\u0641\u064a\u0641\u0629 *\/\r\n .civ-hero::before{\r\n content:\"\";\r\n position:absolute; inset:-2px;\r\n background:\r\n linear-gradient(90deg, rgba(139,30,45,.12), rgba(44,140,151,.12)),\r\n radial-gradient(circle at 30% 30%, rgba(58,166,177,.12), transparent 55%),\r\n radial-gradient(circle at 70% 70%, rgba(163,37,54,.10), transparent 55%);\r\n filter: blur(0px);\r\n pointer-events:none;\r\n z-index:0;\r\n opacity:.9;\r\n }\r\n\r\n .civ-hero .hero-carousel{\r\n position:relative;\r\n width:100%;\r\n min-height: min(92vh, 880px);\r\n display:flex;\r\n align-items:center;\r\n overflow:hidden;\r\n z-index:1;\r\n }\r\n\r\n .civ-hero .carousel-container{\r\n width:100%;\r\n height:100%;\r\n display:flex;\r\n align-items:center;\r\n gap:44px;\r\n padding: clamp(22px, 3.5vw, 70px);\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* ===== Image side ===== *\/\r\n .civ-hero .carousel-image-wrapper{\r\n flex:0 0 46%;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n position:relative;\r\n }\r\n\r\n .civ-hero .image-frame{\r\n position:relative;\r\n width:100%;\r\n max-width: 560px;\r\n height: 520px;\r\n border-radius: 28px;\r\n overflow:hidden;\r\n background: rgba(255,255,255,.06);\r\n border: 1px solid rgba(255,255,255,.14);\r\n box-shadow: var(--shadow);\r\n transform: translateZ(0);\r\n }\r\n\r\n \/* \u0625\u0637\u0627\u0631 \u0644\u0627\u0645\u0639 *\/\r\n .civ-hero .image-frame::before{\r\n content:\"\";\r\n position:absolute; inset:0;\r\n background:\r\n linear-gradient(135deg, rgba(255,255,255,.14), transparent 35%),\r\n radial-gradient(circle at 20% 20%, rgba(44,140,151,.18), transparent 55%),\r\n radial-gradient(circle at 80% 80%, rgba(139,30,45,.16), transparent 55%);\r\n pointer-events:none;\r\n z-index:2;\r\n }\r\n\r\n \/* \u062e\u0637 \u062a\u0645\u064a\u064a\u0632 \u0645\u0627\u0631\u0648\u0646\u064a\/\u0633\u0645\u0627\u0626\u064a \u0623\u0639\u0644\u0649 \u0627\u0644\u0625\u0637\u0627\u0631 *\/\r\n .civ-hero .image-frame::after{\r\n content:\"\";\r\n position:absolute; top:0; left:0; right:0;\r\n height:4px;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky), var(--maroon2));\r\n z-index:3;\r\n opacity:.95;\r\n }\r\n\r\n .civ-hero .carousel-slide{\r\n position:absolute;\r\n inset:0;\r\n opacity:0;\r\n transition: opacity .65s ease;\r\n }\r\n .civ-hero .carousel-slide.active{opacity:1; z-index:1}\r\n .civ-hero .carousel-slide img{\r\n width:100%; height:100%;\r\n object-fit:cover;\r\n transform: scale(1.02);\r\n filter: saturate(1.05) contrast(1.02);\r\n }\r\n\r\n .civ-hero .carousel-slide.active img{\r\n animation: civImageIn .9s cubic-bezier(.22,1,.36,1);\r\n }\r\n @keyframes civImageIn{\r\n from{transform:scale(.96) translateX(-18px); opacity:.0}\r\n to{transform:scale(1.02) translateX(0); opacity:1}\r\n }\r\n\r\n \/* ===== Content side ===== *\/\r\n .civ-hero .content-wrapper{\r\n flex:1;\r\n display:flex;\r\n flex-direction:column;\r\n justify-content:center;\r\n position:relative;\r\n min-width: 280px;\r\n }\r\n\r\n .civ-hero .kicker{\r\n display:inline-flex;\r\n gap:10px;\r\n align-items:center;\r\n font-weight:800;\r\n letter-spacing:.2px;\r\n color: rgba(255,255,255,.92);\r\n margin-bottom: 10px;\r\n }\r\n .civ-hero .kicker .chip{\r\n padding:6px 10px;\r\n border-radius: 999px;\r\n background: linear-gradient(135deg, rgba(139,30,45,.28), rgba(44,140,151,.28));\r\n border: 1px solid rgba(255,255,255,.18);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n font-size: 12px;\r\n font-weight:900;\r\n }\r\n\r\n .civ-hero .slide-content{\r\n display:none;\r\n animation: civTextIn .85s ease-out .12s both;\r\n }\r\n .civ-hero .slide-content.active{display:block}\r\n @keyframes civTextIn{\r\n from{opacity:0; transform: translateX(26px)}\r\n to{opacity:1; transform: translateX(0)}\r\n }\r\n\r\n .civ-hero .slide-content h1{\r\n font-size: clamp(30px, 4.1vw, 62px);\r\n line-height: 1.12;\r\n margin:0 0 12px 0;\r\n font-weight: 900;\r\n letter-spacing: -.5px;\r\n background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,.92) 40%, rgba(255,255,255,.78) 100%);\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color: transparent;\r\n }\r\n\r\n .civ-hero .accent-line{\r\n width: 68px;\r\n height: 6px;\r\n border-radius: 999px;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky));\r\n box-shadow: 0 0 22px rgba(44,140,151,.30);\r\n margin: 18px 0 22px 0;\r\n animation: civLine .8s ease-out .25s both;\r\n }\r\n @keyframes civLine{from{width:0; opacity:.2} to{width:68px; opacity:1}}\r\n\r\n .civ-hero .slide-content p{\r\n font-size: clamp(14px, 1.25vw, 18px);\r\n color: rgba(255,255,255,.76);\r\n line-height: 1.9;\r\n margin: 0 0 26px 0;\r\n max-width: 560px;\r\n font-weight: 600;\r\n }\r\n\r\n \/* \u0632\u0631 \u0627\u062e\u062a\u064a\u0627\u0631\u064a (\u0625\u0630\u0627 \u062a\u062d\u0628 \u062a\u0636\u064a\u0641 \u0631\u0627\u0628\u0637 \u0645\u0633\u062a\u0642\u0628\u0644\u0627\u064b) *\/\r\n .civ-hero .cta{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:10px;\r\n width: fit-content;\r\n padding: 12px 16px;\r\n border-radius: 16px;\r\n text-decoration:none;\r\n font-weight: 900;\r\n color:#fff;\r\n background: linear-gradient(135deg, var(--maroon), var(--sky));\r\n border:1px solid rgba(255,255,255,.22);\r\n box-shadow: 0 14px 36px rgba(2,6,23,.26);\r\n transition: transform .2s ease, filter .2s ease;\r\n }\r\n .civ-hero .cta:active{transform: scale(.98)}\r\n .civ-hero .cta:hover{filter: brightness(1.04)}\r\n .civ-hero .cta svg{width:18px;height:18px}\r\n\r\n \/* ===== Controls ===== *\/\r\n .civ-hero .carousel-controls{\r\n position:absolute;\r\n bottom: 26px;\r\n left: clamp(18px, 4vw, 70px);\r\n display:flex;\r\n gap:10px;\r\n z-index:5;\r\n padding:10px 12px;\r\n border-radius: 999px;\r\n background: rgba(255,255,255,.08);\r\n border:1px solid rgba(255,255,255,.14);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n }\r\n\r\n .civ-hero .dot{\r\n width:10px;height:10px;border-radius:50%;\r\n background: rgba(255,255,255,.35);\r\n border:none;\r\n cursor:pointer;\r\n transition: all .25s cubic-bezier(.22,1,.36,1);\r\n }\r\n .civ-hero .dot.active{\r\n width:32px;\r\n border-radius: 999px;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky));\r\n box-shadow: 0 0 22px rgba(44,140,151,.32);\r\n }\r\n .civ-hero .dot:hover{transform: scale(1.18)}\r\n\r\n .civ-hero .carousel-nav{\r\n position:absolute;\r\n top:50%;\r\n transform: translateY(-50%);\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 16px;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n cursor:pointer;\r\n user-select:none;\r\n z-index:5;\r\n color: rgba(255,255,255,.86);\r\n background: rgba(255,255,255,.08);\r\n border: 1px solid rgba(255,255,255,.16);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n transition: transform .2s ease, background .2s ease, border-color .2s ease;\r\n font-size: 26px;\r\n line-height: 1;\r\n }\r\n .civ-hero .carousel-nav:hover{\r\n background: rgba(255,255,255,.12);\r\n border-color: rgba(44,140,151,.34);\r\n transform: translateY(-50%) scale(1.06);\r\n }\r\n .civ-hero .prev{left: 14px}\r\n .civ-hero .next{right: 14px}\r\n\r\n \/* Progress bar *\/\r\n .civ-hero .progress-bar{\r\n position:absolute;\r\n bottom:0; left:0;\r\n height:4px;\r\n width:0%;\r\n z-index:6;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky), var(--maroon2));\r\n box-shadow: 0 0 24px rgba(44,140,151,.26);\r\n }\r\n @keyframes progress{\r\n from{width:0%}\r\n to{width:100%}\r\n }\r\n\r\n \/* Glows *\/\r\n .civ-hero .glow{\r\n position:absolute;\r\n pointer-events:none;\r\n z-index:0;\r\n filter: blur(0px);\r\n opacity:.9;\r\n }\r\n .civ-hero .glow.g1{\r\n top: -60px;\r\n right: -60px;\r\n width: 360px; height: 360px;\r\n background: radial-gradient(circle, rgba(44,140,151,.22), transparent 60%);\r\n border-radius: 50%;\r\n }\r\n .civ-hero .glow.g2{\r\n bottom: -80px;\r\n left: -80px;\r\n width: 420px; height: 420px;\r\n background: radial-gradient(circle, rgba(139,30,45,.20), transparent 62%);\r\n border-radius: 50%;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width:1024px){\r\n .civ-hero .carousel-container{gap:28px}\r\n .civ-hero .carousel-image-wrapper{flex:0 0 44%}\r\n .civ-hero .image-frame{height: 440px}\r\n }\r\n @media (max-width:820px){\r\n .civ-hero .hero-carousel{align-items:flex-start}\r\n .civ-hero .carousel-container{\r\n flex-direction:column;\r\n padding: 26px 18px 70px;\r\n gap:18px;\r\n }\r\n .civ-hero .carousel-image-wrapper{width:100%}\r\n .civ-hero .image-frame{max-width: 640px; height: 320px}\r\n .civ-hero .carousel-controls{left: 18px}\r\n .civ-hero .carousel-nav{top: 160px}\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .civ-hero .carousel-slide,\r\n .civ-hero .slide-content{animation:none !important; transition:none !important}\r\n .civ-hero .carousel-slide.active img{animation:none !important}\r\n .civ-hero .progress-bar{animation:none !important}\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div class=\"civ-hero\" aria-label=\"Introduction to Civil Engineering Technologies Department\">\r\n <div class=\"hero-carousel\">\r\n <div class=\"glow g1\"><\/div>\r\n <div class=\"glow g2\"><\/div>\r\n\r\n <div class=\"carousel-container\">\r\n\r\n <div class=\"carousel-image-wrapper\">\r\n <div class=\"image-frame\">\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/bti.stu.edu.iq\/wp-content\/uploads\/2025\/11\/\u2014Pngtree\u2014constraction-site-civil-engeneer-silhouette_15721326-scaled.jpg\" alt=\"Project Management\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/bti.stu.edu.iq\/wp-content\/uploads\/2025\/11\/\u0633\u062a\u0648\u062f\u064a-\u0634\u0648\u0648\u062a-67ca1d129ee76.png\" alt=\"Building and Construction\">\r\n <\/div>\r\n <div class=\"carousel-slide active\">\r\n <img decoding=\"async\" src=\"https:\/\/bti.stu.edu.iq\/wp-content\/uploads\/2024\/10\/civil123.jpg\" alt=\"Civil Engineering\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"content-wrapper\">\r\n <div class=\"kicker\">\r\n <span class=\"chip\">Department of Civil Engineering Technologies<\/span>\r\n <span style=\"opacity:.85;font-weight:800\">Technical Technological Institute - Basra<\/span>\r\n <\/div>\r\n\r\n <div class=\"slide-content\">\r\n <h1>Project Management<\/h1>\r\n <div class=\"accent-line\"><\/div>\r\n <p>Developing essential skills for efficient planning, supervision, and financial monitoring of major engineering projects.<\/p>\r\n <\/div>\r\n\r\n <div class=\"slide-content\">\r\n <h1>Engineering Design<\/h1>\r\n <div class=\"accent-line\"><\/div>\r\n <p>Utilizing state-of-the-art software and advanced techniques to design civil projects with high precision and professionalism.<\/p>\r\n <\/div>\r\n\r\n <div class=\"slide-content active\">\r\n <h1>Department of Civil Engineering Technologies<\/h1>\r\n <div class=\"accent-line\"><\/div>\r\n <p>Shaping the future through modern methodologies and advanced technical skills in the field of civil engineering.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <span class=\"carousel-nav prev\" aria-label=\"Previous\" role=\"button\">\u2039<\/span>\r\n <span class=\"carousel-nav next\" aria-label=\"Next\" role=\"button\">\u203a<\/span>\r\n\r\n <div class=\"carousel-controls\" aria-label=\"Slide Navigation\">\r\n <button class=\"dot\" aria-label=\"Go to slide 1\"><\/button>\r\n <button class=\"dot\" aria-label=\"Go to slide 2\"><\/button>\r\n <button class=\"dot\" aria-label=\"Go to slide 3\"><\/button>\r\n <\/div>\r\n\r\n <div class=\"progress-bar\" id=\"progress\"><\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n const wrapper = document.querySelector('.civ-hero');\r\n if(!wrapper) return;\r\n\r\n const imageSlides = wrapper.querySelectorAll('.carousel-image-wrapper .carousel-slide');\r\n const contentSlides = wrapper.querySelectorAll('.content-wrapper .slide-content');\r\n const dots = wrapper.querySelectorAll('.dot');\r\n const progress = wrapper.querySelector('#progress');\r\n const prevBtn = wrapper.querySelector('.prev');\r\n const nextBtn = wrapper.querySelector('.next');\r\n\r\n let current = 0;\r\n const total = imageSlides.length;\r\n let timer = null;\r\n const AUTO_MS = 5500;\r\n\r\n const initialIndexImg = Array.from(imageSlides).findIndex(s=>s.classList.contains('active'));\r\n const initialIndexTxt = Array.from(contentSlides).findIndex(s=>s.classList.contains('active'));\r\n current = (initialIndexImg >= 0 ? initialIndexImg : 0);\r\n\r\n if (initialIndexTxt !== current){\r\n contentSlides.forEach(s=>s.classList.remove('active'));\r\n contentSlides[current].classList.add('active');\r\n }\r\n\r\n function setDots(i){\r\n dots.forEach(d=>d.classList.remove('active'));\r\n if(dots[i]) dots[i].classList.add('active');\r\n }\r\n\r\n function show(i){\r\n imageSlides.forEach(s=>s.classList.remove('active'));\r\n contentSlides.forEach(s=>s.classList.remove('active'));\r\n imageSlides[i].classList.add('active');\r\n contentSlides[i].classList.add('active');\r\n setDots(i);\r\n resetProgress();\r\n }\r\n\r\n function change(delta){\r\n current = (current + delta + total) % total;\r\n show(current);\r\n }\r\n\r\n function goTo(i){\r\n current = i % total;\r\n show(current);\r\n }\r\n\r\n function resetProgress(){\r\n progress.style.width = '0%';\r\n progress.style.animation = 'none';\r\n void progress.offsetWidth;\r\n progress.style.animation = 'progress ' + (AUTO_MS\/1000) + 's linear';\r\n startAuto();\r\n }\r\n\r\n function startAuto(){\r\n clearInterval(timer);\r\n timer = setInterval(()=> change(1), AUTO_MS);\r\n }\r\n\r\n prevBtn.addEventListener('click', ()=> change(-1));\r\n nextBtn.addEventListener('click', ()=> change(1));\r\n dots.forEach((d,idx)=> d.addEventListener('click', ()=> goTo(idx)));\r\n\r\n document.addEventListener('keydown', e=>{\r\n if(e.key === 'ArrowLeft') change(-1);\r\n if(e.key === 'ArrowRight') change(1);\r\n });\r\n\r\n setDots(current);\r\n resetProgress();\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c0ccb01 e-flex e-con-boxed e-con e-parent\" data-id=\"c0ccb01\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f0253cd elementor-widget elementor-widget-html\" data-id=\"f0253cd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"vmgo-scope\" dir=\"ltr\">\r\n <style>\r\n :root {\r\n --primary-blue: #004680;\r\n --light-blue: #ADD8E6;\r\n --dark-red: #B22222;\r\n --light-grey: #F0F0F0;\r\n --background-dark: #1a1a2e;\r\n --text-light: #ffffff;\r\n --text-dark: #333333;\r\n }\r\n \r\n .vmgo-scope *{box-sizing:border-box}\r\n .vmgo-wrap{\r\n max-width:1200px;margin:0 auto;padding:40px 20px;\r\n font-family:'Cairo',system-ui,-apple-system,\"Segoe UI\",sans-serif;\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n border-radius: 25px;\r\n box-shadow: 0 20px 60px rgba(0, 70, 128, 0.15);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .vmgo-wrap::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n right: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle, rgba(173, 216, 230, 0.1) 0%, transparent 70%);\r\n animation: float 15s ease-in-out infinite;\r\n pointer-events: none;\r\n }\r\n \r\n @keyframes float {\r\n 0%, 100% { transform: translate(0, 0) rotate(0deg); }\r\n 50% { transform: translate(-30px, -30px) rotate(180deg); }\r\n }\r\n \r\n .vmgo-header{\r\n text-align:center;margin-bottom:32px;position: relative;z-index: 2;\r\n }\r\n .vmgo-title{\r\n font-size:clamp(1.6rem,3vw,2.2rem);\r\n font-weight:900;letter-spacing:.3px;\r\n background:linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n -webkit-background-clip:text;background-clip:text;color:transparent;\r\n text-shadow: 2px 2px 4px rgba(0,0,0,0.1);\r\n margin-bottom: 8px;\r\n }\r\n .vmgo-sub{color:var(--primary-blue);font-size:1rem;margin-top:8px;font-weight:500}\r\n\r\n .vmgo-grid{\r\n display:grid;gap:24px;\r\n grid-template-columns:repeat(12,1fr);\r\n position: relative;z-index: 2;\r\n }\r\n \r\n \/* \u0631\u0624\u064a\u0640\u0629 + \u0631\u0633\u0627\u0644\u0629 \u0643\u0628\u0637\u0627\u0642\u0627\u062a *\/\r\n .vmgo-card{\r\n grid-column:span 6;\r\n background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(240,240,240,.95));\r\n border: 2px solid rgba(0, 70, 128, 0.15);\r\n border-radius: 20px;padding:28px;position:relative;overflow:hidden;\r\n transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n box-shadow:0 12px 40px rgba(0, 70, 128, 0.12);\r\n backdrop-filter: blur(10px);\r\n }\r\n \r\n .vmgo-card:hover{\r\n transform:translateY(-8px) scale(1.02);\r\n box-shadow:0 20px 50px rgba(0, 70, 128, 0.2);\r\n border-color: rgba(178, 34, 34, 0.3);\r\n }\r\n \r\n .vmgo-card::before{\r\n content:\"\";position:absolute;inset:0;pointer-events:none;\r\n background:radial-gradient(1200px 200px at 100% 0, rgba(173, 216, 230, 0.12), transparent 60%);\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .vmgo-card:hover::before {\r\n opacity: 0.8;\r\n }\r\n \r\n .vmgo-icon{\r\n width:52px;height:52px;border-radius:16px;margin-bottom:16px;\r\n display:flex;align-items:center;justify-content:center;\r\n background:linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n color:#fff;\r\n box-shadow:0 8px 25px rgba(0, 70, 128, 0.3);\r\n font-size: 1.5rem;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .vmgo-card:hover .vmgo-icon {\r\n transform: scale(1.1) rotate(5deg);\r\n box-shadow:0 12px 30px rgba(178, 34, 34, 0.4);\r\n }\r\n \r\n .vmgo-card h3{\r\n margin:8px 0 16px;\r\n font-size:1.3rem;\r\n font-weight:900;\r\n color:var(--primary-blue);\r\n background: linear-gradient(45deg, var(--primary-blue), var(--dark-red));\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n }\r\n \r\n .vmgo-card p{\r\n margin:0;\r\n color:var(--text-dark);\r\n line-height:1.9;\r\n font-size: 1rem;\r\n font-weight: 500;\r\n }\r\n\r\n \/* \u0627\u0644\u0623\u0647\u062f\u0627\u0641 \u0643\u0642\u0627\u0626\u0645\u0629 *\/\r\n .vmgo-goals{\r\n grid-column:span 12;\r\n background:linear-gradient(145deg, rgba(0, 70, 128, 0.95), rgba(178, 34, 34, 0.85));\r\n color:#fff;\r\n border-radius: 20px;\r\n padding:32px;\r\n border: 2px solid rgba(173, 216, 230, 0.3);\r\n box-shadow:0 15px 45px rgba(0, 70, 128, 0.25);\r\n position: relative;\r\n overflow: hidden;\r\n backdrop-filter: blur(15px);\r\n }\r\n \r\n .vmgo-goals::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--light-blue), var(--dark-red), var(--light-blue));\r\n animation: shimmer 3s ease-in-out infinite;\r\n }\r\n \r\n @keyframes shimmer {\r\n 0%, 100% { opacity: 0.5; }\r\n 50% { opacity: 1; }\r\n }\r\n \r\n .vmgo-goals h3{\r\n margin:0 0 20px;\r\n font-size:1.3rem;\r\n font-weight:900;\r\n text-align: center;\r\n background: linear-gradient(45deg, #fff, var(--light-blue));\r\n -webkit-background-clip:text;\r\n background-clip:text;\r\n color:transparent;\r\n }\r\n \r\n .vmgo-list{\r\n list-style:none;\r\n display:grid;gap:16px;\r\n margin:0;padding:0;\r\n }\r\n \r\n .vmgo-item{\r\n display:grid;\r\n grid-template-columns:auto 1fr;\r\n gap:16px;\r\n align-items:start;\r\n background:rgba(173, 216, 230, 0.15);\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n border-radius:16px;\r\n padding:18px 20px;\r\n transition: all 0.3s ease;\r\n backdrop-filter: blur(5px);\r\n }\r\n \r\n .vmgo-item:hover {\r\n transform: translateX(8px);\r\n background: rgba(255, 255, 255, 0.2);\r\n border-color: rgba(173, 216, 230, 0.4);\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n .vmgo-badge{\r\n width:36px;height:36px;border-radius:12px;\r\n background:linear-gradient(135deg, var(--dark-red), var(--primary-blue));\r\n display:flex;align-items:center;justify-content:center;\r\n font-weight:900;\r\n font-size: 1rem;\r\n box-shadow: 0 4px 15px rgba(178, 34, 34, 0.3);\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .vmgo-item:hover .vmgo-badge {\r\n transform: scale(1.1) rotate(5deg);\r\n box-shadow: 0 6px 20px rgba(178, 34, 34, 0.5);\r\n }\r\n \r\n .vmgo-text{\r\n line-height:1.9;\r\n font-weight: 500;\r\n font-size: 1rem;\r\n }\r\n\r\n @media (max-width:900px){\r\n .vmgo-card{grid-column:span 12}\r\n .vmgo-wrap{padding:30px 15px;}\r\n .vmgo-goals{padding:24px 20px;}\r\n }\r\n \r\n @media (max-width:600px){\r\n .vmgo-wrap{padding:20px 10px;margin:10px;}\r\n .vmgo-card{padding:20px;}\r\n .vmgo-item{padding:14px 16px;gap:12px;}\r\n .vmgo-badge{width:32px;height:32px;}\r\n }\r\n <\/style>\r\n\r\n <div class=\"vmgo-wrap\">\r\n <header class=\"vmgo-header\">\r\n <h2 class=\"vmgo-title\">Vision \u2022 Mission \u2022 Objectives<\/h2>\r\n <p class=\"vmgo-sub\">The core strategic pillars of our academic and technical framework.<\/p>\r\n <\/header>\r\n\r\n <div class=\"vmgo-grid\">\r\n <article class=\"vmgo-card\" aria-labelledby=\"v-title\">\r\n <div class=\"vmgo-icon\" aria-hidden=\"true\">\ud83d\udc41\ufe0f<\/div>\r\n <h3 id=\"v-title\">Vision<\/h3>\r\n <p>\r\n Providing engineering education and training to prepare mid-level technical personnel, supplying state institutions, the private sector, and joint ventures with practical cadres to elevate the service sector in the governorate. Additionally, enriching them with professional ethics lectures and communication skills to interact with all segments of society, as it is a profession that directly impacts the lives of all citizens.\r\n <\/p>\r\n <\/article>\r\n\r\n <article class=\"vmgo-card\" aria-labelledby=\"m-title\">\r\n <div class=\"vmgo-icon\" aria-hidden=\"true\">\ud83c\udfaf<\/div>\r\n <h3 id=\"m-title\">Mission<\/h3>\r\n <p>\r\n Advancing the specialization of building and construction in technical education to the highest quality standards by keeping pace with the ongoing developments in the utilization of modern construction materials, and by actively responding to the development of academic curricula to enhance the scientific rigor of technical education.\r\n <\/p>\r\n <\/article>\r\n\r\n <section class=\"vmgo-goals\" aria-labelledby=\"g-title\">\r\n <h3 id=\"g-title\">Objectives<\/h3>\r\n <ol class=\"vmgo-list\">\r\n <li class=\"vmgo-item\">\r\n <span class=\"vmgo-badge\">1<\/span>\r\n <span class=\"vmgo-text\">Preparing qualified technical personnel capable of executing various civil works components using modern construction materials while conducting laboratory and field tests.<\/span>\r\n <\/li>\r\n <li class=\"vmgo-item\">\r\n <span class=\"vmgo-badge\">2<\/span>\r\n <span class=\"vmgo-text\">Qualifying technical cadres to participate in the execution of engineering drawings, blueprints, and land surveys.<\/span>\r\n <\/li>\r\n <li class=\"vmgo-item\">\r\n <span class=\"vmgo-badge\">3<\/span>\r\n <span class=\"vmgo-text\">Training personnel in quantity surveying, estimation, and site measurements for civil engineering projects.<\/span>\r\n <\/li>\r\n <\/ol>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1b4319f e-con-full e-flex e-con e-parent\" data-id=\"1b4319f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bdcd935 elementor-widget elementor-widget-html\" data-id=\"bdcd935\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<section class=\"bti-dept-hub\" aria-label=\"Department Services Hub\" dir=\"ltr\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@400;500;700;800&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n\r\n <style>\r\n \/* =========================\r\n Scoped Styles\r\n ========================== *\/\r\n .bti-dept-hub {\r\n --bti-teal: #2f8f9b;\r\n --bti-teal-2: #3aa7b4;\r\n --bti-maroon: #9b2b2f;\r\n --bti-maroon-2: #b23a40;\r\n --bti-ink: #0f172a;\r\n --bti-muted: #5b677a;\r\n --bti-surface: #ffffff;\r\n --bti-surface-2: #f6f8fb;\r\n --bti-border: rgba(47, 143, 155, .16);\r\n\r\n direction: ltr;\r\n font-family: \"Tajawal\", system-ui, -apple-system, \"Segoe UI\", Roboto, Arial, sans-serif;\r\n box-sizing: border-box;\r\n width: 100%;\r\n margin: 0;\r\n padding: 20px 0;\r\n position: relative;\r\n overflow: hidden;\r\n isolation: isolate;\r\n background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);\r\n min-height: 100vh;\r\n }\r\n\r\n .bti-dept-hub *,\r\n .bti-dept-hub *::before,\r\n .bti-dept-hub *::after {\r\n box-sizing: border-box;\r\n }\r\n\r\n .bti-dept-hub .bti-wrap {\r\n width: 100%;\r\n max-width: 1600px;\r\n margin: 0 auto;\r\n padding: 0 30px;\r\n }\r\n\r\n \/* Header *\/\r\n .bti-dept-hub .bti-head {\r\n position: relative;\r\n background: linear-gradient(135deg, rgba(47, 143, 155, .10), rgba(155, 43, 47, .08));\r\n padding: 30px 40px;\r\n border-radius: 20px;\r\n box-shadow: 0 4px 20px rgba(2, 12, 27, .08);\r\n margin-bottom: 40px;\r\n overflow: hidden;\r\n text-align: center;\r\n }\r\n\r\n .bti-dept-hub .bti-head::before {\r\n content: \"\";\r\n position: absolute;\r\n inset: -2px;\r\n background:\r\n radial-gradient(circle at 18% 25%, rgba(47, 143, 155, .22) 0%, transparent 45%),\r\n radial-gradient(circle at 82% 70%, rgba(155, 43, 47, .18) 0%, transparent 46%);\r\n pointer-events: none;\r\n border-radius: 20px;\r\n }\r\n\r\n .bti-dept-hub .bti-title-row {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 15px;\r\n }\r\n\r\n .bti-dept-hub .bti-title {\r\n margin: 0;\r\n font-size: 2.5rem;\r\n font-weight: 900;\r\n color: var(--bti-ink);\r\n letter-spacing: .2px;\r\n }\r\n\r\n .bti-dept-hub .bti-badge {\r\n flex-shrink: 0;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(255, 255, 255, .72);\r\n border: 1px solid rgba(47, 143, 155, .20);\r\n border-radius: 999px;\r\n padding: 10px 12px;\r\n box-shadow: 0 10px 20px rgba(2, 12, 27, .06);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n }\r\n\r\n .bti-dept-hub .bti-dot {\r\n width: 9px;\r\n height: 9px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, var(--bti-teal), var(--bti-maroon));\r\n box-shadow: 0 0 0 4px rgba(47, 143, 155, .12);\r\n }\r\n\r\n \/* Two Column Layout *\/\r\n .bti-dept-hub .bti-grid {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 30px;\r\n }\r\n\r\n @media (min-width: 968px) {\r\n .bti-dept-hub .bti-grid {\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n }\r\n\r\n \/* Section *\/\r\n .bti-dept-hub .bti-section {\r\n background: var(--bti-surface);\r\n border-radius: 20px;\r\n box-shadow: 0 4px 20px rgba(2, 12, 27, .08);\r\n overflow: hidden;\r\n border: 1px solid rgba(47, 143, 155, .1);\r\n }\r\n\r\n .bti-dept-hub .bti-sec-head {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 10px;\r\n padding: 24px 28px;\r\n background: linear-gradient(135deg, rgba(47, 143, 155, .08), rgba(155, 43, 47, .06));\r\n border-bottom: 2px solid rgba(47, 143, 155, .1);\r\n }\r\n\r\n .bti-dept-hub .bti-sec-title {\r\n margin: 0;\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n color: var(--bti-ink);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .bti-dept-hub .bti-sec-title i {\r\n color: var(--bti-teal);\r\n font-size: 1.3rem;\r\n }\r\n\r\n .bti-dept-hub .bti-sec-note {\r\n font-size: .9rem;\r\n color: var(--bti-muted);\r\n margin: 8px 0 0;\r\n line-height: 1.6;\r\n }\r\n\r\n \/* Tiles *\/\r\n .bti-dept-hub .bti-tiles {\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 0;\r\n background: var(--bti-surface);\r\n }\r\n\r\n .bti-dept-hub .bti-tile {\r\n background: linear-gradient(180deg, var(--bti-surface), var(--bti-surface-2));\r\n border-bottom: 1px solid rgba(15, 23, 42, .06);\r\n padding: 20px 28px;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n gap: 20px;\r\n position: relative;\r\n overflow: hidden;\r\n transition: all .2s ease;\r\n }\r\n\r\n .bti-dept-hub .bti-tile:last-child {\r\n border-bottom: none;\r\n }\r\n\r\n .bti-dept-hub .bti-tile::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n left: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--bti-teal), var(--bti-maroon));\r\n opacity: 0;\r\n transition: opacity .2s ease;\r\n }\r\n\r\n .bti-dept-hub .bti-tile:hover {\r\n background: linear-gradient(180deg, rgba(47, 143, 155, .04), rgba(155, 43, 47, .02));\r\n transform: translateX(5px);\r\n }\r\n\r\n .bti-dept-hub .bti-tile:hover::before {\r\n opacity: 1;\r\n }\r\n\r\n .bti-dept-hub .bti-tile-left {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 16px;\r\n min-width: 0;\r\n flex: 1;\r\n }\r\n\r\n .bti-dept-hub .bti-ico {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-shrink: 0;\r\n background: linear-gradient(135deg, rgba(47, 143, 155, .16), rgba(155, 43, 47, .12));\r\n border: 1px solid rgba(47, 143, 155, .18);\r\n transition: transform .2s ease;\r\n }\r\n\r\n .bti-dept-hub .bti-tile:hover .bti-ico {\r\n transform: scale(1.1) rotate(5deg);\r\n }\r\n\r\n .bti-dept-hub .bti-ico i {\r\n font-size: 1.2rem;\r\n color: var(--bti-teal);\r\n opacity: .95;\r\n }\r\n\r\n .bti-dept-hub .bti-txt {\r\n flex: 1;\r\n min-width: 0;\r\n }\r\n\r\n .bti-dept-hub .bti-name {\r\n margin: 0;\r\n font-size: 1.05rem;\r\n font-weight: 800;\r\n color: var(--bti-ink);\r\n line-height: 1.4;\r\n }\r\n\r\n .bti-dept-hub .bti-desc {\r\n margin: 8px 0 0;\r\n font-size: .95rem;\r\n color: var(--bti-muted);\r\n line-height: 1.7;\r\n }\r\n\r\n .bti-dept-hub .bti-act {\r\n flex-shrink: 0;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding-top: 2px;\r\n }\r\n\r\n .bti-dept-hub .bti-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n text-decoration: none;\r\n font-weight: 800;\r\n font-size: .9rem;\r\n padding: 12px 16px;\r\n border-radius: 12px;\r\n border: 1px solid rgba(47, 143, 155, .22);\r\n background: rgba(47, 143, 155, .06);\r\n color: var(--bti-ink);\r\n white-space: nowrap;\r\n line-height: 1.35;\r\n transition: all .2s ease;\r\n }\r\n\r\n .bti-dept-hub .bti-link i {\r\n color: var(--bti-teal);\r\n font-size: .85rem;\r\n }\r\n\r\n .bti-dept-hub .bti-link:hover {\r\n transform: translateY(-2px);\r\n border-color: rgba(47, 143, 155, .35);\r\n background: rgba(47, 143, 155, .12);\r\n box-shadow: 0 4px 12px rgba(47, 143, 155, .15);\r\n }\r\n\r\n .bti-dept-hub .bti-link[data-empty=\"true\"] {\r\n border-style: dashed;\r\n border-color: rgba(155, 43, 47, .35);\r\n background: rgba(155, 43, 47, .06);\r\n cursor: not-allowed;\r\n }\r\n\r\n .bti-dept-hub .bti-link[data-empty=\"true\"]:hover {\r\n transform: none;\r\n box-shadow: none;\r\n }\r\n\r\n .bti-dept-hub .bti-link[data-empty=\"true\"] .bti-hint {\r\n color: var(--bti-maroon);\r\n font-weight: 900;\r\n }\r\n\r\n .bti-dept-hub .bti-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n cursor: pointer;\r\n border: 0;\r\n padding: 12px 18px;\r\n border-radius: 12px;\r\n font-weight: 900;\r\n font-size: .9rem;\r\n background: linear-gradient(135deg, var(--bti-teal), var(--bti-maroon));\r\n color: #fff;\r\n box-shadow: 0 10px 18px rgba(47, 143, 155, .18);\r\n transition: all .2s ease;\r\n white-space: nowrap;\r\n font-family: \"Tajawal\", system-ui;\r\n line-height: 1.35;\r\n }\r\n\r\n .bti-dept-hub .bti-btn:hover {\r\n transform: translateY(-2px);\r\n box-shadow: 0 14px 24px rgba(155, 43, 47, .25);\r\n filter: saturate(1.06);\r\n }\r\n\r\n\r\n \/* Mobile Responsive *\/\r\n @media (max-width: 768px) {\r\n .bti-dept-hub .bti-wrap {\r\n padding: 0 20px;\r\n }\r\n\r\n .bti-dept-hub .bti-head {\r\n padding: 24px 20px;\r\n }\r\n\r\n .bti-dept-hub .bti-title {\r\n font-size: 1.8rem;\r\n }\r\n\r\n .bti-dept-hub .bti-title-row {\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n\r\n .bti-dept-hub .bti-sec-head {\r\n padding: 20px;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .bti-dept-hub .bti-sec-title {\r\n font-size: 1.2rem;\r\n }\r\n\r\n .bti-dept-hub .bti-tile {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 15px;\r\n padding: 18px 20px;\r\n }\r\n\r\n .bti-dept-hub .bti-act {\r\n width: 100%;\r\n justify-content: flex-start;\r\n padding-top: 0;\r\n }\r\n\r\n .bti-dept-hub .bti-link,\r\n .bti-dept-hub .bti-btn {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n\r\n .bti-dept-hub .bti-link {\r\n white-space: normal;\r\n text-align: center;\r\n }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce) {\r\n .bti-dept-hub * {\r\n transition: none !important;\r\n }\r\n }\r\n\r\n <\/style>\r\n\r\n <div class=\"bti-wrap\">\r\n <div class=\"bti-head\">\r\n <div class=\"bti-title-row\">\r\n <h2 class=\"bti-title\">Department Services & Content Hub<\/h2>\r\n <div class=\"bti-badge\" aria-label=\"General Indicator\">\r\n <span class=\"bti-dot\" aria-hidden=\"true\"><\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-grid\">\r\n <div class=\"bti-section\">\r\n <div class=\"bti-sec-head\">\r\n <div>\r\n <h3 class=\"bti-sec-title\">\r\n <i class=\"fa-solid fa-graduation-cap\" aria-hidden=\"true\"><\/i>\r\n Academic Services\r\n <\/h3>\r\n <p class=\"bti-sec-note\">Links related to the curriculum, lectures, and schedules.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tiles\">\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-book-open-reader\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Academic Description<\/p>\r\n <p class=\"bti-desc\">View courses, core competencies, and educational objectives<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"https:\/\/bti.stu.edu.iq\/%d8%a7%d9%84%d9%88%d8%b5%d9%81-%d8%a7%d9%84%d8%a7%d9%83%d8%a7%d8%af%d9%8a%d9%85%d9%8a-%d9%84%d9%82%d8%b3%d9%85-%d8%aa%d9%82%d9%86%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%af%d9%86%d9%8a\/\">\r\n View Details <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-list-check\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Course Descriptions<\/p>\r\n <p class=\"bti-desc\">Detailed course profiles (syllabi, learning outcomes, requirements)<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-chalkboard-user\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Lectures<\/p>\r\n <p class=\"bti-desc\">Educational resources and course materials provided by faculty members<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"https:\/\/bti.stu.edu.iq\/%d9%85%d8%ad%d8%a7%d8%b6%d8%b1%d8%a7%d8%aa-%d8%aa%d9%82%d9%86%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%af%d9%86%d9%8a%d8%a9\/\">\r\n View Lectures <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-calendar-days\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Lecture & Examination Schedules<\/p>\r\n <p class=\"bti-desc\">Timetables for academic lectures, assessments, and finals<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-briefcase\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Educational Portfolio<\/p>\r\n <p class=\"bti-desc\">Supporting materials and academic activities enhancing the learning process<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"https:\/\/bti.stu.edu.iq\/%d8%ad%d9%82%d9%8a%d8%a8%d8%a9-%d8%aa%d9%82%d9%86%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%af%d9%86%d9%8a%d8%a9\/\">\r\n View Portfolio <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-section\">\r\n <div class=\"bti-sec-head\">\r\n <div>\r\n <h3 class=\"bti-sec-title\">\r\n <i class=\"fa-solid fa-layer-group\" aria-hidden=\"true\"><\/i>\r\n Department Content & Documentation\r\n <\/h3>\r\n <p class=\"bti-sec-note\">Research, laboratories, student projects, and organizational chart.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tiles\">\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-flask\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Scientific Research<\/p>\r\n <p class=\"bti-desc\">Structured research works dedicated to advancing academic knowledge<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"https:\/\/bti.stu.edu.iq\/%d8%a7%d9%84%d8%a8%d8%ad%d9%88%d8%ab-%d8%a7%d9%84%d8%b5%d9%84%d9%85%d9%8a%d8%a9-%d9%84%d9%82%d8%b3%d9%85-%d8%aa%d9%82%d9%86%d9%8a%d8%a7%d8%aa-%d8%a7%d9%84%d9%85%d8%af%d9%86%d9%8a\/\">\r\n View Research <i class=\"fa-solid fa-arrow-right\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-microscope\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Laboratories<\/p>\r\n <p class=\"bti-desc\">An overview of specialized laboratory facilities and equipment<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-diagram-project\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Student Projects<\/p>\r\n <p class=\"bti-desc\">Showcase profiles and prototypes of undergraduate projects<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-clipboard-check\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Self-Assessment<\/p>\r\n <p class=\"bti-desc\">Self-evaluation documentation and academic quality assurance standards<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"bti-tile\">\r\n <div class=\"bti-tile-left\">\r\n <div class=\"bti-ico\"><i class=\"fa-solid fa-sitemap\" aria-hidden=\"true\"><\/i><\/div>\r\n <div class=\"bti-txt\">\r\n <p class=\"bti-name\">Organizational Structure<\/p>\r\n <p class=\"bti-desc\">Department hierarchy, administrative positions, and academic committees<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"bti-act\">\r\n <a class=\"bti-link\" href=\"#\" data-empty=\"true\" title=\"Coming Soon\">\r\n <span class=\"bti-hint\">Coming Soon<\/span> <i class=\"fa-solid fa-link\" aria-hidden=\"true\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <script>\r\n (function(){\r\n 'use strict';\r\n\r\n \/\/ Scope to this widget only\r\n var hub = document.querySelector('.bti-dept-hub');\r\n if(!hub) return;\r\n\r\n \/\/ Prevent empty links from jumping page\r\n var emptyLinks = hub.querySelectorAll('.bti-link[data-empty=\"true\"]');\r\n emptyLinks.forEach(function(a){\r\n a.addEventListener('click', function(e){ e.preventDefault(); });\r\n });\r\n })();\r\n <\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-018341d e-con-full e-flex e-con e-parent\" data-id=\"018341d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a7b9af8 elementor-widget elementor-widget-html\" data-id=\"a7b9af8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"custom-section bti-staff-modern\" dir=\"ltr\" lang=\"en\" aria-label=\"Academic Staff\">\r\n\r\n <style>\r\n .custom-section.bti-staff-modern{\r\n font-family: Tajawal, system-ui, -apple-system, \"Segoe UI\", sans-serif;\r\n --maroon:#8B1E2D;\r\n --maroon2:#A32536;\r\n --sky:#2C8C97;\r\n --sky2:#3AA6B1;\r\n --ink:#0f172a;\r\n --muted:#475569;\r\n --card: rgba(255,255,255,.78);\r\n --stroke: rgba(15,23,42,.10);\r\n --shadow: 0 16px 50px rgba(2,6,23,.10);\r\n --shadow2: 0 22px 70px rgba(2,6,23,.16);\r\n --radius:18px;\r\n --radius2:24px;\r\n --gap:14px;\r\n\r\n width:100%;\r\n box-sizing:border-box;\r\n padding:18px;\r\n margin:0;\r\n isolation:isolate;\r\n contain:content;\r\n }\r\n\r\n .custom-section.bti-staff-modern *{box-sizing:border-box}\r\n\r\n .custom-section.bti-staff-modern .staff-shell{\r\n max-width:1100px;\r\n margin:0 auto;\r\n padding:18px;\r\n border-radius:var(--radius2);\r\n background:\r\n radial-gradient(900px 300px at 20% -10%, rgba(44,140,151,.18) 0%, transparent 60%),\r\n radial-gradient(700px 280px at 90% 10%, rgba(139,30,45,.16) 0%, transparent 55%),\r\n linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.58));\r\n border:1px solid rgba(255,255,255,.7);\r\n box-shadow: var(--shadow);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n position:relative;\r\n overflow:hidden;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-shell::before{\r\n content:\"\";\r\n position:absolute; inset:0;\r\n background:\r\n linear-gradient(135deg, rgba(139,30,45,.10), rgba(44,140,151,.10));\r\n pointer-events:none;\r\n opacity:.7;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-head{\r\n position:relative;\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:12px;\r\n align-items:flex-end;\r\n justify-content:space-between;\r\n padding:10px 10px 14px;\r\n border-bottom:1px solid rgba(15,23,42,.08);\r\n }\r\n\r\n .custom-section.bti-staff-modern .title-wrap{\r\n display:flex;\r\n flex-direction:column;\r\n gap:6px;\r\n min-width:240px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-title{\r\n margin:0;\r\n font-size:20px;\r\n font-weight:800;\r\n color:var(--ink);\r\n letter-spacing:.2px;\r\n display:flex;\r\n align-items:center;\r\n gap:10px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-badge{\r\n display:inline-flex;\r\n align-items:center;\r\n justify-content:center;\r\n padding:4px 10px;\r\n border-radius:999px;\r\n font-size:12px;\r\n font-weight:800;\r\n color:#fff;\r\n background: linear-gradient(135deg, var(--maroon), var(--sky));\r\n box-shadow: 0 10px 24px rgba(2,6,23,.10);\r\n transform: translateY(-1px);\r\n white-space:nowrap;\r\n }\r\n\r\n .custom-section.bti-staff-modern .staff-sub{\r\n margin:0;\r\n font-size:13px;\r\n color:var(--muted);\r\n line-height:1.6;\r\n max-width:560px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .controls{\r\n display:flex;\r\n flex-wrap:wrap;\r\n gap:10px;\r\n align-items:center;\r\n justify-content:flex-end;\r\n min-width:260px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .search{\r\n position:relative;\r\n flex: 1 1 240px;\r\n min-width:220px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .search input{\r\n width:100%;\r\n padding:12px 12px 12px 40px;\r\n border-radius:14px;\r\n border:1px solid rgba(15,23,42,.12);\r\n background: rgba(255,255,255,.70);\r\n outline:none;\r\n font-weight:600;\r\n color:var(--ink);\r\n transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;\r\n }\r\n\r\n .custom-section.bti-staff-modern .search input:focus{\r\n border-color: rgba(44,140,151,.55);\r\n box-shadow: 0 0 0 4px rgba(44,140,151,.14);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .custom-section.bti-staff-modern .search .icon{\r\n position:absolute;\r\n left:12px;\r\n top:50%;\r\n transform: translateY(-50%);\r\n width:18px;height:18px;\r\n opacity:.85;\r\n pointer-events:none;\r\n color: var(--sky);\r\n }\r\n\r\n .custom-section.bti-staff-modern .view-toggle{\r\n display:flex;\r\n gap:6px;\r\n padding:6px;\r\n border-radius:14px;\r\n background: rgba(255,255,255,.62);\r\n border:1px solid rgba(15,23,42,.10);\r\n box-shadow: 0 10px 24px rgba(2,6,23,.06);\r\n }\r\n\r\n .custom-section.bti-staff-modern .vt-btn{\r\n border:0;\r\n cursor:pointer;\r\n padding:10px 12px;\r\n border-radius:12px;\r\n background: transparent;\r\n color: var(--ink);\r\n font-weight:800;\r\n font-size:12px;\r\n transition: transform .18s ease, background .18s ease, color .18s ease;\r\n user-select:none;\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .vt-btn[aria-pressed=\"true\"]{\r\n background: linear-gradient(135deg, rgba(139,30,45,.16), rgba(44,140,151,.16));\r\n color: var(--ink);\r\n }\r\n\r\n .custom-section.bti-staff-modern .vt-btn:active{transform: scale(.98)}\r\n\r\n .custom-section.bti-staff-modern .staff-body{\r\n position:relative;\r\n padding:14px 10px 10px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .grid{\r\n display:grid;\r\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n gap: var(--gap);\r\n }\r\n\r\n .custom-section.bti-staff-modern .card{\r\n position:relative;\r\n border-radius: var(--radius);\r\n padding:14px 14px 12px;\r\n background: var(--card);\r\n border: 1px solid var(--stroke);\r\n box-shadow: 0 10px 26px rgba(2,6,23,.06);\r\n overflow:hidden;\r\n transform: translateY(8px);\r\n opacity:0;\r\n animation: btiIn .55s ease forwards;\r\n }\r\n\r\n .custom-section.bti-staff-modern .card::before{\r\n content:\"\";\r\n position:absolute;\r\n top:0; left:0; right:0;\r\n height:3px;\r\n background: linear-gradient(90deg, var(--maroon), var(--sky), var(--maroon2));\r\n opacity:.95;\r\n }\r\n\r\n .custom-section.bti-staff-modern .card::after{\r\n content:\"\";\r\n position:absolute;\r\n inset:-60px auto auto -60px;\r\n width:140px;height:140px;\r\n background: radial-gradient(circle, rgba(44,140,151,.18), transparent 60%);\r\n transform: rotate(15deg);\r\n pointer-events:none;\r\n }\r\n\r\n .custom-section.bti-staff-modern .card:hover{\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow2);\r\n border-color: rgba(44,140,151,.25);\r\n transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;\r\n }\r\n\r\n .custom-section.bti-staff-modern .row{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:12px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .person{\r\n display:flex;\r\n align-items:center;\r\n gap:12px;\r\n min-width:0;\r\n }\r\n\r\n .custom-section.bti-staff-modern .avatar{\r\n width:42px;height:42px;\r\n border-radius:14px;\r\n background: linear-gradient(135deg, rgba(139,30,45,.22), rgba(44,140,151,.22));\r\n border:1px solid rgba(15,23,42,.10);\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n flex:0 0 auto;\r\n box-shadow: 0 10px 22px rgba(2,6,23,.06);\r\n }\r\n\r\n .custom-section.bti-staff-modern .avatar svg{\r\n width:20px;height:20px;\r\n color: var(--ink);\r\n opacity:.9;\r\n }\r\n\r\n .custom-section.bti-staff-modern .name{\r\n margin:0;\r\n font-size:14px;\r\n font-weight:900;\r\n color: var(--ink);\r\n line-height:1.35;\r\n white-space:nowrap;\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n max-width: 100%;\r\n }\r\n\r\n .custom-section.bti-staff-modern .meta{\r\n margin:4px 0 0;\r\n font-size:12px;\r\n color: var(--muted);\r\n }\r\n\r\n .custom-section.bti-staff-modern .go{\r\n display:inline-flex;\r\n align-items:center;\r\n gap:8px;\r\n padding:10px 12px;\r\n border-radius:14px;\r\n text-decoration:none;\r\n font-weight:900;\r\n font-size:12px;\r\n color:#fff;\r\n background: linear-gradient(135deg, var(--maroon), var(--sky));\r\n box-shadow: 0 12px 26px rgba(2,6,23,.10);\r\n border:1px solid rgba(255,255,255,.35);\r\n white-space:nowrap;\r\n flex:0 0 auto;\r\n transition: transform .18s ease, filter .18s ease;\r\n }\r\n\r\n .custom-section.bti-staff-modern .go:hover{filter: brightness(1.03)}\r\n .custom-section.bti-staff-modern .go:active{transform: scale(.98)}\r\n\r\n .custom-section.bti-staff-modern .go svg{width:16px;height:16px}\r\n\r\n .custom-section.bti-staff-modern .list{\r\n display:none;\r\n flex-direction:column;\r\n gap:10px;\r\n }\r\n\r\n .custom-section.bti-staff-modern .list .line{\r\n display:flex;\r\n align-items:center;\r\n justify-content:space-between;\r\n gap:12px;\r\n padding:12px 12px;\r\n border-radius: 16px;\r\n background: rgba(255,255,255,.66);\r\n border: 1px solid rgba(15,23,42,.10);\r\n box-shadow: 0 10px 26px rgba(2,6,23,.05);\r\n transform: translateY(8px);\r\n opacity:0;\r\n animation: btiIn .55s ease forwards;\r\n }\r\n\r\n .custom-section.bti-staff-modern .list .line:hover{\r\n box-shadow: 0 20px 50px rgba(2,6,23,.10);\r\n border-color: rgba(139,30,45,.22);\r\n transform: translateY(-2px);\r\n transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;\r\n }\r\n\r\n .custom-section.bti-staff-modern .list .lname{\r\n font-weight:900;\r\n color: var(--ink);\r\n overflow:hidden;\r\n text-overflow:ellipsis;\r\n white-space:nowrap;\r\n }\r\n\r\n .custom-section.bti-staff-modern .empty{\r\n display:none;\r\n text-align:center;\r\n padding:22px 12px;\r\n color: var(--muted);\r\n font-weight:800;\r\n }\r\n\r\n @keyframes btiIn{\r\n to{opacity:1; transform: translateY(0)}\r\n }\r\n\r\n .custom-section.bti-staff-modern .sr-only{\r\n position:absolute!important;\r\n width:1px;height:1px;\r\n padding:0;margin:-1px;\r\n overflow:hidden;clip:rect(0,0,0,0);\r\n white-space:nowrap;border:0;\r\n }\r\n\r\n @media (max-width:520px){\r\n .custom-section.bti-staff-modern{padding:12px}\r\n .custom-section.bti-staff-modern .staff-shell{padding:14px}\r\n .custom-section.bti-staff-modern .go{padding:10px 10px}\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n .custom-section.bti-staff-modern .card,\r\n .custom-section.bti-staff-modern .list .line{animation:none; opacity:1; transform:none}\r\n .custom-section.bti-staff-modern .card:hover,\r\n .custom-section.bti-staff-modern .list .line:hover{transform:none}\r\n }\r\n <\/style>\r\n\r\n <div class=\"staff-shell\">\r\n <div class=\"staff-head\">\r\n <div class=\"title-wrap\">\r\n <h2 class=\"staff-title\">\r\n Academic Staff\r\n <span class=\"staff-badge\" id=\"btiCount\">8<\/span>\r\n <\/h2>\r\n <p class=\"staff-sub\">\r\n A comprehensive directory of the department's faculty members with direct access links to individual academic profiles, showcasing profiles, scientific credentials, qualifications, and academic experience.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"controls\" role=\"group\" aria-label=\"Display Controls\">\r\n <div class=\"search\">\r\n <span class=\"sr-only\" id=\"btiSearchLabel\">Search<\/span>\r\n <input id=\"btiSearch\" type=\"search\" aria-labelledby=\"btiSearchLabel\" placeholder=\"Search by name...\">\r\n <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M21 21l-4.35-4.35\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div class=\"view-toggle\" aria-label=\"Toggle View\">\r\n <button class=\"vt-btn\" type=\"button\" id=\"btiGridBtn\" aria-pressed=\"true\" title=\"Grid View\">\r\n <span>Grid<\/span>\r\n <\/button>\r\n <button class=\"vt-btn\" type=\"button\" id=\"btiListBtn\" aria-pressed=\"false\" title=\"List View\">\r\n <span>List<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"staff-body\">\r\n <div class=\"grid\" id=\"btiGrid\" aria-live=\"polite\">\r\n \r\n <article class=\"card\" data-name=\"Hanadi Abdul-Razzaq Lateef Ali\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Hanadi Abdul-Razzaq Lateef Ali<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=240\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Iyad Abdul-Khaliq Yahya Al-Youssef\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Iyad Abdul-Khaliq Yahya Al-Youssef<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=300\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Abeer Sabri Bishara Majbour\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Abeer Sabri Bishara Majbour<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=243\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Hussein Hamid Khudhair Ali Al-Suhail\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Hussein Hamid Khudhair Ali Al-Suhail<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=283\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Hayder Abdul-Hussein Oudah Al-Diwan\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Hayder Abdul-Hussein Oudah Al-Diwan<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=198\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Doaa Khalid Nasser Mazloum\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Doaa Khalid Nasser Mazloum<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=201\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Dr. Marwan Adel Hassan Awwad\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Dr. Marwan Adel Hassan Awwad<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=964\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-name=\"Mohamed Khalil Ismail Mohamed\">\r\n <div class=\"row\">\r\n <div class=\"person\">\r\n <div class=\"avatar\" aria-hidden=\"true\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\">\r\n <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <circle cx=\"12\" cy=\"7\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/>\r\n <\/svg>\r\n <\/div>\r\n <div style=\"min-width:0\">\r\n <p class=\"name\">Mohamed Khalil Ismail Mohamed<\/p>\r\n <p class=\"meta\">Faculty Profile<\/p>\r\n <\/div>\r\n <\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=725\" target=\"_blank\" rel=\"noopener\">\r\n Open\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\">\r\n <path d=\"M14 3h7v7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M10 14L21 3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <path d=\"M21 14v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n\r\n <div class=\"list\" id=\"btiList\" aria-live=\"polite\">\r\n <div class=\"line\" data-name=\"Hanadi Abdul-Razzaq Lateef Ali\">\r\n <div class=\"lname\">Hanadi Abdul-Razzaq Lateef Ali<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=240\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Iyad Abdul-Khaliq Yahya Al-Youssef\">\r\n <div class=\"lname\">Iyad Abdul-Khaliq Yahya Al-Youssef<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=300\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Abeer Sabri Bishara Majbour\">\r\n <div class=\"lname\">Abeer Sabri Bishara Majbour<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=243\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Hussein Hamid Khudhair Ali Al-Suhail\">\r\n <div class=\"lname\">Hussein Hamid Khudhair Ali Al-Suhail<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=283\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Hayder Abdul-Hussein Oudah Al-Diwan\">\r\n <div class=\"lname\">Hayder Abdul-Hussein Oudah Al-Diwan<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=198\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Doaa Khalid Nasser Mazloum\">\r\n <div class=\"lname\">Doaa Khalid Nasser Mazloum<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=201\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Dr. Marwan Adel Hassan Awwad\">\r\n <div class=\"lname\">Dr. Marwan Adel Hassan Awwad<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=964\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <div class=\"line\" data-name=\"Mohamed Khalil Ismail Mohamed\">\r\n <div class=\"lname\">Mohamed Khalil Ismail Mohamed<\/div>\r\n <a class=\"go\" href=\"https:\/\/gadmission.stu.edu.iq\/staff\/table\/examples\/teach\/profile.php?id=725\" target=\"_blank\" rel=\"noopener\">Open<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"empty\" id=\"btiEmpty\">No matching names found.<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n (function(){\r\n 'use strict';\r\n var root = document.querySelector('.custom-section.bti-staff-modern');\r\n if(!root) return;\r\n\r\n var search = root.querySelector('#btiSearch');\r\n var gridBtn = root.querySelector('#btiGridBtn');\r\n var listBtn = root.querySelector('#btiListBtn');\r\n var grid = root.querySelector('#btiGrid');\r\n var list = root.querySelector('#btiList');\r\n var empty = root.querySelector('#btiEmpty');\r\n var count = root.querySelector('#btiCount');\r\n\r\n function setView(view){\r\n var isGrid = view === 'grid';\r\n grid.style.display = isGrid ? 'grid' : 'none';\r\n list.style.display = isGrid ? 'none' : 'flex';\r\n gridBtn.setAttribute('aria-pressed', isGrid ? 'true' : 'false');\r\n listBtn.setAttribute('aria-pressed', isGrid ? 'false' : 'true');\r\n filter();\r\n }\r\n\r\n function norm(s){\r\n return (s || '')\r\n .toString()\r\n .trim()\r\n .toLowerCase()\r\n .replace(\/\\s+\/g,' ');\r\n }\r\n\r\n function getItems(container, sel){\r\n return Array.prototype.slice.call(container.querySelectorAll(sel));\r\n }\r\n\r\n function filter(){\r\n var q = norm(search.value);\r\n var gridItems = getItems(grid, '.card');\r\n var listItems = getItems(list, '.line');\r\n var visible = 0;\r\n\r\n function apply(items){\r\n items.forEach(function(it){\r\n var name = norm(it.getAttribute('data-name') || it.textContent);\r\n var ok = !q || name.indexOf(q) !== -1;\r\n it.style.display = ok ? '' : 'none';\r\n if(ok) visible++;\r\n });\r\n }\r\n\r\n visible = 0;\r\n if(grid.style.display !== 'none') apply(gridItems);\r\n else apply(listItems);\r\n\r\n empty.style.display = visible ? 'none' : 'block';\r\n count.textContent = String(visible);\r\n }\r\n\r\n gridBtn.addEventListener('click', function(){ setView('grid'); });\r\n listBtn.addEventListener('click', function(){ setView('list'); });\r\n search.addEventListener('input', filter);\r\n\r\n \/\/ init\r\n setView('grid');\r\n filter();\r\n })();\r\n <\/script>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-0696381 e-con-full e-flex e-con e-parent\" data-id=\"0696381\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0da9104 elementor-widget elementor-widget-html\" data-id=\"0da9104\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div class=\"top-students-section\" dir=\"ltr\">\r\n\r\n<style>\r\n.top-students-section{\r\n --maroon:#6b0f1a;\r\n --maroon-light:#8a1c2b;\r\n --sky:#00b4d8;\r\n --sky-light:#48cae4;\r\n\r\n font-family:'Tajawal','Segoe UI',sans-serif;\r\n direction:ltr;\r\n padding:80px 20px;\r\n background:linear-gradient(135deg,#ffffff,#f5fafd);\r\n}\r\n\r\n\/* \u0627\u0644\u0639\u0646\u0648\u0627\u0646 *\/\r\n.top-students-section .main-title{\r\n text-align:center;\r\n margin-bottom:70px;\r\n}\r\n\r\n.top-students-section .main-title h1{\r\n font-size:40px;\r\n font-weight:900;\r\n background:linear-gradient(90deg,var(--maroon),var(--sky));\r\n -webkit-background-clip:text;\r\n -webkit-text-fill-color:transparent;\r\n}\r\n\r\n\/* \u0627\u0644\u0633\u0646\u0629 *\/\r\n.top-students-section .year-block{\r\n margin-bottom:70px;\r\n}\r\n\r\n\/* \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0633\u0646\u0629 *\/\r\n.top-students-section .year-title{\r\n font-size:30px;\r\n font-weight:900;\r\n color:var(--maroon);\r\n margin-bottom:30px;\r\n border-left:7px solid var(--sky);\r\n padding-left:14px;\r\n}\r\n\r\n\/* \u0635\u0628\u0627\u062d\u064a \u0648\u0645\u0633\u0627\u0626\u064a *\/\r\n.top-students-section .study-title{\r\n font-size:20px;\r\n font-weight:800;\r\n color:white;\r\n background:linear-gradient(90deg,var(--maroon),var(--sky));\r\n padding:10px 20px;\r\n border-radius:40px;\r\n display:inline-block;\r\n margin-bottom:25px;\r\n}\r\n\r\n\/* \u0627\u0644\u0634\u0628\u0643\u0629 *\/\r\n.top-students-section .students-grid{\r\n display:grid;\r\n grid-template-columns:repeat(auto-fit,minmax(280px,1fr));\r\n gap:22px;\r\n margin-bottom:40px;\r\n}\r\n\r\n\/* \u0627\u0644\u0628\u0637\u0627\u0642\u0629 *\/\r\n.top-students-section .student-card{\r\n background:white;\r\n border-radius:18px;\r\n padding:24px;\r\n border-top:5px solid var(--maroon);\r\n box-shadow:0 10px 25px rgba(0,0,0,0.08);\r\n transition:.4s;\r\n position:relative;\r\n}\r\n\r\n.top-students-section .student-card:hover{\r\n transform:translateY(-10px);\r\n box-shadow:0 20px 45px rgba(0,0,0,0.15);\r\n}\r\n\r\n\/* \u0631\u0642\u0645 *\/\r\n.top-students-section .rank{\r\n position:absolute;\r\n top:-16px;\r\n right:16px;\r\n width:42px;\r\n height:42px;\r\n border-radius:50%;\r\n background:linear-gradient(135deg,var(--maroon),var(--sky));\r\n color:white;\r\n font-weight:900;\r\n display:flex;\r\n align-items:center;\r\n justify-content:center;\r\n}\r\n\r\n\/* \u0627\u0644\u0627\u0633\u0645 *\/\r\n.top-students-section .student-name{\r\n font-size:19px;\r\n font-weight:900;\r\n color:var(--maroon);\r\n margin-top:8px;\r\n margin-bottom:12px;\r\n}\r\n\r\n\/* \u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0645\u0634\u0631\u0648\u0639 label *\/\r\n.top-students-section .project-label{\r\n font-size:13px;\r\n font-weight:800;\r\n color:var(--sky);\r\n margin-bottom:5px;\r\n}\r\n\r\n\/* \u0627\u0644\u0645\u0634\u0631\u0648\u0639 *\/\r\n.top-students-section .student-project{\r\n font-size:15px;\r\n color:#444;\r\n line-height:1.6;\r\n}\r\n\r\n\/* animation *\/\r\n.top-students-section .student-card{\r\n opacity:0;\r\n transform:translateY(30px);\r\n animation:fadeUp .7s forwards;\r\n}\r\n\r\n@keyframes fadeUp{\r\n to{\r\n opacity:1;\r\n transform:translateY(0);\r\n }\r\n}\r\n<\/style>\r\n\r\n<div class=\"main-title\">\r\n<h1>Top Students & Graduation Project Titles<\/h1>\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"year-block\">\r\n\r\n<div class=\"year-title\">2024 \u2013 2025<\/div>\r\n\r\n<div class=\"study-title\">Evening Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Muslim Ashour Hammoud Hassan<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Defects in Reinforced Concrete Structures and Remedial Measures<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Hassan Jaber Abdul-Hussein Zaher<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Design and Construction of Pedestrian Bridges<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Ali Nasser Hamdan Mohsen<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Properties and Applications of Shotcrete in Structural Works<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"study-title\">Morning Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Zainab Emad Mohammed Jarrah<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">A Analytical Study of Seismic-Resistant Buildings subjected to Earthquake Loads<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Jaafar Mohammed Shareef Khalaf<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">A Study on Utilizing Organic Materials as an Alternative to Aggregates in Concrete Mixes<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Abdullah Qaisar Sami Salem<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">The Impact of Sea Spray and Marine Environment on Concrete Buildings<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"year-block\">\r\n\r\n<div class=\"year-title\">2023 \u2013 2024<\/div>\r\n\r\n<div class=\"study-title\">Morning Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Ali Hussein Hani Hussein<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Restoration and Rehabilitation Methods for Heritage Walls: Basra Shanasheel Houses<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Mustafa Abbas Makki Radhi<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">A Laboratory Investigation and Assessment of Expansive Soils in Four Selected Areas within Basra Governorate<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Redha Hani Mohammed Jaber<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Asphalt Pavement Distress: Classification of Defects and Maintenance Strategies<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"study-title\">Evening Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Abdul-Khaliq Abboud Hassan Hussein<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Geotechnical Site Investigations and Soil Testing<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Hussein Ali Ibrahim Jaseb<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Stages and Methodologies of Roof Waterproofing and Insulation for Buildings<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Khairallah Raad Hussein Dhumayd<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Enhancing Thermal Performance and Moisture Management in Modern Buildings<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div class=\"year-block\">\r\n\r\n<div class=\"year-title\">2022 \u2013 2023<\/div>\r\n\r\n<div class=\"study-title\">Morning Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Ali Ziad Tariq Abboud<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Structural Behavior Analysis of a Hospital Building under Wind Loads Using Autodesk Robot Software<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Abul-Fadhel Adel Rabia Laftah<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Structural Behavior Analysis of a Hospital Building under Wind Loads Using Autodesk Robot Software<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Rasha Taleb Fares<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Earthwork Quantity Surveying and Volume Estimation for Engineering Projects<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n\r\n<div class=\"study-title\">Evening Studies<\/div>\r\n<div class=\"students-grid\">\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">1<\/div>\r\n<div class=\"student-name\">Jaber Hussein Jaber Hussein<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">The Impact of Sea Spray and Marine Environment on Concrete Buildings<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">2<\/div>\r\n<div class=\"student-name\">Youssef Abdullah Ahmed Ali<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">Mechanical Properties and Characteristics of Precast Concrete Structures<\/div>\r\n<\/div>\r\n\r\n<div class=\"student-card\">\r\n<div class=\"rank\">3<\/div>\r\n<div class=\"student-name\">Aliaa Khudhair Radhi Taher<\/div>\r\n<div class=\"project-label\">Project Title:<\/div>\r\n<div class=\"student-project\">An Evaluation Study on the Maintenance Strategies of Flexible (Asphalt) and Rigid (Concrete) Pavements<\/div>\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bf1ac01 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"bf1ac01\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a106579\" data-id=\"a106579\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-6d162a1f elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"6d162a1f\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"stretch_section":"section-stretched"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-1d2e589b\" data-id=\"1d2e589b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-fa3c064 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"fa3c064\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-a3a66d4\" data-id=\"a3a66d4\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1284bc7 elementor-widget elementor-widget-spacer\" data-id=\"1284bc7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-3bd895b e-con-full e-flex e-con e-parent\" data-id=\"3bd895b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-49cf4fc elementor-widget elementor-widget-html\" data-id=\"49cf4fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"bti-platform-container\" dir=\"ltr\">\r\n <style>\r\n .bti-platform-container {\r\n --primary-blue: #004680;\r\n --light-blue: #00b4d8;\r\n --maroon: #8B1E2D;\r\n --text-dark: #1e293b;\r\n --text-muted: #64748b;\r\n --glass-bg: rgba(255, 255, 255, 0.85);\r\n --stroke: rgba(0, 70, 128, 0.12);\r\n --shadow: 0 20px 50px rgba(0, 70, 128, 0.08);\r\n --shadow-hover: 0 30px 60px rgba(0, 70, 128, 0.15);\r\n\r\n font-family: 'Tajawal', system-ui, -apple-system, sans-serif;\r\n padding: 40px 20px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);\r\n }\r\n\r\n .bti-platform-container * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .bti-platform-card {\r\n max-width: 850px;\r\n width: 100%;\r\n background: var(--glass-bg);\r\n border: 1px solid var(--stroke);\r\n border-top: 6px solid var(--primary-blue);\r\n border-radius: 24px;\r\n padding: 40px;\r\n box-shadow: var(--shadow);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n position: relative;\r\n overflow: hidden;\r\n transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease, border-color 0.4s ease;\r\n }\r\n\r\n \/* Decorative background glow inside card *\/\r\n .bti-platform-card::before {\r\n content: '';\r\n position: absolute;\r\n top: -150px;\r\n right: -150px;\r\n width: 300px;\r\n height: 300px;\r\n background: radial-gradient(circle, rgba(0, 180, 216, 0.15) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .bti-platform-card::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -150px;\r\n left: -150px;\r\n width: 300px;\r\n height: 300px;\r\n background: radial-gradient(circle, rgba(139, 30, 45, 0.1) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .bti-platform-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: var(--shadow-hover);\r\n border-color: rgba(0, 180, 216, 0.3);\r\n }\r\n\r\n \/* Header: Icon & Badge *\/\r\n .bti-platform-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n margin-bottom: 24px;\r\n }\r\n\r\n .bti-platform-icon {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 16px;\r\n background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n color: #ffffff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 26px;\r\n box-shadow: 0 8px 20px rgba(0, 70, 128, 0.2);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .bti-platform-card:hover .bti-platform-icon {\r\n transform: scale(1.1) rotate(5deg);\r\n }\r\n\r\n .bti-platform-badge {\r\n font-size: 13px;\r\n font-weight: 800;\r\n color: var(--maroon);\r\n background: rgba(139, 30, 45, 0.08);\r\n padding: 6px 14px;\r\n border-radius: 999px;\r\n letter-spacing: 0.3px;\r\n }\r\n\r\n \/* Title & Description *\/\r\n .bti-platform-title {\r\n font-size: clamp(22px, 3.5vw, 28px);\r\n font-weight: 900;\r\n color: var(--primary-blue);\r\n margin: 0 0 16px 0;\r\n line-height: 1.3;\r\n }\r\n\r\n .bti-platform-desc {\r\n font-size: clamp(15px, 1.8vw, 17px);\r\n color: var(--text-dark);\r\n line-height: 1.8;\r\n margin: 0 0 32px 0;\r\n font-weight: 500;\r\n text-align: justify;\r\n }\r\n\r\n \/* Call to Action Button *\/\r\n .bti-platform-action {\r\n display: flex;\r\n justify-content: flex-start;\r\n }\r\n\r\n .bti-platform-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n padding: 14px 28px;\r\n border-radius: 14px;\r\n background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n color: #ffffff;\r\n text-decoration: none;\r\n font-weight: 800;\r\n font-size: 16px;\r\n box-shadow: 0 10px 25px rgba(0, 70, 128, 0.2);\r\n transition: all 0.3s ease;\r\n border: 1px solid rgba(255, 255, 255, 0.2);\r\n }\r\n\r\n .bti-platform-btn svg {\r\n width: 20px;\r\n height: 20px;\r\n fill: currentColor;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .bti-platform-btn:hover {\r\n box-shadow: 0 15px 30px rgba(0, 180, 216, 0.3);\r\n filter: brightness(1.05);\r\n }\r\n\r\n .bti-platform-btn:hover svg {\r\n transform: translateX(4px); \/* Moves right since direction is LTR *\/\r\n }\r\n\r\n .bti-platform-btn:active {\r\n transform: scale(0.98);\r\n }\r\n\r\n \/* Responsive for small screens *\/\r\n @media (max-width: 576px) {\r\n .bti-platform-card {\r\n padding: 24px;\r\n }\r\n .bti-platform-header {\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 12px;\r\n }\r\n .bti-platform-btn {\r\n width: 100%;\r\n justify-content: center;\r\n }\r\n }\r\n <\/style>\r\n\r\n <div class=\"bti-platform-card\">\r\n <div class=\"bti-platform-header\">\r\n <div class=\"bti-platform-icon\" aria-hidden=\"true\">\ud83d\udcbb<\/div>\r\n <span class=\"bti-platform-badge\">Educational Digital Transformation<\/span>\r\n <\/div>\r\n\r\n <h2 class=\"bti-platform-title\">Integrated Platform for E-Lecture Delivery & Management<\/h2>\r\n \r\n <p class=\"bti-platform-desc\">\r\n In alignment with modern educational and technological advancements, this comprehensive digital platform is designed to support faculty members and students in delivering and engaging with e-lectures interactively and effectively. It provides all the essential tools for curriculum content creation, academic management, and achieving the highest possible educational outcomes.\r\n <\/p>\r\n\r\n <div class=\"bti-platform-action\">\r\n <a class=\"bti-platform-btn\" href=\"https:\/\/gadmission.stu.edu.iq\/OER\/table\/examples\/dep_table.php?id=0705&collage=%D8%A7%D9%84%D9%85%D8%B9%D9%87%D8%AF%20%D8%A7%D9%84%D8%AA%D9%82%D9%86%D9%8A%20\/%D8%A7%D9%84%D8%A8%D8%B5%D8%B1%D8%A9\" target=\"_blank\" rel=\"noopener\">\r\n <span>Access the Platform<\/span>\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M5 13h11.17l-4.59 4.59L13 19l8-8-8-8-1.41 1.41L16.17 11H5v2z\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57331f3 elementor-widget elementor-widget-html\" data-id=\"57331f3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"bti-outcomes-container\" dir=\"ltr\">\r\n <style>\r\n .bti-outcomes-container {\r\n --primary-blue: #004680;\r\n --light-blue: #00b4d8;\r\n --maroon: #8B1E2D;\r\n --text-dark: #1e293b;\r\n --text-muted: #64748b;\r\n --card-bg: #ffffff;\r\n --stroke: rgba(0, 70, 128, 0.08);\r\n --shadow: 0 15px 35px rgba(2, 6, 23, 0.05);\r\n --shadow-hover: 0 25px 50px rgba(0, 70, 128, 0.12);\r\n\r\n font-family: 'Tajawal', system-ui, -apple-system, sans-serif;\r\n padding: 60px 20px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);\r\n }\r\n\r\n .bti-outcomes-container * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .bti-outcomes-wrap {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Section Header *\/\r\n .bti-outcomes-header {\r\n text-align: center;\r\n margin-bottom: 50px;\r\n }\r\n\r\n .bti-outcomes-header h2 {\r\n font-size: clamp(28px, 4vw, 36px);\r\n font-weight: 900;\r\n color: var(--primary-blue);\r\n margin: 0 0 12px 0;\r\n position: relative;\r\n display: inline-block;\r\n }\r\n\r\n .bti-outcomes-header h2::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -8px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 60px;\r\n height: 4px;\r\n background: linear-gradient(90deg, var(--primary-blue), var(--light-blue));\r\n border-radius: 2px;\r\n }\r\n\r\n \/* Outcomes Grid *\/\r\n .bti-outcomes-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n gap: 30px;\r\n }\r\n\r\n \/* Learning Outcome Card *\/\r\n .bti-outcomes-card {\r\n background: var(--card-bg);\r\n border: 1px solid var(--stroke);\r\n border-radius: 20px;\r\n padding: 32px;\r\n box-shadow: var(--shadow);\r\n position: relative;\r\n overflow: hidden;\r\n transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .bti-outcomes-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 4px;\r\n height: 100%;\r\n background: var(--primary-blue);\r\n transition: width 0.3s ease;\r\n }\r\n\r\n \/* Side borders animation colors per card *\/\r\n .bti-outcomes-card:nth-child(1)::before { background: var(--primary-blue); }\r\n .bti-outcomes-card:nth-child(2)::before { background: var(--light-blue); }\r\n .bti-outcomes-card:nth-child(3)::before { background: var(--maroon); }\r\n\r\n .bti-outcomes-card:hover {\r\n transform: translateY(-6px);\r\n box-shadow: var(--shadow-hover);\r\n border-color: rgba(0, 180, 216, 0.2);\r\n }\r\n\r\n .bti-outcomes-card:hover::before {\r\n width: 8px;\r\n }\r\n\r\n \/* Icons Box *\/\r\n .bti-outcomes-icon-box {\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n background: #f1f5f9;\r\n color: var(--primary-blue);\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .bti-outcomes-card:nth-child(1) .bti-outcomes-icon-box { color: var(--primary-blue); background: rgba(0, 70, 128, 0.06); }\r\n .bti-outcomes-card:nth-child(2) .bti-outcomes-icon-box { color: var(--light-blue); background: rgba(0, 180, 216, 0.06); }\r\n .bti-outcomes-card:nth-child(3) .bti-outcomes-icon-box { color: var(--maroon); background: rgba(139, 30, 45, 0.06); }\r\n\r\n .bti-outcomes-card:hover .bti-outcomes-icon-box {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* Card Content Typography *\/\r\n .bti-outcomes-card h3 {\r\n font-size: 20px;\r\n font-weight: 800;\r\n color: var(--text-dark);\r\n margin: 0;\r\n line-height: 1.4;\r\n }\r\n\r\n .bti-outcomes-card p {\r\n font-size: 15px;\r\n color: var(--text-muted);\r\n line-height: 1.7;\r\n margin: 0;\r\n text-align: justify;\r\n font-weight: 500;\r\n }\r\n\r\n \/* Responsive Adjustments *\/\r\n @media (max-width: 576px) {\r\n .bti-outcomes-container {\r\n padding: 40px 16px;\r\n }\r\n .bti-outcomes-card {\r\n padding: 24px;\r\n }\r\n }\r\n <\/style>\r\n\r\n <div class=\"bti-outcomes-wrap\">\r\n <div class=\"bti-outcomes-header\">\r\n <h2>Department Learning Outcomes<\/h2>\r\n <\/div>\r\n\r\n <div class=\"bti-outcomes-grid\">\r\n <div class=\"bti-outcomes-card\">\r\n <div class=\"bti-outcomes-icon-box\" aria-hidden=\"true\">\ud83c\udfd7\ufe0f<\/div>\r\n <h3>Practical Education in Building & Construction<\/h3>\r\n <p>\r\n Advanced academic curricula integrated with comprehensive hands-on field training in civil engineering methodologies to ensure full workforce readiness and fulfillment of modern construction sector requirements.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bti-outcomes-card\">\r\n <div class=\"bti-outcomes-icon-box\" aria-hidden=\"true\">\ud83c\udfe2<\/div>\r\n <h3>Civil Technologies in Modern Buildings<\/h3>\r\n <p>\r\n Encompasses the study of smart structural systems, sustainable building materials, advanced insulation methodologies, and automated environmental controls, significantly optimizing energy efficiency, load-bearing capacity, and structural integrity while ensuring safety and comfort.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"bti-outcomes-card\">\r\n <div class=\"bti-outcomes-icon-box\" aria-hidden=\"true\">\ud83c\udf31<\/div>\r\n <h3>Fostering Sustainable Engineering Projects<\/h3>\r\n <p>\r\n Instilling a profound understanding of sustainable design principles and leveraging cutting-edge resource management practices to reduce material waste, achieving infrastructure developments that responsibly serve community and environmental standards.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-93504bd elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"93504bd\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d385d1b\" data-id=\"d385d1b\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b7dd1be elementor-widget elementor-widget-spacer\" data-id=\"b7dd1be\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-a43f995 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"a43f995\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0496a49\" data-id=\"0496a49\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-485f46a elementor-widget elementor-widget-spacer\" data-id=\"485f46a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-6576429 e-con-full e-flex e-con e-parent\" data-id=\"6576429\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fea1c39 elementor-widget elementor-widget-html\" data-id=\"fea1c39\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\r\n<div class=\"bti-email-container\" dir=\"ltr\">\r\n <style>\r\n .bti-email-container {\r\n --primary-blue: #004680;\r\n --light-blue: #00b4d8;\r\n --maroon: #8B1E2D;\r\n --text-dark: #1e293b;\r\n --text-muted: #64748b;\r\n --card-bg: #ffffff;\r\n --stroke: rgba(0, 70, 128, 0.08);\r\n --shadow: 0 15px 40px rgba(0, 70, 128, 0.06);\r\n\r\n font-family: 'Tajawal', system-ui, -apple-system, sans-serif;\r\n padding: 40px 20px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);\r\n }\r\n\r\n .bti-email-container * {\r\n box-sizing: border-box;\r\n }\r\n\r\n .bti-email-card {\r\n max-width: 550px;\r\n width: 100%;\r\n background: var(--card-bg);\r\n border: 1px solid var(--stroke);\r\n border-radius: 20px;\r\n padding: 32px;\r\n text-align: center;\r\n box-shadow: var(--shadow);\r\n position: relative;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n\r\n .bti-email-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 20px 50px rgba(0, 70, 128, 0.12);\r\n }\r\n\r\n .bti-email-icon {\r\n width: 56px;\r\n height: 56px;\r\n border-radius: 50%;\r\n background: rgba(0, 70, 128, 0.06);\r\n color: var(--primary-blue);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 24px;\r\n margin: 0 auto 20px auto;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .bti-email-card:hover .bti-email-icon {\r\n transform: scale(1.1);\r\n }\r\n\r\n .bti-email-title {\r\n font-size: 20px;\r\n font-weight: 800;\r\n color: var(--text-dark);\r\n margin: 0 0 8px 0;\r\n }\r\n\r\n .bti-email-subtitle {\r\n font-size: 14px;\r\n color: var(--text-muted);\r\n margin: 0 0 24px 0;\r\n font-weight: 500;\r\n }\r\n\r\n .bti-email-link {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 12px 24px;\r\n border-radius: 12px;\r\n background: linear-gradient(135deg, var(--primary-blue), var(--light-blue));\r\n color: #ffffff;\r\n text-decoration: none;\r\n font-weight: 700;\r\n font-size: 15px;\r\n box-shadow: 0 8px 20px rgba(0, 70, 128, 0.15);\r\n transition: all 0.2s ease;\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n }\r\n\r\n .bti-email-link:hover {\r\n box-shadow: 0 12px 25px rgba(0, 180, 216, 0.25);\r\n filter: brightness(1.05);\r\n }\r\n\r\n .bti-email-link:active {\r\n transform: scale(0.98);\r\n }\r\n\r\n .bti-email-link svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n }\r\n <\/style>\r\n\r\n <div class=\"bti-email-card\">\r\n <div class=\"bti-email-icon\" aria-hidden=\"true\">\u2709\ufe0f<\/div>\r\n <h3 class=\"bti-email-title\">Contact via Email<\/h3>\r\n <p class=\"bti-email-subtitle\">For academic inquiries and official communication<\/p>\r\n \r\n <a class=\"bti-email-link\" href=\"mailto:civil.bti@stu.edu.iq\">\r\n <svg viewBox=\"0 0 24 24\">\r\n <path d=\"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\"\/>\r\n <\/svg>\r\n <span>civil.bti@stu.edu.iq<\/span>\r\n <\/a>\r\n <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Department of Civil Engineering Technologies Department of Civil Engineering Technologies Technical Technological Institute – Basra Project Management Developing essential skills for efficient planning, supervision, and financial monitoring of major engineering projects. Engineering Design Utilizing state-of-the-art software and advanced techniques to design civil projects with high […]<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-20688","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/pages\/20688","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/comments?post=20688"}],"version-history":[{"count":28,"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/pages\/20688\/revisions"}],"predecessor-version":[{"id":38368,"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/pages\/20688\/revisions\/38368"}],"wp:attachment":[{"href":"https:\/\/bti.stu.edu.iq\/en\/wp-json\/wp\/v2\/media?parent=20688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}