* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

    body {
      background: #f9f9f9;
      color: #222;
      line-height: 1.6;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    /* header {
      background: #111;
      padding: 1.5rem 2rem;
      color: #fff;
      text-align: center;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
      position: relative;
    } */

    /* header h1 {
      font-size: 2.5rem;
      font-weight: 700;
      letter-spacing: 1px;
      color: #0ff;
      text-shadow: 0 0 8px #0ff;
      margin-bottom: 0.5rem;
    } */

    nav ul {
      display: flex;
      justify-content: center;
      gap: 20px;
      list-style: none;
      padding: 0.5rem 0;
      /* flex-wrap: wrap; */
    }

    nav ul li a {
      color: #fff;
      text-decoration: none;
      font-weight: 500;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s ease;
    }

    nav ul li a:hover {
      background: #fff;
      color: #0f0c29;
      box-shadow: 0 0 10px #0ff;
    }

    .layout {
      display: flex;
      flex-direction: row;
      margin-top: 2rem;
      padding: 1rem;
    }

    .left-sidebar {
      width: 250px;
      max-width: 250px;
      position: sticky;
      top: 100px;
      height: fit-content;
      flex-shrink: 0;
    }

    .middle-content {
      flex: 1;
      max-width: 800px;
      padding: 0 1rem;
    }

    .right-sidebar {
      width: 300px;
      flex-shrink: 0;
    }

    .section-title {
      font-size: 2rem;
      font-weight: 700;
      margin: 2rem 1rem 1rem;
      color: #333;
    }

    .cards {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      justify-content: center;
    }

    .card {
      background: #fff;
      width: 250px;
      border-radius: 12px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
    }

    .card img {
      width: 100%;
      height: 160px;
      object-fit: cover;
    }

    .card-content {
      padding: 1rem;
      color: #333;
    }

    .carousel {
      display: flex;
      overflow-x: auto;
      gap: 1rem;
      padding: 1rem;
    }

    .carousel-card {
      /* min-width: 250px; */
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      color: #333;
      padding: 1rem;
    }

    .carousel-card img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-bottom: 0.5rem;
      object-fit: cover;
      box-shadow: 0 0 6px rgba(0, 255, 255, 0.4);
    }

    footer {
      background: #f0f0f0;
      color: #333;
      padding: 2rem;
      text-align: center;
      border-top: 1px solid #ccc;
      margin-top: auto;
    }

    footer .social-links a {
      margin: 0 0.5rem;
      color: #0ff;
      text-decoration: none;
      font-weight: bold;
    }

    footer .social-links a:hover {
      color: #000;
      text-shadow: 0 0 6px #0ff;
    }



    /* Code Modified **/

    .site-header {

		box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
		float: left;
		width: 100%;
		/*position: fixed;*/

}
.logo{
	float: left;
	padding-left: 30px;
}

.entry-content img{
width: 100%;
max-width: 600px;
min-height: 350px;
}

svg {
  stroke: #0082c6;
  stroke-width: 2;
}

.svg-logo {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' width='100' title='shoe-logo' id='logo'><path fill='indigo' d='M192 160h32V32h-32c-35.35 0-64 28.65-64 64s28.65 64 64 64zM0 416c0 35.35 28.65 64 64 64h32V352H64c-35.35 0-64 28.65-64 64zm337.46-128c-34.91 0-76.16 13.12-104.73 32-24.79 16.38-44.52 32-104.73 32v128l57.53 15.97c26.21 7.28 53.01 13.12 80.31 15.05 32.69 2.31 65.6.67 97.58-6.2C472.9 481.3 512 429.22 512 384c0-64-84.18-96-174.54-96zM491.42 7.19C459.44.32 426.53-1.33 393.84.99c-27.3 1.93-54.1 7.77-80.31 15.04L256 32v128c60.2 0 79.94 15.62 104.73 32 28.57 18.88 69.82 32 104.73 32C555.82 224 640 192 640 28c0-45.22-39.1-97.3-148.58-120.81z' /></svg>");
    background-size: contain;
    background-repeat: repeat;
    background-color: aqua;
    background-clip: text;
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    /* margin-top: 30px; */
        font-size: 27px;
    font-weight: 700;
    font-family: -webkit-body;
    letter-spacing: 3.3px;
}

.svg-content {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' width='100' title='shoe-logo' id='logo'><path fill='indigo' d='M192 160h32V32h-32c-35.35 0-64 28.65-64 64s28.65 64 64 64zM0 416c0 35.35 28.65 64 64 64h32V352H64c-35.35 0-64 28.65-64 64zm337.46-128c-34.91 0-76.16 13.12-104.73 32-24.79 16.38-44.52 32-104.73 32v128l57.53 15.97c26.21 7.28 53.01 13.12 80.31 15.05 32.69 2.31 65.6.67 97.58-6.2C472.9 481.3 512 429.22 512 384c0-64-84.18-96-174.54-96zM491.42 7.19C459.44.32 426.53-1.33 393.84.99c-27.3 1.93-54.1 7.77-80.31 15.04L256 32v128c60.2 0 79.94 15.62 104.73 32 28.57 18.88 69.82 32 104.73 32C555.82 224 640 192 640 28c0-45.22-39.1-97.3-148.58-120.81z' /></svg>");
    background-size: contain;
    background-repeat: repeat;
    background-color: aqua;
    background-clip: text;
    -webkit-background-clip: text;
    color: rgba(0, 0, 0, .2);
    margin-top: 30px;
}

.nav-main-header {
    background-color: #000;
    color: #fff;
    /*padding: 10px 0;*/
    /* margin-top: 63px; */
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}


.scrollable-nav {
    overflow-x: auto;
    white-space: nowrap;
}

/* .nav-list {
    display: flex;
    list-style: none;
} */
/* 
.nav-item {
    margin: 0 10px;
}

.nav-item a {
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}

.nav-item a:hover {
    text-decoration: underline;
} */

/* Add scrollbar styles for better visibility */
.scrollable-nav::-webkit-scrollbar {
    height: 6px;
}

.scrollable-nav::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 3px;
}

.scrollable-nav::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}






.carousel-container {
    text-align: center;
    padding-bottom:30px ;
}

.carousel-container h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.carousel-subtitle {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 50px;
}

.carousel-subtitle .top-rising,
.carousel-subtitle .by-ranking {
    font-size: 16px;
    color: #f2c617;
}

.owl-carousel .item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.carousel-card {
    position: relative;
    width: 100px;
    height: auto;
    margin: 0 auto;
}

.carousel-image {
    width: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    margin-bottom: 10px;
}

.carousel-info {
    text-align: center;
        margin-top: 131px;

}

.carousel-info .carousel-ranking {
    font-size: 12px;
    color: #8bc34a;
}

.carousel-info .carousel-name {
    font-size: 14px;
    font-weight: bold;
}

.owl-nav {
    margin-top: 10px;
    text-align: center;
}

.owl-nav button {
    background-color: transparent;
    border: none;
    font-size: 24px;
    color: #fff;
}

.owl-nav button:hover {
    color: #f2c617;
}





#DIV_1 {
    box-sizing: border-box;
    color: rgb(127, 150, 185);
    display: flex;
    /*height: 468px;*/
    min-height: auto;
    min-width: auto;
    text-decoration: none solid rgb(127, 150, 185);
    text-size-adjust: 100%;
    width: 95%;
    column-rule-color: rgb(127, 150, 185);
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    perspective-origin: 195px 434px;
    transform-origin: 195px 434px;
    caret-color: rgb(127, 150, 185);
    border: 0px none rgb(127, 150, 185);
    flex: 0 0 auto;
    flex-flow: row wrap;
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    margin: 0 auto;
    /*margin: 0px 40px 0px 0px;*/
    outline: rgb(127, 150, 185) none 0px;
}/*#DIV_1*/

#DIV_1:after {
    color: rgb(127, 150, 185);
    min-height: auto;
    min-width: auto;
    text-decoration: none solid rgb(127, 150, 185);
    text-size-adjust: 100%;
    column-rule-color: rgb(127, 150, 185);
    caret-color: rgb(127, 150, 185);
    border: 0px none rgb(127, 150, 185);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    outline: rgb(127, 150, 185) none 0px;
}/*#DIV_1:after*/

#DIV_1:before {
    color: rgb(127, 150, 185);
    min-height: auto;
    min-width: auto;
    text-decoration: none solid rgb(127, 150, 185);
    text-size-adjust: 100%;
    column-rule-color: rgb(127, 150, 185);
    caret-color: rgb(127, 150, 185);
    border: 0px none rgb(127, 150, 185);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    outline: rgb(127, 150, 185) none 0px;
}/*#DIV_1:before*/

#DIV_2 {
    background-blend-mode: normal, normal;
    background-position: 0px 0px, 50% 0px;
    bottom: 0px;
    box-shadow: rgba(89, 111, 233, 0.2) 0px 5px 10px 0px;
    box-sizing: border-box;
    color: rgb(127, 150, 185);
    height: 370px;
    left: 0px;
    max-height: 670px;
    min-height: auto;
    min-width: auto;
    position: relative;
    right: 0px;
    text-decoration: none solid rgb(127, 150, 185);
    text-size-adjust: 100%;
    top: 0px;
    width: 100%;
    column-rule-color: rgb(127, 150, 185);
    perspective-origin: 195px 335px;
    transform-origin: 195px 335px;
    caret-color: rgb(127, 150, 185);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15)) repeat scroll 0px 0px / auto padding-box border-box, rgb(69, 85, 255) url("https://uploads-ssl.webflow.com/54ea3d4119500e4473ec5f4d/5a538a1b30cd7400011c006c_Assassins_Creed_origins_Panoramics_2.jpeg") repeat scroll 50% 0px / 400px padding-box border-box;
    border: 0px none rgb(127, 150, 185);
    border-radius: 6px 6px 6px 6px;
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    margin: 20px 0px;
    outline: rgb(127, 150, 185) none 0px;
    overflow: hidden;
}/*#DIV_2*/

#DIV_2:after {
    color: rgb(127, 150, 185);
    min-height: auto;
    min-width: auto;
    text-decoration: none solid rgb(127, 150, 185);
    text-size-adjust: 100%;
    column-rule-color: rgb(127, 150, 185);
    caret-color: rgb(127, 150, 185);
    border: 0px none rgb(127, 150, 185);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    outline: rgb(127, 150, 185) none 0px;
}/*#DIV_2:after*/

#DIV_2:before {
    color: rgb(127, 150, 185);
    min-height: auto;
    min-width: auto;
    text-decoration: none solid rgb(127, 150, 185);
    text-size-adjust: 100%;
    column-rule-color: rgb(127, 150, 185);
    caret-color: rgb(127, 150, 185);
    border: 0px none rgb(127, 150, 185);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    outline: rgb(127, 150, 185) none 0px;
}/*#DIV_2:before*/

#DIV_3 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(127, 150, 185);
    height: 229px;
    left: 0px;
    position: absolute;
    right: 0px;
    text-decoration: none solid rgb(127, 150, 185);
    text-size-adjust: 100%;
    top: 215px;
    width: 100%;
    column-rule-color: rgb(127, 150, 185);
    perspective-origin: 195px 114.5px;
    transform-origin: 195px 114.5px;
    caret-color: rgb(127, 150, 185);
    background: rgba(16, 76, 64, 0.8) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(127, 150, 185);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    outline: rgb(127, 150, 185) none 0px;
    padding: 5px;
}/*#DIV_3*/

#DIV_3:after {
    color: rgb(127, 150, 185);
    text-decoration: none solid rgb(127, 150, 185);
    text-size-adjust: 100%;
    column-rule-color: rgb(127, 150, 185);
    caret-color: rgb(127, 150, 185);
    border: 0px none rgb(127, 150, 185);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    outline: rgb(127, 150, 185) none 0px;
}/*#DIV_3:after*/

#DIV_3:before {
    color: rgb(127, 150, 185);
    text-decoration: none solid rgb(127, 150, 185);
    text-size-adjust: 100%;
    column-rule-color: rgb(127, 150, 185);
    caret-color: rgb(127, 150, 185);
    border: 0px none rgb(127, 150, 185);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    outline: rgb(127, 150, 185) none 0px;
}/*#DIV_3:before*/

#DIV_4 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    height: 14px;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    width: 100%;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 165px 7px;
    transform-origin: 165px 7px;
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 14px / 14px "Moon bold", sans-serif;
    margin: 0px 0px 12px;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_4*/

#DIV_4:after {
    color: rgb(255, 255, 255);
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 14px / 14px "Moon bold", sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_4:after*/

#DIV_4:before {
    color: rgb(255, 255, 255);
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 14px / 14px "Moon bold", sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#DIV_4:before*/

#H3_5 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    /*height: 125px;*/
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    width: 100%;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 165px 28px;
    transform-origin: 165px 28px;
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 700 normal 22px / 28px Lato, sans-serif;
    margin: 0px 0px 15px;
    outline: rgb(255, 255, 255) none 0px;
}/*#H3_5*/

#H3_5:after {
    color: rgb(255, 255, 255);
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 700 normal 22px / 28px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#H3_5:after*/

#H3_5:before {
    color: rgb(255, 255, 255);
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 700 normal 22px / 28px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#H3_5:before*/

#H4_6 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    height: 20px;
    letter-spacing: -0.2px;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    width: 100%;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 165px 10px;
    transform-origin: 165px 10px;
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    margin: 6px 0px 16px;
    outline: rgb(255, 255, 255) none 0px;
        font-size: 11px;
}/*#H4_6*/

#H4_6:after {
    color: rgb(255, 255, 255);
    letter-spacing: -0.2px;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#H4_6:after*/

#H4_6:before {
    color: rgb(255, 255, 255);
    letter-spacing: -0.2px;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 16px / 20px Lato, sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#H4_6:before*/

#A_7 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    display: inline-block;
    height: 32px;
    max-height: 32px;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    width: 114.234px;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 57.1094px 16px;
    transform-origin: 57.1094px 16px;
    caret-color: rgb(255, 255, 255);
    background: rgb(0, 172, 98) none repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(255, 255, 255);
    border-radius: 70px 70px 70px 70px;
    font: normal normal 400 normal 12px / 20px "Moon bold", sans-serif;
    outline: rgb(255, 255, 255) none 0px;
    overflow: hidden;
    padding: 7px 15px;
    transition: opacity 0.3s ease 0s;
}/*#A_7*/

#A_7:after {
    color: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 12px / 20px "Moon bold", sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#A_7:after*/

#A_7:before {
    color: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 12px / 20px "Moon bold", sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#A_7:before*/

#SPAN_8 {
    box-sizing: border-box;
    color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    perspective-origin: 0px 0px;
    transform-origin: 0px 0px;
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 12px / 16px "Moon bold", sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_8*/

#SPAN_8:after {
    color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 12px / 16px "Moon bold", sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_8:after*/

#SPAN_8:before {
    color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: center;
    text-decoration: none solid rgb(255, 255, 255);
    text-size-adjust: 100%;
    column-rule-color: rgb(255, 255, 255);
    caret-color: rgb(255, 255, 255);
    border: 0px none rgb(255, 255, 255);
    font: normal normal 400 normal 12px / 16px "Moon bold", sans-serif;
    outline: rgb(255, 255, 255) none 0px;
}/*#SPAN_8:before*/

.carousel-info .carousel-name {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 3px 2px #000;
    margin-top: 130px;
}