.container {
  max-width: 960px;
}

.icon-link > .bi {
  width: .75em;
  height: .75em;
}

/*
 * Custom translucent site header
 */

.site-header {
  background-color: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #8e8e8e;
  transition: color .15s ease-in-out;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  right: 10%;
  bottom: -30%;
  width: 300px;
  height: 540px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(30deg);
}

.my-dev-image::before {
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.my-dev-image{
 position: absolute;
  right: 20%;
  bottom: -1%;
  width: 100px;
  height: 340px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(30deg);
}

.my-dev-image-2{
  top: -85%;
  right: auto;
  width: 20px;
  height: 50px;
  bottom: 0;
  left: -35%;
  background-color: #e5e5e5;
}


.product-device-2 {
  top: -25%;
  right: auto;
  bottom: 0;
  left: 5%;
  background-color: #e5e5e5;
}

/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size:3.5rem
    }
}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: #0000001a;
    border: solid rgba(0,0,0,.15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em #0000001a,inset 0 .125em .5em #00000026
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh
}

.bi {
    vertical-align: -.125em;
    fill: currentColor
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8
}

.bd-mode-toggle {
    z-index: 1500
}

.bd-mode-toggle .bi {
    width: 1em;
    height: 1em
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block!important
}

.my-navbar {
  background-color: #91008D !important;
}

.my-navtext .nav-link{
    color: #161818 !important;
}

.blog-bg{
    background-image: url("../assets/img/blog-bg2.png") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px;
}

.black-bg{
    background-image: url("../assets/img/black_bg.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pink-dark-bg{
    background-image: url("../assets/img/pink-dark.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.white-bg{
    background-image: url("../assets/img/white_bg.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.grey-bg{
    background-image: url("../assets/img/greyish.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.web-bg{
    background-image: url("../assets/img/web-scrap-bg.jpeg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px;
}

.my-web-img{
 position: absolute;
  right: 20%;
  bottom: -1%;
  width: 100px;
  height: 340px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(30deg);
}

.my-web-img::before{
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.my-web-img-2{
  top: -85%;
  right: auto;
  width: 20px;
  height: 50px;
  bottom: 0;
  left: -15%;
  background-color: #e5e5e5;
}

.movies-bg{
    background-image: url("../assets/img/movies-bg.jpeg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

.description-note{
    text-align: justify !important;
    font-size: 0.7rem !important;
}

.spotify-bg{
    background-image: url("../assets/img/spotify-bg.jpeg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.amazon-bg{
    background-image: url("../assets/img/amazon-bg.jpeg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ai-gui-bg{
    background-image: url("../assets/img/ai-gui-bg.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px;
}

.my-gui-img{
 position: absolute;
  right: 20%;
  bottom: -1%;
  width: 100px;
  height: 340px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(20deg);
}

.my-gui-img::before{
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.my-gui-img-2{
  top: -40%;
  right: auto;
  width: 20px;
  height: 50px;
  bottom: 0;
  left: -65%;
  background-color: #e5e5e5;
}

.apartments-bg{
    background-image: url("../assets/img/apartments-bg.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gym-bg{
    background-image: url("../assets/img/gym-bg.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.us-states-bg{
    background-image: url("../assets/img/us-states-bg.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.quiz-pass-bg{
    background-image: url("../assets/img/quiz-pass-bg.jpg") !important;
    background-size: 150% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.data-science-bg{
    background-image: url("../assets/img/data-science-bg.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: 20px;
}

.data-science-img{
 position: absolute;
  right: 20%;
  bottom: -1%;
  width: 100px;
  height: 340px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(30deg);
}

.data-science-img::before{
  position: absolute;
  top: 10%;
  right: 10px;
  bottom: 10%;
  left: 10px;
  content: "";
  background-color: rgba(255, 255, 255, .1);
  border-radius: 5px;
}

.data-science-img-2{
  top: -90%;
  right: auto;
  width: 20px;
  height: 50px;
  bottom: 0;
  left: -50%;
  background-color: #e5e5e5;
}

.data-cleaning-bg{
    background-image: url("../assets/img/data-cleaning-bg.jpg") !important;
    background-size: contain;
    background-position: top;
    height: 800px;
    background-repeat: no-repeat;
}


.plot-graph-bg{
    background-image: url("../assets/img/plot-graph-bg.jpeg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.numpy-bg{
    background-image: url("../assets/img/numpy-bg.jpeg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.predict-bg{
    background-image: url("../assets/img/predict-bg.jpeg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#About_pane

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size:3.5rem
    }
}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: #0000001a;
    border: solid rgba(0,0,0,.15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em #0000001a,inset 0 .125em .5em #00000026
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh
}

.bi {
    vertical-align: -.125em;
    fill: currentColor
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8
}

.bd-mode-toggle {
    z-index: 1500
}

.bd-mode-toggle .bi {
    width: 1em;
    height: 1em
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block!important
}

.tunez-bg {
    position: relative;
    overflow: hidden;
    background: linear-gradient(-45deg, #ffe0cf, #ffb6c1, #ffffff, #ff9ecb);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.tunez-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%238B2635' stroke-width='1.5' opacity='0.5'%3E%3Cpath d='M60 20 L60 30 M52 30 L68 30 M55 30 L55 45 L65 45 L65 30 M52 45 Q52 60 60 65 Q68 60 68 45' /%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 120px 120px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
}

.tunez-logo-img {
    width: 450px;
    height: auto;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

@media (max-width: 767.98px) {
    .tunez-bg {
        padding: 12px 0;
    }
    .tunez-logo-img {
        width: auto;
        max-height: 160px;
        max-width: 85%;
    }
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.navbar-tunez-gradient {
    background: linear-gradient(-45deg, #ffe0cf, #ffb6c1, #ffffff, #ff9ecb) !important;
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
}

.navbar {
    background-color: #FBEFEF !important; /* your cyan color */
}

.navbar-collapse {
    background-color: #FBEFEF !important;
}

.navbar .nav-link {
    color: #000000 !important;
}

@media (max-width: 768px) {
    .top-pef-bg {
        background-size: contain;
        min-height: 250px;
    }

    /* Force the World/Design row to stay 2-per-row */
    .row.mb-2 > .col-md-6 {
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }

    /* Force the perfume card wrapper to stay flex + wrap 2-per-row */
    .d-md-flex.flex-md-equal {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.5rem;
    }
    .d-md-flex.flex-md-equal > div {
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }

    /* shrink card content so it doesn't feel cramped */
    .pef-card {
        height: 200px;
    }
    .my-3.p-5 {
        padding: 0.75rem !important;
    }
    h2.display-8 {
        font-size: 1rem;
    }

    .perfume-home-page .pef-card {
        aspect-ratio: 4 / 3 !important;   /* was 1/1 — shorter than square */
    }

    .perfume-home-page .my-3.p-2 {
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0.25rem !important;
    }

    .perfume-home-page h2.display-8 {
        font-size: 0.9rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .orders-text {
        font-size: 0.8rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .perfume-home-page .btn.navbar-tunez-gradient {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.35rem !important;
        white-space: nowrap !important;
        padding: 0.45rem 0.6rem !important;
        margin-top: 0.5rem !important;
        font-size: 0.6rem !important;
    }

    .perfume-home-page .btn.navbar-tunez-gradient img {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    }
}

.pef-card{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.pef-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem; /* adjust to taste, or remove if you already have margin on cards */
}

.carousel-bg{
    background-size: contain !important;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
}

@media (max-width: 767.98px) {
    .carousel-bg {
        height: 240px;
    }
}

.golden-bg{
    background-image: url("../assets/img/golden-sky.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.diamond-bg{
    background-image: url("../assets/img/golden-bg.gif") !important;
    background-size: contain;
    background-position: center;
    background-repeat: repeat;
}

.top-pef-bg{
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 250px;
}

.accountant-bg{
    background-image: url("../assets/img/uploads/DG.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 250px;
}

.developer-img{
    background-image: url("../assets/img/developer-img.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 250px;
}

.outlines-bg{
    background-image: url("../assets/img/euphoria.jpg") !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    contain: layout paint;
}

.pef-price{
    justify-content: left !important;
    font-weight: 500 !important;
}

.pef-name{
    justify-content: left !important;
}

.dropdown-color {
  background-color: #d3d3d3 !important;
}

.dropdown-menu {
    background-color: #FF90FF !important;
    border: 1px solid #999 !important;   /* border color/thickness */
    border-radius: 6px !important;          /* 0 = square corners, or try 4px for slight rounding */
    margin-top: 0 !important;             /* removes the gap between navbar and menu */
    min-width: 180px;                     /* control width */
    box-shadow: none !important;          /* remove the drop shadow if you want it flatter */
}

@media (min-width: 768px) {
    .p-md-2 {
        padding: 1rem !important;
    }
}

@media (max-width: 767.98px) {
    /* Force the carousel + details wrapper to stack — scoped to this page only */
    .perfume-detail-page .d-md-flex.flex-md-equal {
        display: block !important;
    }

    .perfume-detail-page .d-md-flex.flex-md-equal > .outlines-bg {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
    }

    /* Force Hot Deals / Best Selling row to stack too */
    .perfume-detail-page .row.mb-2 > [class*="col-md-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Let carousel images breathe instead of fixed 500px height */
    .perfume-detail-page .carousel-item img,
    .perfume-detail-page .carousel-item .white-bg {
        height: 300px !important;
    }

    /* Show the Hot Deals / Best Selling product image on small screens too */
    .perfume-detail-page .top-pef-bg {
    display: block !important;
    height: 200px;
    flex: 0 0 100%;
    max-width: 100%;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
}

@media (max-width: 767.98px) {

    .perfume-home-page .row.mb-2 > [class*="col-md-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;

    }

    /* Show the Hot Deals / Best Selling product image on small screens too */
    .perfume-home-page .top-pef-bg {
        display: block !important;
        height: 200px;
        min-height: 0 !important;
        flex: 0 0 100%;
        max-width: 100%;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .perfume-home-page .pef-card {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    .my-3.p-5 {
    padding: 0.75rem !important;
    }

    @media (max-width: 480px) {
    .perfume-home-page .outlines-bg {
        padding: 0.5rem !important;
    }
    .perfume-home-page h2.display-8 {
        font-size: 0.85rem !important;
    }
    .perfume-home-page .lead {
        font-size: 0.9rem !important;
    }
    .perfume-home-page .badge {
        font-size: 0.5rem !important;
    }
     .perfume-home-page .d-price {
        font-size: 0.75rem !important;
        margin-bottom: 0 !important;
    }
    .perfume-home-page .btn {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.4rem !important;
    }
    .perfume-home-page .rate-star {
        width: 10px !important;
        height: 10px !important;
        font-size: 0.7rem !important;
        margin-bottom: 0 !important;
    }
    .perfume-home-page .lead {
        margin-bottom: -10px !important;
    }
    .orders-text {
        font-size: 0.8rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

    /* Trim the extra padding around each card so it doesn't add to the stretch */
    .perfume-home-page .outlines-bg {
        padding: 1rem !important;
    }

    .perfume-home-page .white-bg {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        padding-top: 1rem !important;
    }
}

.social-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.social-toggle-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background-color: #d6336c;
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.25s ease;
}

.social-toggle-icon {
    display: inline-block;
    transition: transform 0.25s ease;
}

.social-toggle-btn.open .social-toggle-icon {
    transform: rotate(45deg);
}

.social-float-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.social-float-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: scale(0.5) translateY(10px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.social-float-items.open .social-float-btn {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}

.social-float-btn.wa { background-color: #25D366; }
.social-float-btn.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-float-btn.tt { background-color: #000; }

.thumb-btn img {
        border: 2px solid transparent;
        transition: border-color 0.15s ease;
    }
    .thumb-btn.active img {
        border-color: var(--bs-primary);
    }

#myCarousel .carousel-inner-pef,
#myCarousel .carousel-item .carousel-inner-pef{
    height: 800px;
}

@media (max-width: 767.98px) {
    #myCarousel .carousel-inner-pef,
    #myCarousel .carousel-item .carousel-inner-pef{
        height: 400px;
    }

     #myCarousel .carousel-inner-pef,
      #myCarousel .carousel-item .carousel-inner-pef{
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    .perfume-home-page .rate-star {
        width: 10px !important;
        height: 10px !important;
        font-size: 0.7rem !important;
        margin-bottom: 0 !important;
    }
    .perfume-home-page .lead {
        margin-bottom: -10px !important;
    }
}

body {
    font-family: 'Jost', sans-serif;
    }

p {
    font-family: 'Jost', sans-serif;
    line-height: 1.6;
    font-weight: 400;
    }

h1, h2, h3, h4, .display-8 {
    font-family: 'Playfair Display', serif;
    }

.filter{
    margin-top: -10px !important;
    margin-bottom: -10px !important;
}

.pagination .page-item.active .page-link {
    background-color: #57595B !important;
    border-color: #2C2C2C !important;
    color: #F9F8F6 !important;
}

.page-link{
    color: #2C2C2C !important;
}

.breadcrumb {
    font-weight: 1000 !important;
    font-family: 'Jost', sans-serif !important;
}

.lead {
    font-weight: 400 !important;
}