/* =========================================
   Custom backgrounds to be used throughout 
   the website
   ========================================= */

.phanoon-background {
  background-color: #121212;

  --vibrant-dark-blue: #081d4e;
  --dull-dark-blue: #051233;

  background-image: radial-gradient(
      circle at 90% 10%,
      var(--dull-dark-blue) 0%,
      transparent 35%
    ),
    radial-gradient(
      circle at 20% 90%,
      var(--vibrant-dark-blue) 0%,
      transparent 26%
    );

  background-repeat: no-repeat;
}

@media (max-width: 991px) {
  .phanoon-background {
    background-image: radial-gradient(
      circle at 0% 100%,
      var(--vibrant-dark-blue) 0%,
      transparent 72%
    );
  }
}

.phanoon-footer-background {
  background-color: #121212;

  --vibrant-dark-blue: #081d4e;
  --dull-dark-blue: #051233;

  background-image: radial-gradient(
      circle at 50% 0%,
      var(--dull-dark-blue) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at 0% 100%,
      var(--vibrant-dark-blue) 0%,
      transparent 35%
    ),
    radial-gradient(
      circle at 100% 100%,
      var(--vibrant-dark-blue) 0%,
      transparent 35%
    );

  background-repeat: no-repeat;
}

@media (max-width: 991px) {
  .phanoon-footer-background {
    background-image: radial-gradient(
        circle at 0% -5%,
        #121212 0%,
        transparent 89%
      ),
      radial-gradient(
        circle at 100% 160%,
        var(--dull-dark-blue) 0%,
        transparent 194%
      );
  }
}

.phanoon-purple-background {
  background-image: url(../img/home2/home2-process-bg.png),
    linear-gradient(180deg, #e9e5ff 0%, #e9e5ff 100%) !important;
}

.phanoon-light-background {
  background-image: url(../img/home1/faq-section-bg.webp),
    linear-gradient(180deg, #efefff 0%, #efefff 100%) !important;
}

.phanoon-gradient-background {
  background-image: url(../img/home1/testimonial-bg.webp),
    linear-gradient(96deg, #fbd8ff 1.56%, #dedbfd 50.41%, #c5ccff 98.25%) !important;
}

.phanoon-white-background {
  background-image: url(../img/home1/testimonial-bg.webp),
    linear-gradient(96deg, #ffffff 1.56%, #ffffff 50.41%, #ffffff 98.25%) !important;
}

.phanoon-dim-background {
  background-image: linear-gradient(
    180deg,
    #f7f7ff 0%,
    #f0f0fb 100%
  ) !important;
}

.phanoon-plain-white-background {
  background: white !important;
}

/* =========================================
   End of Logo Styling
   ========================================= */

/* =========================================
   This card controls the colour of 
   navigation bar right card
   ========================================= */

.phanoon-nav-text * {
  color: white !important;
}

.phanoon-nav-text:hover * {
  color: #3067ff !important;
}

.phanoon-nav-card {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 5px 0 0 5px;
  border: 1px solid rgba(48, 103, 255, 0.05) !important;
  border-left: none !important;
  background: rgba(255, 255, 255, 0.05) !important;
  padding: 5px 25px 5px 15px;
}

.phanoon-nav-card-button {
  background-color: #3b3b3b;
  padding: 16px 18px;
  line-height: 1;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  margin-left: -1px !important;
}

@media (max-width: 1199px) {
  .phanoon-nav-card-button {
    border-radius: 5px;
  }
}

@media (max-width: 991px) {
  .phanoon-nav-card-button {
    /* padding: 0;
    background: none; */
    padding: 7px 7px 7px 10px;
    border-radius: 5px 5px 5px 5px;
    background: none;
  }
}

/* =========================================
   End of Logo Styling
   ========================================= */

/* =========================================
   Custom text colours to be used throughout 
   the website
   ========================================= */

.phanoon-white-text {
  color: white !important;
}

.phanoon-white-text-all,
.phanoon-white-text-all * {
  color: white !important;
}

.phanoon-grey-text {
  color: rgba(255, 255, 255, 0.6) !important;
}

.phanoon-grey-text-all,
.phanoon-grey-text-all * {
  color: rgba(255, 255, 255, 0.6) !important;
}

.phanoon-dark-grey-text {
  color: rgba(211, 211, 211, 0.6) !important;
}

.phanoon-dark-grey-text-all,
.phanoon-dark-grey-text-all * {
  color: rgba(211, 211, 211, 0.6) !important;
}

/* 
-----------------------------------------------------
 Use to style-align the breadcrumbs (both stars and 
 circle icons). Ensures proper spacing and alignment.
-----------------------------------------------------
*/

.phanoon-breadcrumb-icons-star {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 1px !important;
}

.phanoon-breadcrumb-icons-wrapper .phanoon-breadcrumb-lign-icon-circle {
  line-height: 0;
  vertical-align: middle;
  margin: 0 5px 1px 5px;
}

.phanoon-breadcrumb-icons-wrapper {
  padding: 10px 8px 8px 8px !important;
}

.phanoon-breadcrumb-icons-spacer {
  margin-bottom: 1px !important;
}

/* @media (max-width: 991px) {
    .phanoon-breadcrumb-icons-spacer {
        margin-bottom: 1.5px !important;
    }
} */

.phanoon-breadcrumb-faq-icons {
  margin-bottom: 2px !important;
}

@media (max-width: 991px) {
  .phanoon-breadcrumb-faq-icons {
    margin-bottom: 1.5px !important;
  }
}

/* =========================================
   End of Logo Styling
   ========================================= */

/* =========================================
   Logo Styling
   Used for controlling logo sizes across 
   header, footer, and responsive screens
   ========================================= */

.phanoon-logo img {
  height: 33px !important;
}

.phanoon-logo-footer img {
  height: 32px !important;
}

/* Increase logo size on smaller screens */
@media screen and (max-width: 500px) {
  .phanoon-logo img {
    height: 32px !important;
  }
}

/* =========================================
   End of Logo Styling
   ========================================= */

.phanoon-hero-heading {
  font-size: 54px !important;
}

.phanoon-hero-padding {
  padding: 165px 0 90px 0 !important;
}

/* Hero Section -  Removing extra padding for mobile */
@media screen and (max-width: 599.99px) {
  .phanoon-hero-padding {
    padding: 110px 0 50px 0 !important;
  }

  .phanoon-hero-heading {
    font-size: 38px !important;
  }
}

/* Default: content is visible */
.phanoon-mobile-hider {
  display: block; /* or inline, inline-block depending on your content */
}

/* Hide content on screens smaller than 1000px */
@media (max-width: 999px) {
  .phanoon-mobile-hider {
    display: none !important;
  }
}

/******************************************************************************
 * Description: A subtle horizontal divider with white space above and below.
 ******************************************************************************/

.phanoon-divider {
  display: block;
  height: 0.1px; /* extremely thin line */
  background-color: rgba(255, 255, 255, 0.3); /* subtle white line */
  width: 100%;
  margin: 15px 0 0 0; /* space above and below */
}

.phanoon-divider-black {
  display: block;
  height: 0.1px; /* extremely thin line */
  background-color: rgba(185, 185, 185, 0.4); /* subtle white line */
  width: 100%;
  margin: 20px 0 7px 0; /* space above and below */
}

/* =========================================
   Phanoon Technologies Logo Styling
   Sets fixed height for technology logos
   ========================================= */

.phanoon-technologies-logo img {
  height: 30px !important;
}

.phanoon-technologies-logo img:first-child {
  height: 18px !important;
}

.phanoon-technologies-logo img:nth-child(3) {
  height: 25px !important;
}

.phanoon-technologies-logo img:nth-child(5) {
  height: 26px !important;
}

/* =========================================
   End of Phanoon Technologies Logo Styling
   ========================================= */

/* =========================================
   Phanoon Service Page Hero Text Styling
   Sets typography for breadcrumb tags and hero
   Text used in service page hero section to
   Match text style for indexing
   ========================================= */

.phanoon-breadcrumb-tag-text {
  font-family: "Inter", sans-serif;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.36px;
}

.phanoon-service-hero-text {
  font-size: 18px !important;
}

@media (max-width: 768px) {
  .phanoon-service-hero-text {
    font-size: 15px !important;
  }
}

/* =========================================
   End Service Page Hero Text tyling Styling
   ========================================= */

/* =========================================
   Phanoon Global Heading & Hero Text Styling
   This styling is used for headings and text
   throughout the website to maintain consistent
   typography, breadcrumb tags, and hero sections.
   ========================================= */

.phanoon-heading {
  font-size: 56px !important;
  line-height: 1.3 !important; /* increase from 1.2 to 1.4 for more spacing */
}

@media (max-width: 1198.98px) {
  .phanoon-heading {
    font-size: 46px !important;
    line-height: 1.4 !important; /* add line-height here too */
  }
}

@media (max-width: 767.98px) {
  .phanoon-heading {
    font-size: 38px !important;
    line-height: 1.4 !important;
  }
}

@media (max-width: 576.98px) {
  .phanoon-heading {
    font-size: 32px !important;
    line-height: 1.4 !important;
  }
}

/* Phanoon listing text size */

.phanoon-list-font > ul > li {
  font-size: 17px !important;
}

ul.features li img {
  margin-bottom: 2px !important;
  margin-right: 2px !important;
}

/* =========================================
   Right arrow icon styling used in buttons 
   mostly used in cards like service cards
   ========================================= */

.phanoon-right-arrow {
  width: 17px;
  height: auto;
  transition: filter 0.3s ease;
  vertical-align: middle;
  color: #051233 !important;
}

/* =========================================
   Styling
   Used to style right arrow available in button 
   mostly used in cards like service cards
   ========================================= */

.phanoon-right-arrow {
  width: 18px;
  height: auto;
  transition: filter 0.3s ease;
  vertical-align: middle;
}

.explore-btn:hover .phanoon-right-arrow,
.learn-more-btn:hover .phanoon-right-arrow {
  filter: invert(34%) sepia(90%) saturate(3000%) hue-rotate(208deg)
    brightness(101%) contrast(101%);
}

/* =========================================
   Mobile navigation and side panel sub
   pages diagonal arrow icon styling
   ====================================== */

.submenu-list li a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 1s ease-in-out;
  text-decoration: none;
  color: inherit;
}

.submenu-list li a img,
.submenu-list li a svg {
  width: 10px;
  height: 10px;
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

.submenu-list li a:hover {
  color: #2b5ce3;
}

.submenu-list li a:hover img,
.submenu-list li a:hover svg {
  filter: invert(32%) sepia(85%) saturate(2225%) hue-rotate(215deg)
    brightness(95%) contrast(92%) !important;
  opacity: 0.8;
  transition: opacity 1s ease-in-out, filter 0s;
}

.submenu-list li a:hover svg path {
  fill: #2b5ce3;
}