/*****Welcome to Global Style *****/
*{
  font-family: 'Aclonica', 'Montserrat', sans-serif;
}

/***** Global Slide *****/
.slide-right, .slide-left {
  width: 100%;
}

/***** Slide Right *****/
.slide-right {
  animation: 3s slide-right;
}
@keyframes slide-right {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

/***** Slide Right *****/
.slideRight {
  animation: 3s slideright;
  text-align:right;
  justify-content:flex-end;
}
@keyframes slideright {
  from {
    transform:translateX(-100%);
  }
  to {
    transform:translateX(0%);
  }
}

/***** Slide Left *****/
.slide-left {
  animation: 3s slide-left;
}
@keyframes slide-left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}

/***** Slide Left *****/
.slideLeft {
  animation: 3s slideleft;
  justify-content:flex-start;
}
@keyframes slideleft {
  from {
    transform:translateX(100%);
  }
  to {
    transform:translateX(0%);
  }
}

/***** Misc Styles *****/
.container {
  margin: auto;
  padding: 20px;
  overflow: hidden;
  margin-top: 30px;
  text-align: center;
}

/***** FadeIn Underline *****/
.line {
  border-bottom: 3px solid red;
  width: 500px;
  margin: auto;
}
.fade-in {
  animation: fadeIn ease 3s;
}
@keyframes fadeIn{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
.fade-in-img {
  animation: fadeInImg ease 10s;
}
@keyframes fadeInImg{
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

mohan {
	height: 100vh;
	margin: 0;
	overflow-x: hidden; 
	display: grid;
	place-items: center;
}

.wrapper {
	text-align: center;
	h1 {
		color: #fff;
		font-size: 62px;
		text-transform: Capitalize;
		font-weight: 700;
    font-family: 'Aclonica', 'Montserrat', sans-serif;
		background: linear-gradient(to right,#095fab 10%, #25abe8 50%, #57d75b 60%);
		background-size: auto auto;
		background-clip: border-box;
		background-size: 200% auto;
		color: #fff;
		background-clip: text;
		text-fill-color: transparent;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: textclip 1.5s linear infinite;
		display: inline-block;
    margin-top: 30vh;
	}
}

@keyframes textclip {
	to {
		background-position: 200% center;
	}
}

.designation > p {
    color:#fff;
    font-size: larger;
}

.column {
  float: left;
  width: 50%;
  padding: 10px;
  
}

.abtrow:after {
  content: "";
  display: table;
  clear: both;
}

#more-about {
  display: grid;
	text-transform: uppercase;
	/*align-items: center;*/
	/*position: relative;*/
	/*background: linear-gradient(to bottom right, #77ab59 0%,#36802d 50%,#317CD8 100%);*/
	min-height: 100vh;
}

@media only screen and (min-width: 400px) and (max-width: 768px) {
  body,html {
		 overflow-x: hidden;
	}
  .mohan > .wrapper > h1 {
    font-size: 2.06rem;
    margin-top: -10vh;
  }
  .line {
    width: 80vw;
  }
  .designation > p {
    font-size: 1.85rem;
    color:#fff;
  }
  .designation > .animation {
        margin-top: -2vh;
  }
  .designation > .animation > div > div {
    font-size: 1.2rem;
  }
  
  .abtrow > .column {
    width: 100%;
    text-align: justify;
    padding-bottom: 10px;
  }
}

@media (max-width: 768px) {
  body,
  html {
    overflow-x: hidden;
  }

  #about {
    padding: 24px 0 36px;
  }

  #about > .about-hero-container,
  #more-about > .container,
  #personal-insights > .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .about-hero-row {
    margin-left: 0;
    margin-right: 0;
  }

  .about-hero-row > [class*="col-"] {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .airplane-window-frame {
    width: min(calc(100vw - 32px), 310px) !important;
    padding: 10px !important;
  }

  .airplane-window-frame::before {
    inset: 20px;
  }

  .mohan > .wrapper > h1 {
    margin-top: 24px;
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .line {
    width: min(calc(100vw - 32px), 300px) !important;
  }

  .designation > p {
    font-size: 1.05rem !important;
    line-height: 1.55;
  }

  .about-positioning {
    font-size: 0.94rem;
    line-height: 1.65;
    text-align: left;
  }

  .about-card {
    min-height: 0;
    padding: 20px;
  }

  .about-card-image {
    width: 96px;
    height: 96px;
    padding: 12px;
  }

  .insight-row,
  .insight-row:nth-child(even) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .insight-row:nth-child(even) .insight-media {
    order: 0;
  }

  .insight-media,
  .insight-media.inspiration-media {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .insight-media img,
  .insight-media.inspiration-media img {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .insight-media.inspiration-media {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    aspect-ratio: auto;
  }

  .insight-media.inspiration-media img {
    aspect-ratio: 1 / 1.2;
  }

  .insight-copy {
    padding: 22px 20px 26px;
  }

  .slide-right,
  .slide-left,
  .slideRight,
  .slideLeft {
    animation: none;
    transform: none;
    margin-left: 0;
  }

  .strategy-reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 399px) {
  .airplane-window-frame {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .mohan > .wrapper > h1 {
    font-size: 1.8rem;
  }

  .line {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
  }

  .about-hero-row > [class*="col-"] .line {
    margin-left: auto;
    margin-right: auto;
  }

  .about-hero-row .wrapper {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .about-hero-row .wrapper h1 {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    font-size: 1.8rem;
  }

  .about-hero-row .wrapper sub {
    display: block;
    width: 100%;
  }

  .insight-media.inspiration-media img {
    height: 120px !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
  }
}

.insight-media.portrait-media img {
  object-position: center;
}

.catalog {
  text-transform: uppercase;
  text-decoration: none;
  color:#DE4301;
  position: relative;
  opacity: 0.75;
}

.catalog:hover {
  opacity: 0.75;
  color: #DE4301;
}

.catalog::before {
  transition: 300ms;
  height: 3px;
  content: "";
  position: absolute;
  background-color: #111;
  
}

.catalog-ltr::before {
  width: 0%;
	bottom:5px;
}

.catalog-ltr:hover::before {
  width: 100%;
}

.catalog-ltr::after {
  width: 100%;
	bottom:5px;
}

.about-hero-row .slide-right,
.about-hero-row .slide-left,
.about-card.slideRight,
.about-card.slideLeft,
.insight-row.slideRight,
.insight-row.slideLeft {
  animation: none;
  transform: none;
  margin-left: 0;
}