.preview-container.selected {
    border: 2px solid #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5)
}

.preview-container {
    width: 18vw;
    height: 43vh;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-sizing: border-box
}

.preview-frame {
    width: 21cm;
    height: 30cm;
    border: 0;
    transform-origin: top left;
    top: 0;
    left: 0;
    box-sizing: border-box
}

.resume-container {
    height: 50vh;
    overflow-y: scroll
}

#color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px
}

.color-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border .3s
}

.color-circle:hover {
    border: 2px solid #333;
    transform: scale(1.1)
}

.color-circle[data-color="#a3c2e7"] {
    background-color: #a3c2e7
}

.color-circle[data-dark-shade="#7a9acc"] {
    background-color: #7a9acc
}

.color-circle[data-color="#b8e4b8"] {
    background-color: #b8e4b8
}

.color-circle[data-dark-shade="#8bbf8b"] {
    background-color: #8bbf8b
}

.color-circle[data-color="#ffcccb"] {
    background-color: #ffcccb
}

.color-circle[data-dark-shade="#e8aeb2"] {
    background-color: #e8aeb2
}

.color-circle[data-color="#DEAC80"] {
    background-color: #deac80
}

.color-circle[data-dark-shade="#C08B5C"] {
    background-color: #c08b5c
}

.color-circle[data-color="#102a73"] {
    background-color: #102a73
}

.color-circle[data-dark-shade="#0d1f56"] {
    background-color: #0d1f56
}

.color-circle[data-color="#2b98de"] {
    background-color: #2b98de
}

.color-circle[data-dark-shade="#1f7dbd"] {
    background-color: #1f7dbd
}

.color-circle[data-color="#34383c"] {
    background-color: #34383c
}

.color-circle[data-dark-shade="#2d2f32"] {
    background-color: #2d2f32
}

.color-circle[data-color="#00bca3"] {
    background-color: #00bca3
}

.color-circle[data-dark-shade="#009d8a"] {
    background-color: #009d8a
}

.color-circle[data-color="#9b3016"] {
    background-color: #9b3016
}

.color-circle[data-dark-shade="#7d2514"] {
    background-color: #7d2514
}

.color-circle[data-color="#094d73"] {
    background-color: #094d73
}

.color-circle[data-dark-shade="#073c5a"] {
    background-color: #073c5a
}

.color-circle[data-color="#075700"] {
    background-color: #075700
}

.color-circle[data-dark-shade="#053f00"] {
    background-color: #053f00
}

.color-circle[data-color="#7d7d7d"] {
    background-color: #7d7d7d
}

.color-circle[data-dark-shade="#6b6b6b"] {
    background-color: #6b6b6b
}

.color-circle[data-color="#394d6b"] {
    background-color: #394d6b
}

.color-circle[data-dark-shade="#2e3d54"] {
    background-color: #2e3d54
}

.color-circle[data-color="#7d47b2"] {
    background-color: #7d47b2
}

.color-circle[data-dark-shade="#6a3e9d"] {
    background-color: #6a3e9d
}

.color-circle[data-color="#f98c79"] {
    background-color: #f98c79
}

.color-circle[data-dark-shade="#d87a68"] {
    background-color: #d87a68
}

.color-circle[data-color="#facd05"] {
    background-color: #facd05
}

.color-circle[data-dark-shade="#e1b304"] {
    background-color: #e1b304
}

.color-circle[data-color="#9987ff"] {
    background-color: #9987ff
}

.color-circle[data-dark-shade="#7f6bdf"] {
    background-color: #7f6bdf
}

.color-circle[data-color="#016b5d"] {
    background-color: #016b5d
}

.color-circle[data-dark-shade="#014d46"] {
    background-color: #014d46
}

.color-circle[data-color="#b7d1ad"] {
    background-color: #b7d1ad
}

.color-circle[data-dark-shade="#9fbf8c"] {
    background-color: #9fbf8c
}

.color-circle[data-color="#e37929"] {
    background-color: #e37929
}

.color-circle[data-dark-shade="#b86b1e"] {
    background-color: #b86b1e
}

.color-circle[data-color="#8c3c4b"] {
    background-color: #8c3c4b
}

.color-circle[data-dark-shade="#6f2e3e"] {
    background-color: #6f2e3e
}

.color-circle[data-color="#cd8b00"] {
    background-color: #cd8b00
}

.color-circle[data-dark-shade="#a76b00"] {
    background-color: #a76b00
}

.color-circle[data-color="#e4e2de"] {
    background-color: #e4e2de
}

.color-circle[data-dark-shade="#c4c3c0"] {
    background-color: #c4c3c0
}

.color-circle[data-color="#a3b8de"] {
    background-color: #a3b8de
}

.color-circle[data-dark-shade="#7d98c7"] {
    background-color: #7d98c7
}

.color-circle[data-color="#f3c2f8"] {
    background-color: #f3c2f8
}

.color-circle[data-dark-shade="#d3a4e0"] {
    background-color: #d3a4e0
}

.color-circle[data-color="#8ac3f5"] {
    background-color: #8ac3f5
}

.color-circle[data-dark-shade="#6c9fd0"] {
    background-color: #6c9fd0
}

.color-circle[data-color="#b5e8e2"] {
    background-color: #b5e8e2
}

.color-circle[data-dark-shade="#98d1c1"] {
    background-color: #98d1c1
}

.color-circle[data-color="#789c30"] {
    background-color: #789c30
}

.color-circle[data-dark-shade="#5a7b22"] {
    background-color: #5a7b22
}

.color-circle[data-color="#c46531"] {
    background-color: #c46531
}

.color-circle[data-dark-shade="#a74c26"] {
    background-color: #a74c26
}

.color-circle[data-color="#f7bfb5"] {
    background-color: #f7bfb5
}

.color-circle[data-dark-shade="#dba9a4"] {
    background-color: #dba9a4
}

.color-circle[data-color="#c4b08f"] {
    background-color: #c4b08f
}

.color-circle[data-dark-shade="#a9976e"] {
    background-color: #a9976e
}

.color-circle[data-color="#000000"] {
    background-color: #000
}

.color-circle[data-dark-shade="#000000"] {
    background-color: #000
}

.color-circle[data-color="#26a7ff"] {
    background-color: #26a7ff
}

.color-circle[data-dark-shade="#1f8eea"] {
    background-color: #1f8eea
}

.color-circle[data-color="#db3e2c"] {
    background-color: #db3e2c
}

.color-circle[data-dark-shade="#b82e1e"] {
    background-color: #b82e1e
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

.custom-body {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

#resume1 {
    --font-size-base: 10px;
    font-size: var(--font-size-base);
    font-family: 'Lato'
}

.custom-body {
    display: flex;
    gap: 1rem;
    justify-content: start
}

.resume {
    display: grid;
    grid-template-columns: 1fr 2fr
}

.resume .left-side {
    padding: calc(var(--font-size-base) * 2);
    background-color: #323b4c;
    overflow: hidden
}

.resume .left-side ::selection {
    color: #000;
    background-color: #fff
}

.resume .right-side {
    padding: calc(var(--font-size-base) * 2) calc(var(--font-size-base) * 1);
    background-color: #fff;
    overflow: hidden
}

.resume .right-side ::selection {
    color: #fff;
    background-color: #163b7e
}

.padding-top-bg {
    padding-top: calc(var(--font-size-base) * 0.6) !important
}

.padding-top-sm {
    padding-top: calc(var(--font-size-base) * 0.6) !important
}

.heading-primary-white,
.heading-primary-black {
    font-size: calc(var(--font-size-base) * 2);
    font-weight: bold;
    margin-bottom: 0;
    position: relative
}

.heading-primary-white {
    color: #fff
}

.heading-primary-black {
    color: #000
}

.heading-primary-white::after,
.heading-primary-black::after {
    content: '';
    height: 2px;
    position: absolute;
    left: 0;
    top: calc(var(--font-size-base) * 2.5)
}

.heading-primary-white::after {
    background-color: #e0e0e0;
    width: 120%
}

.heading-primary-black::after {
    background-color: #2e2e2e;
    width: 100%
}

.info-box .info-title {
    color: #fff;
    font-size: calc(var(--font-size-base) * 1.4);
    font-weight: bold
}

.info-box .info,
.info-box .info a {
    color: #ddd;
    font-size: calc(var(--font-size-base) * 1.2);
    text-decoration: none
}

.discription {
    font-size: calc(var(--font-size-base) * 1.4);
    color: #555;
    padding: 0;
    text-align: justify;
    line-height: 1.1;
    margin: 0
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: center
}

.profile .name {
    font-size: calc(var(--font-size-base) * 1.8);
    color: #fff;
    margin-bottom: 2px
}

.profile .title {
    font-size: calc(var(--font-size-base) * 1.4);
    color: #ddd;
    letter-spacing: 3px;
    margin: 0
}

.profile .profile-img {
    background-color: #fff;
    width: calc(var(--font-size-base) * 8);
    height: calc(var(--font-size-base) * 8);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    margin: 0 auto;
    margin-bottom: 0
}

.resume .left-side .profile-img img {
    width: 100%
}

.skill {
    display: flex;
    align-items: center;
    gap: calc(var(--font-size-base) * 1);
    margin: 0
}

.skill span {
    display: block;
    height: 3px;
    width: 3px;
    border-radius: 50%;
    background-color: #fff
}

.skill .skill-name {
    color: #fff;
    font-size: calc(var(--font-size-base) * 1.4)
}

.lang-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(var(--font-size-base) * 1);
    margin: 0
}

.lang-box p {
    width: 30%;
    margin: 3px
}

.lang-box .percent {
    position: relative;
    display: block;
    height: 5px;
    width: 60%;
    background-color: #fff
}

.lang-box .percent div {
    position: absolute;
    background-color: #2264ff;
    height: 5px
}

.xp-box {
    position: relative;
    padding-left: calc(var(--font-size-base) * 2);
    margin: 0
}

.xp-box::before {
    content: '';
    position: absolute;
    top: calc(var(--font-size-base) * 2);
    left: 0;
    background-color: #555;
    height: 90%;
    width: 2px;
    margin: 0
}

.xp-box:last-child:before {
    height: 91%
}

.xp-box::after {
    content: '';
    position: absolute;
    top: 1rem;
    left: -10px;
    background-color: #fff;
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 50%;
    border: 2px solid #333
}

.xp-box .xp-year {
    color: #333;
    font-size: calc(var(--font-size-base) * 1.6);
    font-weight: bold;
    margin-bottom: 0;
    letter-spacing: 2px;
    margin: 0
}

.xp-box .xp-company {
    color: #555;
    font-size: calc(var(--font-size-base) * 1.6);
    margin-bottom: 0;
    margin: 0
}

.xp-box .xp-position {
    color: #333;
    font-size: calc(var(--font-size-base) * 1.8);
    font-weight: bold;
    margin: 5px 0
}

.xp-box .padding-fix {
    padding-bottom: 0
}

.xp-boxp .xp-year {
    color: #333;
    font-size: calc(var(--font-size-base) * 1.6);
    font-weight: bold;
    margin-bottom: 0;
    letter-spacing: 2px;
    margin: 0
}

.xp-boxp .xp-company {
    color: #555;
    font-size: calc(var(--font-size-base) * 1.6);
    margin-bottom: 0;
    margin: 0
}

.xp-boxp .xp-position {
    color: #333;
    font-size: calc(var(--font-size-base) * 1.8);
    font-weight: bold;
    margin: 5px 0
}

.xp-boxp .padding-fix {
    padding-bottom: 0
}

.cert-name {
    color: #555;
    font-size: calc(var(--font-size-base) * 1.4)
}

@media screen and (max-width:700px) {
    .refer-box {
        display: block
    }

    .refer:first-child {
        margin-bottom: 3rem
    }

    .resume {
        margin: 0
    }
}

.custom-body {
    display: block
}

page {
    background: white;
    display: block;
    box-shadow: 0 0 .5cm rgba(0, 0, 0, 0.5)
}

page[size="A4"] {
    width: 21cm;
    height: 29.7cm;
    overflow: hidden
}

@media print {

    .custom-body,
    page {
        background: white;
        margin: 0;
        box-shadow: 0
    }
}

#resume2 {
    --font-size-base: 9.3px;
    font-size: var(--font-size-base)
}

.new-resume {
    display: grid;
    grid-template-columns: 3fr 1fr
}

.new-resume .left-side1 {
    overflow: hidden
}

.new-resume .right-side1 {
    padding: calc(var(--font-size-base) * 2) calc(var(--font-size-base) * 1);
    overflow: hidden
}

.padding-top-bg {
    padding-top: calc(var(--font-size-base) * 0.6) !important
}

.padding-top-sm {
    padding-top: calc(var(--font-size-base) * 0.6) !important
}

.heading-primary-white1,
.heading-primary-black1 {
    font-size: calc(var(--font-size-base) * 2);
    font-weight: bold;
    margin-bottom: calc(var(--font-size-base) * 1);
    position: relative;
    padding: 5px 0;
    padding-left: 10px
}

.heading-primary-white1::after,
.heading-primary-black1::after {
    content: '';
    height: 2px;
    position: absolute;
    left: 0;
    top: calc(var(--font-size-base) * 2.5)
}

.info-box1 {
    padding: calc(var(--font-size-base) * 2);
    padding-bottom: 0
}

.info-box1 .info-title1 {
    font-size: calc(var(--font-size-base) * 1.4);
    font-weight: bold
}

.info-box1 .info1,
.info-box1 .info1 a {
    font-size: calc(var(--font-size-base) * 1.2);
    text-decoration: none
}

.discription1 {
    font-size: calc(var(--font-size-base) * 1.4);
    padding: 0;
    text-align: justify;
    line-height: 1.1;
    margin: 0
}

.profile1 {
    display: flex;
    flex-direction: column;
    text-align: left;
    padding: calc(var(--font-size-base) * 2);
    padding-bottom: 0
}

.profile1 .name1 {
    font-size: calc(var(--font-size-base) * 3);
    margin-bottom: 2px;
    text-align: left
}

.profile1 .title1 {
    font-size: calc(var(--font-size-base) * 2);
    color: #ddd;
    text-align: left;
    margin: 0
}

.profile1 .profile-img1 {
    background-color: #fff;
    width: calc(var(--font-size-base) *15);
    height: calc(var(--font-size-base) * 15);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    margin: 0 auto;
    margin-bottom: 0
}

.new-resume .left-side1 .profile-img1 img {
    width: 100%
}

.skill1 {
    display: flex;
    align-items: center;
    gap: calc(var(--font-size-base) * 1);
    padding: calc(var(--font-size-base) * 2);
    padding-bottom: 0;
    margin: 0
}

.skill1 span {
    display: block;
    height: 3px;
    width: 3px;
    border-radius: 50%;
    background-color: #fff
}

.skill1 .skill-name1 {
    color: #fff;
    font-size: calc(var(--font-size-base) * 1.4)
}

.lang-box1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
    margin: 0
}

.lang-box1 p {
    width: 60%;
    margin: 3px
}

.lang-box1 .percent1 {
    position: relative;
    display: block;
    height: 5px;
    width: 40%;
    background-color: #fff
}

.lang-box1 .percent1 div {
    position: absolute;
    background-color: #000;
    height: 5px
}

.xp-box1 {
    position: relative;
    padding-left: calc(var(--font-size-base) * 2);
    margin: 0
}

.xp-box1::before {
    content: '';
    position: absolute;
    top: calc(var(--font-size-base) * 2);
    left: 0;
    background-color: #000;
    height: 90%;
    width: 2px;
    margin: 0
}

.xp-box1:last-child:before {
    height: 91%
}

.xp-box1::after {
    content: '';
    position: absolute;
    top: 1rem;
    left: -10px;
    background-color: #fff;
    height: 1.2rem;
    width: 1.2rem;
    border-radius: 50%;
    border: 2px solid #333
}

.xp-year1 {
    color: #333;
    font-size: calc(var(--font-size-base) * 1.6);
    font-weight: bold;
    margin-bottom: 0;
    letter-spacing: 2px;
    margin: 0
}

.xp-company1 {
    color: #555;
    font-size: calc(var(--font-size-base) * 1.6);
    margin-bottom: 0;
    margin-bottom: 3px;
    font-style: italic
}

.xp-position1 {
    color: #333;
    font-size: calc(var(--font-size-base) * 1.8);
    font-weight: bold;
    margin: 0
}

.padding-fix {
    padding-bottom: 0
}

.refer-box1 {
    padding: 0;
    margin: 0
}

#resume2 hr {
    border: 0;
    height: 1px;
    background-color: #212121
}

@media screen and (max-width:700px) {
    .refer-box1 {
        display: block
    }

    .refer1:first-child {
        margin-bottom: 3rem
    }

    .new-resume {
        margin: 0
    }
}

#resume3 {
    --font-size-base: 8.5px;
    font-size: var(--font-size-base)
}

.resume3 {
    display: block;
    padding: 10px
}

.info3 {
    color: #000;
    font-size: calc(var(--font-size-base) * 1.8)
}

.info3 a {
    color: #000;
    text-decoration: none;
    font-size: calc(var(--font-size-base) * 1.4)
}

.title3 {
    font-size: calc(var(--font-size-base) * 2);
    letter-spacing: 2px
}

.skill3 {
    font-size: calc(var(--font-size-base) * 2)
}

.skill3-sec li {
    font-size: calc(var(--font-size-base) * 1.4)
}

.edit-btn {
    cursor: pointer;
    margin-top: -5px;
    margin-right: 5px;
    color: #333;
    display: flex;
    justify-content: start;
    align-items: center
}

.edit-box2 {
    position: absolute;
    display: none;
    padding: 5px;
    z-index: 1000
}

.edit-btn2 {
    cursor: pointer;
    margin-top: -5px;
    margin-right: 5px;
    color: #333;
    display: flex;
    justify-content: start;
    align-items: center
}

.section-hover {
    position: relative
}

.section-hover:hover {
    border: 3px solid #90bbe7;
    border-radius: 30px;
    padding: 60px 20px;
    transform: scale(1.01);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5)
}

.section-hover:hover .edit-box {
    display: block
}

.score {
    position: absolute;
    top: -10px;
    left: 150px
}

.score-section {
    background-color: #fff
}

.p-container {
    display: flex;
    justify-content: center
}

.color-circle.selected {
    transform: scale(1.2);
    border: 2px solid black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: transform .3s ease, border .3s ease
}


.form-control{
    border-radius: 7px;
}

.btn-edit-education:hover, .btn-delete-education:hover {
    background-color: #00B074; /* Change the background color on hover */
    color: white; /* Change the icon color to white for better contrast */
    border-radius: 50%; /* Optional: make it circular */
    padding: 5px 10px; /* Optional: add some padding */
    transform: scale(1.1); /* Optional: zoom in a bit on hover */
}
.btn-edit-education , .btn-delete-education{
    background:transparent;
}



.btn-edit-experience:hover, .btn-delete-experience:hover {
    background-color: #00B074; /* Change the background color on hover */
    color: white; /* Change the icon color to white for better contrast */
    border-radius: 50%; /* Optional: make it circular */
    padding: 5px 10px; /* Optional: add some padding */
    transform: scale(1.1); /* Optional: zoom in a bit on hover */
}
.btn-edit-experience , .btn-delete-experience{
    background:transparent;
}


.btn-edit-project:hover, .btn-delete-project:hover {
    background-color: #00B074; /* Change the background color on hover */
    color: white; /* Change the icon color to white for better contrast */
    border-radius: 50%; /* Optional: make it circular */
    padding: 5px 10px; /* Optional: add some padding */
    transform: scale(1.1); /* Optional: zoom in a bit on hover */
}
.btn-edit-project , .btn-delete-project{
    background:transparent;
}