* {
    font-family: "SF Pro Text", "Myriad Set Pro", "SF Pro Icons", "Apple Legacy Chevron", "Helvetica Neue", "Helvetica", "Arial", sans-serif !important;
  }
  .final-container {
    display: flex;
    justify-content: space-between;
    margin-left: 80px;
    margin-right: 80px;
}

.temp {
    flex: 2 ;
    margin-right: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 100px;
}

.temp-styles {
    flex: 1
    /* You can add styles for temp-styles here */
}

.resume-card {
    border: 2px solid #222222; /* Add a border */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add padding */
    width: 400px; /* Set the width */
    text-align: center; /* Center the text */
}

/* Styles for the heading */
.resume-card h3 {
    margin-bottom: 10px; /* Add spacing below the heading */
    font-size: 20px; /* Set font size */
    color: #333; /* Set text color */
}

/* Styles for the paragraph */
.resume-card p {
    margin-bottom: 15px; /* Add spacing below the paragraph */
    font-size: 14px; /* Set font size */
    color: #666; /* Set text color */
}

/* Container for image rows */
.image-grid {
    display: flex;
    flex-wrap: wrap; /* Wrap images in rows */
    justify-content: center; /* Center the images */
    margin-top: 20px; /* Add some space above the image grid */
}

/* Individual image item */
.image-item {
    flex: 1 1 calc(33.333% - 10px);
    box-sizing: border-box; /* Each item takes up 50% of the container width */
    padding: 5px; /* Add some padding around each item */
    text-align: center; /* Center-align the images */
}

/* Image styling */
.image-item img {
    width: 100%; /* Images take up full width of their container */
    height: 190px; /* Maintain aspect ratio */
    border: 2px solid #222222;
    transition: transform 0.3s, box-shadow 0.3s; /* Optional border for images */
    /* Optional rounded corners */
}
.image-item img:hover {
    transform: scale(1.05); /* Slightly increase the size of the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add a shadow effect */
    border-color: #0055aa; /* Change the border color (optional) */
}

@media (max-width: 768px) {
    .image-item {
        flex: 1 1 calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .image-item {
        flex: 1 1 100%;
    }

    .image-item img {
        width: 100%;
        height: auto;
        display: block;
    }
}

.subtag{
    font-size: 20px;
  
}
/* Styling for the header */
.header {
    position: relative;
    /* Add other styling as needed */
}

/* Border to the left side when hovered */
.header:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px; /* Adjust border style and color as needed */   
}

.experience-header-container,.education-header-container,.project-header-container, .skills-header-container, .certificates-header-container,.languages-header-container, .temp3-header-left, .t3-h,.summary-header-container{
    display: flex; /* Use flexbox to align elements in a row */
    justify-content: space-between; /* Space out the heading and edit icon */
    align-items: center; /* Vertically center the items */
}

.edit-icon {
    display: none; /* Initially hide the icon */
    position: absolute; /* Position it absolutely */
    top: 10px; /* Adjust the top position as needed */
    right: 10px; /* Adjust the right position as needed */
    font-size: 1.2em; /* Adjust the font size as needed */
    color: #0d6efd; /* Adjust the color as needed */
    cursor: pointer; /* Set the cursor to a pointer */
}

.header:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px; /* Adjust border style and color as needed */
}

/* Show the edit icon when the header is hovered */
.header:hover .edit-icon {
    display: block; /* Show the icon */
}
.t8-header:hover, .t11-header:hover {
    border: 3px solid #0d6efd !important;
    border-radius: 10px;
    padding: 10px; /* Adjust border style and color as needed */
}

/* Show the edit icon when the header is hovered */
.t8-header:hover .edit-icon-container, .t11-header:hover .edit-icon-container,
.t-10:hover  .edit-icon-container,
.t11-header:hover  .edit-icon-container {
    display: block !important; /* Show the icon */
}

.experience-t8:hover, .profile-summary-t7:hover, .education-t7:hover,  .projects-t7:hover, .profile-certificate-t8:hover, .t9-h:hover,.t-10-hover,.t11-header:hover{
    border: 3px solid #0d6efd !important;
    border-radius: 10px;
    padding: 10px; /* Adjust border style and color as needed */
}

/* Show the edit icon when the header is hovered */
.experience-t8:hover .edit-icon-container,
.profile-summary-t7:hover .edit-icon-container,
.education-t7:hover .edit-icon-container,
.projects-t7:hover .edit-icon-container,
.profile-certificate-t8:hover .edit-icon-container,
.t9-h:hover .edit-icon-container {
    display: block !important; /* Show the icon */
}
.education-t8:hover, .projects-t8:hover, .skills-t8:hover, .t-10:hover {
    border: 3px solid #0d6efd !important;
    border-radius: 10px;
    padding: 10px; /* Adjust border style and color as needed */
}
.education-t8:hover .edit-icon-container,
.projects-t8:hover .edit-icon-container,
.skills-t8:hover .edit-icon-container,
.t-10:hover .edit-icon-container {
    display: block !important; /* Show the icon */
}



.edit-icon-container {
    display: none !important;
    /* You can adjust the size, color, and other styles here */
    cursor: pointer; /* Change the cursor to a pointer on hover */
}
.experience:hover .edit-icon-container {
    display: block !important; /* Show the icon */
}
/* Experience hover effect */
.experience:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.education-side:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.education-side:hover .edit-icon-container{
    display: block !important;
}
.project-sec:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.project-sec:hover .edit-icon-container{
    display: block !important;
}
.skills:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.skills:hover .edit-icon-container{
    display: block !important;
}

#three_col_list {
    column-count: 3;  /* Display the list in three columns */
    column-gap: 20px; /* Adjust the gap between columns as needed */
    list-style: none; /* Optional: Remove default list bullet points */
    padding: 0;       /* Optional: Remove padding */
    margin: 0;        /* Optional: Remove margin */
}
.certificate_sec:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.certificate_sec:hover .edit-icon-container{
    display: block !important;
}
.languages_sec:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.languages_sec:hover .edit-icon-container{
    display: block !important;
}

/* new template3 styles */
.nt3-header{
    display: flex;
}
.nt3-summary{
    flex: 2;
    padding-right: 10px;
    margin-right: 15px;
}
.nt3-contact{
    flex: 1;
   padding-left: 10px;
   margin-left: 15px;
}

.nt3-header:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px; /* Adjust border style and color as needed */   
}
.nt3-header:hover .edit-icon3 {
    display: block; /* Show the icon */
}
.edit-icon3{
    display: none;
}
.nt3-name{
    color: #4172bb;
}
.nt3-heading{
    color: #4172bb;
}
.nt3-sub-heading{
    color: #0b0b0b;
}
.nt3-work-exp:hover{
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.nt3-work-exp:hover .edit-icon3 {
    display: block; /* Show the icon */
}
.nt3-project:hover{
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.nt3-project:hover .edit-icon3 {
    display: block !important; /* Show the icon */
}
.nt3-edu:hover{
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.nt3-edu:hover .edit-icon3 {
    display: block; /* Show the icon */
}

.nt3-languages:hover, .nt3-certificates:hover{
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.nt3-languages:hover .edit-icon3,
.nt3-certificates:hover .edit-icon3 {
    display: block !important; /* Show the icon */
}


/* template4  */
.header-container {
    display: flex; /* Use flexbox layout */
    justify-content: space-between; /* Space out the elements evenly */
    align-items: center; /* Align items vertically */
}

/* Style for the name heading */
.name-heading {
    font-size: 26px;
    font-weight: 500;
   
    margin: 0; /* Remove default margin */
}



/* Show the edit icon when the .header-container is hovered */
.t4-resume-header:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
/* Initially hide the edit icon */
/* Initially hide the edit icon */
.t4-resume-header:hover .edit-icon4 {
    display: block !important; /* This changes the display from 'none' to 'block' */
}



/* Show the edit icon when the header container is hovered */
.header-container:hover .edit-icon4 {
    display: block; /* Display the icon */
}
.experience-divider {
    border: none; /* Remove default border */
    border-top: 3px solid #201d1d; /* Top border style */
    margin-top: 5px; /* Adjust spacing between h3 and hr */
    margin-bottom: 10px; /* Add spacing after hr */
    width: 100%; /* Set width to fill the container */
}
.projects_sec:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.projects_sec:hover .edit-icon-container{
    display: block !important;
}


/* template2 */
.temp3-header-left:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.temp3-header-left:hover .edit-icon2 {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}
.personal-info:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.personal-info:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}
.t3-profile-summary:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.t3-profile-summary:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}
.work-exp:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
     /* Adjust border style and color as needed */
}
.work-exp:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}

/* template6 styles */
.t6-header{
    display: flex;
    justify-content:space-between;
    margin-bottom: 30px;
}
.t6-name{
    flex: 1;
    padding-right: 20px;
}
.t6-personal{
    flex: 1;
    padding-left: 100px;
    text-align: right;
    word-wrap: break-word;
    max-width: 100%; 
}
.t6-top-heading{
    color: #147b7b;
    letter-spacing: 5px;
}

.t6-linked{
    font-size: 16px;
    color: #147b7b;
    overflow-wrap: break-word;
}
.t6-para{
    line-height: 20px;
}
.exp-section{
    margin-bottom: 20px;
}
.two-col-list{
    column-count: 2;  /* Display the list in three columns */
    column-gap: 20px; /* Adjust the gap between columns as needed */
    list-style: none; /* Optional: Remove default list bullet points */
    padding: 0;       /* Optional: Remove padding */
    margin-left: 20px; 
    color: #2f2f2f;  
}
.t6-education{
    flex: 1;
    margin: 10px;
   
}
.t6-certificates{
    flex: 1;
    margin: 10px;
   
   
}
.t3-h:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t3-h:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}
.summary-header-container:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.summary-header-container:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}
.t6-workexp:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t6-workexp:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}

.t6-projects:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t6-projects:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}
.t6-skill:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t6-skill:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}

.cer:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.cer:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}
.t6-lang:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t6-lang:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}

.t6-education:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t6-education:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}

/*    tamplate-5      */

.t5-header{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-bottom:20px;
    color: rgb(120, 30, 30);
}

.t5-basic{
    font-family: Courier;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.t5-basic{
  padding: 1%;
    border:2px solid rgb(120, 30, 30);
}
.f5-basic,p{
    margin: 0;
}
.t5-summary{
    margin-top: 1%;
    line-height: 22px;
}
.t5-exp{
    margin-top: 3.5%;
}
.t5-exp-heading{
    font-size: large;
    color:rgb(120, 30, 30);
    display: inline-block;
    border-bottom: 2px solid black; /* Color and thickness of the line */
    margin-right: 10px; /* Adjust spacing between text and line */
    padding-bottom: 5px;
}

.t5-exp:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t5-exp:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}

.t5-education:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t5-education:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}

.t5-certificates:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t5-certificates:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}
.t5-lang:hover {
    border: 3px solid #0d6efd;
    border-radius: 10px;
    padding: 10px;
}
.t5-lang:hover .edit-icon-container {
    display: block !important; /* Display the edit icon when hovering over temp3-header-left */
}