/* Default/Light Theme */
:root {
    --bg-color: var(--secondary-color);
    --text-color: #191818;
    --paraColor: #191818;
    --contactColr: #191818;
    --primary-color: #e7e7e7;
    --secondary-color: #fff;
    --iconClr: #191818;
    --lightbrdr: #e6e8e8;
    --iconBg: #fff;
    --bgGradient: linear-gradient(to top right, #4c63df, #23417e);
    --topBg: url('https://img.freepik.com/free-photo/abstract-white-flowing-curves_272375-26335.jpg')no-repeat;
}
/* pink Theme */
.blackClr-theme {
    --bg-color: var(--secondary-color);
    --text-color: #191818;
    --paraColor: #191818;
    --contactColr: #191818;
    --primary-color: #e7e7e7;
    --secondary-color: #fff;
    --iconClr: #191818;
    --lightbrdr: #e6e8e8;
    --iconBg: #fff;
    --bgGradient: linear-gradient(to top right, #4c63df, #23417e);
    --topBg: url('https://img.freepik.com/free-photo/abstract-white-flowing-curves_272375-26335.jpg')no-repeat;
}
/* pink Theme */
.pink-theme {
    --primary-color: #e597c6;
    --text-color: #d865ab;
    --paraColor: #191818;
    --iconClr: #d865ab;
    --contactColr: #191818;
    --lightbrdr: #ffeaf7;
    --iconBg: #ffe2f3;
    --topBg: url('https://static.vecteezy.com/system/resources/thumbnails/049/235/619/small/abstract-pink-curve-background-pink-beauty-dynamic-wallpaper-with-wave-shapes-template-banner-background-for-beauty-products-sales-ads-events-web-pages-and-others-vector.jpg')no-repeat;
}

/* tealBlue Theme */
.tealblue-theme {
    --primary-color: #0292b7;
    --text-color: #0292b7;
    --paraColor: #191818;
    --contactColr: #fff;
    --iconClr: #0292b7;
    --lightbrdr: #ccfffe;
    --iconBg: #ccfffe;
    --topBg: url('https://img.freepik.com/free-vector/glowing-light-rays-abstract-background-with-empty-space_1017-56254.jpg')no-repeat;
}

/* lightteal Theme */
.lightteal-theme {
    --primary-color: #369694;
    --text-color: #369694;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #369694;
    --lightbrdr: #d6fffd;
    --iconBg: #ddf3f2;
    --bgGradient: linear-gradient(to top right, #835f1e, #ffa500);
    --topBg: url('https://t4.ftcdn.net/jpg/17/50/26/01/360_F_1750260168_vqlU4jXAk8xWTkTNMiqdZ5gfHx9bxWjp.jpg')no-repeat;
}

/* SoftYellow Theme */
.Softyellow-theme {
    --primary-color: #d5e597;
    --text-color: #98ad44;
    --contactColr: #191818;
    --paraColor: #191818;
    --iconClr: #98ad44;
    --lightbrdr: #eefbbd;
    --iconBg: #f4fade;
    --bgGradient: linear-gradient(to top right, #835f1e, #ffa500);
    --topBg: url('https://png.pngtree.com/thumb_back/fh260/background/20250912/pngtree-natural-green-design-for-sustainability-powerpoint-templates-image_17979085.webp')no-repeat;
}

/* SoftBlue Theme */
.SoftBlue-theme {
    --primary-color: #5ca3ff;
    --text-color: #4b98fb;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #4b98fb;
    --lightbrdr: #c4deff;
    --iconBg: #d1e5ff;
    --bgGradient: linear-gradient(to top right, #835f1e, #ffa500);
    --topBg: url('https://img.freepik.com/free-vector/bubbles-blue-background_331749-689.jpg?semt=ais_hybrid&w=740&q=80')no-repeat;
}
/* BrightBlue Theme */
.BrightBlue-theme {
    --primary-color: #0081cc;
    --text-color: #0081cc;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #0081cc;
    --lightbrdr: #c4deff;
    --iconBg: #d1e5ff;
    --bgGradient: linear-gradient(to top right, #835f1e, #ffa500);
    --topBg: url('https://img.freepik.com/free-vector/light-blue-wave-background_53876-91680.jpg?semt=ais_incoming&w=740&q=80')no-repeat;
}
/* pestelBlue-theme */
.pestelBlue-theme {
    --primary-color: #979fe5;
    --text-color: #5c67d0;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #5c67d0;
    --lightbrdr: #c4deff;
    --iconBg: #dcdfff;
    --topBg: url('https://img.freepik.com/premium-vector/blue-dynamic-gradient-background-wallpaper-backdrop-presentation_1110513-1469.jpg')no-repeat;
}
/* palemint Theme */
.palemint-theme {
    --primary-color: #a4d8a9;
    --text-color: #62b369;
    --contactColr: #191818;
    --paraColor: #191818;
    --iconClr: #62b369;
    --lightbrdr: #d2ffd6;
    --iconBg: #e1f8e3;
    --topBg: url('https://c4.wallpaperflare.com/wallpaper/31/709/236/minimalism-vector-light-curves-wallpaper-thumb.jpg')no-repeat;
}

/* caffeine Theme */
.Caffeine-theme {
    --primary-color: #ab875f;
    --text-color: #ab875f;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #ab875f;
    --lightbrdr: #ffead4;
    --iconBg: #fcebd9;
    --topBg: url('https://img.freepik.com/free-vector/gold-luxury-background-gradient-modern-design_343694-3955.jpg')no-repeat;
}
/* Indigo Theme */
.indigo-theme {
    --primary-color: #7a72bd;
    --text-color: #645cad;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #645cad;
    --lightbrdr: #ddd9ff;
    --iconBg: #ddd9ff;
    --topBg: url('https://wallpapers.com/images/featured/purple-pastel-aesthetic-background-k621awi318hy2ava.jpg')no-repeat;
}
/* beige Theme */
.beige-theme {
    --primary-color: #d8bf98;
    --text-color: #ab854b;
    --contactColr: #191818;
    --paraColor: #191818;
    --iconClr: #ab854b;
    --lightbrdr: #fff0d8;
    --iconBg: #fff0d8;
    --topBg: url('https://png.pngtree.com/thumb_back/fh260/background/20210501/pngtree-background-with-the-texture-of-old-paper-large-burnt-spots-and-image_699326.jpg')no-repeat;
}
/* greyOrange Theme */
.greyOrange-theme {
    --primary-color: #d8b4a4;
    --text-color: #ac7e69;
    --paraColor: #191818;
    --contactColr: #191818;
    --iconClr: #ac7e69;
    --lightbrdr: #fff0d8;
    --iconBg: #ffe9df;
    --topBg: url('https://png.pngtree.com/thumb_back/fh260/background/20250825/pngtree-elegant-golden-luxury-background-with-modern-typography-and-dreamy-wavy-lines-image_17899814.webp')no-repeat;
}
/* PowderBlue Theme */
.PowderBlue-theme {
    --primary-color: #99d4ff;
    --text-color: #3a8fcc;
    --paraColor: #191818;
    --contactColr: #191818;
    --iconClr: #3a8fcc;
    --lightbrdr: #c3e6ff;
    --iconBg: #d5edff;
    --topBg: url('https://i.pinimg.com/736x/d2/36/a1/d236a15059ae4bee49f123173e808bbd.jpg')no-repeat;
}
/* levendor Theme */
.levendor-theme {
    --primary-color: #8a94f2;
    --text-color: #5461db;
    --paraColor: #191818;
    --contactColr: #fff;
    --iconClr: #5461db;
    --lightbrdr: #d1d5ff;
    --iconBg: #daddff;
    --topBg: url('https://wallpaperbat.com/img/12461713-light-color-background-wallpaper.jpg')no-repeat;
}
/* levendor Theme */
.darkGrey-theme {
    --primary-color: #545454;
    --text-color: #545454;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #545454;
    --lightbrdr: #d1d5ff;
    --iconBg: #eaeaec;
    --topBg: url('https://img.freepik.com/premium-photo/light-mineral-beige-rough-abstract-background-design_851755-347925.jpg?semt=ais_incoming&w=740&q=80')no-repeat;
}
/* PurpleGreen Theme */
.PurpleGreen-theme {
    --primary-color: linear-gradient(to right, #8c52ff, #ff914d);
    --text-color: #dd7e80;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #dd7e80;
    --lightbrdr: #ffbfb1;
    --iconBg: linear-gradient(to left, #decefe, #ffd8c1);
    --topBg: url('https://img.freepik.com/free-vector/background-luxury-gradient-design-template_483537-1711.jpg?semt=ais_hybrid&w=740&q=80')no-repeat;
}

/* PurpleGreen Theme */
.GreenBlue-theme {
    --primary-color: linear-gradient(to left, #5de0e6, #004aad);
    --text-color: #1063b7;
    --contactColr: #fff;
    --iconClr: #1063b7;
    --paraColor: #191818;
    --lightbrdr: #d1d5ff;
    --iconBg: linear-gradient(to top, #87c7fb, #80e4ef);
    --topBg: url('https://4kwallpapers.com/images/wallpapers/os-x-tiger-aqua-1920x1080-24046.jpg')no-repeat;
}

/* greyWhite Theme */
.greyWhite-theme {
    --primary-color: linear-gradient(to right, #a6a6a6, #ffffff);
    --text-color: #191818;
    --contactColr: #191818;
    --paraColor: #191818;
    --iconClr: #191818;
    --lightbrdr: #e3e3e3;
    --iconBg: linear-gradient(to top, #e8e8e8, #f1f1f1);
    --topBg: url('https://png.pngtree.com/thumb_back/fh260/background/20210724/pngtree-gray-white-geometric-beam-transparent-texture-business-technology-background-image_750908.jpg')no-repeat;
}
/* GreenBlack Theme */
.GreenBlack-theme {
    --primary-color: linear-gradient(to left, #091e27, #48f0e7);
    --text-color: #1c5f62;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #1c5f62;
    --lightbrdr: #d2fffd;
    --iconBg: linear-gradient(to top, #57c5c4, #b4f5ff);
    --topBg: url('https://static.vecteezy.com/system/resources/thumbnails/040/514/953/small/abstract-gradient-background-wallpaper-design-image-for-backdrop-or-presentation-vector.jpg')no-repeat;
}

/* purple Theme */
.black-theme {
    --primary-color: #a6a6a6;
    --text-color: #191818;
    --paraColor: #191818;
    --contactColr: #191818;
    --iconClr: #191818;
    --iconBg: #eae9e9;
    --lightbrdr: #fafafa;
    --topBg: url('https://img.freepik.com/free-vector/glowing-light-rays-abstract-background-with-empty-space_1017-56254.jpg')no-repeat;
}

/* gray Theme */
.grey-theme {
    --primary-color: #a6a6a6;
    --text-color: #191818;
    --contactColr: #fff;
    --paraColor: #191818;
    --iconClr: #191818;
    --lightbrdr: #fafafa;
    --iconBg: #e7e7e7;
    --topBg: url('https://img.freepik.com/free-vector/glowing-light-rays-abstract-background-with-empty-space_1017-56254.jpg')no-repeat;
}


/* ----------  body Css Start   ---------- */
body {
    font-family: "Poppins", sans-serif;
/*    background: var(--secondary-color);*/
}
.modal.themeModal .modal-dialog {
    max-width: 100%;
}
@media(min-width:768px){
    .modal.themeModal .modal-dialog {
        max-width: 70%;
    }
}

.modal.themeModal .modal-dialog .modal-content {
    border-radius: 0;
}
.modal.themeModal .modal-dialog .modal-content .modal-header {
    position: absolute;
    top: 10px;
    right:0;
    font-size: 26px;
    font-weight: 600;
    opacity: 1;
    z-index: 1;
}
.modal.themeModal .modal-dialog .modal-content .modal-header .btn-close {
    opacity: 1;
}
.modal.themeModal .modal-body {
    height: 70vh;
    overflow: hidden;
}
.shapeTheme {
    border: 1px solid #eeeeee;
}

/*------    new Css Theme Sec       -------*/
#targetElement {
    transition: all 0.3s ease;
    overflow-y: scroll;
/*    height: 480px;
    min-height: 480px;*/
    background: transparent;
}

@media(max-width:768px) {
    #targetElement {
        height: 100vh;
    }
}
.themeView{
    background:var(--bg-color);
}
    .themeView .themTop {
        width: 100%;
        height: 150px;
        background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), var(--topBg);
        background-size: cover;
        background-position: center;
        overflow: hidden;
        /*        border-bottom: 2px solid var(--primary-color);*/
    }
@media(max-width:768px) {
    .themeView .themTop {
        height:120px;
    }
}

    .themeView .themTop img {
        width: 100%;
        height: 100%;
        object-position: center;
        object-fit: cover;
    }

.ThemecomIcon,
.profileIcon {
    width: 90px;
    height: 90px;
    z-index: 1;
    position: relative;
    margin-top: -9%;
    margin-left: 10%;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary-color);
    border: 2px solid var(--lightbrdr);
    box-shadow: 1px 2px 5px rgb(173 173 173 / 50%);
}

.ThemecomIcon {
    width: 48px;
    height: 48px;
    margin-top: -8%;
    margin-left: 21%;
    border: 2px solid var(--lightbrdr);
}
    .ThemecomIcon.prevIcon {
        margin-top: -5%;
        margin-left: 18%;
    }
    .ThemecomIcon img {
        height: 34px;
        object-fit: cover;
    }

    .profileIcon img {
        height: 85px;
    }
.profileAboutInfo {
    /*    border: 1px solid #e3e3e3;*/
    padding: 7px 10px;
    border-radius: 5px;
/*    background: var(--iconBg);*/
}
@media(max-width:768px) {
    .ThemecomIcon {
        margin-top: -14% !important;
        margin-left: 30% !important;
    } 
    .profileIcon {
        margin-top: -15%;
        margin-left: 10%;
    }
}

.profileTheme h4 {
    margin-bottom: 4px;
    font-size: 15px;
    color: var(--text-color);
    font-weight: 600;
}

.profileTheme p {
    font-size: 12px;
    color: var(--text-color);
}

.profileAboutInfo p {
    font-size: 13px;
    color: var(--paraColor);
    line-height: 1.2rem;
}




    /* --------  default options Theme Set ------------ */
    .mobileView {
        position: relative;
        background: var(--secondary-color);
        /* border:1px solid #d5d5d5; */
    }

    #shapeSelector {
        background: var(--secondary-color);
        color: var(--primary-color);
        padding: 5px 4px;
        border-radius: 0;
        border: 0;
        font-size: 14px;
    }

.ShareInfo .socialBox {
    border: 1px solid var(--primary-color);
    text-align: center;
    width: 100%;
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 50px;
    background: var(--primary-color);
}

    .ShareInfo .socialBox a {
        color: var( --contactColr);
    }
.social-icons a i {
    width: 32px;
    height: 32px;
    font-size: 14px;
    background: var(--iconBg);
    color: var(--iconClr);
    text-decoration: none;
    border-radius: 50%;
    display: block;
    line-height: 32px;
    text-align: center;
}
    .themeView .topImg {
        background-color: var(--primary-color);
        width: 100%;
        height: 140px;
        padding: 10px;
        text-align: end;
    }

.cardSlider {
    width: 32%;
    margin: auto;
    height: 120px;
    border-radius: 5px;
    overflow: hidden;
}

    .cardSlider img {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }

@media (min-width: 768px) {
    .carousel-inner .carousel-item.active.carousel-inner .carousel-item-next.carousel-inner .carousel-item-prev {
        display: flex;
    }
    .ShareInfo .socialBox{
        width:50%;
    }
}













    .svgShape.halfCircle {
        display: none;
    }

    .svgShape svg {
        /* position: absolute;
    z-index: 0;
    top: 35%;
    left: 0; */
        width: 100%;
        margin-top: -16%;
    }

    .svgShape.halfCircle svg {
        fill: var(--primary-color);
    }

    .svgShape svg {
        fill: var(--pathBg);
    }





    .ShareInfo {
        display: block;
    }

        

    .separation {
        border: 1px solid transparent;
        background: var(--primary-color);
        height: 0.5px;
        width: 90%;
        margin: auto;
    }

        .separation h4 {
            background-color: var(--secondary-color);
            color: var(--text-color);
            width: max-content;
            margin: -18px auto;
            padding: 5px 20px;
            font-size: 18px;
            font-weight: 600;
        }

    .share-container {
        position: absolute;
        right: 0px;
        background-color: var(--primary-color);
        border-radius: 50px;
        width: 38px;
        height: 38px;
        line-height: 38px;
        text-align: center;
        bottom: -1%;
    }

        .share-container i {
            font-size: 18px;
            color: var(--secondary-color);
        }

.cardSlider {
    width: 28%;
    margin: auto;
    height: 60px;
    border-radius: 5px;
    overflow: hidden;
}

.cardSlider img {
    width: 100%;
    height: 100%;
    object-fit:cover;
}

@media (min-width: 768px) {
    .carousel-inner .carousel-item.active.carousel-inner .carousel-item-next.carousel-inner .carousel-item-prev {
        display: flex;
    }

    .cardSlider {
        height: 90px;
    }
}

        .share-IconContainer .socialShareIcon a i {
            width: 20px;
            height: 20px;
            font-size: 10px;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            text-decoration: none;
            border-radius: 50%;
            display: block;
            line-height: 22px;
            margin-bottom: 3px;
        }

   

    /* --------  Styles for the options  halfRoundShape Theme Set        ------------ */
    

.btnLogin.themLoginBtn {
    background: var(--iconBg);
    border: 0px solid var(--primary-color);
    color: var(--text-color);
    font-weight: 600;
}
.themLoginBtn.themBtn {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--contactColr);
}
.btnLogin.themLoginBtn:hover {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

    /* --------  new social icon css     ------------ */
    .contactInfo .contWidth {
        width: 10%;
    }

    .contactInfo .contIcon {
        width: 28px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        text-align: center;
        background: var(--secondary-color);
        border-radius: 50px;
        margin: auto;
    }

        .contactInfo .contIcon i {
            color: var(--primary-color);
        }

    .contactInfo .contText {
        width: 90%;
    }

    .contactInfo a {
        font-size: 13px;
        text-decoration: none;
        line-height: 1rem;
        color: var(--secondary-color);
    }

    #targetElement {
        transition: all 0.3s ease;
        overflow-y: scroll;
        height: 480px;
        min-height: 480px;
        background: transparent;
    }

    .themeOne {
        width: 400px;
        height: 400px;
        background: pink;
    }

    @media(max-width:768px) {
        #targetElement {
            height: 100vh;
        }
    }
@media(min-width:1440x) {
    #targetElement {
        height: 750px;
        min-height: 750px;
    }
        .ThemecomIcon,
        .ThemecomIcon.prevIcon {
            margin-top: -6%;
            margin-left: 19%;
        }
}
    /* -----------   Styles for the options  gradientShape ---------------- */

    
.bGButton button {
    border-radius: 50px;
    padding: 12px;
    margin: 5px;
    border: 1px solid #bfbfbf;
}

.bGButton .pinkClr {
    background-color: #e597c6;
}

.bGButton .lighttealClr {
    background-color: #369694;
}

.bGButton .SoftyellowClr {
    background-color: #d5e597;
}

.bGButton .palemintClr {
    background-color: #a4d8a9;
}

.bGButton .tealblueClr {
    background-color: #0292b7;
}

.bGButton .greyClr {
    background-color: #a6a6a6;
}

.bGButton .blackClr {
    background-color: #ffffff;
}
.bGButton .greyOrangeClr {
    background-color: #d8b4a4;
}
.bGButton .indigoClr {
    background-color: #7a72bd;
}
.bGButton .pestelBlueClr {
    background-color: #979fe5;
}
.bGButton .levendorClr {
    background-color: #8a94f2;
}
.bGButton .darkGreyClr {
    background-color: #545454;
}
.bGButton .SoftBlueClr {
    background-color: #5ca3ff;
}
.bGButton .BrightBlueClr {
    background-color: #0081cc;
}
.bGButton .PowderBlueClr {
    background-color: #99d4ff;
}
.bGButton .beigeClr {
    background-color: #d8bf98;
}
.bGButton .CaffeineClr {
    background-color: #ab875f;
}

.bGButton .PurpleGreenClr {
    background: linear-gradient(to top, #8c52ff, #ff914d);
}
.bGButton .GreenBlueClr {
    background: linear-gradient(to top, #5de0e6, #004aad);
}
.bGButton .greyWhiteClr {
    background: linear-gradient(to top, #a6a6a6, #ffffff);
}
.bGButton .GreenBlackClr {
    background: linear-gradient(to top, #091e27, #48f0e7);
}
.themChange #pastelyellow {
    display: none
}

.layoutBtn {
    outline: none;
    border: 1px solid #e3e3e3;
    border-radius: 10px;
    overflow: hidden;
    width: 90px;
    height: 80px;
    padding: 0;
    margin: 3px;
}

        .layoutBtn img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }

    .themeSec h5 {
        font-size: 14px;
        font-weight: 600;
    }




.gradientShape .mobileView .contactInfo .contIcon {
    background-color: #e4e4e4;
}

.gradientShape .mobileView .profileAboutInfo p {
    text-align: center;
}

.gradientShape .mobileView .separation h4 {
    background: var(--primary-color);
    color: var(--secondary-color);
}

/* ---------  Styles for the options  gradientShape  -------------- */
.squareShape .mobileView .topImg {
    width: 100%;
    height: 145px;
    background: url('https://img.freepik.com/premium-vector/connected-dots-bright-blue-background_51543-688.jpg?semt=ais_rp_progressive&w=740&q=80')no-repeat;
    background-size: cover;
    border: 1px solid transparent;
    z-index: 1;
    position: relative;
}

.squareShape .mobileView .svgShape {
    display: none;
}

.squareShape .mobileView .profileTheme {
    background-color: var(--secondary-color);
}

.squareShape .mobileView .share-IconContainer {
    display: block !important;
}

.squareShape .mobileView .ShareInfo {
    display: block;
}

    .squareShape .mobileView .ShareInfo .socialBox {
        border: 1px solid var(--secondary-color);
    }

.squareShape .mobileView .pprofileTheme .profileAboutInfo p,
.squareShape .mobileView .profileTheme p,
.squareShape .mobileView .profileTheme h4 {
    color: var(--primary-color);
}

.squareShape .mobileView .separation h4 {
    color: var(--primary-color);
}

.squareShape .mobileView .ShareInfo.themeIcon {
    display: none !important;
}

.squareShape .mobileView .ThemecomIcon,
.squareShape .mobileView .profileIcon {
    margin-top: -14%;
}

.squareShape .mobileView .share-IconContainer .socialShareIcon a i {
    width: 26px;
    height: 26px;
    font-size: 12px;
    margin: auto;
    line-height: 26px;
    color: var(--primary-color);
    background: var(--iconBg);
    text-align: center;
}

.squareShape .mobileView .profileTheme .profileIcon {
    margin-top: -8%;
    position: relative;
    margin-bottom: 10px;
}