* {
  scroll-behavior: smooth !important;
}
.first_slider .carousel-item {
  height: auto !important;
}
.first_slider .card-img-overlay > .card-background .card-img,
.first_slider .card-img-overlay > .card-background > picture {
  width: 100% !important;
}
.body-bg {
  background: #1e1e1e;
  /*padding-bottom: 3rem;*/
  color: #fff;
}
.bg1 {
  background: url(..https://www.microsoft.com/images/page-bg-1.png) 100% 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  background-size: cover;
}
.bg2 {
  background: url(..https://www.microsoft.com/images/page-bg-2.jpg) 100% 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  background-size: cover;
  background-attachment: fixed;
}
.bg3 {
  background: url(..https://www.microsoft.com/images/page-bg-3.jpg) 100% 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  background-size: cover;
  background-attachment: fixed;
}
.bg4 {
  background: url(..https://www.microsoft.com/images/page-bg-4.jpg) 100% 100%;
  width: 100%;
  height: 100%;
  color: #fff;
  background-size: cover;
  background-attachment: fixed;
}
.bg5 {
  background: #e9e1d1;
  width: 100%;
  height: 100%;
}
.bg6 {
  background: url(..https://www.microsoft.com/images/page-bg-6.png) 50% 50% no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.bg7 {
  background: #e5f5fd;
  width: 100%;
  height: 100%;
}
.word-icon {
  width: 64px;
  height: 64px;
  background: url(..https://www.microsoft.com/images/word-icon.png);
  background-size: cover;
  position: absolute;
  top: 0;
  z-index: 2;
  background-size: cover;
}
.outlook-icon {
  width: 64px;
  height: 64px;
  background: url(..https://www.microsoft.com/images/outlook-icon.png);
  background-size: cover;
  position: absolute;
  top: 0;
  z-index: 2;
  background-size: cover;
}
.powerpoint-icon {
  width: 64px;
  height: 64px;
  background: url(..https://www.microsoft.com/images/powerpoint-icon.png);
  background-size: cover;
  position: absolute;
  top: 0;
  z-index: 2;
  background-size: cover;
}

.small-thumb-bg > .row > .active {
  position: relative;
}
.small-thumb-bg > .row > .active::after {
  position: absolute;
  content: "";
  left: 50%;
  top: -12px;
  z-index: 2;
  width: 85%;
  height: 4px;
  background: #0067b8;
  transform: translateX(-50%);
}

.iframe-videos {
  position: relative;
  z-index: 0;
  padding-top: 56.46%;
  margin: 1rem 0;
}
.iframe-videos iframe,
.iframe-videos .iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border: none;
}
.hyphen-symbol {
  position: relative;
}
.hyphen-symbol::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 4px;
  background: #2f2f2f;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.userName {
  font-size: 1.5rem;
  font-weight: 300;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.custom_multifeature > #multiFeatureAccordion {
  height: auto !important;
}
.gallery {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 images in one row */
  gap: 10px;
}

.gallery > div {
  width: 100%;
  height: auto;
  display: block;
}
#gallery-modal_1 .carousel-lg-side-controls .carousel-controls,
#gallery-modal_2 .carousel-lg-side-controls .carousel-controls,
#gallery-modal_3 .carousel-lg-side-controls .carousel-controls {
  bottom: 0rem;
  z-index: 2;
}
.accordion.accordion-backplate .btn-collapse {
  font-size: inherit;
}
.accordion-header button {
  flex-direction: row-reverse;
  justify-content: space-between !important;
}
.accordion-header button span.glyph:before {
  margin: 0 !important;
}

.accordion-header button span.glyph {
  background-color: #0a48ba;
  border-radius: 50%;
  padding: 5px;
  color: #fff;
  font-size: 15px;
  margin-top: 5px;
}
.accordion-header button.btn-collapse.collapsed {
  border-bottom: 1px solid #999;
}

/*.modal-dialog-scrollable .modal-body {
    outline-offset: -5px;
}*/

@media (min-width: 860px) {
  .small-thumb-bg {
    background: rgb(0 0 0 / 11%);
    /*width: 100%;*/
  }
}
@media (max-width: 540px) {
  .iframe-videos {
    position: relative;
    z-index: 0;
    /*padding-top: 85%;*/
    margin: 1rem 0;
  }
}

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: repeat(5, 1fr); /* 5 per row → 2 rows */
  }

  .small-thumb-bg a.cta {
    font-size: 0.6rem;
  }
    .iframe-videos {
        padding-top: 100%;
     
    }
}

@media (prefers-color-scheme: dark) {
  a.dark-color[href]:focus {
    /*outline-color: window !important;*/
    outline-offset: -3px;
  }
}