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

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

Main Font    : Sora
Main Color   : #7476ff

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

[Typography]

Body copy:    15px 'Sora', sans-serif
Header:     36px 'Sora', sans-serif
Input, textarea:  16px 'Sora', sans-serif
Sidebar heading:  20px 'Sora', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
    02. Preloader
    03. Topbar
	    - Topbar Style One
        - Topbar Style Two
    04 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
        - Navbar Box
    05. Banner
        - Banner Fade
        - Banner Slide
        - Banner Zoom
    06. About Us
	    - About Style One
        - About Style Two
    07. Services
        - Tab Version
        - Grid Version
        - Services Single
    08. Features
    09. Work Process
    10. Why Choose Us
    11. Fun Factor
    12. Pricing Table
    12. Partner World Wide
    13. Team
        - Grid Version
        - Carousel Version
        - Team Details
    14. Testimonials
		- Single Slider
        - Center Slider
    15. Projects
		- Grid Version
        - Carousel Version
        - Project Details
    16. Blog
        - Standard
        - Left Sidebar
        - Right Sidebar
        - Single
    17. Request Call Back
    18. FAQ
    19. Error 404
    20. Footer
    21. PHP Contact Form
    22. Others

*/

/*
** Write you custom css below
*/
@media (min-width: 992px) {
  .chat-cabinet .services-sidebar {
    position: sticky;
    top: 100px;
  }
}
@media (min-width: 1200px) {
  .banner-two-content-h2_1 {
    font-size: 72px !important;
  }

  .banner-two-content-h2_2 {
    font-size: 60px !important;
  }
}

.logo-icon img {
  height: 70px !important;
}

footer .f-items {
  padding: 30px 0;
}

.f-items img {
  margin: 0 !important;
}
.navbar-brand {
  display: block;
}
.main {
  margin-top: 120px;
  margin-bottom: 60px;
}
.billing-credits__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .main {
    margin-top: 180px;
    margin-bottom: 100px;
  }
}

.profile__form-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 30px;
}
.billing-form__label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.billing-form__input {
  min-height: 40px;
  padding: 5px 15px;
}

.chat__content-block {
  position: relative;
  margin-bottom: 40px;
}

.chat__content.loading-chat .chat__content-item:last-child {
  margin-bottom: 50px;
}

.chat__content.loading-chat .chat__content-load {
  display: block;
}

.chat__content-load {
  position: absolute;
  bottom: -50px;
  max-width: 120px !important;
  left: 50%;
  transform: translateX(-50%);
  display: none;
}
.chat__content-item {
  display: flex;
  align-items: center;
  gap: 50px;
  row-gap: 20px;
  flex-wrap: wrap;
}

.chat__content-item:not(:last-child) {
  border-bottom: 1px solid #484848;
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.chat__content-time {
  /* text-align: center; */
}

.chat__content-request {
  display: flex;
  justify-content: flex-end;
}

.chat__content-request p {
  background: #000;
  color: #fff;
  padding: 5px 10px;
  border-radius: 10px;
  margin: 0;
}

.chat__content-response {
  display: flex;
  flex-wrap: wrap;
}

.chat__content-response p {
  background: #7b5dff;
  color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin: 0;
  max-width: 90%;
}

.response {
  position: relative;
  z-index: 2;
  font-size: 12px;
  text-transform: uppercase;
  padding: 5px 15px;
  font-weight: 600;
  display: none;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 100%;
  transition: all 0.25s ease-out;
  line-height: 18px;
  border-radius: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.response.success {
  background-color: rgb(5, 168, 5);
  color: #fff;
  display: flex;
  animation: fade 0.25s ease;
  width: max-content;
}
.login-form .response.success {
  margin-bottom: 0 !important;
}
.response.error {
  background-color: #da4c4c;
  color: #fff;
  display: flex;
  animation: fade 0.25s ease;
  width: max-content;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.login-page__row {
  max-width: 800px;
}
.form__check {
  display: flex;
  align-items: center;
  gap: 5px;
}
.detail__form-file-container {
  position: relative;
  border: 1px dashed #7476ff;
  border-radius: 10px;
  width: max-content;
  padding: 10px 18px;
  height: 46px;
  overflow: hidden;
  margin-bottom: 20px;
  cursor: pointer;
}
.detail__form-file {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 10px 18px;
  width: 100%;
  height: 60px;
}
.detail__form-file-text {
  font-size: 14px;
  opacity: 50%;
}

.modal {
  position: fixed;
  z-index: 2400;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.81);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: scroll;
  opacity: 0;
  display: none;
}
@media screen and (min-width: 992px) and (min-height: 600px) {
  .modal {
    align-items: center;
  }
}
.modal.open {
  opacity: 1;
  display: flex;
  transition: opacity 0.3s;
}
.modal_center {
  align-items: center;
}
.modal__block {
  background-color: #fff;
  padding: 20px;
  max-width: 940px;
  width: 92%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  border-radius: 2px;
}
@media (min-width: 576px) {
  .modal__block {
    padding: 50px 30px;
    width: 100%;
  }
}
.modal__close {
  height: 15px;
  width: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 20;
  right: 13px;
  top: 13px;
  cursor: pointer;
}
.modal__img {
  margin: 0 auto 20px;
  display: block;
}
.modal__title {
  font-weight: 500;
  font-size: 24px;
  line-height: 100%;
  text-align: center;
  color: #414241;
}
.modal .btn {
  width: 100%;
  text-align: center;
}
/* html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
} */
.page-header-box h1 {
  margin-bottom: 30px;
}
.contact-loader .loader {
  display: none;
}
.contact-style-one-area {
  padding-bottom: 70px;
}
@media (min-width: 576px) {
  .contact-style-one-area {
    padding-bottom: 120px;
  }
}
.billing__right {
  border-radius: 30px;
  background-color: #f5f5ff;
  padding: 30px;
}
.mob-profile {
  display: none;
}

@media (max-width: 992px) {
  .navbar-header {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }
  .navbar-header::after,
  .navbar-header::before {
    display: none;
  }
  .mob-profile {
    display: block;
    margin-left: auto;
    margin-right: 10px;
    padding: 10px 25px;
  }
}
@media (max-width: 576px) {
  .logo {
    width: 150px;
  }
  .chat__content-time {
    width: 100%;
  }
  .billing__right {
    padding: 35px 20px;
  }
  .chat__content-item {
    gap: 20px;
  }
}
a.navbar-brand {
  position: static;
  transform: unset;
}
@media only screen and (max-width: 767px) {
  .single-widget.services-list-widget {
    padding: 20px 30px;
    padding-bottom: 20px;
  }
}
.download-audio {
  border: none;
  outline: none;
  background-color: transparent;
  margin-left: 20px;
  align-items: center;
}
.pricing-style-two .tf-btn {
  padding: 10px 20px;
}
.tf-btn:hover {
  color: #fff;
}
.pricing-style-two {
  background-color: #f6f6f6;
  border-radius: 30px;
  padding: 20px 25px;
}
.single-widget li {
  margin-bottom: 10px;
}
.single-widget a {
  font-weight: 600;
  letter-spacing: 1px;
}
.single-widget {
  padding: 20px 25px;
  background-color: #f6f6f6;
  border-radius: 30px;
}
.single-widget .tf-btn a {
  color: #fff;
}
.single-widget .tf-btn {
  width: 102%;
  margin-left: -10px;
  justify-content: start;
}
.tf-btn-orange {
  background: #fd3a25;
  box-shadow:
    0px -3px 0px 0px rgb(253, 58, 37) inset,
    0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset,
    0px 2.77px 2.21px 0px rgba(253, 58, 37, 0.1215686275),
    0px 6.65px 5.32px 0px rgba(253, 58, 37, 0.1294117647),
    0px 12.52px 10.02px 0px rgba(253, 58, 37, 0.1333333333),
    0px 22.34px 17.87px 0px rgba(253, 58, 37, 0.1411764706),
    0px 41.78px 33.42px 0px rgba(253, 58, 37, 0.1490196078),
    0px 100px 80px 0px rgba(253, 58, 37, 0.1490196078),
    0px 3px 3px 0px rgba(253, 58, 37, 0.1411764706),
    0px 2.77px 2.21px 0px rgba(253, 58, 37, 0.1215686275);
  margin: 5px 0;
}
.tf-btn-orange:hover {
  background: #fd3a25;
  box-shadow:
    0px -3px 0px 0px rgb(253, 58, 37) inset,
    0px 1px 0px 0px rgba(255, 255, 255, 0.3019607843) inset,
    0px 2.77px 2.21px 0px rgba(253, 58, 37, 0.1215686275),
    0px 6.65px 5.32px 0px rgba(253, 58, 37, 0.1294117647),
    0px 12.52px 10.02px 0px rgba(253, 58, 37, 0.1333333333),
    0px 22.34px 17.87px 0px rgba(253, 58, 37, 0.1411764706),
    0px 41.78px 33.42px 0px rgba(253, 58, 37, 0.1490196078),
    0px 100px 80px 0px rgba(253, 58, 37, 0.1490196078),
    0px 3px 3px 0px rgba(253, 58, 37, 0.1411764706),
    0px 2.77px 2.21px 0px rgba(253, 58, 37, 0.1215686275);
}

@media (max-width: 576px) {
  .single-widget li {
    margin-bottom: 5px;
  }
  .tf-btn {
    padding: 8px 20px;
  }
  .chat__content-response audio {
    width: 85vw;
  }
}

form textarea {
  padding: 20px;
  margin-bottom: 15px;
}
#mobile-menu a {
  color: #fff;
}
.mb-menu-link {
  pointer-events: unset;
}