* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
      direction: rtl;
    line-height: 1.5;
    background-color: #f8f8fff;
    color: #505050;
}
.clear {
	clear:both;
}


/* Approx for 125% zoom */
@media (min-resolution: 120dpi) and (max-resolution: 130dpi) {
  /* This roughly triggers when 1920px screen is zoomed to 125% */
.video-wrapper {
    height: 594px!important;
	}
	.content-logo {
    padding: 0 160px 0 0;
}
}
/* Approx for 150% zoom */
@media (min-resolution: 140dpi) and (max-resolution: 160dpi) {
	.award-txt-sec {
    min-height: 675px;
}
	.video-wrapper {
    height: 496px!important;
	
}
}
/* Approx for 175% zoom */
@media (min-resolution: 165dpi) and (max-resolution: 185dpi) {
	.blue-sec .card .desc {
    font-size: 22px;
	}
	.blue-sec .card .kicker {
    font-size: 30px;
	}
	.blue-sec .card .title {
    font-size: 30px;
	}
	.slider-details {
    margin: 80px auto 0;
	}
	.award-txt-sec {
    min-height: 640px;
}
	.text-content ul {
    font-size: 16px;
}
	.banner-left .bullet-list {
    font-size: 12px;
}
	.banner-right .year {
    font-size: 50px;
	}
	.banner-left .bullet-list {
        margin: 20px 0 0;
    }
	.motasec p {
    font-size: 16px;
	}
	.greentriangle img {
    width: 49%;
    float: left;
}
	.txt-banner-wrap {
    position: absolute;
    top: calc(279 / 616 * 100%);
    left: calc(643 / 1660 * 100%);
		 width: 43%!important;
}
	.corevalues-banner-content {
    font-size: 20px;
}
		.video-wrapper {
    height: 434px!important;
	
}

}	
.corevalues {
	
}
.corevalues::after,
.corevalues::before {
  content: none !important;
}
 
/* Container for main content */
.container2 {
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 50px 20px;
}  

.video-wrapper {
    width: 100%;
    height: 744px;
    object-fit: cover;
}

  .banner-about{
position:relative;
width:100%;
max-width:100%;
margin:0 auto;
aspect-ratio:1920 / 750;
min-height:120px;
background:url(../images/about-us/about-banner.webp) no-repeat center center;
background-size:cover;
}


.banner-about-content{
position:absolute;
inset:0;
}


.logo-banner-wrap{
position:absolute;
/* Position values based on design ratio */
top: calc(215 / 616 * 100%); /* Y position relative to banner height */
left: calc(1232 / 1660 * 100%); /* X position relative to banner width */
transform: translate(-50%, -50%); /* center the logo at the point */    
}


.logo-banner{
display:block;
width:calc(450 / 1920 * 400%); /* logo width relative to banner width */
max-width:450px; /* cap at design size */
height:auto;
}

/*****/
main {
	position:relative;
}

.stickaboutcontent {
    color: #0C1895;
    float: right;
    font-weight: 400;
    font-size: 35px;
    padding: 0 0px 0 60px;
}
.stickaboutcontent span {
	font-weight:300;
	display:block;
}
.right-triangle-about {
  position: absolute;
  right: 0;
  /* use percentage relative to banner height instead of fixed px */
  top: calc(64 / 750 * 100%);
  text-align: right;
	z-index: 2;
}
.right-triangle-about img {
	width:50%;
}
/*****************************************************/
/* Base / Desktop */
.rise{
  display: flex;
  align-items: stretch;
  gap: 30px;
  width: 100%;
  padding: 10px 0;
  box-sizing: border-box;
}

/* IMAGE container must be relative to contain absolute img */
.image-absolute{
  position: relative;
  width: 95%;               /* image takes half width on desktop */
  min-height: 230px;       /* ensures room for the absolute img */
  overflow: visible;
  order:1;        /* allow diagonal overflow if needed */
}

/* The absolute image fills container and is clipped */
.image-absolute img{
  position: absolute;
  left: 0;
  top: -286px;               /* desktop vertical placement */
  width: 100%;              /* a bit wider so clipping looks smooth */
  height: calc(100% + 120px);
  object-fit: cover;
  display: block;
clip-path: polygon(0 0, /* top-left */ 100% 0, /* top-right */ 
70% 0%, /* move down right side */ 
100% 100%, /* diagonal inward */ 
0 100% /* bottom-left */ );
  transition: clip-path .2s ease, top .2s ease;
}


.image-absolute .movideo {
    position: absolute;
    left: 0;
    top: -286px;
    width: 100%;
    height: calc(500px);
    object-fit: cover;
    background-color: #ccc;
    display: block;
    clip-path: polygon(0 0, /* top-left */ 100% 0, /* top-right */ 100% 0%, /* move down right side */ 100% 100%, /* diagonal inward */ 0 100% /* bottom-left */);
    transition: clip-path .2s ease, top .2s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.movideo-player {
  width: 100%;
  height: 100%;
  object-fit: cover; /* makes video expand like a background */
  display: block;
}

/* TEXT */
.top-text-section {
  direction: rtl;
  text-align: right;
  font-size: 22px;
  width: 100%;
	font-weight: 350;
  box-sizing: border-box;
  display: flex;
  align-items: center; /* vertically center text block content */
   margin: -30px 0 0 0;
}
.top-text-section p {
    float: right;
    margin: 0 233px 0 0;
}

/***************slidersec****************/

.slide-sec {
	position:relative;
	width: 100%;
	float: left;
}
.triangle {
	position: absolute;
    right: 0;
    top: 9%;
    height: 100%;
    width: 40%; /* how much of the width the triangle area takes */
    pointer-events: none; /* so it doesn't block clicks if needed */
    z-index: 5;

    /* gradient / image background like your blue-turquoise 
    background: linear-gradient(135deg,#0ea5ff 0%, #2dd4bf 55%, #0ea5ff 100%);
    /* diagonal shape using clip-path - change points to reshape 
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);*/

    display: block;
}
.triangle img {
	  position: absolute;
  top: -240px;
  bottom: 0;
  width: 100%;
	
}
.traingle-logo {
    position: relative;
    left: 0;
    top: 380px;
    z-index: 100;
    right: 40px;
}
.traingle-logo img {
    width: 40%;
    position: relative;
    z-index: 5;
    top: -226px;
}
.traingle-text {
	    font-size: 65px;
    font-weight: bold;
    position: absolute;
    z-index: 20;
    top: 250px;
    right: 40px;
	color:#fff;
	line-height: 1.0;
}
.traingle-text span {
	font-size:34px;
	color:#fff;
	display:block;
}
/*.slider-details {
    width: 47%;
    float: left;
    color: #3A3A3A;
    padding: 0 0px 0 0;
    position: relative;
    left: 6%;
    bottom: -40px;
}

.slider-details ul {
	margin:0;
	padding:0;
	list-style:none;
}
.slider-details ul li {
	    list-style: disc;
    margin: 10px 20px 0 0px;
}*/
.slidertext-all {
	position:relative;
	width: 100%;
	max-width: 1920px;
	margin: 0 auto; /* centers the block horizontally */
}
.slider-details {
      position: relative;
      width: 47%;
      margin: 80px auto 0;
      min-height:420px;
      overflow: hidden;
	  color: #3A3A3A;
	  font-size:30px;
    }
	.slider-details h2 {
	font-size:30px;
}

    /* Each slide */
    .slider-details > div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      opacity: 0;
      animation: fade 12s infinite;
      padding: 0;
      color: #3A3A3A;
	  right:170px;
    }

    /* Animate all slides but offset timing */
    .slider-details > div:nth-child(1) {
      animation-delay: 0s;
    }
    .slider-details > div:nth-child(2) {
      animation-delay: 4s;
    }
    .slider-details > div:nth-child(3) {
      animation-delay: 8s;
    }

    @keyframes fade {
      0% { opacity: 0; }
      5% { opacity: 1; }
      30% { opacity: 1; }
      35% { opacity: 0; }
      100% { opacity: 0; }
    }

    .slider-details h2 {
      font-size: 28px;
      margin-bottom: 15px;
    }

    .slider-details ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .slider-details ul li {
      list-style: disc;
      margin: 10px 20px 0 0;
		font-weight: 350;
    }
	
	/**************************/

  .slider {
      position: relative;
      width: 100%;
      max-width: 100%;
      height: 70vh;
      overflow: hidden;
    }

    .slides {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .slides img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      animation: fade 16s infinite;
    }

    /* Sequence for each image */
    .slides img:nth-child(1) { animation-delay: 0s; }
    .slides img:nth-child(2) { animation-delay: 4s; }
    .slides img:nth-child(3) { animation-delay: 8s; }
    .slides img:nth-child(4) { animation-delay: 12s; }

    @keyframes fade {
      0%   { opacity: 0; }
      5%   { opacity: 1; }
      25%  { opacity: 1; }
      30%  { opacity: 0; }
      100% { opacity: 0; }
    }

    /* Navigation Dots */
    .navigation {
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #bbb;
      transition: background 0.3s;
    }

    /* Highlight dots in sync with slides */
    .dot:nth-child(1) { animation: dotHighlight 16s infinite; animation-delay: 0s; }
    .dot:nth-child(2) { animation: dotHighlight 16s infinite; animation-delay: 4s; }
    .dot:nth-child(3) { animation: dotHighlight 16s infinite; animation-delay: 8s; }
    .dot:nth-child(4) { animation: dotHighlight 16s infinite; animation-delay: 12s; }

    @keyframes dotHighlight {
      0%, 25% { background: #333; }
      26%, 100% { background: #bbb; }
    }
	
	
	/**************below sec*******************/
	
 .section-wrap{
    max-width:100%;
    margin: 0;
    padding: 0;
    position: relative;
    box-sizing: border-box;
  }

  /* Heading */
  .section-head {
    text-align: right;
    color: #0C1895;
    font-size: 40px;
    font-weight:400;
    margin-bottom: 8px;
  }

  /* Decoration triangles (absolute positioned) */
  .triangles {
    position: absolute;
    top: 80px;
    right:0; /* near right edge of container */
    width: 120px;
    height: 120px;
    pointer-events: none;
    transform: translateY(0);
    z-index: 5;
  }
  /* large red triangle using CSS clip-path */
  .triangles .red {
    width: 100%;
    height: 100%;
    background:#e11818;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    display:block;
  }
  /* small blue triangle overlay near bottom-left of red */
  .triangles .blue {
    width: 36px;
    height: 36px;
    background: #1234b3;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    position: absolute;
    left: 18px;
    bottom: 12px;
    transform: rotate(0deg);
    box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  }

  /* Grey band with centered paragraph */
  .grey-band{
    background: #ececec;
    margin: 12px 0 18px;
    padding: 36px 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:110px;
    box-sizing:border-box;
    text-align:center;
    position:relative;
    z-index:1;
  }
  .grey-band p{
    margin:0;
    font-size:34px;
    max-width:750px;
	text-align:right;
	  font-weight: 350;
  }

  /* Footer actions row */
  
  
.actions {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* keep everything aligned to the right */
  gap: 16px; /* control spacing between text and button */
  flex-wrap: wrap;
	margin: 20px 0;
}

.secondary-link {
  color: #0C1895;
  text-decoration: none;
  font-size: 34px;
  display: inline-block;
  text-align: right;
}  
  

  .cta-btn {
    background: #1234b3;
    color:#fff;
    border: none;
    padding:10px 16px;
    font-weight:600;
    border-radius:4px;
    cursor:pointer;
    text-decoration:none;
    display:inline-block;
    box-shadow: 0 2px 0 rgba(0,0,0,0.08);
  }


  /* Place button visually to the start (left in RTL it's still left) and center link */
  .left-area { flex:0 0 auto; }
  .center-area { flex:1 1 auto; display:flex; justify-content:right; }

	
	
	
	
	/***************below sec*******************/
	
	
	.greentriangle{
		position:absolute;
		left:0;
		top:900px;
		z-index:2;
	}
	.greentriangle img {
		width:100%;
	}
	.corevalues .head {
	color:#0C1896;
	font-size:45px;
	font-weight:400;
	text-align:right;
	}
	
	  /* keeps the 1920×750 aspect ratio (fallback uses padding-top) */
  .corevalues-banner{
position:relative;
width:100%;
max-width:100%;
margin:0 auto;
aspect-ratio:1920 / 750;
min-height:120px;
background:url(../images/about-us/our-core-value.webp) no-repeat center center;
background-size:cover;
}


.corevalues-banner-content{
position:absolute;
inset:0;
text-align:right;
color:#fff;
font-size:24px;
}

.txt-banner-wrap {
    position: absolute;
    top: calc(399 / 616 * 100%);
    left: calc(643 / 1660 * 100%);
    transform: translate(-50%, -50%);
    width: 33%;
}
.txt-banner-wrap h2 {
	    font-weight: 400;
    font-size: 32px;
}
.txt-banner-wrap p {
	    font-weight: 350;
    font-size: 24px;
}


/***************************/

.values-section {
     /* background: #0F1B96; /* Dark Blue */
	 background:url(../images/about-us/core-bg.webp) no-repeat center right;
      color: #fff;
      padding: 80px 20px;
      position: relative;
      /*clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 85%);*/
      text-align: center;
	  top:-120px;
	    mix-blend-mode: hard-light;
    }



.values-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 100px;
    gap: 20px;
}


.value-box {
    flex: 1 1 220px;
    max-width: 220px;
    text-align: right;
}
    .value-box h3 {
      font-size: 24px;
      margin-bottom: 10px;
      font-weight: 400;
    }

    .value-box p {
      font-size:26px;
	  font-weight:100;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .values-container {
        flex-direction: column;
        align-items: center;
      }

      .value-box {
        max-width: 100%;
      }
    }

/******************************/

.timetablesec {
	text-align:right;
}

.timetablesec img {
	width:25%;
}
.timetablesec h2 {
	color:#0C1895;
	font-weight:bold;
	font-size:40px;
}
.timetablesec h3 {
	color:#00A0E3;
	font-size:28px;
}

:root{
    --navy:#071a4a;
    --blue:#098bcb;
    --white:#ffffff;
    --max-width:1200px;
  }
  

  /*****professional training***********/
  
  .profesional-training {
	  background:url(../images/about-us/prof-train.webp) no-repeat center center;
	  width:100%;
	  background-size:cover;
  }
  .prof-details {
	  background:rgba(255, 255, 255, 0.4);
	  padding:10px;
	  border:1px solid #fff;
 
  }
  
   .text-section {
      padding: 30px 125px;

      display: flex;
      flex-direction: row;
      gap: 20px;
      align-items: flex-start;
    }

    .text-section img {
      width:240px;
      height: auto;
      flex-shrink: 0;
	  order:1;
    }
  
   .text-content {
      flex: 1;
    }

.text-content ul {
    list-style-type: disc;
    padding-right: 20px;
    margin: 0;
    line-height: 1.9;
    font-size: 22px;
    color: #505050;
    font-weight: 350;
}

    .highlight {
      margin-top: 20px;
      font-size: 20px;
      font-weight: 400;
      color: #005bbb;
      text-align: right;
      line-height: 1.6;
    }

    /* Responsive */
    @media (max-width: 768px) {
      .text-section {
        flex-direction: column;
        text-align: right;
        align-items: center;
      }

      .text-section img {
        width: 80px;
        margin-bottom: 15px;
      }

      .text-content ul {
        font-size: 15px;
      }

      .highlight {
        font-size: 16px;
      }
		.container2 {
	padding:50px 0;
}
	  
    }
	
	
	
	  /**********awardsec**********/
  .awardsec {
	  width:100%;
	  background:url(../images/about-us/awardsgb.webp) no-repeat center center;
	  background-size:cover;
	  margin-top:100px;
	  padding-bottom:40px;
	      padding-top: 40px;
  }

	
.award-slider-sec {
  position: relative;
  width:50%; /* adjust width */
  float:left;
  text-align: center;
}

.award-slider-sec img {
  width: 100%;
  border-radius: 8px;
  transition: opacity 0.5s ease-in-out;
}

/* Button container below the image */
.award-slider-sec .slider-controls {
  margin-top: 15px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.award-slider-sec .arrow {
  background: #0C1896;
  border: none;
  padding: 12px 15px 8px;
  cursor: pointer;
  font-size: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s ease;
}

.award-slider-sec .arrow:hover {
  background: #9D9E9E;
}

.award-txt-sec {
	width:50%;
	float:left;
	position:relative;
	min-height:810px;
}
.award-txt-sec .tophd {
	width:100%;
	text-align:right;
}
.award-txt-sec .tophd h2 {
	color:#0C1895;
	font-size:40px;
	font-weight:400;
	margin:0 0 20px;
}
.award-txt-sec .tophd p {
	color:#505050;
	font-size:22px;
	font-weight: 350;
	
}
.bottomhead {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* optional */
}
.bottomhead .arlogo {
	float:right;
}
.bottomhead .arlogo img {
	width:100%;
}
.bottomhead .bluebg {
	background:url(../images/about-us/bluebgside.webp) no-repeat ;
	font-size:40px;
	font-weight:400;
	color:#fff;
	padding:50px;
	background-size:cover;
}

  



  /* ---------- Banner container (keeps same background) ---------- */
  .timeline-banner{
	  direction: ltr; /* Arabic layout; remove if not needed */
    max-width:1440px;
    margin:24px auto;
    background:#fff;
    overflow:hidden;
   /* box-shadow:0 6px 30px rgba(0,0,0,0.12);*/
  }

  /* inner layout */
  .banner-inner{
    display:flex;
    gap:0;
    min-height:220px;
    align-items:stretch;
	/*background:#040E77;*/
	  background:url(../images/about-us/fillbg.png) no-repeat top center, #fff;
	  background-size:100%;
  }

  /* Right header block (cyan slanted shape feel) */
  .banner-right{
    --cut: 78%;                /* tweak this to move the diagonal in/out */
  flex:0 0 45%;
  padding:28px 30px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  position:relative;
  color:#fff;
  background:url(../images/about-us/rec-right.png) no-repeat top center;
  background-size:100%;
  
 /******* clip-path: 
  polygon(14% 0,  top left corner *
  100% 0%,  the new diagonal intersection with top 
  100% 68%, /* bottom right 
  0 68%  bottom left );****/
  }
.motasec {
    background: #fff;
    width: 100%;
    color: #353535;
    margin: 0 0;
    position: relative;
    top: 40px;
	text-align:right;
}
.motasec h2 {
	font-size:28px;
	font-weight:400;
}
.motasec p {
    font-size: 22px;
    margin: 0 0 60px;
    font-weight: 350;
}
  .banner-right .logo{
    font-weight:700;
    font-size:20px;
    opacity:0.95;
	text-align:right;
  }
  .banner-right .year{
    margin:10px 0 0;
    font-size:80px;
    line-height:1;
  }

  /* Left content block (navy) */
.banner-left {
  flex: 1 1 64%;
 /* background: #040E77;
  background:url(../images/about-us/rec-left.png) no-repeat center center;*/
  background-size:100%;
  color: #fff;
  padding: 28px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  text-align: right;
 /**** clip-path: polygon(
     0 0,
    100% 0,
    83% 100%,
    0 98%
  );
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    83% 100%,
    0 98%
  );**/
}


  .banner-left p{
    margin:0;
    line-height:1.6;
    font-size:16px;
  }
  .banner-left .bullet-list{
    margin:0 0 0;
    padding:0 0 0 14px;
	direction:rtl;
	list-style:none;
	font-size:22px;
	  font-weight: 350;
  }
  .banner-left .more{
    display:inline-block;
    margin-top:12px;
    color:#d7eaff;
    text-decoration:none;
    font-size:0.95rem;
	text-align:left;
  }

  /* ---------- Year tabs row ---------- */
  .years-wrap{
    border-top:1px solid rgba(255,255,255,0.08);
    background:transparent;
    padding:14px 10px;
  }

  .years{
    display:flex;
    gap:14px;
    align-items:center;
    overflow:auto;
    padding:0px;
	padding-top:6px;
    scrollbar-width:thin;
    scroll-behavior:smooth;
	border-bottom:1px solid #8D8D8D;
  }

  .years button{
    appearance:none;
    border:0;
    background:transparent;
    padding:8px 10px;
    font-weight:100;
    cursor:pointer;
    opacity:0.65;
    min-width:48px;
    color:#767676;
    transition:all .18s ease;
    outline:none;
	font-size:22px;
	
  }

  .years button[aria-selected="true"]{
    opacity:1;
    transform:translateY(-6px);
	/*border-bottom:1px solid #0C1896;*/
    
  }

  /* small triangle indicator under the active year */
  .years button[aria-selected="true"]::after{
    content:"";
    display:block;
    width:0;height:0;
    margin:6px auto 0;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom:17px solid #07305f; /* triangle color */
  }



@media screen and (width: 1920px) and (height: 1080px) {
	
}

@media (max-width: 1920px) {

}

  @media (max-width:1440px){
.top-text-section p {
    margin: 0 56px 0 0;
}
	  .triangle {
    top: 23%;
	  }
	.image-absolute img {
    top: -235px;
	  }
	  .content-logo {
    margin: 157px 0 0;
}
	  .logo-banner-wrap {
    position: absolute;
    top: calc(215 / 616 * 210%);
    left: calc(1232 / 1660 * 112%);
	  }
	  .values-container {
    margin: 0 70px;
	  }

	  .right-triangle-about img {
    width: 30%;
}
	  .txt-banner-wrap {
  top: calc(399 / 616 * 70%);
	  }

	  
}

  @media (max-width:1366px){
    .content-logo {
        margin: 197px 0 0;
    }
	  .values-section {
    top: -40px;
	  }
}

  @media (max-width:1280px){
.top-text-section {
    font-size: 22px;
}
	  .greentriangle img {
    width: 47%;
    float: left;
}
	  .values-container {
        margin: 0 20px;
    }
}

  @media (max-width:1024px){
.value-box p {
    font-size: 18px;
}
	  .value-box h3 {
    font-size: 20px;
}
	  
}

  @media (max-width:1000px){
.video-wrapper {
    height: 618px;
}
}

  @media (max-width:853px){
.video-wrapper {
        height: 354px;
    }
}

  /* Responsive: stack on small screens */
  @media (max-width:820px){
	  .award-slider-sec {
  width:100%; /* adjust width */

}
.award-txt-sec {
    width: 100%;     /* take full width */
    float: left;     /* remove float */
    min-height: auto; /* let height adjust automatically */
	margin-top:30px;
  }
  .bottomhead {
    position: relative;
  }

	  .timetablesec img {
	width:50%;
}
    .banner-inner{
      flex-direction:column-reverse;
      min-height:120px;
    }
    .banner-right{
      flex:0 0 auto;
      width:100%;
      align-items:flex-end;
      padding:20px;
    }
    .banner-left{
      padding:18px;
    }
    .banner-right .year{
      font-size:36px;
    }
  }

  /* Content fade */
  .fade-enter{
    opacity:0;
    transform:translateY(8px);
  }
  .fade-enter.fade-enter-active{
    opacity:1;
    transform:none;
    transition:all .28s ease;
  }

  /* small screens: year buttons are horizontally scrollable and visible */
  .years::-webkit-scrollbar{height:8px}
  .years::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:8px}

	
	
	    @media (max-width:1392px) {	
		.triangle {
			width:50%;
		}
		.triangle {
			top:0;
		}
		.banner-left .bullet-list {
    margin: -60px 0 0;
		}
		
		}
	@media (max-width:1024px) {		
	.txt-banner-wrap {
    width: 43%;
}
		.value-box {
    flex: 1 1 160px;
    min-width: 160px;
    max-width: 210px;

}
  .banner-right .year {

    font-size: 47px;
}
	.banner-left .bullet-list {

    font-size: 13px;
}
	}
		

		
	
	
    @media (max-width:1000px) {	
		
		.greentriangle {
			display:none;
		}	
	.triangles {
	display:none;	
	}
	.text-section {
    padding: 30px 30px;
	}
	
	.values-section {
	 background:url(../images/about-us/core-bg.webp) no-repeat center right, #0F1B96;
	 top:0;
	}
	.mobchange {
		padding:20px;
	}
	  /* Right header block (cyan slanted shape feel) */
  .banner-right{
  color:#fff;
  background:url(../images/about-us/rec-right.png) no-repeat top center, #00A0E3;
  background-size:100%;
  padding-left:0;
  padding-right:0;

  }
  .motasec {
	  padding:20px;
  }
	
	  /* Left content block (navy) */
.banner-left {
  flex: 1 1 64%;
 /* background: #040E77;*/
  background:url(../images/about-us/rec-left.png) no-repeat center center, #040E77;
  background-size:100%;
  min-height:500px;

}
	
	  /* inner layout */
  .banner-inner{
	  background:#fff;
  }
	
	.txt-banner-wrap {
    position: absolute;
    top: calc(399 / 616 * 100%);
    left: calc(0 / 1660 * 100%);
    transform: translate(0%, -56%);
    width: 77%;
}
.corevalues-banner-content {
	font-size:13px;
}
	.slider-details {
    width: 88%;
    font-size: 25px;
}
.slider-details > div {
    right: 10px;
}
	.triangle {
        position: relative;
        left: 30px;
        top: 0;
        height:16%;
        width:100%;
    pointer-events: none; /* so it doesn't block clicks if needed */
    z-index: 5;
background: linear-gradient(to right, #0226d2, #0887eb, #181ead);
    /*background: linear-gradient(
      135deg,
      #003399 0%,
      #0055cc 25%,
      #00aaff 45%,
      #6633cc 60%,
      #0044aa 80%,
      #001f66 100%
    );
	background-position: center;
    background-size: cover;*/
    transform: translateX(0);

    display: block;

}
.triangle img {

  width: 100%;
  display:none;
	
}
    .traingle-logo {
        position: relative;
        left: 0;
        top: 230px;
        right: 70px;
        width: 30%;
    }
.traingle-text {
        font-size: 40px;
        font-weight: bold;
        position: relative;
        z-index: 20;
        top: -65px;
        right: 0;
        text-align: left;
        padding: 0 0 0 100px;
    }
	
.traingle-logo img {
	display:block!important;
	width:280%;
}
.traingle-text span {
    font-size: 35px;
}
		.value-box {
    flex: 1 1 160px;
    min-width: 160px;
    max-width: 200px;
}
		

}


.bottomhead .bluebg {
 background: linear-gradient(to right, #00A0E3 0%, #0C1895 100%);
}
	.right-triangle-about {

    top: calc(64 / 850 * 26%);
 
}

@media (max-width: 1440px){	
		
	  .right-triangle-about {
    top: calc(64 / 850 * 68%);
}
	.greentriangle {
    top: 650px;
}
	
}




/********************************************/
 .blue-sec .wrapper{
      max-width: 1440px;
      margin: 28px auto;
    }

    /* top heading (top-right in RTL) */
    .blue-sec .section-head{
      display:flex;
      justify-content:flex-start; /* in RTL, start is right */
      align-items:center;
      margin-bottom: 18px;
    }
    .blue-sec .section-head h2{
      margin:0;
      font-size:40px;
      color: #0C1896;
      font-weight:400;
      letter-spacing:0.3px;
    }

    /* grid for three cards */
    .blue-sec .cards-row{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px;
      margin-bottom: 22px;
      align-items:stretch;
    }

    .blue-sec .card{
      padding: 20px;
      color: white;
      min-height: 160px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
    }
    .blue-sec .card .kicker{
      font-size:40px;
      opacity:0.95;
      font-weight:300;
      margin-bottom:6px;
    }
    .blue-sec .card .title{
      font-size:40px;
      font-weight:400;
      margin:0 0 8px 0;
    }
.blue-sec .card .desc {
    font-size: 25px;
    opacity: 0.95;
    margin-bottom: 12px;
    font-weight: 350;
}
    .blue-sec .card .meta{
      font-size:40px;
      opacity:0.85;
      text-align:right; /* meta aligned left inside card as in screenshot */
      font-weight:400;
	  color:#75BAFF;
    }

    /* individual card colors */
    .blue-sec .card.left { background:#0b2b9a; }
    .blue-sec .card.middle { background:#0d59d6; }
    .blue-sec .card.right { background: #0c7ef1; }

    /* Main paragraph under cards */
.blue-sec .lead {
    max-width: 900px;
    font-size: 30px;
    color: #020102;
    margin-bottom: 14px;
    font-weight: 350;
}
    .blue-sec .lead strong{ color:#0C1896; font-weight:400; }

    /* CTA button aligned to left in RTL -> appears bottom-left in layout (like image) */
    .blue-sec .cta-row{
      display:flex;
      justify-content:flex-start; /* in RTL this pushes it to the visual left */
      margin-top:6px;
    }
    .blue-sec .btn{
      background:#0535b8;
      color: #fff;
      padding: 10px 16px;
      text-decoration:none;
      font-weight:600;
      display:inline-flex;
      gap:8px;
      align-items:center;
    }

 
@media (max-width: 1366px){
.top-text-section p {
    float: right;
    margin: 0 83px 0 0;
}

} 

	  @media (max-width:1117px) {	
	 .triangle {
			width:60%;
		}
    .video-wrapper {
    height: 634px;
}
	.top-text-section p {

        margin: 0 70px 0 0;
    }
	.stickaboutcontent {

    padding: 0 20px 0 0;
}
	  }

/* Medium screens: reduce image width and offset */
@media (max-width: 1100px){
  .image-absolute { width: 55%; min-height: 320px; }
  .top-text-section { width: 100%; font-size: 18px; padding: 24px; }

  .image-absolute img{
    top: -60px;
    width: 115%;
  }
	    .top-text-section p {
        margin: 0 23px 0 0;
    }
	    .image-absolute img {
        top: -218px;
    }
}



  /* responsive rules */
    @media (max-width: 1024px){
      .blue-sec .cards-row{
        grid-template-columns: repeat(3, 1fr);
      }
		    .top-text-section p {
        margin: 0 33px 0 0;
    }
		    .stickaboutcontent {
        padding: 0 10px 0 0;
    }
		.image-absolute {
        min-height: 220px;
    }
  
	  
    }

  @media (max-width:1000px){
.triangle {
padding: 40px 0 0;
	width:100%;
    }	
}
	

  @media (max-width:980px){
    .video-wrapper {
        height: 398px;
    }
	  .content-logo {
        margin: 0 0 0;
    }
	  .triangle {
        width: 100%;
    }
	.blue-sec .cards-row {
        grid-template-columns: repeat(1, 1fr);
    }
	  .timetablesec img {
    width: 40%;
    margin: 20px 0 0;
}
}

  @media (max-width:953px){
    .timetablesec img {
        width: 60%;
	  }
}

  /* Responsive tweaks */
  @media (max-width: 900px){
    .section-head { font-size:24px; }
    .triangles { width:90px; height:90px; top:12px; right:4%; }
    .grey-band { padding:28px 14px; min-height:90px; }
    .grey-band p { font-size:16px; }
    .triangles .blue { width:28px; height:28px; left:12px; bottom:10px; }
  }

 @media (max-width: 853px) {
.video-wrapper {
        height: 348px;
    }
	 .banner-left .bullet-list {
        font-size: 20px;
    }
}


    @media (max-width: 768px) {
      .slider {
        height: 50vh;
      }
	.video-wrapper {
        height: 300px;
    }
		    .banner-right .year {
        font-size: 85px;
    }
		    .value-box h3 {
        font-size: 30px;
    }
		    .value-box p {
        font-size: 26px;
    }

 
    }

	


/* Small tablets and phones: stack vertically */
@media (max-width: 760px){
  .rise{
    flex-direction: column-reverse; /* text above image or change to column */
    gap: 18px;
    padding: 8px;
  }

  .image-absolute{
    width: 100%;
    min-height: 678px;
    overflow: hidden; /* hide any overflow on mobile */
  }

  .image-absolute img{
    position: relative;     /* easier on mobile: not absolute */
    left: 0;
    top: 0;
    width: 100%;
    height: 260px;
    object-fit: cover;
     clip-path: polygon(
      0 0,
      100% 0,
      100% 0%,
      100% 100%,
      0 100%
    );
  }
	.slider-details {

    min-height: 420px;
	}

  .top-text-section{
    width: 100%;
    font-size: 16px;
      padding: 0 12px 0;
  }
  .top-text-section p {
    float: right;
    margin: 0 0 0 0;
	  font-size: 25px;
}
}

    @media (max-width: 720px){
      .blue-sec .cards-row{
        grid-template-columns: 1fr;
      }
      .blue-sec .section-head h2{ font-size:18px; }
      .blue-sec .card{ min-height:140px; padding:16px; }
      .blue-sec .lead{ font-size:15px; }
      .blue-sec .wrapper{ padding:16px; }
    }
@media (max-width: 650px) {

.image-absolute .movideo {
    left: 0;
    top: 0;
	}
	    .image-absolute {
        min-height: 500px;
	}
	    .blue-sec .section-head h2 {
        font-size: 40px;
    }
}


@media (max-width: 600px) {
	.greentriangle {
    top: 670px;
	width:30%;
	
}
	.slider-details ul li {
    font-size: 20px;
}
}


  @media (max-width: 600px){
    .section-wrap { padding:12px; }
    .section-head { font-size:20px; margin-bottom:6px; }
    /* move triangles so they don't overlap content on narrow screens */
    .triangles { right:6px; top:6px; width:72px; height:72px; }
    .grey-band { padding:20px 12px; }
    .grey-band p { font-size:15px; }
    .actions { flex-direction:column; align-items:stretch; gap:8px; }
    .left-area { order:1; align-self:flex-start; }
    .center-area { order:2; }
    .secondary-link { order:3; margin-top:6px; }
	  
	      .video-wrapper {
        height: 250px;
    }
  }

@media (max-width:520px){
.logo-banner{
width:calc(290 / 1920 * 300% * 2); /* smaller scaling for mobile */
}
}


    @media (max-width: 480px) {
		
		
      .slider {
        height: 35vh;
      }
	  .traingle-logo {
		 width: 20%;
    }
	    .slider-details {
        font-size: 12px;
		width:300px;
    }
	.slider-details h2 {
		font-size: 12px;
	}
	.video-wrapper {
        height: 200px;
    }
	.container2 {
        width: 95%;
    }
		.corevalues-banner {
    aspect-ratio: 1930 / 1370;
		}
		    .txt-banner-wrap {
        width: 91%;
        padding: 20px;
    }
		.txt-banner-wrap p {
    font-size: 20px;
}
    }
	



/* Extra small: reduce font */
@media (max-width: 420px){
  .top-text-section{ font-size: 14px; line-height:1.6; padding:14px 10px; }
  .image-absolute img{ height: 200px; }
	
	.txt-banner-wrap h2 {
    font-size: 24px;
}
	    .txt-banner-wrap {
        top: calc(399 / 616 * 70%);
	}
}

@media (max-width: 375px){
    .video-wrapper {
        height: 153px;
    }
	    .txt-banner-wrap p {
        font-size: 18px;
    }
	    .txt-banner-wrap h2 {
        font-size: 20px;
    }
}
	


/* Approx for 125% zoom */
@media (min-resolution: 120dpi) and (max-resolution: 130dpi) {
	.top-text-section p {
    margin: 0 73px 0 0;
}
	.slider-details {
    margin: 80px auto 0;
	}
	
	
}