/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat",  sans-serif;
  --nav-font: "Open Sans",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #014683; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #014e91; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff50; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Logo color  */
:root{

  --logo-red: #e8282f;
  --logo-green: #38cd90;
  --logo-blue: #004e90;
  --logo-yellow: #f5cb00;

}


/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #222222;  /* The default color of the main navmenu links */
  --nav-hover-color: #38cd90; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #222222; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #38cd90; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f7fbfa;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #014e91;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

.osteam-text-justify{
      text-align: justify !important;
}


.hero .hero-content .content p{
  max-width: 100% !important;
}
.outsourcing-fuels{
  background: color-mix(in srgb, var(--default-color), transparent 90%) !important;
}



/* --------------------------- */
/* Featured Box design  ------------------------------------------------------------------------------ start ----------  */
.featured-services .red {

  background: color-mix(in srgb, var(--logo-red), transparent 90%) !important;

}

.featured-services .yellow {

  background: color-mix(in srgb, var(--logo-yellow), transparent 90%) !important;

}

.featured-services .green {

  background: color-mix(in srgb, var(--logo-green), transparent 90%) !important;

}

.featured-services .red i {
  color: var(--logo-red);

}

.featured-services .yellow i {
  color: var(--logo-yellow);
 
}

.featured-services .green  i {
  color: var(--logo-green);
}

.featured-services .service-item:hover .red {
  background: linear-gradient(135deg, var(--logo-red), color-mix(in srgb, var(--logo-red), var(--logo-red) 20%)) !important;
}

.featured-services .service-item:hover .yellow {
  background: linear-gradient(135deg, var(--logo-yellow), color-mix(in srgb, var(--logo-yellow), var(--logo-yellow) 20%)) !important;
}

.featured-services .service-item:hover .green {
  background: linear-gradient(135deg, var(--logo-green), color-mix(in srgb, var(--logo-green), var(--logo-green) 20%)) !important;
}

/* Top border  */
.featured-services .red-item::before {
  background: linear-gradient(90deg, var(--logo-red), color-mix(in srgb, var(--logo-red), var(--logo-red) 30%));
}

.featured-services .yellow-item::before {
  background: linear-gradient(90deg, var(--logo-yellow), color-mix(in srgb, var(--logo-yellow), var(--logo-yellow) 30%));
}

.featured-services .green-item::before {
  background: linear-gradient(90deg, var(--logo-green), color-mix(in srgb, var(--logo-green), var(--logo-green) 30%));
}

/* Featured Box design ------------------------------------------------------------------------------------- END -------------   */

/* About US page icon -------------------------------------------------------------------------------- start ------  */

.portfolio-details .key-features-section .features-list .feature-row .about-blue {
 
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%) !important;

}

.portfolio-details .key-features-section .features-list .feature-row .about-red {
 
  background-color: color-mix(in srgb, var(--logo-red), transparent 90%) !important;

}

.portfolio-details .key-features-section .features-list .feature-row .about-yellow {
 
  background-color: color-mix(in srgb, var(--logo-yellow), transparent 90%) !important;

}
.portfolio-details .key-features-section .features-list .feature-row .about-green {
 
  background-color: color-mix(in srgb, var(--logo-green), transparent 90%) !important;

}


.portfolio-details .key-features-section .features-list .feature-row .about-blue i {
 
   color: var(--logo-blue);

}

.portfolio-details .key-features-section .features-list .feature-row .about-red i {
 
 color: var(--logo-red);

}

.portfolio-details .key-features-section .features-list .feature-row .about-yellow i {
 
  color: var(--logo-yellow);

}
.portfolio-details .key-features-section .features-list .feature-row .about-green i {
 
  color: var(--logo-green);

}


/* About US Page icon ------------------------------------------------------------------------------------  End ----  */


/* Services all pages icon ------------------------------------------------------------------------------ start ------  */

.feature-blue{
  background: color-mix(in srgb, var(--logo-blue), transparent 97%) !important;
}

.feature-red{
  background: color-mix(in srgb, var(--logo-red), transparent 97%) !important;
}

.feature-yellow{
  background: color-mix(in srgb, var(--logo-yellow), transparent 97%) !important;
}

.feature-green{
  background: color-mix(in srgb, var(--logo-green), transparent 97%) !important;
}


.hero .hero-features .feature-blue .icon {
 
  background: color-mix(in srgb, var(--logo-blue), transparent 90%) !important;
  
}

.hero .hero-features .feature-blue .icon i {

  color: var(--logo-blue) !important;
}


.hero .hero-features .feature-red .icon {
 
  background: color-mix(in srgb, var(--logo-red), transparent 90%) !important;
  
}

.hero .hero-features .feature-red .icon i {

  color: var(--logo-red) !important;
}

.hero .hero-features .feature-yellow .icon {
 
  background: color-mix(in srgb, var(--logo-yellow), transparent 90%) !important;
  
}

.hero .hero-features .feature-yellow .icon i {

  color: var(--logo-yellow) !important;
}

.hero .hero-features .feature-green .icon {
 
  background: color-mix(in srgb, var(--logo-green), transparent 90%) !important;
  
}

.hero .hero-features .feature-green .icon i {

  color: var(--logo-green) !important;
}


.hero .hero-features .feature-blue:hover .icon {
  background: var(--logo-blue) !important;
}

.hero .hero-features .feature-blue:hover .icon i {
  color: var(--contrast-color) !important;
}

.hero .hero-features .feature-red:hover .icon {
  background: var(--logo-red) !important;
}

.hero .hero-features .feature-red:hover .icon i {
  color: var(--contrast-color) !important;
}

.hero .hero-features .feature-yellow:hover .icon {
  background: var(--logo-yellow) !important;
}

.hero .hero-features .feature-yellow:hover .icon i {
  color: var(--contrast-color) !important;
}


.hero .hero-features .feature-green:hover .icon {
  background: var(--logo-green) !important;
}

.hero .hero-features .feature-green:hover .icon i {
  color: var(--contrast-color) !important;
}

/* .hero .hero-features .feature-blue h4 {

  color: var(--logo-blue) !important;
}

.hero .hero-features .feature-red h4 {

  color: var(--logo-red) !important;
}

.hero .hero-features .feature-yellow h4 {

  color: var(--logo-yellow) !important;
}

.hero .hero-features .feature-green h4 {

  color: var(--logo-green) !important;
} */
/* Services All page icon --------------------------------------------------------------------- End ----------  */

























/* ---------------------------------------------------------------------------------------------------------------  */
.custom-stats{
    background: (var(--accent-color), transparent 95%);
}




/* ===========================
   CONTAINER
=========================== */

.os-teams-container{
    width:100%;
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:
        ". top ."
        "left center right"
        ". bottom .";

    gap:30px;
    align-items:center;
}

/* ===========================
   CARDS
=========================== */

.os-teams-card{
    background:#fff;
    border-radius:18px;
    padding:28px;
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    justify-content:center;

    text-align:center;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.os-teams-card:hover{
    transform:translateY(-5px);
    box-shadow:0 16px 35px rgba(0,0,0,.12);
}

.os-teams-card h3{
    font-size:28px;
    font-weight:600;
    margin-bottom:18px;
    line-height:1.3;
}

.os-teams-card p{
    color:#555;
    line-height:1.8;
    font-size:15px;
}

/* ===========================
   COLORS
=========================== */

.os-teams-red{
    border-top:5px solid #ff2b2b;
}

.os-teams-red h3{
    color:#ff2b2b;
}

.os-teams-green{
    border-top:5px solid #35c985;
}

.os-teams-green h3{
    color:#23b46e;
}

.os-teams-blue{
    border-top:5px solid #0057b8;
}

.os-teams-blue h3{
    color:#0057b8;
}

.os-teams-yellow{
    border-top:5px solid #e0b700;
}

.os-teams-yellow h3{
    color:#c39d00;
}

/* ===========================
   GRID POSITIONS
=========================== */

.os-teams-top{
    grid-area:top;
    width:370px;
    justify-self:center;
}

.os-teams-bottom{
    grid-area:bottom;
    width:370px;
    justify-self:center;
}

.os-teams-left{
    grid-area:left;
}

.os-teams-center{
    grid-area:center;
    display:flex;
    justify-content:center;
    align-items:center;
}

.os-teams-right{
    grid-area:right;
}

/* ===========================
   LOGO
=========================== */

.os-teams-logo{
    max-width:450px;
    width:100%;
    height:auto;
    filter:drop-shadow(0 6px 15px rgba(0,0,0,.08));
}

/* ===========================
   TABLET
=========================== */

@media (max-width:1100px){

    .os-teams-container{
        grid-template-columns:1fr;
        grid-template-areas:
            "top"
            "left"
            "center"
            "right"
            "bottom";
    }

    .os-teams-logo{
        display:none;
    }

    .os-teams-top,
    .os-teams-bottom{
        width:100%;
        max-width:100%;
    }

    .os-teams-card{
        width:100%;
    }
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:768px){

    body{
        padding:20px;
    }

    .os-teams-container{
        gap:20px;
    }

    .os-teams-card{
        padding:22px;
    }

    .os-teams-card h3{
        font-size:22px;
    }

    .os-teams-card p{
        font-size:14px;
        line-height:1.7;
    }

    .os-teams-top,
    .os-teams-bottom{
        width:100%;
    }
}