/* ===================================
   DSR77 Pharma LLP - Bootstrap 5 Custom Styles
   =================================== */

/* Color Variables */
:root {
  --bs-primary: #ff6b35;
  --bs-primary-rgb: 255, 107, 53;
  --primary-orange: #ff6b35;
  --light-blue: #4a90e2;
  --mint-green: #7ed4ad;
  --dark-gray: #2c3e50;
  --light-gray: #f8f9fa;
}

/* Global Styles */
body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  color: var(--dark-gray);
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* Bootstrap Button Overrides */
.btn-primary {
  background-color: var(--primary-orange);
  border-color: var(--primary-orange);
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #e55a2a;
  border-color: #e55a2a;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 107, 53, 0.3);
}

.btn-outline-primary {
  color: var(--primary-orange);
  border-color: var(--primary-orange);
  font-weight: 600;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--primary-orange);
  border-color: var(--primary-orange);
  color: white;
}

/* Text Color Utilities */
.text-primary {
  color: var(--primary-orange) !important;
}

.text-light-blue {
  color: var(--light-blue) !important;
}

.text-mint-green {
  color: var(--mint-green) !important;
}

/* Background Color Utilities */
.bg-primary {
  background-color: var(--primary-orange) !important;
}

.bg-light-blue {
  background-color: var(--light-blue) !important;
}

.bg-mint-green {
  background-color: var(--mint-green) !important;
}

/* Navbar Styles */
.navbar {
  transition: all 0.3s ease;
}

.navbar-brand {
  font-size: 1.5rem;
  transition: all 0.3s ease;
}

.nav-link {
  font-weight: 500;
  padding: 0.5rem 1rem !important;
  transition: all 0.3s ease;
}

.nav-link:hover {
  color: var(--primary-orange) !important;
}

/* Card Styles */
.card {
  border: none;
  border-radius: 1rem;
  transition: all 0.3s ease;
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

/* Product Card */
.product-card {
  border-radius: 16px;
  overflow: hidden;
  background: white;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: inherit;
  display: block;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  text-decoration: none;
}

/* Badge Styles */
.badge {
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
}

/* Form Styles */
.form-control,
.form-select {
  border-radius: 0.5rem;
  border: 2px solid #e0e0e0;
  padding: 0.75rem 1rem;
  transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-orange);
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.15);
}

/* Section Spacing */
.section-padding {
  padding: 100px 0;
}

/* Hero Section */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f5f7fa 0%, #fff 100%);
  overflow: hidden;
}

.min-vh-75 {
  min-height: 75vh;
}

/* Stats Badge */
.stat-badge {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: all 0.3s ease;
}

.stat-badge:hover {
  transform: scale(1.05);
}

/* Filter Section */
.filter-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  margin-bottom: 2rem;
}

/* Footer */
.footer {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}

/* Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

.floating {
  animation: float 6s ease-in-out infinite;
}

.floating-delayed {
  animation: float 6s ease-in-out infinite;
  animation-delay: 2s;
}

.floating-slow {
  animation: float 8s ease-in-out infinite;
  animation-delay: 4s;
}

/* 3D Tablet Objects */
.tablet-object {
  position: absolute;
  pointer-events: none;
  opacity: 0.15;
  z-index: 1;
}

.tablet-1 {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary-orange), #ff8c61);
  border-radius: 40px;
  top: 10%;
  right: 10%;
}

.tablet-2 {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--light-blue), #ff8c61);
  border-radius: 30px;
  top: 60%;
  left: 5%;
}

.tablet-3 {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, var(--mint-green), #9ce0bf);
  border-radius: 50px;
  bottom: 15%;
  right: 15%;
}

/* Glass Effect */
.glass-effect {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Input Group */
.input-group-text {
  background-color: white;
  border: 2px solid #e0e0e0;
  border-right: none;
}

.input-group .form-control,
.input-group .form-select {
  border-left: none;
}

.input-group:focus-within .input-group-text {
  border-color: var(--primary-orange);
}

.input-group:focus-within .form-control,
.input-group:focus-within .form-select {
  border-color: var(--primary-orange);
}

/* Table Styles */
.table {
  border-radius: 0.5rem;
  overflow: hidden;
}

.table thead {
  background-color: #f8f9fa;
}

/* Alert Styles */
.alert {
  border-radius: 0.75rem;
  border: none;
}

/* Responsive Typography */
@media (max-width: 768px) {
  .display-1 {
    font-size: 3rem;
  }

  .display-3 {
    font-size: 2.5rem;
  }

  .display-4 {
    font-size: 2rem;
  }

  .section-padding {
    padding: 60px 0;
  }

  .hero-section {
    min-height: auto;
    padding: 60px 0;
  }
}

/* Utility Classes */
.rounded-4 {
  border-radius: 1rem !important;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.object-fit-cover {
  object-fit: cover;
}
.product-card:hover {
  transform: translateY(-10px);
}
.nav-heading {
  margin-left: 130px;
}

.moving-image {
  animation: moveLeft 4s linear infinite;
  float: right;
  justify-content: end;
}

@keyframes moveLeft {
  25% {
    transform: translatex(30%);
  }
  50% {
    transform: translateY(50%);
  }
  75% {
    transform: translatey(0%);
  }
  100% {
    transform: translatey(0%);
  }
}

.moving-image-two {
  animation: moveLeft 4s linear infinite;
  float: left;
  justify-content: end;
}
.quality-img {
  height: 500px;
}
.mt-10 {
  margin-top: 20px;
}
.cursor-pointer{
  cursor: pointer;
}
.fs-35{
  font-size: 35px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .w-sm-70 {
    width: 70px;
  }
  .nav-heading {
    margin-left: 80px;
    font-size: 20px;
  }
  .w-sm-80{
    width: 80px;
  }
}

/* @import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css';
@import 'https://fonts.googleapis.com/css?family=Raleway:100,600';
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300'; */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 20px 0;
  text-transform: none;
  color: rgba(254, 82, 76, 1);
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.5;
}

a:link,
a:active,
a:visited{
  /* color:rgba(255,255,255,1); */
}

a:hover{
  /* color:rgba(255,255,255,0.6); */
}

.gray {
  color: #a5a5a5;
}

.team{
  margin:40px;
}

.team-member {
  margin: 15px 0;
  padding: 0;
}

.team-member figure {
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

.team-member figure img {
  min-width: 100%;
}

.team-member figcaption p {
  font-size: 16px;
}

.team-member figcaption ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-member figcaption ul {
  visibility: visible;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.team-member figcaption ul li {
  display: inline-block;
  padding: 10px;
}

.team-member h4 {
  margin: 10px 0 0;
  padding: 0;
}

.team-member figcaption {
  padding: 50px;
  color: transparent;
  background-color: transparent;
  position: absolute;
  z-index: 996;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.team-member figure:hover figcaption {
  visibility: visible;
  color: #fff;
  background: rgba(230, 78, 62, 0.9);

  
  height: 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.team-member figure:hover figcaption ul li a:hover {
  color: rgba(49, 49, 49, .97);
}

.team-member figure img {
  -webkit-transform: scale(1) rotate(0) translateY(0);
  -moz-transform: scale(1) rotate(0) translateY(0);
  -o-transform: scale(1) rotate(0) translateY(0);
  -ms-transform: scale(1) rotate(0) translateY(0);
  transform: scale(1) rotate(0) translateY(0);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.team-member figure:hover img {
  -webkit-transform: scale(1.1) rotate(1deg) translateY(12px);
  -moz-transform: scale(1.1) rotate(1deg) translateY(12px);
  -o-transform: scale(1.1) rotate(1deg) translateY(12px);
  -ms-transform: scale(1.1) rotate(1deg) translateY(12px);
  transform: scale(1.1) rotate(1deg) translateY(12px);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.img-responsive {
  width: 350px;
  height: 350px;
  object-fit: cover;
}