/* CUSTOM CSS */
/*


<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="791.000000pt" height="791.000000pt" viewBox="0 0 791.000000 791.000000"
 preserveAspectRatio="xMidYMid meet">

<g transform="translate(0.000000,791.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M3177 6694 c-1 -1 -54 -4 -117 -7 -127 -7 -149 -10 -265 -38 -285
-70 -523 -233 -709 -484 -57 -77 -120 -183 -367 -612 -40 -69 -58 -101 -109
-188 -29 -49 -62 -108 -75 -130 -26 -46 -13 -24 -229 -398 -91 -159 -166 -290
-166 -292 0 -2 -13 -32 -29 -67 -146 -319 -154 -664 -24 -993 46 -117 27 -83
568 -1020 51 -88 152 -263 225 -390 160 -277 219 -363 327 -476 202 -210 446
-330 753 -370 106 -14 1800 -19 1945 -6 390 35 698 208 930 522 30 40 63 88
73 106 15 26 357 618 483 837 11 17 27 47 38 65 10 17 85 147 166 287 221 383
273 498 310 696 24 126 22 331 -4 454 -23 113 -70 249 -118 345 -53 104 -859
1499 -914 1580 -211 312 -489 493 -853 556 -114 20 -160 21 -979 22 -472 1
-859 1 -860 1z"/>
</g>
</svg>



<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="200.000000pt" height="200.000000pt" viewBox="0 0 2175.000000 828.000000"
 preserveAspectRatio="xMidYMid meet">
    <g transform="translate(0.000000,828.000000) scale(0.100000,-0.100000)"
    fill="#F7374F" stroke="none">
    <path d="M3057 6984 c-1 -1 -54 -4 -117 -7 -127 -7 -149 -10 -265 -38 -285
    -70 -523 -233 -709 -484 -57 -77 -120 -183 -367 -612 -40 -69 -58 -101 -109
    -188 -29 -49 -62 -108 -75 -130 -26 -46 -13 -24 -229 -398 -91 -159 -166 -290
    -166 -292 0 -2 -13 -32 -29 -67 -146 -319 -154 -664 -24 -993 46 -117 27 -83
    568 -1020 51 -88 152 -263 225 -390 160 -277 219 -363 327 -476 164 -170 368
    -288 598 -343 169 -41 -89 -40 8180 -40 4362 0 7959 3 7995 7 149 18 218 34
    340 79 226 84 420 232 575 443 30 40 63 88 73 106 15 26 357 618 483 837 11
    17 27 47 38 65 10 17 85 147 166 287 221 383 273 498 310 696 24 126 22 331
    -4 454 -23 113 -70 249 -118 345 -53 104 -859 1499 -914 1580 -211 312 -488
    493 -854 556 l-120 21 -7888 2 c-4339 0 -7889 0 -7890 0z"/>
    </g>
</svg>

*/



/* MAIN */
.container {
  margin: 0 auto;
}

body {
  font-family: 'Montserrat', sans-serif;
  padding-top: 60px;
  height: 100%;
  background-color: #202636;
}


.center-container {
  display: flex;
  justify-content: center;  /* Centers horizontally */
}


/* PRIMARY COLOR CUSTOM : Change primary color */
:root {
  /* === Core Primary Color : Change primary color === */
  --bs-primary: #e82234;
  --bs-primary-rgb: 232, 34, 52;
  --bs-border-color-soft: rgba(232, 34, 52, 0.25);
  --bs-primary-bg-subtle: rgba(232, 34, 52, 0.1);
  --bs-grey-subtle: rgba(0, 0, 0, 0.1);
  --bs-white-translucent: rgba(255, 255, 255, 0.95);


  /* Color Template */
  --color-template-1: #000000;
  --color-template-2: #242e49;
  --color-template-3: #202636;
  --color-template-4: #f0f0f0;
  --color-template-5: #ffe3d8;
  --color-template-99: #f6f0f1;
  --color-template-100: #e82234;
  --color-template-100a: #cc2432;
  --color-template-100b: #aa242f;
  --color-template-100c: #751b23;

  /* === Button Colors === */
  --bs-btn-color: white;
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: white;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--color-template-100a);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-active-color: white;
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--color-template-100c);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-disabled-color: var(--bs-primary);

  /* === Alerts === */
  --bs-alert-bg: rgba(var(--bs-primary-rgb), 0.1);
  --bs-alert-color: var(--bs-primary);
  --bs-alert-border-color: rgba(var(--bs-primary-rgb), 0.25);

  /* === Badges === */
  --bs-badge-color: white;
  --bs-badge-bg: var(--bs-primary);

  /* === Text === */
  --bs-primary-text: rgba(var(--bs-primary-rgb), var(--bs-text-opacity, 1));

  /* === Backgrounds === */
  --bs-primary-bg: rgba(var(--bs-primary-rgb), 1);

  /* === Forms === */
  --bs-form-control-focus-color: var(--bs-primary);
  --bs-form-control-focus-border-color: var(--bs-primary);
  --bs-form-control-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);

  /* === Progress === */
  --bs-progress-bar-bg: var(--bs-primary);

  /* === Links === */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--color-template-100c);

  /* === Pagination === */
  --bs-pagination-color: var(--bs-primary);
  --bs-pagination-hover-color: white;
  --bs-pagination-hover-bg: var(--bs-primary);
  --bs-pagination-hover-border-color: var(--bs-primary);
  --bs-pagination-focus-color: white;
  --bs-pagination-focus-bg: var(--bs-primary);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  --bs-pagination-active-color: white;
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
}

/* === Text : Change primary color === */
.text-primary {
  color: var(--bs-primary) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--color-template-100a) !important;
  text-decoration: none !important;
}

a.text-white:hover,
a.text-white:focus {
  color: var(--color-template-100c) !important;
  text-decoration: none !important;
}

/* === Links : Change primary color === */
a:focus,
a:hover {
  color: var(--color-template-100c) !important;
  text-decoration: none !important;
}

/* === Buttons : Change primary color === */
.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: white !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--color-template-100a) !important;
  border-color: var(--color-template-100b) !important;
  color: white !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

.btn-outline-primary:hover i {
  color: white !important;
}

.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.show {
  background-color: var(--color-template-100a) !important;
  border-color: var(--color-template-100b) !important;
  color: white !important;
}

/* === Form Controls : Change primary color === */
.form-control,
.form-select {
  border-color: var(--bs-border-color-soft) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}

/* === Custom select arrow : Change primary color === */
select.form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23e82234' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
}

select.form-select option:checked,
select.form-select option:focus,
select.form-select option:hover {
  background-color: var(--bs-primary) !important;
  color: white !important;
}

.input-group-text {
  font-size: 0.875rem;
  border-color: var(--bs-border-color-soft) !important;
}

/* === Tables : Change primary color === */
.table,
.table th,
.table td {
  border-color: var(--bs-border-color-soft) !important;
}

/* === List Groups : Change primary color === */
.list-group-item.active {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: white !important;
}

.list-group-item.list-group-item-action:focus,
.list-group-item.list-group-item-action:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
  color: var(--bs-primary) !important;
}

.list-group-item:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
}


/* === Dropdown : Change primary color === */
.dropdown-toggle.btn-primary {
  background-color: var(--color-template-100a) !important;
  border-color:  var(--color-template-100b) !important;
  color: white !important;
}

.dropdown-toggle.btn-primary:hover,
.dropdown-toggle.btn-primary:focus,
.dropdown-toggle.btn-primary:active {
  background-color: var(--color-template-100a) !important;
  border-color: var(--color-template-100b) !important;
  box-shadow: 0 0 0 0.25rem var(--color-template-5) !important;
}

.dropdown-toggle.btn-outline-primary {
  color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.dropdown-toggle.btn-outline-primary:hover,
.dropdown-toggle.btn-outline-primary:focus,
.dropdown-toggle.btn-outline-primary:active {
  color: white !important;
  background-color: var(--color-template-100a) !important;
  border-color: var(--color-template-100b) !important;
}

/* === Accordion button default (collapsed) === */
.accordion-button {
  border-radius: 0.5rem;
  border: none;
  box-shadow: none;
  background-color: white;
  color: black;
}

/* Accordion button expanded */
.accordion-button:not(.collapsed) {
  background-color: #f6f0f1;
  color: black;
}

/* Optional: hover effect for both collapsed and expanded states */
.accordion-button:hover {
  background-color: #f6f0f1;
  color: black;
}

/* === Soft Borders on Other Components : Change primary color === */
.card,
.card-header,
.card-footer,
.dropdown-menu,
.modal-content,
.nav-tabs .nav-link,
.nav-tabs .nav-link.active,
.accordion-button,
.accordion-body {
  border-color: var(--bs-border-color-soft) !important;
}

/* === Optional: Soft Shadow : Change primary color === */
.shadow-soft {
  box-shadow: 0 0 0.5rem rgba(var(--bs-primary-rgb), 0.1) !important;
}

/* === Icon Hover on Other Components : Change primary color === */
i.text-primary:hover {
  color: white !important;
}



.jumbotron-home {
    position: relative;
    margin-top: -60px; /* all pages are paddingtop 60px, for homepage jumbotron 1, move top -60px*/
    padding-top: 100px;
    text-align: left;
    color: white;
    padding-left: 2vw; /* Ensures spacing from the left edge */
}


  @media (min-width: 768px) {
    .jumbotron-home {
      height: 800px;
    }
  }

  @media (max-width: 768px) {
    .jumbotron-home {
      height: 1300px;
    }
  }



/* JUMBOTRON FONT  */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
.b1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 120px;
    letter-spacing: -1.2px;
    line-height: 0.8; 

}

/* Medium screens (md) */
@media (max-width: 992px) { 
    .b1 {
        font-size: 100px; /* Adjust as needed */
        letter-spacing: -1px;
        line-height: 0.8;
    }
}

/* Small screens (sm) */
@media (max-width: 768px) { 
    .b1 {
        font-size: 80px; /* Adjust as needed */
        letter-spacing: -0.8px;
        line-height: 0.8;
    }
}


.jumbotron-left-1 {
    position: relative;
    background-image: url("/static/images/JumbotronKurir.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 800px;
    padding-top: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    color: white;
    padding-left: 2vw; /* Ensures spacing from the left edge */
}

.jumbotron-right-1 {
    position: relative;
    background-image: url("/static/images/JumbotronSosmed.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 800px;
    padding-top: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    color: var(--color-template-2);
    padding-right: 2vw; /* Ensures spacing from the right edge */
}

.jumbotron-left-2 {
    position: relative;
    background-image: url("/static/images/JumbotronSEO.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 800px;
    padding-top: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--color-template-2);
    text-align: left;
    padding-left: 2vw; /* Ensures spacing from the left edge */
}

.jumbotron-right-2 {
    position: relative;
    background-image: url("/static/images/JumbotronSurat.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 800px;
    padding-top: 200px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
    color: white;
    padding-right: 2vw; /* Ensures spacing from the right edge */
}





/* ROUND CORNERS */

.card, .card-img-top, .modal-content {
    border-radius: 20px !important; /* Adjust as needed */
    border: 0;
    padding: 0;

}

/* for Acedemies / StackSlide > StackSlide.cover_image */
.img-top-no-rounded-bottom {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}


.card-img-top {
      pointer-events: none;  /* So image doesn't block drag */
}

/* TABLE */




/* FORM CUSTOM MORE TIDY > LOGIN/ LOGOUT PROFILE */

::placeholder {
  color: var(--color-template-99);
  opacity: 0.6;
}

.form-create-top{
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

.form-create-middle {
    margin-bottom: 0px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  
.form-create-bottom {
    margin-bottom: 19px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

.form-control-lg::placeholder {
    font-size: 1rem; /* Make placeholder text smaller */
    opacity: 0.6; /* Adjust transparency */
}

.form-control::placeholder {
    font-size: 1rem; /* Make placeholder text smaller */
    opacity: 0.6; /* Adjust transparency */
}



/* BUTTON */

.button-create-top {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0; 
}

.button-create-top-left {
  border-bottom-right-radius: 0;
}

.button-create-top-right {
  border-bottom-left-radius: 0;
}

.button-create-middle {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.button-create-bottom {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.button-create-bottom-left {
  border-top-right-radius: 0;
}

.button-create-bottom-right {
  border-top-left-radius: 0;
}


/* BUTTON SUBTLE CUSTOM with MODERN TOUCH */
.btn-bg-custom-primary {
  background-color: var(--btn-bg-custom-primary);
}




/* NAVBAR TOP */
/* Default navbar styles */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3000;
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
  padding: 10px 0;
}



/* Fully transparent on homepage */
.navbar.homepage {
  background-color: transparent;
}



/* Navbar text white on homepage */
.navbar.homepage a {
  color: white !important;
  transition: color 0.3s ease-in-out;
}

/* When scrolling on homepage: Off-white bg + black text */
.navbar.homepage.scrolled {
  background-color: rgba(245, 245, 245, 0.5);
  backdrop-filter: blur(5px);
}

.navbar.homepage.scrolled a {
  color: black !important;
}

/* On other pages: Navbar always has background and black text */
.navbar:not(.homepage) {
  background-color: rgba(245, 245, 245, 0.8);
}

.navbar:not(.homepage) a {
  color: black !important;
}





/* Default navbar toggler */
.navbar-toggler {
  border: 2px solid white !important; /* White outline on homepage */
  background: transparent !important;
}

/* White toggler icon & outline on homepage */
.toggler-white .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  width: 30px;
  height: 30px;
}

/* Black toggler icon & outline when scrolled or on other pages */
.toggler-black {
  border: 2px solid black !important; /* Change outline to black when scrolled */
}

.toggler-black .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%280, 0, 0, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  width: 30px;
  height: 30px;
}




/* NAVBAR TOP, DROPDOWN BACKGROUND */
/* Default dropdown menu background */
.navbar .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.95) !important; /* Off-white background */
  border: 1px solid rgba(0, 0, 0, 0.1) !important; /* Light border for visibility */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; /* Soft shadow for depth */
}

/* Dropdown menu items */
.navbar .dropdown-item {
  color: black !important; /* Ensure text is visible */
}

/* Hover effect for dropdown items */
.navbar .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.1) !important; /* Light gray hover effect */
}




/* NAVBAR BOTTOM */

.nav-item {
    text-align: right;    
}

.no-text-decoration {
    text-decoration: none;
}

.bottom-nav {
    height: 80px;
    z-index: 3000;
    background-color: rgba(0, 0, 0, 0.8); 
}
.bottom-nav a {
    flex: 1;
    text-align: center;
    color: white;
    font-size: 1.6rem; 
    text-decoration: none;
}



/* DROPDOWN */
.dropdown-menu {
  z-index: 3000;
}


/* For PROFILE CARD  */

/* CARD For Outer Profile Card  */

.floating-box-card {
    position: absolute;
    z-index: 1080;
    top: 100px;
    right: 50px;
    width: 80px;
    height: 80px;
    background: rgb(210, 210, 210);
    padding: 0;  /* Remove padding to prevent extra spacing */
    border-radius: 40px;
    overflow: hidden;  /* Ensures the image doesn’t overflow */
    display: flex;  /* Helps with centering */
    align-items: center;
    justify-content: center;
}

/* CARD For Profile Card User Photos */
.floating-box-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Ensures the image fills the box without distortion */
    border-radius: 40px;  /* Apply same border-radius to keep rounded corners */
}

/* CARD inside Profile Card */
.inner-profile-card {
    position: absolute;
    top: 61%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px; 
    border-color: black; 
    border-radius: 10px !important;
}


/* CARD inside ASSIGNMENT CARD */
.inner-assignment-card {
  position: absolute;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px; 
  border-color: black; 
  border-radius: 10px !important;
}


/* CARD inside ASSIGNMENT DETAIL */
.card-start {
  margin-right: 0px;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.card-middle {
  margin-left: 0px;
  margin-right: 0px;
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

.card-end {
  margin-left: 0px;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}



/* card in genral  */
/* CARD */

.card-create-top {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important; 
}

.card-create-top-left {
  border-bottom-right-radius: 0 !important;
}

.card-create-top-right {
  border-bottom-left-radius: 0 !important;
}

.card-create-middle {
  border-top-right-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.card-create-bottom {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.card-create-bottom-left {
  border-top-right-radius: 0 !important;
}

.card-create-bottom-right {
  border-top-left-radius: 0 !important;
}






/* For PROFILE DETAIL PAGE */
.floating-box-detail {
    position: absolute;
    z-index: 1000;
    left: 50%;  /* Center horizontally */
    top: 260px; /* Adjust height based on box */
    width: 160px;
    height: 160px;
    background: var(--color-template-4);
    padding: 0;
    border-radius: 80px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;  /* Center image inside */
    transform: translateX(-50%); /* Move box back by half its width */
}

.floating-box-detail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 80px;
}



/* Shrink pill text & padding on extra‐small screens (<576px) */
@media (max-width: 575.98px) {
  .profile-nav-profile .profile-nav-links {
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
  }
}

/* Optional: slightly increase font/padding on large screens (≥992px) */
@media (min-width: 992px) {
  .profile-nav-profile .profile-nav-links {
    font-size: 1.05rem;
    padding: 0.6rem 1.2rem;
  }
}



/* HIRE BUTTON on Profile Page */
.btn-hire {
  width: 160px;
}

/* ≥992px (lg+): expand to full parent width (or your desired “wide” size) */
@media (min-width: 992px) {
  .btn-hire {
    width: 250px; 
  }
}



/* For ASSIGNMENT DETAIL */
.client-creator-box {
  z-index: 1000;
  width: 80px;
  height: 80px;
  background: var(--color-template-4);
  padding: 0;
  border-radius: 40px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;  /* Center image inside */
  transform: translateX(-50%); /* Move box back by half its width */
}

.client-creator-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 80px;
}






/* TABLE */
.table-description {
    width: 40%;
    white-space: normal;
    word-wrap: break-word;
}





/* TAGS Pill ANGLE BRACKET  */


/* Original - works */
.angle-bracket-pill {
  color: white !important;
  font-weight: bold;
  text-align: center;
  background-color: var(--bs-primary) !important;
}

.angle-bracket-wrapper {
  position: relative;
  display: inline-block;
  padding: 10px 20px; /* Adjust this if you need spacing around the text */
  z-index: 1;
}

.angle-bracket-wrapper::before,
.angle-bracket-wrapper::after {
  content: '';
  position: absolute;
  font-size: 3.297rem;
  transform: translateY(-50%); /* Adjust for perfect centering */
  width: 0.8em; /* Adjust the width of the background image */
  height: 0.8em; /* Adjust the height of the background image */
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: contain; /* Ensures the SVG scales while keeping aspect ratio */
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg version='1.0' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 791.000000 791.000000' preserveAspectRatio='xMidYMid meet'%3E%3Cg transform='translate(0.000000,791.000000) scale(0.100000,-0.100000)' fill='%23e82234' stroke='none'%3E%3Cpath d='M3177 6694 c-1 -1 -54 -4 -117 -7 -127 -7 -149 -10 -265 -38 -285 -70 -523 -233 -709 -484 -57 -77 -120 -183 -367 -612 -40 -69 -58 -101 -109 -188 -29 -49 -62 -108 -75 -130 -26 -46 -13 -24 -229 -398 -91 -159 -166 -290 -166 -292 0 -2 -13 -32 -29 -67 -146 -319 -154 -664 -24 -993 46 -117 27 -83 568 -1020 51 -88 152 -263 225 -390 160 -277 219 -363 327 -476 202 -210 446 -330 753 -370 106 -14 1800 -19 1945 -6 390 35 698 208 930 522 30 40 63 88 73 106 15 26 357 618 483 837 11 17 27 47 38 65 10 17 85 147 166 287 221 383 273 498 310 696 24 126 22 331 -4 454 -23 113 -70 249 -118 345 -53 104 -859 1499 -914 1580 -211 312 -489 493 -853 556 -114 20 -160 21 -979 22 -472 1 -859 1 -860 1z'/%3E%3C/g%3E%3C/svg%3E");
  z-index: -1; /* Ensure background is behind the text */
}

.angle-bracket-wrapper::before {
    left: -0.4em; 
    top: 14.5px; /* Vertically center the SVG relative to the text */
  }

.angle-bracket-wrapper::after {
  right: -0.4em; 
  top: 14.5px; /* Vertically center the SVG relative to the text */
}




/* CHAT */

@media (max-width: 767.98px) {
    .mobile-sidebar {
      display: block;
    }
  
    .mobile-chat {
      display: none;
    }
  
    .chat-form {
      position: fixed;
      bottom: 65px;
      left: 0;
      right: 0;
      z-index: 1000;
    }
  
    .chat-log {
      margin-bottom: 160px !important;
    }

  }


/* Slide Animation Chat*/
/* Add smooth slide transition */
.slide-in, .slide-out {
  transition: transform 0.5s ease; /* Slower and smoother */
}

@media (max-width: 767.98px) {
  .mobile-sidebar.slide-out {
    transform: translateX(-100%);
    position: absolute;
    width: 100%;
    z-index: 100;
  }

  .mobile-sidebar.slide-in {
    transform: translateX(0);
    position: absolute;
    width: 100%;
    z-index: 100;
  }

  .mobile-chat.slide-out {
    transform: translateX(100%);
    position: absolute;
    width: 100%;
    z-index: 101;
  }

  .mobile-chat.slide-in {
    transform: translateX(0);
    position: absolute;
    width: 100%;
    z-index: 101;
  }
}



.text-bg-indigo {
  color: white !important;
  font-weight: bold;
  background-color: var(--bs-primary) !important;
}


.text-indigo {
color: var(--bs-primary) !important;
}


/* DRAG HANLDER */
.drag-handle {
    cursor: grab;
    pointer-events: auto;
    z-index: 9999;
}




  /* AGENT HUB NAVIGATION BAR STYLE */

  .agenthub-nav {
      background-color: rgba(255, 255, 255, 0.75);
      backdrop-filter: blur(8px);
      transition: all 0.3s ease;
      box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.15);
  }

  /* AGENT HUB TITLE STYLE */
  .agenthub-title {
      font-weight: 800;
      line-height: 0.75;
      opacity: 0.5;
  }

  .agent-text {
      font-size: calc(3rem + 6vw); /* Larger than Bootstrap display-1 */
      margin-bottom: -0.2rem; /* pulls HUB closer */
      letter-spacing: -4px;
  }

  .hub-text {
      font-size: calc(3rem + 6vw); /* Slightly smaller but still large */
      letter-spacing: -4px;
  }

  .agenthub-stackslide-wrapper {
      margin-top: 80px; /* your existing top-40 */
      transition: all 0.3s ease;
  }

  /* Responsive Adjustments */
  @media (max-width: 768px) {
      .agent-text {
          font-size: calc(2.8rem + 5vw);
          margin-bottom: -0.1rem;
          margin-right: 16px;
      }
      .hub-text {
          font-size: calc(2.8rem + 5vw);
          margin-right: 16px;
      }

      .agenthub-nav {
          margin-left:-10px;
          transform: scale(0.75);
      }

      .agenthub-nav .nav-link {
          font-size: 0.75rem;
          padding: 0.4rem 0.8rem;
      }

      .agenthub-stackslide-wrapper {
          margin-top: 180px; /* pushes down clearly by 150px */
          display: flex;
          justify-content: center; /* centers horizontally */
      }
  }
@media (max-width: 576px) {
    .agent-text {
        font-size: calc(2.6rem + 5vw);  /* Slightly smaller than sm/md */
        margin-bottom: -0.1rem;
    }

    .hub-text {
        font-size: calc(2.6rem + 5vw);  /* Match agent-text for compact balance */
    }

    .agenthub-nav {
        margin-left:-8px;
        transform: scale(0.7);  /* smaller than on sm/md */
    }

    .agenthub-nav .nav-link {
        font-size: 0.7rem;      /* smallest readable size */
        padding: 0.35rem 0.7rem; /* tighter padding */
    }
}

  .home-bg {
      background: linear-gradient(135deg, #560591 0%, black 100%);
  }

  .home-bg.blended {
      background:
          linear-gradient(135deg, #560591 0%, black 100%),
          radial-gradient(circle at top center, rgba(255,255,255,0.1), transparent 70%);
  }

  .home-for {
      background-color: #e82234;
  }

      @media (max-width: 768px) {
          .home-for .fs-1 {
          font-size: 2.5rem !important;
          }

          .home-for .fs-4 {
          font-size: 1.5rem !important;
          }

      }
      @media (max-width: 576px) {
          .home-for .fs-1 {
          font-size: 1.5rem !important;
          }

          .home-for .fs-4 {
          font-size: 1rem !important;
          }
      }                   

  .home-ass {
      background: #202636;
  }

      @media (max-width: 768px) {
          .home-ass h4 {
          font-size: 2.5rem !important;
          }
      }

      @media (max-width: 576px) {
          .home-ass h4 {
          font-size: 0.7rem !important;
          }
      }

  .home-feature {
  background: white;
  }


  /* HOME - Learn More button */
  .learn-more-pill {
      display: inline-block;
      padding: 0.75rem 2rem;
      border-radius: 50px;
      background: linear-gradient(120deg, white, white);
      color: #fff;
      font-weight: 600;
      font-size: 1.125rem;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s, box-shadow 0.3s;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  }


  .learn-more-pill:hover {
      transform: scale(1.03);
      box-shadow: 0 0 20px rgba(102, 16, 242, 0.6);
      color: #fff;
  }

  .learn-more-pill:hover::before {
      width: 200%;
      height: 200%;
  }