/*

1. HomePage

2. About Us Page

3. Services Page

4. Project Page

5. Blog Page

6. Contact Us Page

7. Privacy Policy Page

8. Comming Soon Page

*/

/* ===============================================
    1. HomePage
------------------------*/

.featured-imagebox-blog .featured-thumbnail img {
  height: 280px;
  object-fit: cover;
  object-position: top right;
}

ul.ttm-recent-post-list li img {
  object-fit: cover;
}

.bg-img2 {
  background-image: url('/images/bg-image/footer-skyline.jpg');
}

.mobile-nav-items {
  padding: 15px 0;
  line-height: 15px;
  font-size: 15px;
  font-weight: 600;
}

/* ===============================================
    2. About Us Page
------------------------*/

.about-us-page .ttm-page-title-row {
  background-image: url('/images/aboutus/aboutus_banner.webp');
}

.about-us-page .product-business .img-fluid {
  height: 521px;
  object-fit: cover;
  object-position: right;
}

.client-box.ttm-box-view-boxed-logo .client img {
  height: 47px;
}

.about-us-page .ttm-row.history-section {
  padding-top: 150px;
  padding-bottom: 60px;
}

/* ===============================================
    3. Services Page
------------------------*/

.services-page .ttm-page-title-row {
  background-image: url('/images/services/services_banner.webp');
}

.services-page .take-service .img-fluid {
  height: 521px;
  object-fit: cover;
}

.services-page .featured-imagebox-portfolio .featured-thumbnail img {
  height: 270px;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.our-services-section .featured-imagebox-services .featured-thumbnail .img-fluid {
  height: 270px;
  object-fit: cover;
}

.responsive-design-page .ttm-page-title-row {
  background-image: url('/images/services/responsive_design/banner.jpg');
  background-position: bottom;
}

.web-design-dev-page .ttm-page-title-row {
  background-image: url('/images/services/web_design_dev/banner.png');
  background-position: bottom;
}

.web-design-dev-page .development-process-section .content-area {
  padding-bottom: 0;
}

.web-design-dev-page .development-process-section .development-process {
  padding: 30px 0;
}

.web-design-dev-page .development-process-section .development-process .process-image {
  height: 100%;
  display: flex;
  align-items: center;
}

.web-design-dev-page .development-process-section .development-process .process-image img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.web-design-dev-page .development-process-section .development-process .process-title {
  padding-top: 15px;
}

.web-design-dev-page .development-process-section .development-process-contact {
  padding-top: 50px;
  padding-bottom: 100px;
}

/* ===============================================
    4. Project Page
------------------------*/

.projects-page .ttm-page-title-row {
  background-image: url('/images/projects/projects_banner.webp');
}

.project-detail-img {
  width: 100%;
}

.project-detail-box-app-links {
  max-height: 40px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.project-detail-box-app-links a {
  max-height: 40px;
}

.project-detail-box-app-links a img {
  max-height: 40px;
}

.project-uag-page .ttm-page-title-row {
  background-image: url('/images/projects/uag_banner.png');
  background-position-y: 35%;
}

.project-yamaha-page .ttm-page-title-row {
  background-image: url('/images/projects/yamaha_banner.png');
  background-position-y: 35%;
}

.project-kotore-page .ttm-page-title-row {
  background-image: url('/images/projects/kotore_banner.jpg');
  background-position-y: top;
}

.project-kotore-page .ttm-page-title-row .title-box .page-title-heading h1 {
  color: #ffffff;
}

.project-truehaul-page .ttm-page-title-row {
  background-image: url('/images/projects/truehaul_banner.jpg');
  background-position-y: 60%;
}

.project-truehaul-page .ttm-page-title-row .title-box .page-title-heading h1 {
  color: #ffffff;
}

.project-papa-johns-page .ttm-page-title-row {
  background-image: url('/images/projects/papa_johns_banner.jpg');
  background-position-y: 60%;
}

.project-papa-johns-page .ttm-page-title-row .title-box .page-title-heading h1 {
  color: #ffffff;
}

.project-papa-johns-page .img-fluid {
  width: 100%;
}

.project-uag-page .ttm-box-col-wrapper .featured-thumbnail .img-fluid,
.project-yamaha-page .ttm-box-col-wrapper .featured-thumbnail .img-fluid,
.project-kotore-page .ttm-box-col-wrapper .featured-thumbnail .img-fluid,
.project-truehaul-page .ttm-box-col-wrapper .featured-thumbnail .img-fluid,
.project-papa-johns-page .ttm-box-col-wrapper .featured-thumbnail .img-fluid {
  max-height: 270px;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.projects-page .featured-imagebox-portfolio .featured-thumbnail .img-fluid {
  height: 270px;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.projects-page .react-tabs {
  width: 100%;
}

/* ===============================================
    5. Blog Page
------------------------*/

.blogs-page .ttm-page-title-row {
  background-image: url('/images/blogs/blogs_banner.webp');
}

.blogs-page .featured-imagebox .featured-thumbnail .img-fluid {
  height: 292px;
  object-fit: cover;
}

/* ===============================================
    6. Contact Us Page
------------------------*/

.contactus-page .ttm-page-title-row {
  background-image: url('/images/contactus/contactus_banner.webp');
}

/* ===============================================
    7. Privacy Policy Page
------------------------*/
.privacy-policy-section .row {
  flex-direction: column;
}

.privacy-policy-page .ttm-page-title-row {
  background-image: url('/images/privacy_policy/privacy_policy_banner.jpg');
}

/* ===============================================
    8. Comming Soon Page
------------------------*/
.coming-soon-page {
  background-image: url('/images/coming_soon/coming_soon_banner.png');
  height: 100vh;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coming-soon-page .logo-img {
  position: absolute;
  top: 20px;
  left: 20px;
}

.coming-soon-page .time-count-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.coming-soon-page .time-count-section .time-circle {
  width: 90px;
  height: 90px;
  background-color: rgba(0, 0, 0, 0.5);
  margin-right: 50px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.coming-soon-page .time-count-section .time-circle:first-child {
  background-color: #df4141;
  color: #ffffff;
}

.coming-soon-page .time-count-section .time-circle:last-child {
  margin-right: 0;
}

.coming-soon-page .time-count-section .time-circle span {
  color: #ffffff;
  font-size: 30px;
  font-weight: 600;
  margin-top: 8px;
}

.coming-soon-page .time-count-section .time-circle label {
  font-size: 12px;
  margin: 0;
}

.coming-soon-page .description-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 500px;
  text-align: center;
  margin: 50px auto 30px;
  color: #ffffff;
}

.coming-soon-page .description-section h1 {
  color: #ffffff;
}

.coming-soon-page .email-section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.coming-soon-page .email-section input {
  border-radius: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  border: unset;
  color: #ffffff;
  padding: 10px 20px;
  width: 350px;
}

.coming-soon-page .email-section button {
  width: 60px;
  height: 40px;
  background-color: #ffffff;
  border: unset;
  border-radius: 20px;
  color: #df4141;
  font-size: 24px;
  padding-top: 0px;
  position: absolute;
  right: calc(50% - 170px);
}

.coming-soon-page .social-section {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 30px;
  left: calc(50% - 60px);
}

.coming-soon-page .social-section ul li {
  margin-right: 30px;
}

.coming-soon-page .social-section ul li:last-child {
  margin-right: 0px;
}

.coming-soon-page .social-section ul li a {
  color: #ffffff;
  font-size: 20px;
}

@media only screen and (max-width: 575px) {
  .coming-soon-page .logo-img {
    width: 150px;
  }
  .coming-soon-page .time-count-section .time-circle {
    margin-right: 10px;
    width: 60px;
    height: 60px;
  }
  .coming-soon-page .time-count-section .time-circle span {
    font-size: 22px;
  }
  .coming-soon-page .time-count-section .time-circle label {
    font-size: 8px;
  }
  .coming-soon-page .description-section h1 {
    font-size: 28px;
  }
  .coming-soon-page .email-section input {
    width: 300px;
    padding: 5px 20px;
  }
  .coming-soon-page .email-section button {
    right: calc(50% - 140px);
    height: 30px;
    width: 50px;
  }
}