.branding-section {
  width: 100%;
  height: 43vw;
  padding: 4vw 3vw;
  box-sizing: border-box;
  transition: background-color 0.2s ease-in-out;
}

.branding-section hr{
  border-width: 0.175vw;
}

[data-theme="dark"] .branding-wrapper{
  background: 
  /* url("/images/servicesSection/orangeShapesWhiteRight1.png"), */
  /* radial-gradient(circle at 100% 100%, var(--quinticColorTheme) 10%, rgba(var(--quinticColorRgbTheme), 0.5) 25%, rgba(var(--quinticColorRgbTheme), 0.2) 25%, transparent 40%),
  radial-gradient(circle at 0 -10%, var(--quinticColorTheme) 10%, rgba(var(--quinticColorRgbTheme), 0.5) 25%, rgba(var(--quinticColorRgbTheme), 0.2) 25%, transparent 40%), */
  linear-gradient(rgba(var(--primaryColorRgbTheme), 0.75), rgba(var(--primaryColorRgbTheme), 0.75));
  background-size: cover;
  background-position: center;
}

[data-theme="light"] .branding-wrapper{
  background: 
  /* url("/images/servicesSection/orangeShapesBlackRight.png"), */
  /* radial-gradient(circle at 100% 100%, var(--quinticColorTheme) 10%, rgba(var(--quinticColorRgbTheme), 0.5) 25%, rgba(var(--quinticColorRgbTheme), 0.2) 25%, transparent 40%),
  radial-gradient(circle at 0 -10%, var(--quinticColorTheme) 10%, rgba(var(--quinticColorRgbTheme), 0.5) 25%, rgba(var(--quinticColorRgbTheme), 0.2) 25%, transparent 40%), */
  linear-gradient(rgba(var(--primaryColorRgbTheme), 0.75), rgba(var(--primaryColorRgbTheme), 0.75));
  background-size: cover;
  background-position: center;
}

.branding-wrapper{
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: center;
  border-radius: 0.2vw;
}

.branding-info-container {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.branding-section-title {
  color: var(--secondaryHeadingColorTheme);
  font-family: var(--headingFont);
  font-size: var(--superheadingFontSize);
  margin: 0;
  margin-bottom: 2vw;
  font-weight: 900;
  text-shadow: 0 0 0.5vw rgba(var(--primaryColorRgbTheme), 0.5);
}

.branding-section-paragraph {
  color: var(--secondaryHeadingColorTheme);
  font-family: var(--headingFont);
  font-weight: 400;
  font-size: var(--subheadingFontSize);
  line-height: var(--headingFontSize);
  margin: 0 auto;
  margin-top: 1vw;
  text-align: justify;
  margin-top: 3vw;
  text-shadow: 0 0 0.5vw rgba(var(--primaryColorRgbTheme), 0.5);
}

.branding-section-subtitle {
  color: rgba(var(--secondaryColorRgbTheme), 0.8);
  font-family: var(--headingFont);
  font-weight: 600;
  font-size: var(--paragraphFontSize);
  text-shadow: 0 0 1vw 0 #00000080;
  margin: 0;
  margin-bottom: 2vw;
  text-shadow: 0 0 0.5vw rgba(var(--primaryColorRgbTheme), 0.5);
}

.branding-graphic-container {
  padding-right: 8vw;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.branding-action-container{
  width: 100%;
  height: max-content;
  margin-top: 2vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.branding-action-button-primary{
  border: 0;
  width: max-content;
  height: max-content;
  background-color: var(--tertiaryColor);
  color: var(--tertiaryHeadingColor);
  font-family: var(--headingFont);
  font-size: var(--paragraphFontSize);
  font-weight: 900;
  border-radius: 0.2vw;
  padding: 1vw 1.4vw;
  outline: none;
  margin-right: 2vw;
}

.branding-action-button-secondary{
  border: 0;
  width: max-content;
  height: max-content;
  background-color: transparent;
  color: var(--secondaryHeadingColorTheme);
  font-family: var(--headingFont);
  font-size: var(--paragraphFontSize);
  font-weight: 900;
  border-radius: 0.2vw;
  padding: 0.7vw 1.1vw;
  border: 0.25vw solid var(--secondaryHeadingColorTheme);
  outline: none;
  margin-right: 2vw;
}

.branding-devices-container{
  position: absolute;
  top: 2.5vw;
  left: 18vw;
}

.branding-mobile-container{
  width: 25vw;
  height: max-content;
  position: relative;
  transform: perspective(30vw) rotateY(-5deg);
  transform-origin: 50% 10vw;
}

.branding-mobile-image{
  width: 120%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.branding-mobile-shadow{
  width: 12.1vw;
  height: 25.1vw;
  position: absolute;
  top: 1.16vw;
  border-radius: 0.5vw;
  left: calc(50% + 2.2vw);
  transform: translate(-50%, 0);
  box-shadow: 0 0 2vw 0 rgba(var(--secondaryColorRgbTheme), 0.8);
}

.branding-mobile-screen{
  width: 12.1vw;
  height: 25.1vw;
  position: absolute;
  top: 1.16vw;
  border-radius: 0.5vw;
  left: calc(50% + 2.2vw);
  transform: translate(-50%, 0);
  z-index: 3;
  overflow: hidden;
}

.branding-mobile-screen img{
  object-fit: cover;
  width: 100%;
  height: auto;
}

.branding-feed-container{
  position: absolute;
  top: -4vw;
  left: 3.5vw;
  width: 27.5vw;
  height: 36.7vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border: 0.5vw solid rgba(var(--secondaryColorRgbTheme), 0.9);
  background-color: var(--tertiaryHeadingColorTheme);
  border-radius: 0.2vw;
  transform: perspective(30vw) rotateY(10deg);
  box-shadow: 0 0 4vw 0 rgba(var(--secondaryColorRgbTheme), 0.1),
            0 0 0.5vw 0 rgba(var(--secondaryColorRgbTheme), 0.2);
}

.branding-feed-row{
  width: 100%;
  height: max-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 0.15vw;
  justify-content: space-between;
}

.branding-feed-row:nth-last-of-type(1){
  margin-bottom: 0;
}

.branding-feed-img{
  width: 9vw;
  height: 9vw;
  overflow: hidden;
  background-color: var(--tertiaryHeadingColor);

}

.branding-feed-img img{
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media(max-width: 672px){
  .branding-section {
    height: 215vw;
    padding: 8vw 6vw;
    padding-top: 8vw;
    flex-direction: column;
  }
  
  .branding-section hr{
    border-width: 0.35vw;
  }
  
  .branding-wrapper{
    width: 100%;
    height: 100%;
    border-radius: 0.4vw;
    flex-direction: column;
  }
  
  .branding-info-container {
    width: 100%;
    height: 55%;
  }
  
  .branding-section-title {
    font-size: var(--superheadingFontSize);
    margin-bottom: 4vw;
    text-shadow: 0 0 1vw rgba(var(--primaryColorRgbTheme), 0.5);
  }
  
  .branding-section-paragraph {
    font-size: var(--subheadingFontSize);
    line-height: var(--headingFontSize);
    margin-top: 6vw;
    text-shadow: 0 0 1vw rgba(var(--primaryColorRgbTheme), 0.5);
  }
  
  .branding-section-subtitle {
    font-size: var(--paragraphFontSize);
    text-shadow: 0 0 2vw 0 #00000080;
    margin-bottom: 4vw;
    text-shadow: 0 0 1vw rgba(var(--primaryColorRgbTheme), 0.5);
  }
  
  .branding-graphic-container {
    padding-right: 0;
    margin-top: 8vw;
    width: 100%;
    height: 45%;
  }
  
  .branding-action-container{
    margin-top: 4vw;
  }
  
  .branding-action-button-primary{
    font-size: var(--paragraphFontSize);
    border-radius: 0.4vw;
    padding: 2vw 2.8vw;
    margin-right: 4vw;
  }
  
  .branding-action-button-secondary{
    font-size: var(--paragraphFontSize);
    border-radius: 0.4vw;
    padding: 1.4vw 2.2vw;
    border: 0.5vw solid var(--secondaryHeadingColorTheme);
    margin-right: 4vw;
  }

  .branding-devices-container{
    top: 18vw;
    left: 31vw;
  }
  
  .branding-mobile-container{
    width: 50vw;
    transform: perspective(60vw) rotateY(-5deg);
    transform-origin: 50% 20vw;
  }
  
  .branding-mobile-image{
    top: 0;
    left: 0;
  }
  
  .branding-mobile-shadow{
    width: 24.2vw;
    height: 50.2vw;
    top: 2.32vw;
    border-radius: 1vw;
    left: calc(50% + 4.4vw);
    transform: translate(-50%, 0);
    box-shadow: 0 0 4vw 0 rgba(var(--secondaryColorRgbTheme), 0.8);
  }
  
  .branding-mobile-screen{
    width: 24.2vw;
    height: 50.2vw;
    top: 2.32vw;
    border-radius: 1vw;
    left: calc(50% + 4.4vw);
  }
  
  .branding-feed-container{
    top: 5vw;
    left: 1vw;
    width: 55vw;
    height: 73.4vw;
    border: 1vw solid rgba(var(--secondaryColorRgbTheme), 0.9);
    border-radius: 0.4vw;
    transform: perspective(60vw) rotateY(10deg);
    box-shadow: 0 0 8vw 0 rgba(var(--secondaryColorRgbTheme), 0.1),
              0 0 1vw 0 rgba(var(--secondaryColorRgbTheme), 0.2);
  }
  
  .branding-feed-row{
    margin-bottom: 0.3vw;
  }
  
  .branding-feed-img{
    width: 19vw;
    height: 18vw;
  }
}