/*
*  app.css overwrite 
=================================
=================================
=================================*/
/**! user style **/

@import url("fonts/gilroy/Gilroy.css");
/**! ----- font family init ---- **/

h2,
h3,
h4,
h5,
h6 {
  font-weight: 900;
  font-family: 'Gilroy-Bold', sans-serif;
}
h1{
  font-weight: bolder;
}

.main_title{
  /* Fallback: Set a background color. */
  background-color: red;
  
  /* Create the gradient. */
  background-image: linear-gradient(45deg, #f3ec78, #af4261);
  
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  font-family: 'Gilroy-Black', sans-serif;
  font-size: 50px;
}

.main_title2{
  /* Fallback: Set a background color. */
  background-color: red;
  
  /* Create the gradient. */
  background-image: linear-gradient(to left top, #01304f 0%, #180136 100%);
  
  /* Set the background size and repeat properties. */
  background-size: 100%;
  background-repeat: repeat;

  /* Use the text as a mask for the background. */
  /* This will show the gradient as a text color rather than element bg. */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
  -moz-background-clip: text;
  -moz-text-fill-color: transparent;
  font-family: 'Gilroy-Black', sans-serif;
  font-size: 65px;
}



/* button style */
.btn.btn-style-7 {
	overflow: hidden;
}

.btn.btn-style-7 span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.btn.btn-style-7 span:before {
	position: absolute;
	top: 40px;
	content: attr(data-hover);
	/* font-weight: normal; */
}

.btn.btn-style-7:hover span,
.btn.btn-style-7:focus span {
	text-align: center;
	-webkit-transform: translateY(-168%);
	-moz-transform: translateY(-168%);
	transform: translateY(-168%);
    
}

p {
  font-weight: 400;
  font-family: 'Gilroy-Regular', sans-serif;
}

.blockquote h4 {
  line-height: 3rem;
}

.blockquote h5 {
  line-height: 2.8rem;
}

/**! ----- font Setting (size & line height, spacing etc) ---- **/
.h1-font, h1 {
  font-size: 2.25rem;
  line-height: 1.35;
}

@media only screen and (min-width: 768px) {
  .h1-font, h1 {
    font-size: 4rem;
    line-height: 1.16;
  }
}

.h2-font, h2 {
  font-size: 2.25rem;
  line-height: 1.35;
}

@media only screen and (min-width: 768px) {
  .h2-font, h2 {
    font-size: 3rem;
    line-height: 1.2;
  }
}

.h3-font, h3 {
  font-size: 2.25rem;
  line-height: 1.35;
}

.h4-font, h4 {
  font-size: 1.5rem;
  line-height: 1.4;
}

.h5-font, h5 {
  font-size: 1.375rem;
  line-height: 1.5;
}

.h6-font, h6, .blockquote {
  font-size: 1.125rem;
  line-height: 1.65;
}

.body-font, p {
  font-size: 1.0625rem;
  line-height: 1.75;
}

/**! ----- Theme Common colors (Also Used as extend in SCSS ) ---- **/
mark,
ins, .bg-color--primary, [class*="bg-color--primary-opacity-"]::before, .btn-bg--primary, .btn-bg--primary--05::after, .btn-hover--primary:hover, .card-hover--bg--primary-shadow.focused, .card-hover--bg--primary-shadow:hover, .preloader .blobs .blob-center, .preloader .blob, .form--v8:after, .ico-progress--v2 .ico-progress__stages:after, .decor, .carosuel-slider--v1 .slick-dots .slick-active button, .carosuel-triangle:hover, .label-bg--light--200::before, .pagination .page-item.active .page-link, .sticky .card, .sticky .article__thumbnail-image::before, .widget_calendar tbody a, .post-navigation .meta-nav::before, .navbar-sticky--moved-up.sticky-bg-color--primary, .roadmap--v4 .roadmap-item--current .timeline-line:before {
  background: #3965f4;
}

.color--primary, .card--v2 .card.focused .card__title, .card--v2 .card:hover .card__title, a.list-group-item:hover, a.list-group-item.active, a.list-group-item:focus, .text-hover--primary:hover, .section--dark .text-hover--primary:hover,
.section--darkblue .text-hover--primary:hover, .icon-rounded-color--gray i:hover, .carosuel-arrow, .carosuel-cursor--dark i:hover, .dropdown-module__item:focus, .dropdown-module__item:hover, .dropdown-module--dark .dropdown-module__item:focus, .dropdown-module--dark .dropdown-module__item:hover, .label-bg--primary, .pagination .page-item:not(.active) .page-link, .breadcrumb--v1 .breadcrumb, .breadcrumb--v1 .breadcrumb a, .blog-details .article-content a,
.blog-details .comment-content a, .article-author__name:hover, .article__title h2:hover, .blog-details .entry-header .entry-author .url:hover, .blog-details .entry-meta .post-categories a, .blog-sidebar .widget-title, .blog-sidebar .widget li a:hover, .blog-sidebar .widget li a:focus, .blog-sidebar .widget li a:hover i, .blog-sidebar .widget li a:focus i, .blog-sidebar .widget_tag_cloud ul li a:hover, .blog-sidebar .widget_nav .menu li .current_page_item > a,
.blog-sidebar .widget_nav .menu li .current-menu-item > a, .widget_calendar tfoot a, .widget_rss .widget-title .rsswidget, .post-navigation .meta-nav, .post-navigation .post-title:hover, .tags-links a, .comments-area .comment-reply-link, .dropdown-item:focus, .dropdown-item:hover, .dropdown-item.active, .dropdown-item:active, .footer.section--light a:hover {
  color: #3965f4;
}

.fill--primary rect,
.fill--primary path,
.fill--primary polygon,
.fill--primary circle {
  fill: #3965f4;
}

.btn-border--color--primary, .btn-hover--primary.btn-border--color--dark:hover, .btn-hover--primary.btn-border--color--light:hover, .icon-rounded-color--primary, .icon-rounded-color--gray i:hover, .carosuel-arrow {
  border-color: #3965f4;
}

/*---- Boxed Layout Init----*/
body.boxed-layout .main, body.boxed-layout .navbar {
  max-width: 1366px;
}

/*! Place your custom styles here (below). 
      This will make it much easier to update the template later - you'll only need to preserve "this file
  ===================================================================================================*/