View file Remove image backgrounds/remove-bg/dark/assets/css/custom.css

File size: 7.09Kb
/******************************************
 File Name: custom.css
 Item Name: Background Remove
 Created By: Design Collection
 Version: 1.0
 *******************************************/

 :root,
 [data-bs-theme="light"] {
 
     --bs-dark-rgb: 23, 21, 59;
     --bs-font-sans-serif: "Poppins", sans-serif;
     --bs-nav-link-font-size: 15px;
     --bs-border-radius: 15px;
     --bs-border-radius-sm: 15px;
     --bs-primary-bg-subtle: #fff;
     --bs-secondary-bg-subtle: #e2e3e5;
     --bs-success-bg-subtle: #d1e7dd;
     --bs-primary-rgb: 23, 21, 59;
 
 }  
    
 .btn-primary {
     --bs-btn-color: #fff;
     --bs-btn-bg: #433D8B;
     --bs-btn-border-color: #433D8B;
     --bs-btn-hover-color: #17153B;
     --bs-btn-hover-bg: #C8ACD6;
     --bs-btn-hover-border-color: #C8ACD6;
     --bs-btn-focus-shadow-rgb: 49, 132, 253;
     --bs-btn-active-color: #fff;
     --bs-btn-active-bg: #433D8B;
     --bs-btn-active-border-color: #433D8B;
     --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     --bs-btn-disabled-color: #433D8B;
     --bs-btn-disabled-bg: #433D8B;
     border-radius: 50px;
     --bs-btn-disabled-border-color: #433D8B;
 }
 
 .navbar-nav {
     --bs-nav-link-padding-y: 0.5rem;
 }
 
 .navbar {
     --bs-navbar-nav-link-padding-x: 0.875rem;
     --bs-navbar-toggler-padding-y: 0.625rem;
    --bs-navbar-toggler-padding-x: 0.25rem;
    --bs-navbar-toggler-font-size: 1.25rem;
 }
 
 .accordion-button {
     background-color: rgba(200, 172, 214, 0.5);
     font-weight: 700;
 }
 
 .fw-800 {
     font-weight: 800 !important;
 }
 
 .form-check-input:checked {
     background-color: #C8ACD6;
     border-color: #C8ACD6;
 }
 
 /* custom css Begin */
 
 /* navbar Css Begin */
 .bg-dark .nav-link {
     color: #fff;
 }
 
 .bg-dark .nav-link:hover {
     color: #C8ACD6;
 }
 .navbar-toggler-icon{
background-color: #fff;
 }
 
 /* Navbar Css End */
 
 /* Margin and Padding Begin */
 
 .ms-n7 {
     margin-left: -6rem !important;
 }
 
 .mt-n5 {
     margin-top: -3rem;
 }
 
 .ms-5 {
     margin-left: 3rem;
 }
 
 .ptb-100 {
     padding: 100px 0px;
 }
 
 .pt-100 {
     padding-top: 100px;
 }
 
 .pb-100 {
     padding-bottom: 100px;
 }
 
 .mt-25 {
     margin-top: -25px;
 }
 
 
 /* Margin and Padding End */
 
 /* Fill color Begin */
 
 .fill-primary {
     fill: #433D8B;
 }
 
 .fill-orange {
     fill: #fd7e14;
 }
 
 .fill-warning {
     fill: #C8ACD6;
 }
 
 .fill-success {
     fill: #2E236C;
 }
 
 .fill-danger {
     fill: #d6293e;
 }
 
 .fill-white {
     fill: #fff;
 }
 
 /* Fill color End */
 
 /* Opactity Begin */
 .opacity-1 {
     opacity: 0.1;
 }
 
 .opacity-4 {
     opacity: 0.4;
 }
 
 /* Opactity End */
 
 /* Rotate Begin */
 
 .rotate-74 {
     -webkit-transform: rotate(74deg) !important;
     transform: rotate(74deg) !important;
 }
 
 .z-index-n1 {
     z-index: -1;
 }
 
 .rotate-186 {
     -webkit-transform: rotate(186deg);
     transform: rotate(186deg);
 }
 
 /* Rotate End */
 .card.card-hover:hover {
     transform: translateY(-0.25rem);
     box-shadow: 0 0.275rem 0.75rem -0.0625rem rgba(11, 15, 25, .06), 0 0.125rem 0.4rem -0.0625rem rgba(11, 15, 25, .03);
 }
 
 .card.card-hover {
     transition: transform .2s ease-in-out, border-color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out;
 }
 
 .bg-grad-pink {
     background: rgb(4, 13, 18);
     background: linear-gradient(0deg, rgba(67, 61, 139, 1) 0%, rgba(200, 172, 214, 1) 100%);
 }

 
 
 /* Define the size of the image container */
 /* styles.css */
 .card-body{
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
 }
 .image-container-1 {
     border-top-left-radius:15px;
     border-top-right-radius:15px;
     width: 100%;
     height: 600px;
     background-image: url('../images/change-background-image.jpg');
     /* Initial image */
     background-size: cover;
     background-position: center;
     /* Center the background image */
     transition: background-image 0.3s ease-in-out;
     /* Smooth transition effect */
 }
 
 .image-container-1:hover {
     background-image: url('../images/change-background-image-hover.jpg');
     /* Image on hover */
 }
 
 .image-container-2 {
     width: 100%;
     border-top-left-radius:15px;
     border-top-right-radius:15px;
     height: 600px;
     background-image: url('../images/fashion-photo-creator-image.jpg');
     /* Initial image */
     background-size: cover;
     background-position: center;
     /* Center the background image */
     transition: background-image 0.3s ease-in-out;
     /* Smooth transition effect */
 }
 
 .image-container-2:hover {
     background-image: url('../images/fashion-photo-creator-image-hover.jpg');
     /* Image on hover */
 }
 
 .custom-bg-image {
     background-position: center;
     background-repeat: no-repeat;
 
 }
 
 .p-relative {
     z-index: -1;
     position: relative;
 }
 .p2-relative {
    
    position: relative;
}

 .nav-pills.bg-sec .nav-link.active,
 .nav-pills.bg-sec .show>.nav-link {
     background: linear-gradient(0deg, rgba(212, 198, 255, 1) 0%, rgba(243, 246, 255, 1) 100%);
     color: #212529;
     font-weight: 600;
 }
 
 .bg-sec .nav-link {
     color: #212529;
     font-weight: 600;
     cursor: pointer;
 }
 
 #primarycolor {
     background-color: #f7c32e;
 }
 
 #secondarycolor {
     background-color: #0cbc87;
 }
 
 #defaultcolor {
     background-color: #fd7e14;
 }
 
 
 .text-social {
     border: 1px solid #9DB2BF;
     color: #9DB2BF;
 }
 
 .bgForegroundimagetabcontentdiv {
     background-color: #ccc;
     padding: 5px;
     border-radius:15px;
 }
 
 
 .pricing-content ul li {
     display: flex;
     margin-top: 20px;
 }
 
 .shapes:before {
     content: "";
     background-image: url('../images/abstract-shapes.svg');
     background-repeat: no-repeat;
     background-position: center top;
     background-size: cover;
     z-index: 0;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     transition: inherit;
     pointer-events: none;
     opacity: 0.08;
 }
 
 .bs-dark-400 {
     background-color: rgba(46, 35, 108, .95);
 }
 
 .circle-icon {
     display: -webkit-inline-box;
     display: -webkit-inline-flex;
     display: -ms-inline-flexbox;
     display: inline-flex;
     -webkit-box-align: center;
     -webkit-align-items: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
     justify-content: center;
     width: 80px;
     height: 80px;
     border-radius: 50%;
 }
 
 .bg-accent-1 {
     background-color: rgba(109, 84, 235, .5);
 }
 
 .fs-15 {
     font-size: 15px;
 }
 
 .fw-600 {
     font-weight: 600;
 }
 
 /* Social Media Begin */
 
 .social-media {
     color: #fff;
     border: 1px solid #fff;
 }
 
 .social-media:hover {
     color: #9DB2BF;
     border: 1px solid #9DB2BF;
 }
 
 /* Social Media End */