/*
* Author: Obinna Akaolisa
* Phone : +2348038633503
* Email : akaolisaobinna@gmail.com
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('https://fonts.cdnfonts.com/css/conthrax');

:root
{
    /*
    | App Colors and Variants |
    */

    /* Blue Variants (Primary) */
    --blue-900:#010508; --blue-800:#042035; --blue-700:#083c62;
    --blue-600:#0c588f; --blue-500:#1074bc; --blue-400:#4995cc;
    --blue-300:#83b7dc; --blue-200:#bcd8ec; --blue-100:#f5f9fc;

    /* Charcoal Variants (Secondary) */
    --charcoal-900:#020303; --charcoal-800:#111418; --charcoal-700:#20252d;
    --charcoal-600:#2f3641; --charcoal-500:#3E4756; --charcoal-400:#6c737f;
    --charcoal-300:#9b9fa7; --charcoal-200:#c9cbd0; --charcoal-100:#f7f8f8;

    /* China Rose Variants (Accent) */
    --china-rose-900:#070305; --china-rose-800:#331620; --china-rose-700:#5e2a3c;
    --china-rose-600:#8a3d57; --china-rose-500:#b55073; --china-rose-400:#c77a95;
    --china-rose-300:#d9a4b6; --china-rose-200:#eaced8; --china-rose-100:#fcf8f9;

    /* Platinum Variants (Neutral) */
    --platinum-900:#090909; --platinum-800:#404141; --platinum-700:#787879;
    --platinum-600:#afb0b1; --platinum-500:#e6e7e9; --platinum-400:#ecedee;
    --platinum-300:#f2f3f4; --platinum-200:#f8f8f9; --platinum-100:#fefefe;


    /* Drop Shadow Variants */
    --drop-shadow-blue-sm: 0px 4px 4px var(--blue-100) ;
    --drop-shadow-blue-md: 0px 4px 8px var(--blue-200) ;
    --drop-shadow-blue-lg: 0px 4px 12px var(--blue-300) ;

    --drop-shadow-china-rose-sm: 0px 4px 3px var(--china-rose-100) ;
    --drop-shadow-china-rose-md: 0px 4px 8px var(--china-rose-200) ;
    --drop-shadow-china-rose-lg: 0px 4px 12px var(--china-rose-300) ;

    --drop-shadow-charcoal-sm: 0px 4px 3px var(--charcoal-100) ;
    --drop-shadow-charcoal-md: 0px 4px 8px var(--charcoal-200) ;
    --drop-shadow-charcoal-lg: 0px 4px 12px var(--charcoal-300) ;

    --drop-shadow-platinum-sm: 0px 4px 3px var(--platinum-100) ;
    --drop-shadow-platinum-md: 0px 4px 8px var(--platinum-200) ;
    --drop-shadow-platinum-lg: 0px 4px 12px var(--platinum-300) ;
}

* {box-sizing: border-box; margin: 0; padding: 0;}

/* Specific Elements */
html, body 
{
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
    background: var(--blue-100);
}


/* 
| Background Colors |
*/

/* Blue Background Colors*/
.bg-blue-900 {background: var(--blue-900);}
.bg-blue-800 {background: var(--blue-800);}
.bg-blue-700 {background: var(--blue-700);}
.bg-blue-600 {background: var(--blue-600);}
.bg-blue-500 {background: var(--blue-500);}
.bg-blue-400 {background: var(--blue-400);}
.bg-blue-300 {background: var(--blue-300);}
.bg-blue-200 {background: var(--blue-200);}
.bg-blue-100 {background: var(--blue-100);}

/* China-rose Background Colors*/
.bg-china-rose-900 {background: var(--china-rose-900);}
.bg-china-rose-800 {background: var(--china-rose-800);}
.bg-china-rose-700 {background: var(--china-rose-700);}
.bg-china-rose-600 {background: var(--china-rose-600);}
.bg-china-rose-500 {background: var(--china-rose-500);}
.bg-china-rose-400 {background: var(--china-rose-400);}
.bg-china-rose-300 {background: var(--china-rose-300);}
.bg-china-rose-200 {background: var(--china-rose-200);}
.bg-china-rose-100 {background: var(--china-rose-100);}

/* Charcoal Background Colors*/
.bg-charcoal-900 {background: var(--charcoal-900);}
.bg-charcoal-800 {background: var(--charcoal-800);}
.bg-charcoal-700 {background: var(--charcoal-700);}
.bg-charcoal-600 {background: var(--charcoal-600);}
.bg-charcoal-500 {background: var(--charcoal-500);}
.bg-charcoal-400 {background: var(--charcoal-400);}
.bg-charcoal-300 {background: var(--charcoal-300);}
.bg-charcoal-200 {background: var(--charcoal-200);}
.bg-charcoal-100 {background: var(--charcoal-100);}

/* Platinum Background Colors*/
.bg-platinum-900 {background: var(--platinum-900);}
.bg-platinum-800 {background: var(--platinum-800);}
.bg-platinum-700 {background: var(--platinum-700);}
.bg-platinum-600 {background: var(--platinum-600);}
.bg-platinum-500 {background: var(--platinum-500);}
.bg-platinum-400 {background: var(--platinum-400);}
.bg-platinum-300 {background: var(--platinum-300);}
.bg-platinum-200 {background: var(--platinum-200);}
.bg-platinum-100 {background: var(--platinum-100);}


/* 
    ** Buttons
*/

/* blue buttons*/
.btn-blue
{
    background: var(--blue-500);
    color: var(--blue-100);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

.btn-blue:hover
{
    background: var(--blue-600);
    color: var(--blue-100);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

.btn-blue-outline
{
    background: transparent;
    color: var(--blue-500);
    border: 2px solid var(--blue-500);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

.btn-blue-outline:hover
{
    background: var(--blue-500);
    color: var(--blue-100);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}


/* china-rose buttons*/
.btn-china-rose
{
    background: var(--china-rose-500);
    color: var(--china-rose-100);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

.btn-china-rose:hover
{
    background: var(--china-rose-600);
    color: var(--china-rose-100);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

.btn-china-rose-outline
{
    background: transparent;
    color: var(--china-rose-500);
    border: 2px solid var(--china-rose-500);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

.btn-china-rose-outline:hover
{
    background: var(--china-rose-500);
    color: var(--china-rose-100);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}


/* charcoal buttons*/
.btn-charcoal
{
    background: var(--charcoal-500);
    color: var(--charcoal-100);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

.btn-charcoal:hover
{
    background: var(--charcoal-600);
    color: var(--charcoal-100);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

.btn-charcoal-outline
{
    background: transparent;
    color: var(--charcoal-500);
    border: 2px solid var(--charcoal-500);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

.btn-charcoal-outline:hover
{
    background: var(--charcoal-400);
    color: var(--charcoal-100);
    border-radius: 10px;
    padding: 13px;
    transition: all ease-in-out .3s;
}

input.form-control, textarea.form-control, .form-select
{
    border-radius: 10px;
    /* background: var(--blue-100); */
    border: 2px solid var(--blue-200);
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}

/* 
    ** Badges
*/

/* blue badge*/
.badge-blue
{
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
    background: var(--blue-500);
    color: var(--blue-100);
    filter: drop-shadow(var(--drop-shadow-blue-sm));
}

/* china-rose badge*/
.badge-china-rose
{
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
    background: var(--china-rose-500);
    color: var(--china-rose-100);
    filter: drop-shadow(var(--drop-shadow-china-rose-sm));
}

/* charcoal badge*/
.badge-charcoal
{
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
    background: var(--charcoal-400);
    color: var(--charcoal-100);
    filter: drop-shadow(var(--drop-shadow-charcoal-sm));
}


/* 
    ** Text colors
*/

/* blue texts */
.text-blue-900 {color:var(--blue-900)}
.text-blue-800 {color:var(--blue-800)}
.text-blue-700 {color:var(--blue-700)}
.text-blue-600 {color:var(--blue-600)}
.text-blue-500 {color:var(--blue-500)}
.text-blue-400 {color:var(--blue-400)}
.text-blue-300 {color:var(--blue-300)}
.text-blue-200 {color:var(--blue-200)}
.text-blue-100 {color:var(--blue-100)}

/* china-rose texts */
.text-china-rose-900 {color:var(--china-rose-900)}
.text-china-rose-800 {color:var(--china-rose-800)}
.text-china-rose-700 {color:var(--china-rose-700)}
.text-china-rose-600 {color:var(--china-rose-600)}
.text-china-rose-500 {color:var(--china-rose-500)}
.text-china-rose-400 {color:var(--china-rose-400)}
.text-china-rose-300 {color:var(--china-rose-300)}
.text-china-rose-200 {color:var(--china-rose-200)}
.text-china-rose-100 {color:var(--china-rose-100)}

/* charcoal texts */
.text-charcoal-900 {color:var(--charcoal-900)}
.text-charcoal-800 {color:var(--charcoal-800)}
.text-charcoal-700 {color:var(--charcoal-700)}
.text-charcoal-600 {color:var(--charcoal-600)}
.text-charcoal-500 {color:var(--charcoal-500)}
.text-charcoal-400 {color:var(--charcoal-400)}
.text-charcoal-300 {color:var(--charcoal-300)}
.text-charcoal-200 {color:var(--charcoal-200)}
.text-charcoal-100 {color:var(--charcoal-100)}

/* platinum texts */
.text-platinum-900 {color:var(--platinum-900)}
.text-platinum-800 {color:var(--platinum-800)}
.text-platinum-700 {color:var(--platinum-700)}
.text-platinum-600 {color:var(--platinum-600)}
.text-platinum-500 {color:var(--platinum-500)}
.text-platinum-400 {color:var(--platinum-400)}
.text-platinum-300 {color:var(--platinum-300)}
.text-platinum-200 {color:var(--platinum-200)}
.text-platinum-100 {color:var(--platinum-100)}

/* 
    ** Text Sizings
*/

/* Display Texts */
.display-title-1 {font-size: 64px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.display-title-2 {font-size: 48px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.display-heading-1 {font-size: 36px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.display-heading-2 {font-size: 32px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.display-sub-heading-1 {font-size: 24px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.display-sub-heading-2 {font-size: 20px; font-weight: 600; font-family: 'Poppins', sans-serif;}


/* Body Texts */
.body-title-1 {font-size: 24px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.body-title-2 {font-size: 24px; font-weight: 400; font-family: 'Poppins', sans-serif;}
.body-heading-1 {font-size: 18px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.body-heading-2 {font-size: 18px; font-weight: 400; font-family: 'Poppins', sans-serif;}
.body-sub-heading-1 {font-size: 16px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.body-sub-heading-2 {font-size: 16px; font-weight: 400; font-family: 'Poppins', sans-serif;}
.body-text-1 {font-size: 14px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.body-text-2 {font-size: 14px; font-weight: 400; font-family: 'Poppins', sans-serif;}
.body-caption-1 {font-size: 12px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.body-caption-2 {font-size: 12px; font-weight: 400; font-family: 'Poppins', sans-serif;}
.body-metadata-1 {font-size: 10px; font-weight: 600; font-family: 'Poppins', sans-serif;}
.body-metadata-2 {font-size: 10px; font-weight: 400; font-family: 'Poppins', sans-serif;}


/* 
    ** Link stylings
*/

/* blue-links */
.link-blue {color: var(--blue-500); text-decoration: none; transition: color ease-in-out .3s;}
.link-blue:hover {color: var(--blue-600); text-decoration:dotted; transition: color ease-in-out .3s;}

/* china-rose-links */
.link-china-rose {color: var(--china-rose-500); text-decoration: none; transition: color ease-in-out .3s;}
.link-china-rose:hover {color: var(--china-rose-600); text-decoration:none; transition: color ease-in-out .3s;}

/* charcoal-links */
.link-charcoal {color: var(--charcoal-500); text-decoration: none; transition: color ease-in-out .3s;}
.link-charcoal:hover {color: var(--charcoal-600); text-decoration:none; transition: color ease-in-out .3s;}

/* white-links */
.link-plain {color: var(--blue-100); text-decoration: none; transition: color ease-in-out .3s;}
.link-plain:hover {color: var(--china-rose-100); text-decoration:none; transition: color ease-in-out .3s;}

.nav-link:hover
{
    color: var(--blue-500);
}
.nav-link.active
{
    color: var(--blue-100) !important;
    background: var(--blue-500);
    border-radius: 5px;
}

.page-item .page-link
{
  color: var(--blue-600) !important;
}

.page-item.active .page-link
{
  color: var(--blue-100) !important;
  background: var(--blue-600) !important;
  border: solid 1px var(--blue-600) !important;
}

/* 
    ** Drop shadows
*/

/* blue-drop-shadow */
.d-shadow-blue
{
    box-shadow: var(--drop-shadow-blue-sm);
    border-radius: 10px;
    transition: all ease-in-out .5s;
}

.d-shadow-blue:hover
{
    box-shadow: var(--drop-shadow-blue-md);
    border-radius: 10px;
    transform: scale(1.01);
    transition: all ease-in-out .5s;
}


/* china-rose-drop-shadow */
.d-shadow-china-rose
{
    box-shadow: var(--drop-shadow-china-rose-sm);
    border-radius: 10px;
    transition: all ease-in-out .5s;
}

.d-shadow-china-rose:hover
{
    box-shadow: var(--drop-shadow-china-rose-md);
    border-radius: 10px;
    transform: scale(1.01);
    transition: all ease-in-out .5s;
}

/* charcoal-drop-shadow */
.d-shadow-charcoal
{
    box-shadow: var(--drop-shadow-charcoal-sm);
    border-radius: 10px;
    transition: all ease-in-out .5s;
}

.d-shadow-charcoal:hover
{
    box-shadow: var(--drop-shadow-charcoal-md);
    border-radius: 10px;
    transform: scale(1.01);
    transition: all ease-in-out .5s;
}

#go-top {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 100px; /* Place the button at the bottom of the page */
    right: 35px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    background-color: var(--blue-500); /* Set a background color */
    color: var(--blue-100); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    transition: all ease-in-out .3s;
  }
  
  #go-top:hover {
    background-color: var(--china-rose-500);
    transition: all ease-in-out .3s;
  }

  .fixed-height {
    min-height: 80vh;
  }

  #hero-home {
    background: var(--blue-800);
    background: linear-gradient(rgba(0, 3, 19, 0.4), rgba(2, 0, 27, 0.4)), url("../images/home-hero-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #hero-landing {
    background: var(--blue-800);
    background: linear-gradient(rgba(0, 3, 19, 0.53), rgba(2, 0, 27, 0.53)), url("../images/home-hero-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 60vh;
  }

  #hero-search {
    background: var(--blue-800);
    background: linear-gradient(rgba(0, 3, 19, 0.63), rgba(2, 0, 27, 0.63)), url("../images/generic-hero-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50vh;
  }

  #hero-generic {
    background: var(--blue-800);
    background: linear-gradient(rgba(0, 3, 19, 0.63), rgba(2, 0, 27, 0.63)), url("../images/generic-hero-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 35vh;
  }

  .rounded {  border-radius: 10px !important; }

  .splide__slide.thumbnail {
    opacity: 0.6 !important;
    height: 120px;
    object-fit: cover;
  }
  
  .splide__slide.thumbnail.is-active {
    opacity: 1 !important;
    border: 2px solid var(--blue-500) !important;
    border-radius: 2px !important;
  }

  .splide__slide img{
    object-fit: cover;
    width: 100%;
    height: 400px;
  }

  .splide__slide.thumbnail img{
    object-fit: cover;
    width: 100%;
    height: 100px;
  }
  
  .cover-image{
    object-fit: cover;
    width: 100%;
    height: 250px;
  }

  #auto_carousel_update .splide__slide img{
    object-fit: cover;
    width: 100%;
    height: 250px;
  }

/* CSS styles for the button loader icon */
i.loader-icon {
    display: none;
    font-size: 18px;
    margin-left: 5px;
}

.disabled {
    pointer-events: none;
}

/* CSS styles for the loading overlay and spinner */
#loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
  
  .loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--blue-500);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }

  .card-product { position: relative;}

  .card-product-image {
    position: relative;
    height: 190px;
    width: 100%;
    object-fit: cover;
  }

  .card-product-banner { position: absolute;  top:12px; right: 12px; }

  .avatar {
    height: 180px;
    width: 180px;
    object-fit: cover;
  }