/* Case Styles */

/* Contents
-------|| ALL 
-------|| MC 
-------|| GM 
-------|| PS
*/

/*|| ------------------ ALL STYLES ------------------*/

/* Baguette */
.bbox a img {
  cursor: zoom-in;
}

.override-pointer a img {
  cursor: pointer;
}

/* Icon styles */

/* summary box */
.summary-box {
  background-color: var(--bs-secondary-bg);
  border-radius: 1.5rem;
  padding: 1.5rem;
}

/* Feature slider*/

.hover-container:hover {
   z-index: 2;
  background-color: var(--bs-secondary-bg);
}

.hover-container {
/*  box-shadow: 0 2px 5px 0 rgba(179, 179, 179, 0.75); */
  cursor: pointer;
}

.feature {
  width: 80%;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}



/* Quote boxes */

.blockquote {
  border-left: none
}

.quote-area {
  overflow: hidden;
  border-radius: 20px;
  margin-top: 15px;
}

.quotation-mark-bg {
  margin-top: -60px;
  margin-left: -14px;
  font-weight: 400;
  font-size: 150px;
  color: #e6e5e5;
 
}

.quote-content {
  margin-top: -170px;
}

/*|| ------------------ MAKER CLUB STYLES ------------------*/


/* Maker special icons */

.icon-circle {
  width: 6vw; 
  height: 6vw; 
  min-width: 40px; 
  min-height: 40px; 
  max-width: 60px; 
  max-height: 60px; 
  border-radius: 50%; /* Creates the circular shape */
  background-color: var(--bs-secondary-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  max-width: 60%; /* Adjusts  icon size relative to its parent container */
  max-height: 60%; 
}

/* ===== Hero Background ===== */
header.makerbg-img {
  background-image: url("../img/maker/svg/hero/Hero-s.svg");
  background-position: center center;
  background-size: cover;
  z-index: 1;
  position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 1799px) {
  header.makerbg-img {
      background-image: url("../img/maker/svg/hero/Hero-m.svg");
  }
}

@media only screen and (min-width: 1800px) {
  header.makerbg-img {
      background-image: url("../img/maker/svg/hero/Hero-l.svg");
  }
}

/* ===== Hero Layout ===== */
.maker-header {
  padding: 9.5rem 0 5rem;
  position: relative;
  z-index: 1;
}

/* ===== Device Mockup ===== */
.new-device-wrapper {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1/2;
  margin: 0 auto;
}

.new-device {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: url("../img/maker/iphone15.svg") center/contain no-repeat;
}

.new-screen {
  position: absolute;
  inset: 3% 6% 4% 6%;
  z-index: 1;
}


/* ===== Video Container ===== */
.video-container {
  width: 103%;    /* Even wider */
  height: 103%;   /* Even taller */
  border-radius: 18px;
  overflow: hidden;
  background-color: transparent;
  margin: -1.5%;  /* Adjusted margin to match */
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

/* ===== Responsive Adjustments ===== */
@media (min-width: 768px) {
  .new-device-wrapper {
      max-width: 250px;  /* Much smaller */
  }
}

@media (min-width: 1200px) {
  .new-device-wrapper {
      max-width: 280px;  /* Much smaller */
  }
}

/* ====================================== GETMOVIN STYLES ====================================== */
 
/* Getmoving hero bg */


header.getmovin-header {
  background: rgb(212, 218, 247);
  background: -moz-linear-gradient(259deg, rgba(212, 218, 247, 1) 0%, rgba(178, 183, 255, 1) 100%);
  background: -webkit-linear-gradient(259deg, rgba(212, 218, 247, 1) 0%, rgba(178, 183, 255, 1) 100%);
  background: linear-gradient(259deg, rgba(212, 218, 247, 1) 0%, rgba(178, 183, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d4daf7", endColorstr="#b2b7ff", GradientType=1);

}

header.coral-gradient-bg {
/*  Soft corners with multiple points */
background: 
    radial-gradient(circle at 100% 0%, 
        rgba(255, 180, 162, 0.7) 0%,
        transparent 50%),
    radial-gradient(circle at 0% 100%, 
        rgba(255, 230, 225, 0.7) 0%,
        transparent 50%),
    linear-gradient(to bottom right, 
        rgba(245, 247, 255, 1) 0%,
        rgba(255, 220, 215, 0.9) 100%);
}

/* UI Gallery */
.UIscreen {
  position: relative;
  top: 0;
}

.artboard {
  position: relative;
  top: 0;
  z-index: 1;
}

.bigger-radius {
  border-radius: 10%/6% !important;
}

.bigger-radius-desktop {
  border-radius: 6%/8% !important;
}

.FAB {
  position: absolute;
  bottom: 0;
  z-index: 2;
  margin: 0;
  margin-bottom: -1px;
  padding: 0;
  display: block;
  max-width: 100%;
  max-height: 100%;
  -moz-box-shadow: 0 -4px 10px -5px rgba(80, 80, 80, 0.6);
  -webkit-box-shadow: 0 -4px 10px -5px rgba(80, 80, 80, 0.6);
  box-shadow: 0 -4px 10px -5px rgba(80, 80, 80, 0.6);
  image-rendering: -moz-crisp-edges;
  /* Firefox */
  image-rendering: -o-crisp-edges;
  /* Opera */
  image-rendering: -webkit-optimize-contrast;
  /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  /* IE (non-standard property) */
}

/*! mob ui */

@media (max-width: 576px) {
  .UIcard {
    max-width: 240px;
    max-height: fit-content;
  }

  .UIcard-desktop {
    max-width: 380px;
    max-height: fit-content;
  }
}

.scroll-box {
  height: 364px;
  overflow-y: scroll;
  bottom: 0;
}

.no-scroll-box {
  height: 364px;
  bottom: 0;
}

.scroll-box-desktop {
  height: 195px;
  overflow-y: scroll;
}

/*! sm ui */

@media (min-width: 576px) {
  .scroll-box {
    height: 356px;
    overflow-y: scroll;
  }

  .no-scroll-box {
    height: 356px;
  }

  .scroll-box-desktop {
    height: 258px;
    overflow-y: scroll;
  }
}

/*! md ui */

@media screen and (min-width: 768px) and (max-width: 991px) {
  .scroll-box {
    height: 308px;
    overflow-y: scroll;
  }

  .no-scroll-box {
    height: 308px;
  }

  .scroll-box-desktop {
    height: 163px;
    overflow-y: scroll;
  }
}

/*! lg ui */

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .scroll-box {
    height: 292px;
    overflow-y: scroll;
  }

  .no-scroll-box {
    height: 292px;
  }

  .scroll-box-desktop {
    height: 217px;
    overflow-y: scroll;
  }
}

/*! xl ui */

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .scroll-box {
    height: 372px;
    overflow-y: scroll;
  }

  .no-scroll-box {
    height: 372px;
  }

  .scroll-box-desktop {
    height: 266px;
    overflow-y: scroll;
  }
}

/*! xxl ui */

@media (min-width: 1400px) {
  .scroll-box {
    height: 452px;
    overflow-y: scroll;
    position: relative;
  }

  .no-scroll-box {
    height: 452px;
  }

  .scroll-box-desktop {
    height: 318px;
    overflow-y: scroll;
  }
}

/* Gallery */

.UIscreen-gm {
  position: relative;
  top: 0;
  border: rgba(80, 80, 80, 0.6);
  border-style: solid;
  border-width: 1px;
}

.FAB-gm {
  position: absolute;
  bottom: 0;
  z-index: 2;
  margin: 0;
  margin-bottom: -5px;
  padding: 0;
  display: block;
  max-width: 100%;
  max-height: 100%;
  box-shadow: 0 -4px 10px -5px rgba(80, 80, 80, 0.6);
  -moz-box-shadow: 0 -4px 10px -5px rgba(80, 80, 80, 0.6);
  -webkit-box-shadow: 0 -4px 10px -5px rgba(80, 80, 80, 0.6);
  image-rendering: -moz-crisp-edges;
  /* Firefox */
  image-rendering: -o-crisp-edges;
  /* Opera */
  image-rendering: -webkit-optimize-contrast;
  /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  /* IE (non-standard property) */
}

.bigger-radius-gm {
  border-radius: 10%/4% !important;
}

.bigger-radius-desktop-gm {
  border-radius: 6%/8% !important;
}


header.generic-header {
  background: white;
 padding: 8rem 0;
}


/*! CSS for ui gallery must be different for MC and GM because GM has taller artboards  */

/*! xs ui gallery */


.scroll-box-gm {
  height: 439px;
  overflow-y: scroll;
  bottom: 0;
}

.no-scroll-box-gm {
  height: 439px;
  bottom: 0;
}

.scroll-box-desktop-gm {
  height: 195px;
  overflow-y: scroll;
}

/*! sm ui gallery*/

@media (min-width: 576px) {
  .scroll-box-gm {
    height: 424px;
    overflow-y: scroll;
  }

  .no-scroll-box-gm {
    height: 424px;
  }

  .scroll-box-desktop-gm {
    height: 258px;
    overflow-y: scroll;
  }
}

/*! md ui gallery*/

@media screen and (min-width: 768px) and (max-width: 991px) {
  .scroll-box-gm {
    height: 370px;
    overflow-y: scroll;
  }

  .no-scroll-box-gm {
    height: 370px;
  }

  .scroll-box-desktop-gm {
    height: 192px;
    overflow-y: scroll;
  }
}

/*! lg ui */

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .scroll-box-gm {
    height: 346px;
    overflow-y: scroll;
  }

  .no-scroll-box-gm {
    height: 346px;
  }

  .scroll-box-desktop-gm {
    height: 256px;
    overflow-y: scroll;
  }
}

/*! xl ui gallery */

@media screen and (min-width: 1200px) and (max-width: 1399px) {
  .scroll-box-gm {
    height: 444px;
    overflow-y: scroll;
  }

  .no-scroll-box-gm {
    height: 444px;
  }

  .scroll-box-desktop-gm {
    height: 317px;

  }
}

/*! xxl ui gallery */

@media (min-width: 1400px) {
  .scroll-box-gm {
    height: 541px;
    overflow-y: scroll;
    position: relative;
  }

  .no-scroll-box-gm {
    height: 541px;
  }

  .scroll-box-desktop-gm {
    height: 378px;
  }
}

/*! mob ui  */

@media (max-width: 576px) {
  .UIcard-gm {
    max-width: 240px;
    max-height: fit-content;
  }

  .UIcard-desktop-gm {
    max-width: 380px;
    max-height: fit-content;
  }
}

/* ------------------ PORTFOLIO SITE STYLES ------------------*/


/* Hero gradient for portfolio*/
header.portfolio-header {
  background: rgb(227, 246, 255);
  background: -moz-linear-gradient(65deg, rgba(227, 246, 255, 1) 0%, rgba(30, 202, 184, 1) 100%);
  background: -webkit-linear-gradient(65deg, rgba(227, 246, 255, 1) 0%, rgba(30, 202, 184, 1) 100%);
  background: linear-gradient(65deg, rgba(227, 246, 255, 1) 0%, rgba(30, 202, 184, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e3f6ff", endColorstr="#1ecab8", GradientType=1);
}


/* Prism JS additional code block styling */
pre[class*="language-"],
code[class*="language-"] {
 /*  color: black;
    background: none;*/
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 94% !important;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  padding-left: 2em;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* code corresponding image */

.code-results {
  width: 100%;
  height: 100%;
  max-width: 800px;
  margin: 0 auto;
}

div.code-result-bg {
  background: rgb(251, 179, 103);
  background: -moz-linear-gradient(180deg, rgba(251, 179, 103, 1) 0%, rgba(254, 148, 148, 1) 100%);
  background: -webkit-linear-gradient(180deg, rgba(251, 179, 103, 1) 0%, rgba(254, 148, 148, 1) 100%);
  background: linear-gradient(180deg, rgba(251, 179, 103, 1) 0%, rgba(254, 148, 148, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbb367", endColorstr="#fe9494", GradientType=1);
  position: relative;
  margin: 2rem 0;
  /*  background-color: #606060;  */
}

/* Quote boxes */

.sequence {
  width: 80%;
}

.teal {
  border-color: #1ecab8 !important;
}


/*|| ------------------ WORD REPS SITE STYLES ------------------*/


/*|| Section header gradient for word reps */

div.bg-img-section-header-teal {
  background: rgb(80,169,179);
  background: -moz-linear-gradient(2deg, rgba(80,169,179,1) 0%, rgba(115,242,255,1) 100%);
  background: -webkit-linear-gradient(2deg, rgba(80,169,179,1) 0%, rgba(115,242,255,1) 100%);
  background: linear-gradient(2deg, rgba(80,169,179,1) 0%, rgba(115,242,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#50a9b3",endColorstr="#73f2ff",GradientType=1); position: relative;
  padding: 3rem 0;
}

 

/*|| ------------------ SUS CAL STYLES ------------------*/

/* Btn group styling */

.btn-group .btn {
  min-height: 60px;
  padding: 0.5rem;
}

@media (max-width: 768px) {
  .btn-group {
      flex-direction: column;
      gap: 0.25rem;
  }
  
  .btn-group .btn {
      min-height: 45px;
      border-radius: 0.375rem !important;
  }
  
  .btn-group .btn small {
      white-space: nowrap;
  }

  /* Reset Bootstrap's button group radius only on mobile */
  .btn-group > .btn:not(:first-child),
  .btn-group > .btn-group:not(:first-child) > .btn {
      border-radius: 0.375rem !important;
  }

  .btn-group > .btn:not(:last-child):not(.dropdown-toggle),
  .btn-group > .btn-group:not(:last-child) > .btn {
      border-radius: 0.375rem !important;
  }
}