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

   Theme Name: Cresta - IT Solutions & Technology Html Template
   ¸ü¶àÏÂÔØ£ºHttp://www.bootstrapmb.com
   Description: Cresta - IT Solutions & Technology Html Template 
   Version: 1.0

----------------------------------------------

/************ TABLE OF CONTENTS ***************

    01. THEME DEFAULT CSS
    02. HEADER CSS
    03. MEAN MENU CSS
    04. about css start 
    05. blog css start 
    06. choose css start 
    07. contact css start 
    08. cta css start
    09. exprience css start
    10. faq css start 
    11. feature css start 
    12. footer css start 
    13. funfact css start 
    14. gellary css start 
    15. header css start
    16. hero css start
    17. newsletter css start
    18. price css start
    19. project css start
    20. service css start
    21. team css start 
    22. testimonial css start
    23. work css start

**********************************************/
/*----------------------------------------*/
/*  1.1 Theme Default
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet');
:root {
  /**
  @font family declaration
  */
  --tg-ff-body: 'Space Grotesk', sans-serif;
  --tg-ff-heading: 'Space Grotesk', sans-serif;
  --tg-ff-p: 'Space Grotesk', sans-serif;
  --tg-ff-fontawesome: "Font Awesome 6 Pro";
  /**
  @color declaration
  */
  --tg-common-white: #fff;
  --tg-common-black: #05092B;
  --tg-common-black-dark: #1D2142;
  --tg-common-yellow: #F8BC26;
  --tg-grey-1: #F9F9F9;
  --tg-text-body: #737373;
  --tg-theme-1: #351EE0;
  --tg-theme-2: #111536;
  --tg-gradient-1: #351EE0;
  --tg-gradient-2: #3F74EF;
  --tg-border-1: #CCCCCC;
}


*::-moz-selection {
  background: var(--tg-common-black);
  color: var(--tg-common-white);
  text-shadow: none;
}

::-moz-selection {
  background: var(--tg-common-black);
  color: var(--tg-common-white);
  text-shadow: none;
}

::selection {
  background: var(--tg-common-black);
  color: var(--tg-common-white);
  text-shadow: none;
}

*::-moz-placeholder {
  color: var(--tg-common-black);
  font-size: 14px;
  opacity: 1;
}

*::placeholder {
  color: var(--tg-common-black);
  font-size: 14px;
  opacity: 1;
}

.p-relative {
  position: relative;
}

.fix {
  overflow: hidden;
}

.z-index {
  position: relative;
  z-index: 1;
}

.z-index-2 {
  position: relative;
  z-index: 2;
}

.z-index-3 {
  position: relative;
  z-index: 3;
}

.z-index-4 {
  position: relative;
  z-index: 4;
}

.z-index-5 {
  position: relative;
  z-index: 5;
}

.z-index-6 {
  position: relative;
  z-index: 6;
}

.z-index-7 {
  position: relative;
  z-index: 7;
}

.z-index-8 {
  position: relative;
  z-index: 8;
}

.z-index-9 {
  position: relative;
  z-index: 9;
}

.gx-5 {
  --bs-gutter-x: 10px;
}

.gx-10 {
  --bs-gutter-x: 10px;
}

.gx-15 {
  --bs-gutter-x: 15px;
}

.gx-20 {
  --bs-gutter-x: 20px;
}

.gx-25 {
  --bs-gutter-x: 25px;
}

.gx-30 {
  --bs-gutter-x: 30px;
}

.gx-35 {
  --bs-gutter-x: 35px;
}

.gx-40 {
  --bs-gutter-x: 40px;
}

.gx-45 {
  --bs-gutter-x: 45px;
}

.gx-50 {
  --bs-gutter-x: 50px;
}

/*=============================
	1. Button style
===============================*/

@media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-testimonial-arrow-box button {
    display: none;
  }
}
.tg-testimonial-arrow-box button::after {
  position: absolute;
  content: "";
  top: -1px;
  left: -1px;
  height: 62px;
  width: 62px;
  border-radius: 50%;
  -webkit-transition: all 0.2s ease-out 0s;
  -moz-transition: all 0.2s ease-out 0s;
  -ms-transition: all 0.2s ease-out 0s;
  -o-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
  z-index: -1;
  background: linear-gradient(91deg, var(--tg-gradient-1) 0%, var(--tg-gradient-2) 100%);
}
.tg-testimonial-arrow-box button:hover {
  background-color: transparent;
}
.tg-testimonial-arrow-box button.test-prev {
  position: absolute;
  bottom: 22%;
  right: -9%;
}
.tg-testimonial-arrow-box button.test-next {
  position: absolute;
  bottom: 22%;
  left: -9%;
}

.tg-testimonial-2-item {
  margin-left: 145px;
  padding: 40px 100px 30px 150px;
  border: 1px solid var(--tg-border-1);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tg-testimonial-2-item {
    padding: 40px 50px 30px 130px;
  }
}
@media (max-width: 767px) {
  .tg-testimonial-2-item {
    margin-left: 0;
    padding: 40px 30px 30px 30px;
  }
}
.tg-testimonial-2-thumb {
  position: absolute;
  left: -145px;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .tg-testimonial-2-thumb {
    position: static;
    margin-bottom: 30px;
    transform: translateY(0);
  }
}
.tg-testimonial-2-thumb img {
  border-radius: 5px;
}
.tg-testimonial-2-quote {
  position: absolute;
  top: 45px;
  right: 35px;
}
@media (max-width: 767px) {
  .tg-testimonial-2-quote {
    display: none;
  }
}
.tg-testimonial-2-author-name {
  font-size: 22px;
  margin-bottom: 8px;
}
.tg-testimonial-2-author-info {
  font-size: 18px;
  letter-spacing: -0.36px;
}
.tg-testimonial-2-text p {
  font-size: 20px;
  color: var(--tg-common-black);
}

.tg-testimonial-4-arrow-box button span {
  color: var(--tg-gradient-2);
  position: relative;
  z-index: 1;
}
.tg-testimonial-4-arrow-box button:hover::after {
  transform: scale(1);
}
.tg-testimonial-4-arrow-box button:hover span {
  color: var(--tg-common-white);
}
.tg-testimonial-4-arrow-box button.active::after {
  transform: scale(1);
}
.tg-testimonial-4-arrow-box button.active span {
  color: var(--tg-common-white);
}
.tg-testimonial-4-arrow-box button.test-4-prev {
  margin-left: 15px;
}

.test-slider-dots {
  text-align: center;
  margin-top: 70px;
}
.test-slider-dots .swiper-pagination-bullet {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  position: relative;
  display: inline-block;
  z-index: 2;
  opacity: 1;
  background: linear-gradient(94deg, var(--tg-gradient-1) 0%, var(--tg-gradient-2) 100%);
  margin: 0px 8px !important;
}
.test-slider-dots .swiper-pagination-bullet::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  border: 2px solid var(--tg-theme-1);
  transform: translate(-50%, -50%);
}
.test-slider-dots .swiper-pagination-bullet-active::after {
  opacity: 1;
  visibility: visible;
}

.test-2-slider-dots {
  margin-top: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .test-2-slider-dots {
    margin-top: 30px;
  }
}
.test-2-slider-dots .swiper-pagination-bullet {
  height: 8px;
  width: 68px;
  position: relative;
  display: inline-block;
  z-index: 2;
  opacity: 1;
  margin: 0;
  border-radius: 10px;
  background-color: var(--tg-theme-2);
}
.test-2-slider-dots .swiper-pagination-bullet-active {
  background: linear-gradient(94deg, var(--tg-gradient-1) 0%, var(--tg-gradient-2) 100%);
}

/*=============================
    05. blog css start 
===============================*/
.tg-blog-item {
  background-color: var(--tg-common-white);
  box-shadow: 0px 5px 60px rgba(0, 0, 0, 0.05);
}
.tg-blog-item:hover .tg-blog-thumb img {
  transform: scale(1.1);
}
.tg-blog-thumb {
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}
.tg-blog-thumb img {
  width: 100%;
  transition: 1.3s all ease;
  border-radius: 5px 5px 0 0;
}
.tg-blog-content {
  padding: 40px 40px;
  padding-top: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-blog-content {
    padding: 40px 20px;
    padding-top: 20px;
  }
}
.tg-blog-meta span {
  font-size: 16px;
}
.tg-blog-meta span:not(:last-child) {
  margin-right: 35px;
}
.tg-blog-meta span i {
  display: inline-block;
  margin-right: 4px;
  background: linear-gradient(94deg, var(--tg-gradient-1) 0%, var(--tg-gradient-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tg-blog-badge {
  position: absolute;
  top: 30px;
  left: 30px;
  padding: 4px 17px;
  border-radius: 5px;
  background-color: var(--tg-common-black);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-blog-badge {
    padding: 1px 12px;
  }
}
.tg-blog-badge span {
  font-size: 18px;
  letter-spacing: -0.36px;
  color: var(--tg-common-white);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-blog-badge span {
    font-size: 14px;
  }
}
.tg-blog-button {
  line-height: 0;
}
.tg-blog-title {
  font-size: 22px;
  line-height: 1.6;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tg-blog-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tg-blog-title {
    font-size: 19px;
  }
}
.tg-blog-title a {
  transition: 0.4s;
}
.tg-blog-title a:hover {
  color: var(--tg-theme-1);
}
.tg-blog-shape-1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 40%;
}
.tg-blog-shape-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
.tg-blog-shape-3 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.tg-blog-2-item {
  border-radius: 5px;
  box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05);
}
.tg-blog-2-item:hover .tg-blog-2-thumb img {
  transform: scale(1.1);
}
.tg-blog-2-thumb {
  overflow: hidden;
  border-radius: 5px 5px 0 0;
}
.tg-blog-2-thumb img {
  width: 100%;
  width: 100%;
  transition: 1.3s all ease;
  border-radius: 5px 5px 0 0;
}
.tg-blog-2-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 11px 14px;
  border-radius: 5px;
  line-height: 1;
  background: linear-gradient(94deg, var(--tg-gradient-1) 0%, var(--tg-gradient-2) 100%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-blog-2-badge {
    transform: scale(0.8);
  }
}
.tg-blog-2-badge i {
  font-size: 32px;
  font-weight: 500;
  display: block;
  font-style: normal;
  margin-bottom: 8px;
  letter-spacing: -0.36px;
  color: var(--tg-common-white);
}
.tg-blog-2-badge span {
  font-size: 18px;
  letter-spacing: -0.64px;
  color: var(--tg-common-white);
}
.tg-blog-2-content {
  padding: 37px 40px;
  padding-top: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-blog-2-content {
    padding: 40px 20px;
    padding-top: 20px;
  }
}
.tg-blog-2-meta {
  padding: 3px 40px;
  background: linear-gradient(94deg, var(--tg-gradient-1) 0%, var(--tg-gradient-2) 100%);
}
.tg-blog-2-meta span {
  font-size: 15px;
  color: var(--tg-common-white);
}
.tg-blog-2-meta span:not(:last-child) {
  margin-right: 35px;
}
.tg-blog-2-meta span i {
  display: inline-block;
  margin-right: 4px;
}
.tg-blog-2-title {
  font-size: 22px;
  line-height: 1.6;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .tg-blog-2-title {
    font-size: 20px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .tg-blog-2-title {
    font-size: 19px;
  }
}
.tg-blog-2-link a {
  font-size: 18px;
  font-weight: 700;
  color: var(--tg-common-black);
}
.tg-blog-2-link a i {
  display: inline-block;
  margin-left: 4px;
  transform: translateY(2px);
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.tg-blog-2-link a:hover i {
  background: linear-gradient(94deg, var(--tg-gradient-1) 0%, var(--tg-gradient-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: tfLeftToRight 0.4s forwards;
}

.tg-blog-3-item {
  border-radius: 5px;
  background-color: var(--tg-common-white);
  box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.05);
}
.tg-blog-3-item .tg-blog-2-badge {
  background: var(--tg-common-black);
}
.tg-blog-3-item .tg-blog-2-badge span {
  color: var(--tg-common-white);
}
.tg-blog-3-item:hover .tg-blog-3-thumb img {
  transform: scale(1.1);
}
.tg-blog-3-thumb {
  overflow: hidden;
}
.tg-blog-3-thumb img {
  transition: 1.3s all ease;
}
.tg-blog-3-content {
  padding: 10px 40px 40px 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-blog-3-content {
    padding: 10px 20px 40px 20px;
  }
}
.tg-blog-3-meta {
  margin-bottom: 10px;
}
.tg-blog-3-user span {
  color: #737373;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.36px;
}
.tg-blog-3-user i {
  background: linear-gradient(94deg, var(--tg-gradient-1) 0%, var(--tg-gradient-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 15px;
  transform: translateY(-1px);
  margin-right: 10px;
}
.tg-blog-3-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--tg-common-black);
  margin-bottom: 30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-blog-3-title {
    font-size: 20px;
  }
}
.tg-blog-3-link {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--tg-common-black);
}
.tg-blog-3-link:hover {
  color: var(--tg-theme-1);
}
.tg-blog-3-link i {
  transform: translateY(2px);
  margin-left: 10px;
}
.tg-blog-3-shape-1 {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.tg-blog-4-item {
  padding: 40px;
  border-radius: 5px;
  background-color: var(--tg-common-white);
  box-shadow: 0px 5px 60px 0px rgba(0, 0, 0, 0.05);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-blog-4-item {
    padding: 25px;
  }
}
.tg-blog-4-item:hover .tg-blog-4-thumb img {
  transform: scale(1.1);
}
.tg-blog-4-item .tg-blog-title a:hover {
  color: var(--tg-common-black);
}
.tg-blog-4-thumb {
  overflow: hidden;
  border-radius: 5px;
}
.tg-blog-4-thumb img {
  width: 100%;
  border-radius: 5px;
  transition: 1.3s all ease;
}
.tg-blog-4-content {
  padding-top: 15px;
}
.tg-blog-4-meta span {
  font-size: 18px;
  letter-spacing: -0.36px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .tg-blog-4-meta span {
    font-size: 14px;
  }
}
.tg-blog-4-meta span:not(:last-child) {
  margin-right: 30px;
}
.tg-blog-4-meta span i {
  font-size: 13px;
  margin-right: 7px;
  display: inline-block;
  transform: translateY(-2px);
  background: linear-gradient(94deg, var(--tg-gradient-1) 0%, var(--tg-gradient-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tg-blog-4-link a {
  font-size: 18px;
  font-weight: 700;
  color: var(--tg-common-black);
}
.tg-blog-4-link a:hover i {
  color: var(--tg-gradient-2);
}
.tg-blog-4-link a i {
  display: inline-block;
  margin-left: 5px;
  transform: translateY(1px);
  transition: 0.3s;
}

/*======== blog details css start ===============*/
.postbox__thumb img {
  width: 100%;
  border-radius: 5px;
}
.postbox__title {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.64px;
}
.postbox__button {
  line-height: 0;
}
.postbox__meta {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 8px 20px;
  border-left: 4px solid var(--tg-theme-1);
  background-color: var(--tg-common-white);
  border-radius: 0px 5px 0px 0px;
  box-shadow: 0px 4.4px 20px -1px rgba(19, 16, 34, 0.05);
}
@media (max-width: 767px) {
  .postbox__meta {
    position: static;
    padding: 8px 12px;
  }
}
.postbox__meta span {
  font-size: 16px;
  line-height: 28px;
  letter-spacing: -0.36px;
}
.postbox__meta span:not(:last-child) {
  margin-right: 18px;
}
@media (max-width: 767px) {
  .postbox__meta span:not(:last-child) {
    font-size: 12px;
    margin-right: 13px;
  }
}
.postbox__meta span svg {
  margin-right: 7px;
  display: inline-block;
}
@media (max-width: 767px) {
  .postbox-more-left {
    margin-bottom: 20px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .postbox-more-left {
    margin-bottom: 0px;
  }
}
.postbox-more-right .postbox-more-icon a {
  margin-left: 20px;
  margin-right: 0px;
}
.postbox__comment {
  border-radius: 5px;
  padding: 20px;
  border: 1px solid var(--tg-border-1);
}
.postbox__comment ul li {
  list-style-type: none;
}
.postbox__comment ul li:not(:last-child) {
  margin-bottom: 27px;
}
@media (max-width: 767px) {
  .postbox__comment-info {
    flex-wrap: wrap;
  }
}
.postbox__comment-title {
  font-size: 22px;
  font-weight: 700;
}

/*# sourceMappingURL=main.css.map */