@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
body{ font-size: 16px; overflow-x: hidden; color: var(--font-colour); font-family: "Poppins", sans-serif; }
a, a:link, a:visited, a:hover, a:active, button, button:hover, i, i:hover, h6, h6:hover, :hover, img{ text-decoration:none; outline:none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
img{ max-width:100%;} input, textarea, button, input:focus, textarea:focus, button:focus, select:focus{outline: none;}
a, a:hover, a:focus{color:inherit;}
p{margin-bottom: 0px; line-height: 26px;}
html { scroll-behavior: smooth;}
.logo img{max-height: 90px; filter: brightness(0) invert(1);}
.top-left-section ul{ display: flex; gap: var(--gap-15); font-size: var(--font-size-16); align-items: center;}
.top-left-section ul a{color: var(--white);}
.top-left-section ul a:hover{color: var(--primary);}
.zero{margin: 0; padding: 0;}
.p-50{padding: 50px 0px;}
.our-programs h2{text-align: center; margin-bottom: 30px;}
#topcontrol{width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--gradiant-primary);
color: var(--white); z-index: 22; right: 15px !important;}
.more-icon img{width: 32px;}
.more-icon{display: none; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center;
background: var(--gradiant-primary); flex-shrink: 0;}
.menu-icon, .close-icon { display: none; transition: all 0.3s ease-in-out;}
.active-icon{ display: block;}
h1, h3, h4, h5, h6{margin: 0px;}
h1, h2, h3, h4{ font-family: "Exo 2", sans-serif;}
input, select{width: 100%; border-radius: 6px; height: 48px; border: 1px solid #efefef; padding: 6px 14px; background: none;}
label{margin-bottom: 10px;}
.bt-secondary{background: var(--white); transition: all 0.3s ease-in-out; color: var(--font-colour);}
.bt-secondary:hover{background: var(--gradiant-primary); color: var(--white);}
.bt-secondary:hover img{filter: brightness(0) invert(1);}
.bt-third{border: 1px solid var(--white); color: var(--white);}
.bt-third:hover{background: var(--white); color: var(--font-colour);}
.key-feature{border: var(--border); border-radius: var(--border-radius); padding: var(--pad-30); background: var(--gradiant-1);
display: flex; flex-direction: column; gap: var(--gap-40);}
.key-feature h4{max-width: 400px; line-height: 31px;}
.key-feature-box{display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center;}
.key-feature-box img{max-width: 48px;}
.key-feature-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap: var(--gap-20);}
.key-feature-box p{max-width: 150px;}
.video-section{position: relative; overflow: hidden; border-radius: var(--border-radius);}
.bg-gradiant{ background: var(--gradiant-bottom); background-size: cover; padding-top: 60px; padding-bottom: 200px; position: relative;}
.line-1{width: 80px; height: 2px; background: var(--primary);}
.who-we{display: flex; flex-direction: column; gap: var(--gap-20);}
h5{line-height: 30px;}
.bt-primary{background: var(--gradiant-primary); transition: all 0.3s ease-in-out; color: var(--white);}
.bt-primary:hover{background: var(--gradiant-primary2); color: var(--white);}
.who-we h5{font-weight: 600;}
.play-ico{width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gradiant-primary2);}
.play-ico:hover{ background: var(--gradiant-primary);}
.line-draw{width: 100%; position: absolute; bottom: 0px; z-index: -1;}
.who-we-img{position: relative; overflow: hidden; width: 100%; height: 100%;}
.welding-machine{position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0;}
.our-offer{display: flex; flex-direction: column; gap: var(--gap-20); max-width: 200px;}
.offer-box{display: flex; flex-direction: column; gap: var(--gap-15);}
.offer-box h6{ font-weight: 700;}
.offer-box p{font-size: 14px;}
.offer-icon{width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--gradiant-primary);}
.offer-icon img{max-width: 30px;}
.parallax-section{position: relative; height: 300px; overflow: hidden;}
.parallax-bg{ position: absolute; top: -100px; left: 0; width: 100%; height: calc(100% + 200px); background: url('../images/bgm1.png') center top/cover no-repeat;
will-change: transform; z-index: -1; transition: transform 0.1s linear; transform: scale(1.5); filter: brightness(0.7);}
.parallax-content{ position: relative; z-index: 2; color: #fff; height: 100%; display: flex; align-items: center; justify-content: center;
gap: 100px;}
.parallax-section::after{ content:''; position:absolute; inset:0; background:var(--gradiant-primary3); z-index:1;  mix-blend-mode: multiply;}
.parallax-content .item{display: flex; flex-direction: column; gap: var(--gap-15); min-width: 150px;}
.parallax-content .item img{max-width: 40px;}
.parallax-content .item h1{font-size: 60px; font-weight: 700;}
.certificates{border: var(--border); border-radius: 4px;}
.news-title{text-align: center; display: flex; flex-direction: column; gap: var(--gap-20); align-items: center; margin-bottom: 30px;}
.news-box{border: var(--border); border-radius: var(--border-radius); position: relative;}
.news-content{padding: var(--pad-20); display: flex; flex-direction: column; gap: var(--gap-15);}
.news-content h6{font-weight: 700; line-height: 22px; display: -webkit-box; -webkit-line-clamp: 2;   /* number of lines */ -webkit-box-orient: vertical; overflow: hidden;
text-overflow: ellipsis; min-height: 44px;}
.news-img{overflow: hidden; border-top-left-radius: var(--border-radius); border-top-right-radius: var(--border-radius); height: 230px;}
.read-more{color: var(--primary); font-weight: 700; display: flex; gap: var(--gap-15); font-size: 14px;}
.read-more img{transition: 1s all ease-in-out;}
.read-more:hover img{transform: translateX(100px); opacity: 0;}
.new-date{width: 50px; height: 55px; border-radius: 5px; display: flex; align-items: center; justify-content: center; text-align: center;
background: var(--primary); color: var(--white); position: absolute; left: 10px; top: 10px; padding: 8px;}
.news-content p{display: -webkit-box; -webkit-line-clamp: 3;   /* number of lines */ -webkit-box-orient: vertical; overflow: hidden;
text-overflow: ellipsis; min-height: 78px;}
.news-img img{width: 100%; height: 100%; object-fit: cover;}
.dflex-client{display: flex; flex-wrap: wrap; align-items: center; text-align: center;}
.clients-logo {background: var(--bg-white); border: var(--border); margin-right: -1px; margin-top: -1px; padding: 10px 10px; width: calc(100% / 5);
cursor: pointer;}
.clients-logo img{transition: 0.2s all ease-in-out;}
.clients-logo:hover img{transform: translateY(-10px);}
footer{background: url(../images/footer.png) fixed; background-size: cover; padding: 60px 0px 30px; color: var(--white);}
.footer-location{display: flex; gap: var(--gap-20);}
.footer-icon{width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--white); flex-shrink: 0;}
.footer-icon img{max-width: 24px;}
.footer-address{display: flex; flex-direction: column; gap: var(--gap-20);}
.footer-logo{margin-bottom: 30px;}
.footer-content p{font-weight: 300;}
.al-basam .footer-logo{text-align: right;}
.footer-links{display: flex; justify-content: space-between; gap: var(--gap-20);}
.footer-links ul{display: flex; flex-direction: column; gap: var(--gap-15);}
.footer-links ul li{list-style: disc; font-weight: 300;}
.footer-links ul li a:hover{color: var(--primary); text-decoration: underline;}
.copy-right{border-top: 1px solid var(--white); margin-top: 30px; padding-top: 30px; display: flex; align-items: center; justify-content: space-between;}
.copy-right p{font-weight: 300;}
.social-icons{display: flex; gap: 10px; align-items: center;}
.social-icons i{width: 32px; height: 32px; border-radius: 50%; transition: 0.3s all ease-in-out; display: flex; align-items: center; justify-content: center;}
.social-icons i:hover{background: var(--primary); transform:translateY(-5px) scale(1.08);}
.top-left-section ul .bt-secondary img{max-width: 24px;}
.patnership{display: flex; flex-direction: column; gap: var(--gap-20);}
.video-section video{width: 100%; border-radius: var(--border-radius);}
.partnership-img{text-align: center;}
.map{margin-top: 60px;}
.map iframe{height: 350px; display: flex;}
.inner-header{background: url(../images/inner-header-bg.png); background-size: cover; min-height: 50vh; padding-top: 180px;}
.inner-title{ color: var(--white); display: flex; flex-direction: column; gap: 10px;}
.inner-title h1{font-size: 48px; font-weight: 700;}
.breadcrumb{display: flex; gap: var(--gap-15); margin-bottom: 0px;}
.breadcrumb a:hover{color: var(--primary);}
.history-img{ border-radius: var(--border-radius); overflow: hidden;}
.inner-pages .map{margin-top: 0px;}
.inner-pages .bg-gradiant{padding-bottom: 60px;}
.mb-60{margin-bottom: 60px;}
.our-milestone{border: var(--border); border-radius: var(--border-radius); padding: var(--pad-30); background: var(--gradiant-1);
display: flex; flex-direction: column; gap: var(--gap-20);}
.timeline{display:flex; justify-content:space-between; align-items:flex-start; position:relative; gap:30px;}
.timeline::before{ content:''; position:absolute; top:35px; left:0; width:100%; height:4px; background: var(--gradiant-primary);}
.milestone{ position:relative; flex:1; text-align:center; z-index:2;}
.dot{ width:22px; height:22px; background:var(--gradiant-primary); border-radius:50%; margin:25px auto; box-shadow: 0 0 20px var(--gradiant-primary);}
.milestone-content{padding:10px; transition:.4s; display: flex; flex-direction: column; gap: var(--gap-15); text-align: center; align-items: center;}
.milestone-content:hover{ transform:translateY(-10px);}
.milestone-content span{ display:block; font-size:40px; font-weight:700; color: var(--primary);}
.milestone-content h3{ font-size:24px;}
.vision-images{display: grid; align-items: center; gap: var(--gap-20); grid-template-columns:repeat(2,1fr);}
.vision-images img{border-radius: var(--border-radius);}
.download-pdf{display: flex; gap: var(--gap-15); align-items: center;}
.download-pdf img{max-width: 60px;}
.under-img img { max-width: 500px; width: 100%;}
.construction-content{display: flex; align-items: center; gap: 60px;}
.construction-content h1{font-weight: 900;}
.under-construction .bg-gradiant{display: flex; flex-direction: column; min-height: 80vh; align-items: center; padding-top: 100px;
padding-bottom: 60px;}
.construction-content .bt-primary{max-width: 200px;}