/*@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;800&display=swap');*/

:root {

    --accent: #ED3D00;

    --dark-text: #000;

    --dark-background: #24272A;

    --white-text: #fff;

    --light-gray-text: #9B9B9B;

    --dark-gray-text: #666666;

    --white-background: #F6F1EB;

    --gray-background: #F4F4F4;

  }

  /* to be deleted tbd end*/

/* reset all default margin and padding */
img{
  pointer-events: none;
  -webkit-user-drag: none;
}
*,

*::before,

*::after {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  user-select: none;

  -webkit-user-select: none; /* Safari */
 
  -ms-user-select: none;     /* IE/Edge */
}

ul,a{

    list-style: none; 

}

/* Set up some basic styles */

html{
  scroll-behavior: smooth;

}



.smooth-wrapper {

  position: fixed;

  width: 100%;

}



body {

  line-height: 1.4;              

  width: 100vw;

  overflow-x: hidden;

  
}

/* Style the scrollbar itself */

::-webkit-scrollbar {

  width: 15px;  /* Width of the vertical scrollbar */

  height: 12px; /* Height of the horizontal scrollbar */

}



/* Style the thumb (the draggable part of the scrollbar) */

::-webkit-scrollbar-thumb {

  background-color: var(--dark-background); /* Thumb color */

  border-radius: 10px;       /* Rounded corners for the thumb */

  border: 3px solid #f1f1f1; /* Border around the thumb */

  transition: all 0.4s ease;

}



/* Style the track (the area the thumb slides within) */

::-webkit-scrollbar-track {

  background-color: #f1f1f1; /* Track color */

  border-radius: 10px;       /* Rounded corners for the track */

}



/* Optional: Style the hover effect on the thumb */

::-webkit-scrollbar-thumb:hover {

  background-color: #d19458; /* Change color when the thumb is hovered */

}

.error-message{

  color: red;

}

.container{

  width: 100%;

  padding: 0 min(5%,50px);

  margin: auto; 

  padding-bottom: 100px; 

}
.alert{

  position: fixed;

  z-index: 24;

  bottom:30px;

  right:30px;

  transition: opacity 0.5s ease-in-out;

  animation: fadeOut 5s forwards;

  color: var(--dark-text);

  padding: 20px;

  border-radius: 20px;

  z-index: 40;

}

.alert-success{

  background-color: #4CAF50;

}

@keyframes fadeOut {

  0% {

    opacity: 1;

  }

  80% {

    opacity: 1;

  }

  100% {

    opacity: 0;

    visibility: hidden;

  }

}

.white-color{

  color: var(--dark-text) !important;

}

.dark-color{

  color: var(--dark-text) !important;

}

.mobile-only{

  background:rebeccapurple;

}

section{

  display: flex;

  justify-content: center;

  align-items: center;

  position: relative;

  /* overflow: hidden; */

}

.only-mobile{
  display: none !important;
}

.black-btn:hover{

    cursor: pointer;

    background-color: transparent;

    border: 1px solid var(--dark-text);

    color: var(--dark-text);

  }

.bg-gray{

    background-color: #D9D9D9;

}

.pb-200{
  padding-bottom: 200px;
}
.pb-100{

  padding-bottom: 100px;

}
.pb-50{

  padding-bottom: 50px;

}
.pt-100{

  padding-top: 100px;

}
.pt-50{

  padding-top: 50px;

}

.ph-20{
  padding-inline: 20px;
}
.p-10{

  padding: 10px;

}

.p-20{

  padding: 20px;

}

.p-30{

  padding: 30px;

}

.p-40{

  padding: 40px;

}

.p-50{

  padding: 50px;

}

.p-100{

  padding: 100px;

}
.p-200{

  padding: 200px;

}

.pv-100{
 padding-top: 100px;
 padding-bottom: 100px;
}
.pv-200{
 padding-top: 200px;
 padding-bottom: 200px;
}
.m-auto{

  margin-inline: auto;

}

.mb-10{

  margin-bottom: 10px;

}

.mb-20{

  margin-bottom: 20px;

}

.mb-50{

  margin-bottom: 50px;

}

.mb-100{

  margin-bottom: 100px;

}

.h-100{

  height: 100%;

}

.h-50{

  height: 50%;

}

.w-100{

  width: 100%;

}

.w-50{

  width: 50%;

}

.flex{ /* this will be column in mobile */

    display: flex;

}

.flex-row{ /* this will always be row  */

  display: flex;

  flex-direction: row;

  gap: 20px;

  align-items: center;

}

.flex-column{ 

  display: flex;

  flex-direction: column;

}
.flex-wrap{
  flex-wrap: wrap;
}
.justify-center{

  justify-content: center;

}
.space-around{

  justify-content: space-around;

}

.space-evenly{

  justify-content: space-evenly;

}

.justify-start{

  justify-content: flex-start;

}

.justify-end{

  justify-content: flex-end;

}

.space-between{

  justify-content: space-between;

}

.align-start{

  align-items: flex-start;

}

.align-end{

  align-items: flex-end;

}

.align-center{

  align-items: center;

}

.gap-8{
  gap: 8px;
}
.gap-10{

    gap: 10px;

}

.gap-20{

    gap: 20px;

}

.gap-32{
  gap: 32px;
}
.gap-40{

    gap: 40px;

}

.gap-50{

    gap: 50px;

}

.gap-72{
  gap: 72px;
}
.gap-100{

  gap: 100px;

}
.gap-200{

  gap: 200px;

}

html.no-scroll {

  overflow: hidden;

}



.image-conatiner img{

 width: 100%;

}

section{

  /* overflow: hidden; */

  width: 100vw;

  font-weight: 600;

}

.Neue{

  font-family: 'Neue Haas Display';

}

h1{

    font-size: 115px;

    font-family: 'Neue Haas Display';

    color: var(--dark-text);

    font-weight: bold;

    line-height: 1.2;

    text-align: left;

  }

h2{

  font-size: 80px;

    font-family: 'Neue Haas Display';

    color: var(--dark-text);

    font-weight: bold;

    font-weight: 700;


}

h3{

    font-size: 72px;

    font-family: 'Neue Haas Display';

    color: var(--dark-text);

    font-weight: bold;

}

h4{

    font-size: 48px;

    font-family: 'Neue Haas Display';

    color: var(--dark-text);

    font-weight: 600;

}

h5{

    font-size: 32px;

    color: var(--dark-text);

    font-weight: 500;

}

h6{

  font-size: 24px;

  color: var(--dark-text);

  font-weight: 500;

  font-family: 'Neue Haas Display';

}

p{

    font-family: 'Montserrat VF';

    color: var(--dark-text);

    font-weight: 400;

}

a{

    font-weight: 400;

    color: var(--dark-text);

}
a, span{
  font-size: 16px;
  
  font-family: 'Montserrat VF';
  
  text-decoration: none;
  
}
span{
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.dark-text{

  color: var(--dark-text);

}

.dark-text{

  color: var(--dark-text);

}

.accent-text{

  color: var(--accent);

}

.dark-gray-text{

  color: var(--dark-gray-text);

}

.light-gray-text{

  color: var(--light-gray-text);

}

.image-container img{

  width: 100%;

}

.xl6-text{

  font-size: 96px;

}
.xl5-text{

  font-size: 72px;

}

.xl4-text{

  font-size: 60px;

}

.xl3-text{

    font-size: 48px;

}

.xl2-text{

    font-size: 40px;

}

.xl-text{

    font-size: 32px;

}

.l-text{

    font-size: 24px;

}

.m-text{

    font-size: 20px;

}

.s-text{

    font-size: 18px;

}

.xs-text{

    font-size: 16px;

}
.xs2-text{

    font-size: 12px;
}

.text-center{

  text-align: center;

}

.text-left{

  text-align: left;

}

.text-right{

  text-align: right;

}

.bg-dark{

  background-color: var(--dark-background);

}

.bg-white{

  background-color: var(--white-background);

}

.bg-accent{

  background-color: var(--accent-background);

}

.max-300{

  max-width: 300px;

}

.max-450{
  max-width: 450px;
}
.max-500{

  max-width: 500px;

}

.max-1000{
  max-width: 1000px;
}
.max-1200{

  max-width: 1200px;

  margin-inline:auto;

}

.max-1440{

  max-width: 1440px !important;

  margin-inline: auto;

}

.max-1900{

  max-width: 1900px !important;

  margin-inline: auto;

}

.width-100{

  width: 100%;

}


  .absolute{

    position: absolute;

  }



  /* buttons start */

  

.btn{

  min-width: 200px;

}

.outlined-btn{

  text-align: center;

  background-color: transparent;

  border: 1px solid var(--dark-text);

  color: var(--dark-text);

  width: 200px;

  padding: 10px 0;

  position: relative;

  overflow: hidden;



}

.outlined-btn:hover{

  cursor: pointer;

}
.outlined-btn:hover .btn-bg{
 background-color: #fff;
}
.outlined-btn:hover .btn-label{
 color: #000;
}
.white-btn{

  border-color: var(--dark-text);

  color: var(--dark-text);

}

.white-btn:hover span{

  color: var(--dark-text) !important;

}

.black-btn{

  text-align: center;

  background-color: var(--dark-text);

  color: var(--dark-text);

  padding: 10px 20px;

  position: relative;

  overflow: hidden;



}

.accent-btn{

  text-align: center;

  background-color: var(--accent);

  color: var(--dark-text);

  padding: 5px 10px;

  position: relative;

  overflow: hidden;

  transition: all .4s ease;

  border: none;

}

.accent-btn:hover{

  transform: scale(1.1);

  border: 1px solid var(--accent);

  background-color: transparent;

  color: var(--accent);

  cursor: pointer;

}




.btn:hover .btn-bg {

  transform: translate(-50%, -50%) scale(1);

}

.btn-label{

  position: relative;

  font-weight: 400;

  transition: color 0.3s ease-out;

  z-index: 1;

}



.outlined-btn:hover .btn-bg {

  transform: translate(-50%, -50%) scale(1);

}

/* for fill animation */ 

.btn-bg{

  position: absolute;

  top: 0;

  left: 0;

  min-width: 225%;

  min-height: 225%;

  aspect-ratio: 1;

  border-radius: 50%;

  background-color:  var(--dar);

  transform: translate(-50%, -50%) scale(0);

  transition: transform 0.5s ease-out;

}


  /* buttons end */

/* header start */

header{
  background: var(--white-background);

}
.honest-opinions header{
  background: #f4f4f4

}
.header-container{
  width: 100vw;
  max-width: 1440px;
  padding-left: 50px;
  padding-top: 35px;
  margin-inline:auto;
  position: relative;
}
.header-container .nav-links{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.header-container .nav-links a{
  color: var(--dark-text);
  font-family: 'Neue Haas Display';
  width:200px;
}
/*.header-container .nav-links a*/
.header-container ul a:nth-of-type(3){
   width:90px;
    }


/* header end */

/**************************  White Page Start ***************************/
.white-page{
  background: var(--white-background);
}
/*************  Hero Section  Start**************/
.hero-section .large__quotes{
  font-family: "Neue Haas Display";
  font-size: 200px;
  font-weight: 700;
  color: var(--dark-text);
  align-self: flex-end;
}
.hero-section{
  width: 100vw;
  height: calc( 100vh - 110px ) ;
  padding-top: 100px;
  padding-bottom: 0;
  overflow: hidden;
}
.hero-section h1{
  width: 530px;
}
.hero-section .m-text{
  width: 340px;
}
.hero-section .image-container{
  width: 530px;
}
.hero-section .image-container img{
  width: 530px;
}
.hero-section-container .full-width-logo{
  width: 90vw;
  margin-inline:auto;
  position: relative;
}
.hero-section-container .full-width-logo-container p{
  margin-inline:auto;
  font-weight: 500;
  font-style: italic;
}
/*************  Hero Section End **************/

.full-width-logo-container{
  width: 90%;
  margin-inline: auto;
  text-align: center;
}

/*************  Acknowledge Section Start **************/
  .acknowledgement{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  /* .acknowledgement h2{ */
  h2{
    font-size: 32px;
  }
  .acknowledgement .content-container{
    gap: 50px;
    text-align: center;
  }
  .acknowledgement .text-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: 435px;
  }
/*************  Acknowledge Section End **************/
/* journy ( process )  start*/
.process-image video {
  position: fixed;
  top: 0 !important;
  left: 0;
  width: 100vw;      /* or whatever fixed size you want */
  height: 375px;     /* or a fixed height so it won't reflow */
  object-fit: cover;
  z-index: 99;
}
.sticky-video-container {
  position: relative;  /* or use sticky if you prefer */
  top: 0; left: 0;
  width: 100vw;
  height: fit-content;  z-index: 999;
  /*opacity: 0;*/
  background:var(--white-background);
  transition: opacity .4s ease;
  pointer-events: none;
}

#pinnedVideo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .4s ease;
}
.process{
        height: 1860px;
        position: relative;
        display: flex;
        flex-direction: column;
        max-width: 1200px;
        margin-inline:auto;
        padding-bottom: 100px;
        gap: 80px;
        padding-bottom: 72px;
    }
   
    .timeline{
        position: absolute;
        height: 1120px;
        width: 1px;
        top: 0;
    }
    .process.only-desktop .timeline{
        top:185px;
        height:1285px;
    }
    .animation-timeline{
        position: absolute;
        height: 0;
        width: 3px;
        background: black;
        left: -1px;
    }
    .circle{
        width: 0;
        height: 0;
        background:rgb(0, 0, 0);
        border-radius: 15px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    .c1{
        top: 0%;
    }
    .c2{
        top: 30%;
    }
    .c3{
        top: 66%;
    }
    .c4{
        top: 100%;
    }
    .event{
      transition: opacity .4s ease;
        display: flex;
        width:100%;
        justify-content: space-between;
        align-content: center;
        max-width: 11000;
    }
    .event .text-container{
        width: 516px;
        display: flex;
        flex-direction: column;
    }
    
    .process .image-container{
        display: flex;
        width: 516px;
    }
    .process .left .image-container{
        justify-content: flex-start;
    }
    .process .right .image-container{
        justify-content: flex-end;
    }
    .process .image-container img,.process .image-container video{
        width: 400px;
    }
    .event p{
        width: 400px;
    }

    .right.event{
        align-self: flex-end;
        flex-direction: row-reverse;
        
    }
    .left.event p{
        align-self: flex-end;
    }
    .left.event{
        align-self: flex-start;
        text-align: right
    }
    .ic{
        width: 0;
        height: 0;
        border-radius: 50%;
        border: 5px solid #ED3D00;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50% , -50%);
    }
/* journy ( process )  end*/
/************** Transformation section start **************/
.stats .stat p{
  transition: all .4s ease;
}
.stats .stat:hover p{
  color: var(--accent);
} 
.stats .container{
  padding-top: 200px;
  padding-bottom: 200px;
}
/************** Transformation Section End **************/
/************** Companies Section Start **************/
.companies .company-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--dark-text);
  width: 250px;
  height: 475px;
}
.companies .company-card .image-container{
    margin-bottom:20px;
        height: 50px;

}
.companies .company-card .s-text{
    margin-bottom: 30px;
    text-wrap: balance;
    text-align: left;
  }
.companies .company-card a{
  font-weight: bold;
  align-self: center;
  padding-bottom: 20px;
}
/************** Companies Section End **************/
/************** Mission Section End **************/

.mission-main-container {
  position: relative;
  margin: 40px auto;
  width: 1200px;
  height: fit-content;
  padding-top:100px;
  padding-bottom:100px;
}
.mission-container .xl-text{
  margin-bottom: 12px;
}
.mission-circles-container {
  position: relative;
  width: 1200px;
  height: 800px;
}

.mission-main-container svg {
  display: block;
  position: absolute;
}

.mid-circle circle,
.side-circle circle {
  fill: none;
  stroke: black;
  stroke-width: 1.5;
  stroke-dasharray: var(--dasharray);
  stroke-dashoffset: var(--dasharray);
  animation: draw 3s ease-out forwards;
}

.mission-main-container .left-circle,
.mission-main-container .outer-text-container-1 {
  left: calc(50% - 650px); /* 584 = 1168 / 2 */
  top: 50%;
  transform: translateY(-50%);
}

.mission-main-container .mid-circle,
.mission-main-container .outer-text-container-2 {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) ;
}

  .mission-main-container .right-circle,
  .mission-main-container .outer-text-container-3 {
  left: calc(50% + 650px);
  top: 50%;
  transform: translate(-100%, -50%);
}

.mission-main-container .side-circle,
.mission-main-container .outer-text-container-1,
.mission-main-container .outer-text-container-3 {
  width: 429px;
  height: 429px;
}

.mission-main-container .mid-circle 
{
  width: 546px;
  height: 546px;
}

.mission-main-container .outer-text-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mission-main-container .text-container {
  width: 200px;
  text-align: center;
}

.mission-main-container .xl-text {
  font-weight: bold;
}
.dot-container{
  position: absolute;
  transform-origin: center center; /* Center of the element */
  display: inline-block;
}

.dot{
  position: absolute;
  left: -4px;
  height: 15px;
  width: 15px;
  background: black;
  top: 50%;
  transform: translateY(-50%);
  border-radius:50%;
  display: none;
}
.dot-1{
  animation: aa1 5s linear forwards;
}
.dot-2{
  /* animation: aa2 2.5s linear forwards ; */
}
.inner-arrows{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  animation: arrows-rotate-mid 9s linear infinite;


}
.left-1 .dot{
  display: block;
}
.left-1{
  display: block;    
  animation: rotate-left 4s linear infinite;
}
.mid-1 .dot{
  display: block;
}
.mid-1{
  display: block;    
  animation: rotate-mid-1 4s linear infinite;
}
.mid-2 .dot{
  display: block;
}
.mid-2{
  display: block;    
  animation: rotate-mid-2 4s linear infinite;
}
.right-1 .dot{
  display: block;
}


.right-1{
  display: block;    
  animation: rotate-right 5s linear infinite;
}
/* .mid-1{
  display: block;
  transform: translate(-50%, -50%) rotateZ(-22deg);
} */
@keyframes aa1 {
99% {
opacity: 1;    }
  100% {
    opacity: 0;
  }
}
@keyframes aa2 {
99% {
opacity: 0;    }
  100% {
    opacity: 1;
  }
}
@keyframes aa {
99% {
opacity: 1;    }
  100% {
    opacity: 0;
  }
}
@keyframes arrows-rotate-mid {
  0% {
    transform: translate(-50%,-50%) rotateZ(0deg) ;
  }
  100% {
    transform: translate(-50%,-50%) rotateZ(360deg) ;
  }
}
@keyframes rotate-left {
  0% {
    transform:translateY(-50%) rotateZ(152deg) ;
  }
  100% {
    transform:translateY(-50%) rotateZ(-152deg) ;
  }
}

@keyframes rotate-mid-1 {
  0% {
    transform: translate(-50%,-50%) rotateZ(-22deg) ;
    display: inline;
  }
  100% {
    transform: translate(-50%,-50%) rotateZ(158deg) ;
  }
}
@keyframes rotate-mid-2 {
  0% {
    transform: translate(-50%,-50%) rotateZ(-158deg) ;
    display: inline;
  }
  100% {
    transform: translate(-50%,-50%) rotateZ(22deg) ;
  }
}
@keyframes rotate-right {
  0% {
    transform: translate(-100%, -50%) rotateZ(29deg) ;
  }
  100% {
    transform: translate(-100%, -50%) rotateZ(-388deg) ;
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
/************** Mission Section End **************/
/************** Books Section Start **************/
/* ----- Base Layout ----- */

.books {

  background: var(--gray-background);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
.books-container{
    overflow: hidden;
}
/* Direct parent of .book => 3D perspective here */
.books .flex {
  display: flex;
  /* Gap reduced so 6 books fit within ~1440px wide */
  gap: 0;
  perspective: 1200px;
  transform-style: preserve-3d;
  align-items: flex-end;
}

/* Book container: vertical stack => book name, dot, then the 3D book */
.book-container.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  width: 150px;
}

/* Book name + spacing before dot */
.book-container .book-name {
  margin-bottom: 72px;
  font-size: 15px;
  font-weight: 400;
  width: fit-content;
}

/* Dot below the name, then 20px gap before the 3D book */
/* .dot {
  width: 8px;
  height: 8px;
  background: black;
  border-radius: 50%;
  margin-bottom: 20px;
} */

/* ----- Desktop Book (Default) ----- */
/* - width: 200px, height: 340px, thickness: 36px => half = 18px */

.book {
  position: relative;
  width: 200px;
  height: 340px;
  transform-style: preserve-3d;
  transform: rotateY(90deg);
  transition: transform 0.3s ease;
}

.book .face {
  position: absolute;
  background: black;
  color: #fff;
}

/* Front/back covers */
.book .front, .book .back {
  width: 200px;
  height: 340px;
}

/* Spine thickness = 36px => left/right faces */
.book .left, .book .right {
  width: 36px;
  height: 340px;

  /* optional: let the edges stand out */
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}

/* Top/bottom => same 200px width, 36px thickness */
 .book .top, .book .bottom {
  width: 200px;
  height: 36px;
}

/* 3D positioning: half of 36px = 18px */
.book .front {
  transform: translateZ(18px);
}
.book .back {
  transform: rotateY(180deg) translateZ(18px);
}
.book .left {
  transform: rotateY(-90deg) translateZ(0);
  left: -18px;
}
.book .right {
  background-color: white;
  transform: rotateY(90deg) translateZ(calc(200px - 18px)); /* 182px */
  display: flex;
  justify-content: space-evenly;
}
.book .right hr{
  
  height: 100%;
  width: 1px;
  background-color: #000;

}
.book p{
  color: white;
  font-family: "Montserrat VF";
  padding: 20px;
  font-size: 12px;
}
.book .top hr, .book .bottom hr{
  
  width: 100%;
  height: 100%;
  /* background-color: #000; */
}
.book .top {
  transform: rotateX(90deg) translateZ(-18px);
  top: -18px;
  
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  background-color: white;
}

.book .bottom {
  transform: rotateX(-90deg) translateZ(340px);
  bottom: 322px;
  flex-direction: column;
    
  display: flex;
  justify-content: space-evenly;
  background-color: white;
}
.book .face{
  overflow: hidden;
}

/* Hover effect to rotate the book towards viewer */
.books h2{
  font-size: 124px;
}
.book{
  pointer-events: all;
}
.book-container{
  pointer-events: none;
  transition: all .3s ease;
}
.book-container:hover{
  width: 200px;
}
/* ----- Responsive for Mobile (<= 768px) ----- */
@media (max-width: 768px) {
  .books .flex {
    flex-wrap: wrap; /* let the books wrap to new rows */
    gap: 0;       /* reduce gap even more on mobile */
    justify-content: center;
    align-items: center;
  }

  .book-container .book-name {
    margin-bottom: 40px;
    font-size: 16px;
  }

  .dot {
    margin-bottom: 16px;
  }

  /* Scale the book down on mobile */
  .book {
    width: 175px;
    height: 238px;
    transform: rotateY(90deg);
  }

  .book .front, .book .back {
    width: 175px;
    height: 250px;
  }

  /* Let's reduce thickness from 36px -> 24px on mobile => half = 12px */
  .book  .left,.book .right {
    width: 24px;
    height: 250px;
  }

  .book .top,.book .bottom {
    width: 175px;
    height: 24px;
  }

  /* Recalculate half thickness to 12px */
  .book .front {
    transform: translateZ(12px);
  }
  .book .back {
    transform: rotateY(180deg) translateZ(12px);
  }
  .book .left {
    transform: rotateY(-90deg) translateZ(0);
    left: -12px;
  }
  .book .right {
    transform: rotateY(90deg) translateZ(calc(175px - 12px)); /* 128px */
  }
  .book .top {
    transform: rotateX(90deg) translateZ(-12px);
    top: -12px;
  }
  .book .bottom {
    transform: rotateX(-90deg) translateZ(238px) translateX(-50%);
    /* bottom: -12px; */
    bottom: 0;
  }
}

/************** Books Section End **************/
/************** Blog Section Start **************/

.blog{
  position: relative;
  background-color: var(--gray-background);
  padding-bottom: 250px;
}
.blog .container{
  padding-top: 0;
  padding-bottom: 0;

}
.white-page .blog .section-container{
  gap: 200px;
}
.books .divider-2{
  position: absolute;
  top: -54px;
  left: 0;
  width: 100vw;
  z-index:123;
}
.blog .divider-3{
  position: absolute;
  bottom: -100px;
  left: 0;
  width: 100vw;
  
}
.blog h2{
  font-size: 124px;
  width: 500px;
  line-height: 1.2;
  font-weight: bold;
  position: relative ;
  z-index: 1;
}
.blog .title-small-text{
  padding-bottom: 30px;
  width: 155px;
  font-weight: bold;
  color: #ED3D00;
}
.blog .post-container{
  position: relative;;
}
.blog .post{
  width: 50%;
  align-self: flex-end;
  position:relative;
  z-index:1;
}
.blog .post .title{
  width: 534px;
  font-weight: bold;
  line-height: 1.24;
}
.blog .post .post-text{
  font-weight: 400;
  line-height: 2;
  width: 534px;
  text-align:left;
}
.blog .post .post-text span{
  color: var(--light-gray-text);
  transition: all .4s ease;
  
}
.blog .post .post-text span:hover{
  cursor: pointer;
  font-weight: bold;
}
.blog .lines{
  position: absolute;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 74px;
  left: 50%;
  top: 212px;
  transform: translateX(-50%);
  max-width: 1480px;
}
.blog .lines hr{
  z-index:-1;
  width: 90%;
  margin-inline: auto;
  height: 0.5px;
  background-color: #9B9B9B; /* match your design */
  border: none;
}
/* popup */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.popup-content {
  background: #fff;
  max-width: 70vw;
  height: 50vh;
  padding: 30px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  padding: 50px;
  overflow-y: scroll;
}
.popup-content .xl-text{
  margin-bottom: 40px;
  font-family: 'Neue Haas Display';
}
.popup-content .m-text{
  font-family: 'Montserrat VF';
}
.popup-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
}
/* papers start */

  
    .blog  .post-container .paper-container{
        position: relative;
        width: 850px;
        height: 650px;
    }
    .blog .post-container .paper{
        position: absolute;
    }

    .blog .paper{
      position: relative;
       background: #F4F4F5;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
        width: 650px;
        height: 650px;
        /* aspec-ratio:1; */
        padding: 22px 22px 40px 22px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        /* clip-path: polygon(-10px -10px, 487px -10px, 660px 130px, 670px 660px, -10px 660px); */
      clip-path: polygon(
        -1.538% -1.538%, 
        74.923% -1.538%, 
        101.538% 20%, 
        103.077% 101.538%, 
        -1.538% 101.538%
      );
        transition: transform 0.6s ease-in-out;
    }
   .blog .paper h3{
        font-weight: bold;
        font-size: 28px;
        width: 100%;
    }
   .blog  .paperp{
        font-size: 16px;
        color: black;
    }
   .blog  .paper .header-image{
      width: 100%;
    }
   .blog  .paper .paper-corner-image{
        position: absolute;
        top: 0;
        right: 0;
    }
    .blog .paper a{
      align-self: flex-end;
      color: black;
      font-weight: bold;
      font-size: 14px;
      text-align: right;
      transition: all .4s ease;
    }
    .blog .paper a:hover{
      color: var(--accent);
    }
  
   .blog  .blog-btns{
        position: absolute;
        bottom: -100;
        right: -100px;
        width: 80px;
        height: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between
    }
    
   .blog  .blog-btn{
        width: 60px;
        height: 30px;
        text-align: center;
        transition: all 0.4s ease;
        font-size: 24px;
        font-weight: bolder;

    }
    
   .blog  .blog-btn circle,
   .blog  .blog-btn path{
    transition: all .4s ease;
  }
   .blog  .blog-btn:hover circle{
        fill: #ED3D00;
        stroke: #ED3D00;
   }
   .blog  .blog-btn:hover path{
        stroke: #fff;
   }
   .blog  .blog-btn:hover{
        cursor: pointer;
        font-size: 32px;
    }
    @media (max-width: 1100px) {
      .blog{
        padding-bottom: 0;
      }
      .blog .section-container{
        gap: 100px;
      }
      .post-container{
        width: 100vw;
        padding-left: 0;
        justify-content: flex-start;
        overflow: hidden;

      }
      .title-container{
        padding-inline: 5%;
      }
      .blog .container{
        padding: 0;
      }
      .blog .post-container .paper-container{
        margin-inline:auto;
        width: 650px;
        height:600px ;
      }
        .blog .post-container  .paper{
        width: 455px;
        height: 455px;
        /* clip-path: polygon(-7px -7px, 340.9px -7px, 469px 91px, 469px 462px, -7px 462px); */
      }
    
      .blog .post-container  .paper .header-image{
        width: 415px;
      }
      .blog .post-container  .paper .paper-corner-image{
        width: 105px;
      }
      .blog .post-container .paper h3{
        font-size: 18px;
        text-align: left;
        

      }
      .blog .post-container .paper p{
        font-size: 10px;
        text-align: left;
        width: 100%;
      } 
      
    }

    @media (max-width: 768px) {
      .blog{
        padding-bottom: 50px;
      }
       .blog .section-container{
        gap: 50px;
      }
      .post-container {
        width: 100vw;
        padding-left: 0;
        justify-content: flex-start;
        overflow: hidden;
      }

      .title-container {
        padding-inline: 5%;
      }

      .blog .container {
        padding: 0;
      }

      .blog .post-container .paper-container {
        margin-inline: auto;
        width: 500px;
        height: 462px; 
      }

      .blog .post-container .paper {
        width: 350px;
        height: 350px;
        /* clip-path: polygon(
          -5px -5px,
          262px -5px,     
          360px 70px,     
          360px 355px,   
          -5px 355px
        ); */
        gap: 10px;
      }

      .blog .post-container  .paper .header-image {
        width: 319px; 
      }

      .blog .post-container  .paper .paper-corner-image {
        width: 81px;  
      }
      .blog .post-container .paper h3{
        font-size: 13px;
      }
      .blog .post-container .paper p{
        font-size: 9px;
        margin-bottom: 20px;
        width: 100%;
      }
      .blog .post-container .paper a{
        font-size: 10px;
        width: 100%;
      }
      .blog .post-container .blog-btns{
            bottom: 0;
            right: 50%
      }
      .blog .post-container .lines{
        gap: 25px;
        top: 139px;
      }

      .blog .post-container .title-small-text{
        text-align: right;
        padding-bottom: 8px;
      }
    }

/* papers end */
/************** Blog Section End **************/
/************** Contact Section Start **************/
.contact-container{
  padding-top: 150px;
}
.contact-section h2{
  font-size: 124px;
  width: 500px;
  line-height: 1;
  font-weight: bold;
  margin-bottom: 40px;
}
.contact-info .s-text{
  width: 500px;
  line-height: 2;
}
.contact-form{
  display: flex;
  gap: 40px;
  width: 100%;
  justify-content: space-between;

}
.contact-container .fields{
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 50%;

}
.contact-container .text-container{
  width: 100%;
  max-width: 525px;
}
.contact-form input{
  height: 55px;
  width: 100%;
  background-color: transparent;
  border: 1px solid var(--light-gray-text);
}

.contact-form textarea{
  height: 110px;
  width: 100%;
  background-color: transparent;
  border: 1px solid var(--light-gray-text);
}
.contact-container textarea::placeholder,
.contact-container input::placeholder{
  font-family: "Montserrat VF";
  padding: 12px;
}
.contact-container button{
  width: 300px;
  padding: 10px;
  font-size: 16px;
  background-color: black;
  color: white;
}
/************** Contact Section End **************/

/**************** Blogs Start ****************/

.blogs-page h1{
  line-height: 1.2;
  position: relative;
  z-index: 2;
}
.blogs-page .lines{
  gap: 69px;
  z-index: 1;
      top: 207px;

}
.blogs-page .blog{
  padding-bottom: 100px;
}
 .blogs-page .blog  .paper-container{
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    justify-items: center;
  }
  .blogs-page .blog .section-container{
    gap: 100px;
  }
  @media(max-width: 1440px){
      .title-container {
        padding-inline: 5%;
      }

      .blog .container {
        padding: 0;
      }

      .blog .paper-container {
        margin-inline: auto;
        width: 100%; 
        padding-inline: 5%;

      }

      .blog .paper {
        /* width: 100%;              */
        /* height: unset; */
        /* aspect-ratio: 1/1; */
        /* clip-path: polygon(
          -1% -5px,
          262px -5px,     
          360px 70px,     
          360px 355px,    
          -5px 355px
        ); */
        /* gap: 10px; */
      }

      .blog  .paper .header-image {
        width: 100%;
      }

      .blog  .paper .paper-corner-image {
        width: 21.28%;
      }
 
      .blog .blog-btns{
            bottom: 0;
            right: 50%
      }
      /* .white-page .blog .lines{
        gap: 25px;
        top: 139px;
      } */

  }
  @media(max-width: 1250px){
       .blog .paper h3{
        font-size: 24px;
      }
      .blog .paper p{
        font-size: 14px;
        margin-bottom: 20px;
        width: 100%;
      }
      .blog .paper a{
        font-size: 12px;
        width: 100%;
      }
      .blogs-page h1{
        font-size: 96px;
      }
      .blogs-page .blog .lines{
        gap: 57px;
        top: 189px;
      }
  }
  @media(max-width: 1000px){
    .blogs-page .blog  .paper-container{
      grid-template-columns: 1fr;
        padding-inline: 5%;

    }
         .blog .paper h3{
        font-size: 24px;
      }
      .blog .paper p{
        font-size: 14px;
        margin-bottom: 20px;
        width: 100%;
      }
      .blog .paper a{
        font-size: 12px;
        width: 100%;
      }
  }
  
    @media (max-width: 768px ){
      .white-page .blog .section-container{
        gap: 100px;
      }

      .blog h2{
        width: 250px;
        position: relative;
        z-index: 1;
      }
      .blog .lines{
        gap: 35px;
        top: 147px;
        z-index: 0;
      }
      .blog .title-small-text{
            padding-bottom: 8px;
            width: 80px;
      }
    }
    @media (max-width: 550px ) and (min-width: 350px) {
    
      .blogs-page h1{
        font-size: 65px;
      }
      .blogs-page .blog .lines{
                gap: 39px;
        top: 160px;
    }
      
      .honest-opinions .blog{
        padding-bottom: 50px;
      }
      .blogs-page .blog .section-container{
        gap: 50px;
      }
      .honest-opinions .blogs-page .blog .paper-container{
        padding-inline: 10px ;
      }
      .honest-opinions .blog .section-container{
        gap: 50px;
      }

      .honest-opinions .title-container {
        padding-inline: 5%;
      }

      .honest-opinions .blog .container {
        padding: 0;
      }

      .honest-opinions .blog .paper {
        width: 350px;
        height: 350px;
        gap: 10px;
      }

      .honest-opinions .blog  .paper .header-image {
        width: 319px; 
      }

      .honest-opinions .blog  .paper .paper-corner-image {
        width: 81px;  
      }
      .honest-opinions .blog .paper h3{
        font-size: 13px;
      }
      .honest-opinions .blog .paper p{
        font-size: 9px;
        margin-bottom: 20px;
        width: 100%;
      }
      .honest-opinions .blog .paper a{
        font-size: 10px;
        width: 100%;
      }
      .honest-opinions .blog .post-container .blog-btns{
            bottom: 0;
            right: 50%
      }
      .honest-opinions .blog .post-container .lines{
        gap: 25px;
        top: 139px;
      }

      .honest-opinions .blog .post-container .title-small-text{
        text-align: right;
        padding-bottom: 8px;
      }
    }

/**************** Blogs end ****************/

/***************** footer start ****************/
.honest-opinions footer{
  background: #f4f4f4;
}
 footer{
  padding-inline: 5%;
  padding-bottom: 30px;
 }
.footer-long-logo{
  position: relative;
}
.footer-logo{
        align-self: flex-end;
}
.footer-long-logo svg{
  max-width: 100%;
}
.footer-long-logo .linkedin-icon{
  position: absolute;
  top: 0;
  right: 20px;
}
/* footer end */
/**************************  White Page End ***************************/
/**************************  Blog Details Page start ***************************/
.blog-details-page{
  width: 100vw;
  background-color: #f5f1eb;
}
.blog-details-page-container{
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}
.blog-details-page h1{
    text-wrap: pretty;
    font-size: 64px;
    text-align: left;
    width: 100%;
    margin-bottom: 96px;
}

.blog-details-page .content-container {
    max-width: 1076px;
    margin: 0 auto;
    position: relative;
    margin-bottom: 50px;
}
.blog-details-page .cover-image{
    max-width: 1017px;
    aspect-ratio:16/9;
    width: 100%;
    margin-inline: auto;
    margin-bottom: 12px;
}

.blog-details-page .timeline-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 74px;
}

.blog-details-page .timeline-line {
    position: absolute;
    left: 340px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #D9D9D9;
    transform: translateX(-50%);
    z-index: 1;
}

.blog-details-page .timeline-dot {
    position: absolute;
    left: 340px;
    top: 10px;
    width: 12px;
    height: 12px;
    background-color: #D9D9D9;
    border-radius: 50%;
    transform: translateX(-50%);
    z-index: 2;
    transition: background-color 0.3s ease;
}

.blog-details-page .timeline-dot.scrolled {
    background-color: #0c0c0c;
}

.blog-details-page .content-row {
    display: grid;
    grid-template-columns: 255px 100px 1fr;

    gap: 40px;
    align-items: start;
    position: relative;
}

.blog-details-page .content-left {
    text-align: right;
    padding-right: 20px;
}

.blog-details-page .content-right {
    text-align: left;
    padding-left: 20px;
}

.blog-details-page .content-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #000;
    line-height: 1.3;
    opacity: 0;
    text-align: left;
    transition: opacity 0.6s ease-out;
    max-width: 350px;
}

.blog-details-page .content-text {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    opacity: 0;
    transition: opacity 0.6s ease-out;
    text-align: left;
}

.blog-details-page .content-title.visible {
    opacity: 1;
}

.blog-details-page .content-text.visible {
    opacity: 1;
}

.blog-details-page .timeline-center {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Responsive design */
@media (max-width: 1000px) {
  .blog-page-container.container{
    padding-top: 0;
  }
}
@media (max-width: 768px) {
    .blog-details-page .content-row {
      grid-template-columns: 1fr;
      gap: 0;
      text-align: center;
      padding-left: 30px;
    }
    .blog-details-page .cover-image{
      margin-bottom: 27.5px;
    }
    .blog-details-page h1{
      font-size: 40px;
      margin-bottom: 33px;
    }
    .blog-details-page .content-title{
      margin-bottom: 16px;
    }
    
    .blog-details-page .content-left,
    .blog-details-page .content-right {
        text-align: center;
        padding: 0;
    }

    .blog-details-page .timeline-line {
        left: 5px;
    }

    .blog-details-page .timeline-dot {
        left: 5px;
    }
    /* .blog-details-page .timeline-wrapper{
      gap: 100px;
    } */
    .blog-details-page .timeline-wrapper{
      gap: 28px;
    }

 
}

/**************************  Blog Details Page End ***************************/