*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Inter', sans-serif;
}

body{
  overflow-x:hidden;
}

#menuToggle{
  display:none;
}
/* =========================
   Inter
========================= */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_28pt-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_28pt-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_28pt-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* =========================
   DM Sans
========================= */

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* -------------------------------------------------------------------------------------------- */
/* ================= NAVBAR ================= */

.navbar{
  height:56px;
  background:#091B32;
  display:flex;
  align-items:center;
  padding:0 80px;
  position:relative;
}
.navbar{
  position:relative;
  z-index:1000;
}
/* Bottom gradient stroke */
.navbar::after{
  content:"";
  position:absolute;
  bottom:2px;
  left:0;
  width:100%;
  height:2px;
  font-family: 'Inter', sans-serif;
  background:linear-gradient(to right,  #192e4a);
}

.nav-container{
  width:100%;
  
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* LOGO */
.logo img{
  height:42px;
  width:auto;
}

/* NAV LINKS */
.nav-links{
  display:flex;
  gap:48px;
  list-style:none;
}

.nav-links li a{
  text-decoration:none;
  color:#F7F8F9;
  font-size:16px;
  font-weight:500;
  position:relative;
  transition:0.3s;
  font-family: 'Inter', sans-serif;
}

/* Yellow active */
.nav-links li a:hover{
  color:#F3A804;
}

/* underline animation */
.nav-links li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:2px;
  background:#F3A804;
  transition:0.3s ease;
}

.nav-links li a:hover::after{
  width:100%;
}

/* ================= HAMBURGER ICON ================= */

.menu-icon{
  width: 36px;
  height:36px;
  border-radius:50%;
  background:#ffffff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  transition:0.3s;
  font-family: 'Inter', sans-serif;
 
}

.menu-icon span{
  width:16px;
  height:2px;
  background:#091B32;
  font-family: 'Inter', sans-serif;

  margin:3px 0;
  transition:0.5s ease;
}

/* Transform to X when checked */
#menuToggle:checked + .navbar .menu-icon{
  background:#091B32;
}

#menuToggle:checked + .navbar .menu-icon span:nth-child(1){
  transform:translateY(5px) rotate(45deg);
  background:#F7F8F9;
}

#menuToggle:checked + .navbar .menu-icon span:nth-child(2){
  opacity:0;
}

#menuToggle:checked + .navbar .menu-icon span:nth-child(3){
  transform:translateY(-5px) rotate(-45deg);
  background:#091B32;
}

/* ================= QUICK PANEL ================= */

.quick-panel{
  position:fixed;
  top:0;
  right:-320px;
  width: 300px;
  height:100vh;
  padding:80px 40px;
  transition:0.3s ease;
  z-index:999;
  font-family: 'Inter', sans-serif;

  /* Background pattern */
  background:
    url("../assests/icons.png/QC\ BG.png") center/cover no-repeat,
    #F4F5F7;
  box-shadow:-10px 0 40px rgba(0,0,0,0.08);
}

/* Open panel */
#menuToggle:checked ~ .quick-panel{
  right:0;
}

/* Back Arrow */
.back-arrow{
  position:absolute;
  top:40px;
  left:40px;

  width:42px;              /* equal width & height */
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:20px;
  color:#ffffff;

  background:#091B32;      /* solid circle */
  border-radius:50%;

  cursor:pointer;
  transition:0.3s ease;
}
.back-arrow:hover{
  background:#F7F8F9;
  border: 2px solid #091b32;
  color:#091B32;
}

/* ================= QUICK LINKS ================= */
.quick-content{
  margin-top:40px;
}
.quick-content ul{
  list-style:none;
  padding:0;
}

.quick-content li{
  margin-bottom:40px;
  font-family: 'Inter', sans-serif;
}

.quick-content li a{
  text-decoration:none;
  font-size:16px;
  font-weight:600;
  color:#071C34;
  position:relative;
  display:inline-block;
  font-family: 'Inter', sans-serif;
}

/* Line animation */
.quick-content li a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:0%;
  height:3px;
  background:#071C34;
  transition:0.4s ease;
}

.quick-content li a:hover::after{
  width:100%;
}
/* ------------------------------------------------------------------------------ */

/* ================= HERO SECTION ================= */

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  color:#ffffff;
}

/* VIDEO */
.hero-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}

/* DARK OVERLAY */
.hero-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(
    to bottom,
    rgba(7,28,52,0.85),
    rgba(7,28,52,0.95)
  );
  z-index:-1;
}

/* CONTENT */
.hero-content{
  max-width:1400px;
  padding:0 40px;
}

/* MAIN TITLE */
.hero-content h1{
  font-size:56px;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:1.5px;
 font-family: 'DM Sans', sans-serif;
}

/* YELLOW QUOTE */
.hero-quote{
  color:#F3A804;
  font-size:20px;
  line-height:1.3;
  margin-bottom:30px;
 font-family: 'DM Sans', sans-serif;
}

/* SUB TITLE */
.hero-content h2{
  font-size:36px;
  font-weight:600;
  margin-bottom:10px;
 font-family: 'DM Sans', sans-serif;
  
}

/* SUB TEXT */
.hero-subtext{
  font-size:20px;
  line-height:1.3;
  margin-bottom:  56px;
 color:#F3A804;
 font-family: 'DM Sans', sans-serif;
}

/* BUTTONS */
.hero-buttons{
  display:flex;
  justify-content:center;
  gap:40px;
}

/* BOOK A DEMO BUTTON */
.btn-demo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 24px;
  background:#1E77BC;
  color:#ffffff;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  transition:0.3s;
  font-size: 16px;
  font-family: 'DM Sans', sans-serif;
}

/* HOVER: WHITE BG, BLUE TEXT */
.btn-demo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 24px;
  background:#1E77BC;
  color:#ffffff;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  transition:0.3s;
  font-family: 'DM Sans', sans-serif;
}

/* Hover: white bg, blue text + icon */
.btn-demo:hover{
  background:#ffffff;
  color:#1E77BC;
}

/* icon smooth transition */
.demo-icon{
  transition:0.3s;
}
/* LEARN MORE BUTTON */
.btn-learn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  border:2px solid #1E77BC;
  color:#ffffff;
  text-decoration:none;
  border-radius:8px;
  font-weight:600;
  transition:0.3s ease;
  font-family: 'DM Sans', sans-serif;
}

/* Hover state */
.btn-learn:hover{
  background:#ffffff;
  color:#1E77BC;
}

/* Icon smooth transition */
.learn-icon{
  transition:0.3s ease;
}
/* ------------------------------------------------------------------------------------------------------------------------------- */
/* <!-- AI and Human --> 
/* ================= AI HUMAN SECTION ================= */

.ai-human-section{
  background:#091B32;
  padding:80px 0;
  color:#ffffff;
}

.ai-human-section .container{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 20px;
  text-align:center;
}

/* Title */
.ai-title{
  font-size:40px;
  font-weight:700;
  color:#F3A804;
  margin-bottom:40px;
   font-family: 'DM Sans', sans-serif;

}

/* Description */
.ai-description{
  max-width:1920px;
  margin:0 auto 80px auto;
  font-size:16px;
  line-height:1.8;
  color:#ffffff;
  text-align: center;
   font-family: 'DM Sans', sans-serif;

}

.ai-description p{
  margin-bottom:24px;
  font-family: 'DM Sans', sans-serif;
}

/* IMAGE WRAPPER */
.diagram-wrapper{
  width:100%;
  margin-top:40px;
}

/* IMAGE — THIS IS THE IMPORTANT PART */
.diagram-wrapper img{
  width:100%;
  height:auto;
  display:block;
}
/* -------------------------------------------------------------------------------------------------------------------------------------- */
/* Challenges Enterprises Face with AI */
/* SECTION */

.ai-challenges{
background:#132338;
padding:80px 0;
font-family: 'DM Sans', sans-serif;
}

/* CONTAINER */

.container{
width:1400px;
margin:auto;
text-align:center;
}

/* MAIN HEADING */

.section1-title{
font-size:36px;
font-weight:600;
color:#f3a804;
margin-bottom:30px;
font-family: 'DM Sans', sans-serif;
}

/* SUB HEADING */

.section-sub{
font-size:24px;
color:#ffffff;
margin-bottom:30px;
font-family: 'DM Sans', sans-serif;
}

/* DESCRIPTION PARAGRAPHS */

.intro-text{
max-width:1400px;
margin:0 auto 60px auto;
font-family: 'DM Sans', sans-serif;
}

.intro-text p{
text-align: left;
font-size:16px;
color:#F7F8F9;
line-height:1.8;
margin-bottom:20px;
font-family: 'DM Sans', sans-serif;
}

/* CARDS GRID */

.cards{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
}

/* CARD */

.card{
position:relative;
background:#132338;
padding:30px;
border-radius:12px;
overflow:hidden;
}

/* STROKE BORDER ANIMATION */

.card::before{
content:"";
position:absolute;
inset:0;
border-radius:12px;
border:2px solid #1E77BC;

opacity:0;
transform:scale(0.9);
transition:0.7s ease;
}

.card.active::before{
opacity:1;
transform:scale(1);
}

/* CARD HEADER */

.card1-head{
display:flex;
align-items:center;
gap:12px;
margin-bottom:15px;
}

/* ICON */

.card1-head img{
width:26px;
height:26px;
}

/* CARD TITLE */

.card h3{
color:#1E77BC;
font-size:18px;
margin:0;
}

/* CARD PARAGRAPH */

.card p{
color:#ffffff;
font-size:15px;
line-height:1.6;
text-align: left;
}

/* SCROLL ANIMATION */

.reveal{
opacity:0;
transform:translateY(60px);
transition:0.8s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}
/* --------------------------------------------------------------------------------------------------------------------------------------- */
/* Meet Pramey Solves Your AI Challanges */

.pramey-section{
  padding:60px 60px;
  background:linear-gradient(180deg,#091B32,#06527F,#06527F,#06527F,#091B32);
  text-align:center;
}

.pramey-container{
  max-width:1920px;
  margin:0 auto;
}

/* Heading */
.pramey-heading{
  font-size:40px;
  font-weight:700;
  color:#F3A804;
  margin-bottom:25px;
  font-family: 'DM Sans', sans-serif;
}

/* Subheading */
.pramey-subheading{
  max-width:1400px;
  font-family: 'DM Sans', sans-serif;
  margin:0 auto 40px auto;
  font-size:20px;
  line-height:1.3;
  color:#ffffff;
}

/* Button */
.pramey-btn-wrapper{
  margin-bottom:90px;
}

.pramey-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:12px 24px;
  background:#1E77BC;
  color:#ffffff;
  border-radius:4px;
  font-size: 16px;
  font-weight:600;
  text-decoration:none;
  transition:all 0.3s ease;
 font-family: 'DM Sans', sans-serif;
}
.pramey-btn img{
  width:20px;
  height:20px;
}
.pramey-btn:hover{
  background:#fff;
  color:#1E77BC;
  border: 2px solid #1E77BC;
  
}
/* Smooth icon transition */
.pramey-btn .btn-icon{
  transition:all 0.3s ease;
}

/* Change icon on hover */
.pramey-btn:hover .btn-icon{
  content:url("../assests/icons.png/link2.png");
}

/* Cards Layout */
.pramey-cards{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:40px;
}
/* -------------------------------------------------- */
/* Card */
.pramey-card{
  background:#ffffff;
  border-radius:16px;
  padding:32px 32px;   /* slightly reduced */
  text-align:left;
  flex:1;
  border-top:4px solid #F3A804;
  transition:all 0.3s ease;
  /* opacity:0;
  transform:translateY(50px); */
/* Animation initial state */
  opacity:0;
  transform:translateY(50px);
}



/* Icon */
.icon-box{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0; /* prevents shrinking */
}

.icon-box img{
  width:28px;
  height:28px;
  object-fit:contain;
}

/* * Heading */ 
.pramey-card h3{
  font-size:24px;
  font-weight:700;
  margin:0;
  line-height:1.2;
  color:#091B32;
  align-items:left;
 font-family: 'DM Sans', sans-serif;
}

.pramey-card h3 span{
  color:#F3A804;
  align-items:left;
  font-family: 'DM Sans', sans-serif;
}


/* Paragraph */
.pramey-card p {
  font-size:16px;
  line-height:1.5;
  margin:0;
  color:#3C4048;
  align-items:left;
 font-family: 'DM Sans', sans-serif;
}


/* ================= HOVER EFFECT ================= */

.pramey-card:hover{
  background:#F3A804;
}

.pramey-card:hover h3,
.pramey-card:hover p,
.pramey-card:hover h3 span{
  color:#ffffff;
  
}
 /* Animation initial state */
   .pramey-card.show { opacity:0;
  transform:translateY(50px);
  transition:opacity 0.8s ease, transform 0.8s ease;
}

/* When visible */
.pramey-card.show{
  opacity:1;
  transform:translateY(0);
}

/* Title Row */
.pramey-card-title{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:6px;
  justify-content: flex-start;
  font-family: 'DM Sans', sans-serif;
}

.pramey-card-title img{
  width:24px;
  height:24px;
  display:block;
}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Customer Success Stories */

.success-section{
  background:#0D1F34;
  padding:60px 60px;
 font-family: 'DM Sans', sans-serif;
}

/* Header */
.success-header{
  position:relative;
  text-align:center;
  margin-bottom:40px;
  font-family: 'DM Sans', sans-serif;
}

.success-header h2{
  color:#F3A804;
  font-size:32px;
  font-weight:700;
 font-family: 'DM Sans', sans-serif;
}

.view-all{
  position:absolute;
  right:0;
  top:8px;
  font-size:16px;
  font-family: 'DM Sans', sans-serif;
  color:#ffffff;
  text-decoration:underline;
}

/* Row */
.success-row{
  display:flex;
  gap:60px; /* same spacing as screenshot */
}

/* Card */
.success-card{
  width:50%; /* ensures 2 cards fit perfectly */
  background:#ffffff;
  border-radius:16px;
  overflow:hidden;
  border-top: 3px solid#F3A804;

}

/* Image */
.card-image{
  width:100%;
  aspect-ratio: 16 / 9;
}

.card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Body */
.card-body{
  padding:30px;
  border-top:3px solid #F3A804;
  font-family: 'DM Sans', sans-serif;
}

/* Title */
 .card-title{
  display:flex;
  align-items:center;
 justify-content:space-between;
  gap:12px;           /* reduce space between icon and text */
  margin-bottom:12px; /* slightly reduce bottom spacing */
  font-family: 'DM Sans', sans-serif;
}

.card-title h3{
  font-size:20px;
  color:#1E77BC;
  font-weight:700;
 font-family: 'DM Sans', sans-serif;
}

.time{
  font-size:12px;
  color:#1E77BC;
  display:flex;
  align-items:center;
  gap:6px;
  font-family: 'DM Sans', sans-serif;
}

.time img{
  width:12px;
  height: 12px;
}

/* Paragraph */
.card-body p{
  font-size:16px;
  line-height:1.7;
  color:#3C4048;
  margin-bottom:25px;
  font-family: 'DM Sans', sans-serif;
}

/* Footer */
.card-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* Learn More */
.learn-more{
  font-size:14px;
  font-weight:600;
  color:#1E77BC;
  display:flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
    font-family: 'DM Sans', sans-serif;
}

.learn-more img{
  width:14px;
}

/* Case Button */
.case-btn{
  background:#1E77BC;
  color:#ffffff;
  border:none;
  padding:8px 18px;
  border-radius:16px;
  font-size:12px;
  cursor:pointer;
   font-family: 'DM Sans', sans-serif;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* Our Mission */
/* ================= MISSION SECTION ================= */

.mission-section{
  width:100%;
  background:linear-gradient(180deg,#091B32,#06527F,#091B32);
  padding:80px 0;
  color:#ffffff;
}

.mission-container{
  max-width:1400px;
  margin:0 auto;
  padding:0 40px;
  text-align:center;
   font-family: 'DM Sans', sans-serif;
}

.mission-heading{
  font-size:32px;
  font-weight:700;
  color:#F3A804;
  margin-bottom:30px;
   font-family: 'DM Sans', sans-serif;
}

.mission-subtext{
  max-width:900px;
  margin:0 auto 80px auto;
  font-size:20px;
  line-height:1.6;
  font-family: 'DM Sans', sans-serif;
}

/* Row */
.mission-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:80px;
}

/* ================= CIRCLE ================= */

/* ================= FULL WIDTH SECTION ================= */

.mission-section{
  width:100vw;
  margin-left:calc(-50vw + 50%);
  background:linear-gradient(180deg,#091B32,#1E77BC,#091B32);
  padding:80px 0;
  color:#ffffff;
  overflow:hidden;
}

.mission-content{
  max-width:1400px;
  margin:0 auto;
  padding:0 40px;
  text-align:center;
}

.mission-heading{
  font-size:24px;
  font-weight:700;
  color:#F3A804;
  margin-bottom:30px;
  font-family: 'DM Sans', sans-serif;
}

.mission-subtext{
  max-width:900px;
  margin:0 auto 80px auto;
  font-size:16px;
  line-height:1.6;
  font-family: 'DM Sans', sans-serif;
}

/* Row */
.mission-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:80px;
}

/* ================= CIRCLE ================= */

/* ================= FULL WIDTH SECTION ================= */

.mission-section{
  width:100vw;
  margin-left:calc(-50vw + 50%);
  background:linear-gradient(180deg,#091B32,#1E77BC,#091B32);
  padding:120px 0;
  color:#ffffff;
  overflow:hidden;
}

.mission-container{
  max-width:1400px;
  margin:0 auto;
  padding:0 40px;
  text-align:center;
}

.mission-heading{
  font-size:34px;
  font-weight:700;
  color:#F3A804;
  margin-bottom:30px;
   font-family: 'DM Sans', sans-serif;
}

.mission-subtext{
  max-width:1400px;
  margin:0 auto 80px auto;
  font-size:20px;
  line-height:1.6;
   font-family: 'DM Sans', sans-serif;
}

/* Row */
.mission-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:80px;
}

/* ================= CIRCLE ================= */

.mission-circle{
  position:relative;
  width:350px;
  height:350px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  opacity:0;
  transform:translateY(80px);
  transition:all 0.8s ease;
}

/* Scroll reveal */
.mission-circle.show{
  opacity:1;
  transform:translateY(0);
}

/* Rotating gradient stroke */
.mission-circle::before{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  background:conic-gradient(
    #1E77BC,
    #1E77BC,
    #091B32,
    #1E77BC,
    #1E77BC
  );
  animation:rotateBorder 5s linear infinite;
}

/* Inner circle (background cover) */
.mission-circle::after{
  content:"";
  position:absolute;
  inset:2px; /* stroke thickness */
  background:#091B32;
  border-radius:50%;
}

/* Keep content above */
.circle-content{
  position:relative;
  z-index:2;
  padding:60px;
  text-align:center;
}

/* Icon circle */
.mission-icon{
  width:70px;
  height:70px;
  border-radius:50%;
  background:#132338;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 25px auto;
   font-family: 'DM Sans', sans-serif;
}

.mission-icon img{
  width:48px;
  height:48px;
}

.mission-circle h3{
  font-size:20px;
  margin-bottom:15px;
   font-family: 'DM Sans', sans-serif;
}

.mission-circle p{
  font-size:16px;
  line-height:1.6;
  color:#ffffff;
   font-family: 'DM Sans', sans-serif;
}

/* Border rotation */
@keyframes rotateBorder{
  100%{
    transform:rotate(360deg);
  }
}
/* -------------------------------------------------------------------------------------------------------------------------- */

/* Featured Insights & Perspectives */
/* ============================= */
/* SECTION - Full Width Layout  */
/* ============================= */

.insights-section {
  position: relative;
  width: 100vw;                 /* Full viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;           /* Pull out of parent */
  margin-right: -50vw;

  padding: 80px 0;
  background-color: #091B32;
  box-sizing: border-box;
}


/* ============================= */
/* SECTION TITLE                 */
/* ============================= */

.section-title {
  text-align: center;
  font-size: 36px;
  margin-bottom: 60px;
  font-family: 'DM Sans', sans-serif;
  color: #F3A804;
}


/* ============================= */
/* SCROLL WRAPPER               */
/* Enables horizontal scrolling */
/* ============================= */

.scroll-wrapper {
  width: 100%;
  overflow-x: auto;             /* Enable horizontal scroll */
  overflow-y: hidden;
  scroll-behavior: smooth;

  /* Hide scrollbar (Firefox + Edge) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Hide scrollbar (Chrome, Safari) */
.scroll-wrapper::-webkit-scrollbar {
  display: none;
}


/* ============================= */
/* ROW - Keeps cards in 1 line  */
/* ============================= */

.insights-row {
  display: flex;
  gap: 30px;                    /* Space between cards */
  padding: 0 60px;              /* Left & right inner spacing */
  width: max-content;           /* Important for horizontal scroll */
}


/* ============================= */
/* CARD DESIGN                  */
/* ============================= */

.insight-card {
  position: relative;
  flex: 0 0 auto;               /* Prevent shrinking */
  width: 650px;
  min-height: 350px;
  padding: 30px;
  border-radius: 16px;
  background-color: #132338;
  box-sizing: border-box;
  overflow: hidden;
   font-family: 'DM Sans', sans-serif;
}


/* ======================================== */
/* ANIMATED LINEAR GRADIENT STROKE BORDER  */
/* ======================================== */

.insight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;                 /* Border thickness */
  border-radius: 16px;

  /* Linear gradient stroke */
  background: linear-gradient(
    90deg,
    #1E77BC,
    #091B32,
    #1E77BC
  );

  background-size: 200% 100%;
  animation: strokeAnimation 4s linear infinite;

  /* Mask to show only border */
 -webkit-mask:
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);
-webkit-mask-composite: xor;

mask:
  linear-gradient(#000 0 0) content-box,
  linear-gradient(#000 0 0);
mask-composite: exclude;
}

/* Animation movement */
@keyframes strokeAnimation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 200% 0%;
  }
}


/* ============================= */
/* CARD CONTENT STYLING         */
/* ============================= */

.card-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.blog-tag {
  background-color: #1E77BC;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 1000px;
  font-size: 12px;
  font-family: 'DM Sans', sans-serif;
}

.date {
  font-size: 12px;
  opacity: 0.7;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  color: #ffffff;
}

.card-title {
  font-size: 20px;
  margin-bottom: 16px;
  color: #F3A804;
  font-family: 'DM Sans', sans-serif;
}

.card-desc {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 25px;
  opacity: 0.85;
  color: #fff;
   font-family: 'DM Sans', sans-serif;
}

.read-link {
  position: relative;
  display: inline-block;   /* Important */
  color: #1E77BC;
  font-size: 14px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  text-decoration: none;
}

/* Custom underline */
.read-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background-color: #1E77BC;
  transition: width 0.3s ease;
}

.read-link:hover::after {
  width: 100%;
}
/* What our partners say about us */

/* ============================= */
/* SECTION                      */
/* ============================= */

.testimonial-section {
  position: relative;
  width: 100vw;              /* Full viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;        /* Break out of parent */
  margin-right: -50vw;

  padding: 80px 0;
  background: #132b46;
  box-sizing: border-box;
}

.testimonial-title {
  text-align: center;
  font-size: 40px;
  color: #F3A804;
  margin-bottom: 80px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


/* ============================= */
/* SCROLL WRAPPER               */
/* ============================= */

.testimonial-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.testimonial-wrapper::-webkit-scrollbar {
  display: none;
}


.testimonial-wrapper::-webkit-scrollbar {
  display: none;
}


/* ============================= */
/* ROW                          */
/* ============================= */

.testimonial-row {
  display: flex;
  gap: 40px;
  padding: 0 120px;
  width: max-content;
}


/* ============================= */
/* CARD                         */
/* ============================= */

.testimonial-card {
  flex: 0 0 auto;
  width: 520px;
  min-height: 250px;
  padding: 20px;
  background: #ffffff;
  border-radius: 16px;
 font-family: 'DM Sans', sans-serif;
  border: 2px solid #ededed;   /* Proper border */

  transition: all 0.4s ease;
  transform: scale(0.9);
}


/* ============================= */
/* HOVER EFFECT                 */
/* ============================= */

.testimonial-card:hover {
  background: #f3a804;
  transform: scale(1);
}

.testimonial-card:hover .testimonial-text,
.testimonial-card:hover h4,
.testimonial-card:hover span {
  color: #ffffff;
}


/* ============================= */
/* TEXT                         */
/* ============================= */

.testimonial-text {
  font-size: 16px;
  line-height: 1.7;
  color: #333333;
  margin-bottom: 40px;
 font-family: 'DM Sans', sans-serif;
}


/* ============================= */
/* USER INFO                    */
/* ============================= */

.testimonial-user {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;   /* Important for PNG */
}

.testimonial-user h4 {
  margin: 0;
  font-size: 16px;
  color: #091B32;
}

.testimonial-user span {
  font-size: 14px;
  color: #333333;
}
/* Contact Us */
/* ============================= */
/* SECTION BACKGROUND            */
/* ============================= */

.cta-section {
  position: relative;
  width: 100vw;              /* Full viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;        /* Break out of parent */
  margin-right: -50vw;

  padding: 100px 20px;
  background: #091B32;

  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* ============================= */
/* INNER GRADIENT CARD           */
/* ============================= */

.cta-container {
  width: 90%;
  max-width: 1600px;
  padding: 40px 40px;
  border-radius: 16px;
  text-align: center;
  background: linear-gradient(180deg, #1E77BC 0%,#1E77BC , #091B32 100%);
   font-family: 'DM Sans', sans-serif;
}

/* ============================= */
/* TEXT                          */
/* ============================= */

.cta-title {
  font-size: 40px;
  color: #F3A804;
  margin-bottom: 10px;
  font-family: 'DM Sans', sans-serif;
}

.cta-subtitle {
  font-size: 20px;
  color: #ffffff;
  max-width: 1400px;
  margin: 0 auto 40px auto;
  line-height: 1.6;
   font-family: 'DM Sans', sans-serif;
}

/* ============================= */
/* BUTTONS WRAPPER               */
/* ============================= */

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 25px;
  flex-wrap: wrap;
}

/* ============================= */
/* COMMON BUTTON STYLE           */
/* ============================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
   font-family: 'DM Sans', sans-serif;
  cursor: pointer;
}
/* Change PNG icon color to blue on hover */
.btn-primary:hover .btn-icon {
  filter: brightness(0) saturate(100%)
          invert(32%) sepia(98%)
          saturate(2476%)
          hue-rotate(185deg)
          brightness(95%) contrast(95%);
}

/* ============================= */
/* PRIMARY BUTTON (Blue)         */
/* ============================= */

.btn-primary {
  background-color: #1E77BC;
  color: #ffffff;
  
}

/* Hover + Click */
.btn-primary:hover,
.btn-primary:active {
  background-color: #ffffff;
  color: #1E77BC;
}

/* ============================= */
/* OUTLINE BUTTON (White)        */
/* ============================= */

.btn-outline {
  
  color: #ffffff;
  border: 2px solid #1E77BC;
}

/* Hover + Click */
.btn-outline:hover,
.btn-outline:active {
  background-color: #ffffff;
  color: #1E77BC;

}

/* ============================= */
/* ICON                          */
/* ============================= */

.btn-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* <!-- Footer --> */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* FULL WIDTH FOOTER BACKGROUND */
.footer {
  width: 100vw;                         /* Force full viewport width */
  margin-left: calc(50% - 50vw);         /* Break out of parent */
  background: linear-gradient(180deg, #152131 0%, #091B32 100%);
  color: #ffffff;
  position: relative;
}

/* INNER CONTENT ALIGNMENT */
.footer-wrapper {
  max-width: 1440px;   /* Design width */
  margin: 0 auto;
  padding: 40px 40px;
  box-sizing: border-box;
}


/* FOOTER BACKGROUND
.footer {
  background: linear-gradient(90deg, #091B32 0%, #102B45 100%);
  color: #ffffff;
  position: relative;
  width: 100%;
} */

/* Wrapper Alignment */
.footer-wrapper {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 40px;
}


/* Top Row */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
     font-family: 'Inter', sans-serif;
}

.footer-logo {
  width: 150px; /* PNG Logo */
}

.footer-copy {
  font-size: 14px;
  opacity: 0.8;
  color:#ffffff;
     font-family: 'Inter', sans-serif;
}

/* Divider */
.footer-divider {
  height: 1px;
  background: #323E4F;
  margin: 30px 0 50px 0;
     font-family: 'Inter', sans-serif;
}

/* Grid Layout */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 80px;
}

.footer-about {
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
  color: #F7F8F9;
     font-family: 'Inter', sans-serif;
}

.footer-column h4 {
  margin-bottom: 20px;
  font-weight: 500;
     font-family: 'Inter', sans-serif;
}

/* Links */
.footer-column ul {
  list-style: none;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 12px;
     font-family: 'Inter', sans-serif;
}

.footer-column ul li a {
  color: #F7F8F9;
  text-decoration: none;
  position: relative;
  font-size: 14px;
     font-family: 'Inter', sans-serif;
}

/* Underline animation */
.footer-column ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 1px;
  background: #F7F8F9;
  transition: width 0.3s ease;
}

.footer-column ul li a:hover::after {
  width: 100%;
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 20px;
}

.social-icons img {
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease;
}

.social-icons img:hover {
  transform: scale(1.1);
}

/* ============================= */
/* SCROLL TO TOP CIRCLE         */
/* ============================= */

.scroll-top {
  position: absolute;
  right: 60px;
  bottom: 60px;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

/* Rotating SVG */
.rotating-text {
  width: 100%;
  height: 100%;
 
  animation: rotateText 15s linear infinite;
}

/* Rotation animation */
@keyframes rotateText {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Static Arrow Centered */
.scroll-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
     font-family: 'Inter', sans-serif;
  color: #ffffff;
  pointer-events: none; /* ensures click works on parent */
}
/* ---------------------------------------------------------------------------------------------------------------------------------- */
/* ==========================================================
   RESPONSIVE SYSTEM
========================================================== */

/* =========================
   TABLET (1024px)
========================= */
@media (max-width:1024px){

  .navbar{ padding:0 40px; }
  .nav-links{ gap:28px; }

  .hero-content h1{ font-size:44px; }
  .hero-content h2{ font-size:28px; }
  .hero-quote,
  .hero-subtext{ font-size:18px; }

  .cards{ grid-template-columns:1fr; }

  .pramey-cards{
    flex-direction:column;
    gap:30px;
  }

  .success-row{
    flex-direction:column;
    gap:40px;
  }

  .success-card{ width:100%; }

  .mission-row{
    flex-direction:column;
    gap:60px;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }
}


/* =========================
   MOBILE (768px)
========================= */
@media (max-width:768px){

  /* NAV */
  .navbar{ padding:0 20px; }
  .nav-links{ display:none; }
  .menu-icon{ display:flex; }

  /* HERO */
  .hero{
    min-height:auto;
    padding:100px 20px;
  }

  .hero-content h1{ font-size:32px; }
  .hero-content h2{ font-size:22px; }
  .hero-quote,
  .hero-subtext{ font-size:16px; }

  .hero-buttons{
    flex-direction:column;
    gap:20px;
  }

  .btn-demo,
  .btn-learn{
    width:100%;
    justify-content:center;
  }

  /* AI HUMAN */
  .ai-human-section{ padding:60px 20px; }
  .ai-title{ font-size:26px; }
  .ai-description{ font-size:14px; }

  /* CHALLENGES */
   .ai-challenges .container{
    width:100%;
    max-width:100%;
    padding:0 20px;
  }
  .ai-challenges .container{
    width:100%;
    max-width:100%;
    padding:0 20px;
  }
.section1-title{
    font-size:22px;
    line-height:1.3;
    padding:0 10px;
  }

  .section-sub{
    font-size:16px;
    padding:0 10px;
  }

  /* PRAMEY */
  .pramey-section{ padding:60px 20px; }
  .pramey-heading{ font-size:26px; }
  .pramey-subheading{ font-size:16px; }
  .pramey-card{ padding:24px; }

  /* SUCCESS */
  .success-section{ padding:60px 20px; }

  .success-header{
    display:flex;
    flex-direction:column;
    gap:10px;
    text-align:center;
  }

  .success-header h2{ font-size:24px; }

  .view-all{
    position:static;
    font-size:14px;
  }

  .card-body{ padding:20px; }

  /* MISSION */
  .mission-section{ padding:80px 20px; }

  .mission-heading{ font-size:26px; }

  .mission-subtext{
    font-size:16px;
    margin-bottom:50px;
  }

  .mission-circle{
    width:300px;
    height:300px;
  }

  .circle-content{ padding:25px; }

  .mission-circle h3{ font-size:16px; }
  .mission-circle p{ font-size:14px; }

  /* INSIGHTS */
  .insights-row{ padding:0 20px; }

  .insight-card{ width:320px; }

  .section-title{
    font-size:24px;
    padding:0 20px;
  }

  /* TESTIMONIAL */
  .testimonial-row{ padding:0 20px; }

  .testimonial-card{ width:300px; }

  .testimonial-title{
    font-size:24px;
    padding:0 20px;
  }

  /* CTA */
  .cta-section{ padding:80px 20px; }

  .cta-container{ padding:30px 20px; }

  .cta-title{ font-size:26px; }
  .cta-subtitle{ font-size:16px; }

  .cta-buttons{
    flex-direction:column;
    gap:20px;
  }

  .btn{
    width:100%;
    justify-content:center;
  }

  /* FOOTER */
  .footer-wrapper{ padding:40px 20px; }

  .footer-top{
    flex-direction:column;
    gap:20px;
    text-align:center;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:30px;
  }

  .scroll-top{
    right:20px;
    bottom:20px;
  }
}


/* =========================
   SMALL MOBILE (480px)
========================= */
@media (max-width:480px){

  .hero-content h1{ font-size:26px; }
  .hero-content h2{ font-size:18px; }

  .mission-circle{
    width:240px;
    height:240px;
  }

  .insight-card{ width:280px; }
  .testimonial-card{ width:260px; }

  .mission-heading{ font-size:22px; }
  .mission-subtext{ font-size:14px; }

  .mission-circle h3{ font-size:14px; }
  .mission-circle p{ font-size:12px; }
}