/* Extra small devices (phones, less than 576px) */
@media screen and (max-width: 364.98px) {
    /* Styles for extra small devices */
}


/* Extra small devices (phones, less than 576px) */
@media screen and (min-width: 365px) and (max-width: 575.98px) {
    /* Styles for extra small devices */
}

/* Small devices (phones, 576px and up) */
@media screen and (min-width: 576px) and (max-width: 767.98px) {
    /* Styles for small devices */
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    /* Styles for medium devices */
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    /* Styles for large devices */
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) and (max-width: 1399.98px) {
    /* Styles for extra large devices */
}

/* Extra extra large devices (larger desktops, 1400px and up) */
@media screen and (min-width: 1400px) {
    /* Styles for extra extra large devices */
}




/*----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------- CLIENTS -------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------*/
.g-padding-y-125--sm.clients-page{
	padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

@media (max-width: 540px) {
	.g-padding-y-125--sm.clients-page{
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}
	.clients-page .g-margin-b-80--xs{
		margin-bottom: 2rem;
	}
	.clients-page .s-clients-v1{
		width: 4.25rem;
	}
	.clients-page .g-font-size-32--xs {
        font-size: 1.5rem !important;
    }
	.g-padding-y-125--sm.clients-page p{
		font-size: 0.8rem;
	}
}

@media (max-width: 414px) {
	.g-padding-y-125--sm.clients-page{
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
	.g-padding-y-125--sm.clients-page p{
		line-height: 1.3;
	}
}

@media (max-width: 375px) {
	.clients-page .g-font-size-32--xs {
        font-size: 1.2rem !important;
    }
	
}

@media (max-width: 280px) {
	.g-padding-y-125--sm.clients-page p{
		font-size: .7rem;
	}
}
/*----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------ END CLIENTS -----------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------- IMAGE DRAG AND DROP -------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Bootstrap 5 CSS and icons included */
:root {
  --colorPrimaryNormal: #00b3bb;
  --colorPrimaryDark: #00979f;
  --colorPrimaryGlare: #00cdd7;
  --colorPrimaryHalf: #80d9dd;
  --colorPrimaryQuarter: #bfecee;
  --colorPrimaryEighth: #dff5f7;
  --colorPrimaryPale: #f3f5f7;
  --colorPrimarySeparator: #f3f5f7;
  --colorPrimaryOutline: #dff5f7;
  --colorButtonNormal: #00b3bb;
  --colorButtonHover: #00cdd7;
  --colorLinkNormal: #00979f;
  --colorLinkHover: #00cdd7;
}

.upload_dropZone {
    color: #0f3c4b;
    background-color: var(--colorPrimaryPale, #c8dadf);
    outline: 2px dashed var(--colorPrimaryHalf, #c1ddef);
    outline-offset: -12px;
    transition:
        outline-offset 0.2s ease-out,
        outline-color 0.3s ease-in-out,
        background-color 0.2s ease-out;
}
.upload_dropZone.highlight {
    outline-offset: -4px;
    outline-color: var(--colorPrimaryNormal, #0576bd);
    background-color: var(--colorPrimaryEighth, #c8dadf);
}
.upload_svg {
    fill: var(--colorPrimaryNormal, #0576bd);
}
.btn-upload {
    padding: 0.5rem 1rem;
    margin-top: 0rem !important;
    color: #fff;
    background-color: var(--colorPrimaryNormal);
}
.btn-upload:hover,
.btn-upload:focus {
    color: #fff;
    background-color: var(--colorPrimaryGlare);
}
.upload_img {
    width: calc(33.333% - (2rem / 3));
    object-fit: contain;
}

.upload_dropZone {
    color: #0f3c4b;
    background-color: var(--colorPrimaryPale, #c8dadf);
    outline: 2px dashed var(--colorPrimaryHalf, #c1ddef);
    outline-offset: -12px;
    transition: outline-offset 0.2s ease-out, outline-color 0.3s ease-in-out, background-color 0.2s ease-out;
}
.upload_dropZone.dragover {
    outline-color: var(--colorPrimaryGlare, #00cdd7);
    background-color: var(--colorPrimaryQuarter, #bfecee);
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0%, 100% { outline-offset: -4px; }
    50% { outline-offset: -8px; }
}

.upload_fileList {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
}
.uploaded-file-name {
    background-color: var(--colorPrimaryEighth, #f3f5f7);
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 5px;
}
/*----------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------ END IMAGE DRAG AND DROP -----------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------------------------------*/