@charset "utf-8";
/* CSS Document */

/* ---------- Typography ---------- */

body {
  font-family: "Inter", Arial, sans-serif;
  line-height: 1.6;
  color: #000;
}


.banner-title {
 font-size: clamp(2.5rem, 3vw, 5rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #fff;
  font-family: "Inter",sans-serif;

}

.banner-subtitle {
  font-size: clamp( 2rem, 5vw, 5rem);
  line-height: 1.6;
  font-weight:500;
  font-family: "Inter",sans-serif;
  color:#fff;
}

/* ---------- h1 ---------- */


h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 500;
  line-height: 1.2;
  color:#0054c4;
  
}

/* ---------- h2 ---------- */


h2 {
 font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  line-height: 1.2;
  /* color:#0054c4; */
  color: var(--primary-500);
}


/* ---------- h3 ---------- */

h3 {
    font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.3;
    color:#0054c4;

}

/* ---------- h4 ---------- */


h4 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
      color:#0054c4;

}

/* ---------- h5 ---------- */

h5 {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 400;
     color:#0054c4;

}

/* ---------- h6 ---------- */


h6 {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 400;
  color:#000;

}

h1, h2, h3, h4, h5{
	font-family: "Inter", Arial, sans-serif;
	
}



/* ---------- p ---------- */


p {
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.7;
  font-weight: 400;
  padding-bottom:10px;
  margin-bottom:0px;
}

/* ----------button---------- */

.btn {
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 600;
}

/* ----------list---------- */
ul {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.7;
  padding-left: 1.2rem;
}


/* -----top-bar----*/

.icon.far {
  align-content: center;
}

.social {
  text-align: end;
}

@media (max-width: 960px) {
.social {
  text-align: left;
}
}

/* -------------top-bar-css-end-------------*/



/* -------------footer-------------------- */

#g-footer a.jl-icon-button {
  background-color: #fff;
}

/* -------------footer-css-end------------- */



/* ---why-ibs-section-home--- */

ul.listsection {
    list-style-image: url(/images/icon-arrow-ibs.png) !important;
  line-height: 50px;
  font-size: 25px;
}


ul.listsection {
    list-style-position: initial;
    margin-left: 24px;
    margin-bottom: 0px !important;
    list-style: none;
    margin: 0px 24px 0px;
}

@media (max-width: 768px){
ul.listsection{
line-height: 35px;
  font-size: 20px;
  
}
}



/* ---why-ibs-section-home-end--- */


/* ---testimonial-home--- */

@media (max-width: 768px){
.testimonial_block{
display:block !important;
}
}

/* ---testimonial-home-end--- */



/* ---our-technical-specialization-home--- */

.jt-inner {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: 22px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.35s ease;
}

.jt-inner:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.jt-title {
  line-height: normal;
  display: block;
  color: #fff;
  font-size: 22px;
text-wrap: wrap;
}

.btn.btn-primary.jt-readmore {
  background-color: #e14f4f;
  border-radius: 50px;
  transition: all 0.3s ease;
  font-size: 15px;
  border: 2px solid #fff;
}

.jtcs114.owl-carousel .jt-introtext {
  text-align: left;
  color: #fff;
}


.jt-cs .owl-dots .active span {
  background: #b28600;
}

.jt-cs .owl-dots span {
background: #fff;
  border: 2px solid #ae7c00;

}

/* ---our-technical-specialization-home-end--- */



/* =============our-team-about-us============= */

.team{ 
padding: 30px 30px 0; 
border-width: 2px; 
border-style: solid; 
border-color: #e1e1e1; 
border-radius: 15px 15px 15px 15px; 
}
 .team::after {
 content: ""; 
inset: -2px; 
 border-radius: 15px; 
padding: 3px; 
position: absolute; 
background: linear-gradient( 90deg, transparent 0%, #ac7a00 50%, transparent 100% );
 background-size: 200% 100%; 
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0;
 } 
.team:hover::after {
 opacity: 1;
 animation: borderTravel 1.8s linear infinite; } 
@keyframes borderTravel { 
from { background-position: 0% 0; } to { background-position: 200% 0; } }


.team img {
  width: 100%;
  display: block;
  border-radius: 50%;
  transition: transform 0.5s ease;
}

/* --- hover trigger --- */
.team:hover::before {
  opacity: 1;
  animation: borderMove 1.6s linear infinite;
}

.team:hover img {
  transform: scale(1.08);
}

/* =============our-team-about-us-end============= */


/* =============news-events============= */

.jt-inner:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: none;
}

.jt-inner {
  background: transparent;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: 22px;
  box-shadow: none;
  transition: all 0.35s ease;
}

/* =============news-events-end============= */



/*=============services-articles=============*/
.el-blog-item article{
  width: 100% !important;
  display: block;
  overflow: hidden;
  -webkit-border-radius: 8px;
  border-width: 1px;
  border-radius: 24px;
  background: #E5E7EB;
  background-color: rgb(239, 239, 239);
  border: 1px solid #cccccc;
}
.el-blog-item figure img{
	border-radius: 14px;
}
.el-blog-item {
  align-items: stretch;
  display: flex;
}

.jl-article {
  padding: 15px;
  margin-top: 15px;
  display: flow-root;
}

.left.item-image img {
  border-radius: 20px;
}

/* --- card base ---  */
.services .el-blog-item article {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
padding:20px;
}

/* --- gradient overlay (starts hidden at bottom) ---  */
.services .el-blog-item article::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;

  /* ---  bottom → transparent gradient --- */
  background: linear-gradient(to top, #ac82006e 0%, transparent 60%);

  opacity: 0;
  transform: translateY(40px);   /* start slightly below */
  transition: opacity 0.5s ease, transform 0.5s ease;

  z-index: 0;
}

/* --- card hover lift ---  */
.services .el-blog-item article:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border: 2px solid #d5a1004a;
}

/* --- smooth rise from bottom ---  */
.services .el-blog-item article:hover::before {
  opacity: 1;
  transform: translateY(0);
}

/* --- smooth transition on image ---  */
.services .el-blog-item article img {
  transition: transform 0.4s ease;
}

/* ---  when card is hovered → zoom image ---  */
.services .el-blog-item article:hover img {
  transform: scale(1.03);
}

/*============= services-articles-end=============*/

/*-----button-css------*/

.read-more-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 26px;
    font-size:15px;
    font-weight:700;
    color:#fff;
    background:#d85935;
    border-radius:50px;
    text-decoration:none;
    transition:all 0.3s ease;
    border:2px solid #fff;
}

.read-more-btn:hover {
  border: 2px solid #d85935;
  color: #fff;
  background: #d85935;
}

.read-more-btn .btn-svg svg{
    transform:rotate(0deg) translateX(6px);
    transition:0.3s ease;
}

.read-more-btn:hover .btn-svg svg{
    transform:rotate(45deg);
}



.read-more-btn-lght
	{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 26px;
    font-size:15px;
    font-weight:700;
    color:#fff;
    background:#d85935;
    border-radius:50px;
    text-decoration:none;
    transition:all 0.3s ease;
    border:2px solid #fff;
}


.read-more-btn-lght:hover {
  border: 2px solid #d85935;
  color: #fff;
  background: #d85935;
}

.read-more-btn-lght .btn-svg svg{
    transform:rotate(0deg) translateX(6px);
    transition:0.3s ease;
}

.read-more-btn-lght:hover .btn-svg svg{
    transform:rotate(45deg);
}

/*-----button-css-end------*/


:root {
  /* ===== Primary ===== */
  --primary-700: #1E466A;
  --primary-600: #234F7D;
  --primary-500: #1557B8;

  /* ===== Accent ===== */
  --accent-coral: #EF6A4A;
  --accent-gold: #D6A300;
  --accent-gold-700: #B27F00;

  /* ===== Neutrals ===== */
  --neutral-900: #2F373C;
  --neutral-700: #6C6261;
  --neutral-400: #A7B6C2;
  --neutral-300: #AFC3D9;
  --neutral-200: #C8C9CC;
  --neutral-100: #D4D2D3;
}