/* ----------------------------------

Template Name: ITSOLHUB - AI Agency & Technology HTML Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Sora
Main Color   : #7476ff

-------------------------------------
*/

/*
** Write you custom css below
*/

/* ==================================================
   Homepage Hero (banner-style-three) - fix for long headline
   Root issue: theme locks hero to height:100vh and sets a
   75px headline size, both tuned for a 3-4 word tagline.
   Our actual headline is a full sentence, so it wraps and
   collides with the absolutely-positioned chat mockup.
   Fix: let the hero grow with its content instead of being
   capped, and scale the headline down to something that
   comfortably fits a longer sentence at each breakpoint.
=================================================== */

.banner-style-three-area {
  height: auto;
  min-height: 100vh;
  padding-top: 140px;
  padding-bottom: 80px;
}

.banner-style-three-area,
.banner-style-three-area div {
  height: auto;
}

.banner-style-three-info h2 {
  font-size: 52px;
  line-height: 1.25;
}

.banner-style-three-info h2 strong {
  font-size: 52px;
}

@media only screen and (min-width: 1400px) {
  .banner-style-three-info h2 {
    font-size: 56px;
  }

  .banner-style-three-info h2 strong {
    font-size: 56px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1399px) {
  .banner-style-three-info h2 {
    font-size: 44px;
  }

  .banner-style-three-info h2 strong {
    font-size: 44px;
  }
}

/* Give the chat mockup a little more breathing room now that
   the left column is shorter relative to before */
@media only screen and (min-width: 1024px) {
  .chat-bot-thumb {
    margin-top: 70px;
  }
}