/* Table of Contents
----------------------------------
Global CSS
Heading CSS
Button CSS
Header Area CSS
Home Area CSS
About Area CSS
Skills Area CSS
Qualification Area CSS
Portfolio Area CSS
Blog Area CSS
Contact Area CSS
Footer Area CSS
Scroll-Top Area CSS
*/

/*#region  0- Global CSS */
@import url('https://fonts.googleapis.com/css2?family=Birthstone&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root
{
    --purple:    #8000FF;
    --black:     #000000;
    --white:     #F7F5F2;
    --grey:      #DFDFDE;
    --dark-gray: #222222;
}

*
{
    font-family:        'JetBrains Mono Medium', sans-serif;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
    margin:             0;
    padding:            0;
    text-decoration:    none;
    border:             none;
    outline:            none;
    -webkit-transition: all 0.2s linear;
    -moz-transition:    all 0.2s linear;
    -o-transition:      all 0.2s linear;
    transition:         all 0.2s linear;
}

*::selection
{
    color:            var(--white);
    background-color: var(--purple);
}

html
{
    font-size:          62.5%;
    overflow-x:         hidden;
    scroll-behavior:    smooth;
    scroll-padding-top: 6rem;
}

body
{
    background-color: var(--black);
}

section
{
    padding: 2rem 5%;
}

::-webkit-scrollbar
{
    width: 0.8rem;
}

::-webkit-scrollbar-thumb
{
    border-radius:    1rem;
    background-color: var(--purple);
}

::-webkit-scrollbar-track
{
    background-color: var(--black);
}

.swiper-pagination-bullet
{
    height:           1rem;
    width:            1rem;
    border-radius:    50rem;
    background-color: var(--grey);
}

.swiper-pagination-bullet-active
{
    width:      3rem;
    background: var(--purple);
}

/*#endregion Global CSS */

/*#region Heading CSS */
.heading
{
    margin-bottom: 2rem;
}

.heading h2
{
    text-align:     center;
    padding-bottom: 2rem;
    color:          var(--purple);
    font-size:      4rem;
}

.heading h2 span
{
    position: relative;
    z-index:  0;
    color:    var(--white);
}

.heading h2 span::before
{
    content:     '';
    position:    absolute;
    bottom:      -0.5rem;
    left:        0;
    z-index:     -1;
    background:  var(--purple);
    height:      0.2rem;
    width:       80%;
    margin-left: 10%;
}

/*#endregion Heading CSS */

/*#region Button CSS */
.btn
{
    display:          inline-block;
    padding:          1rem 2rem;
    font-size:        1.8rem;
    color:            var(--purple);
    background-color: transparent;
    border:           0.2rem solid var(--purple);
}

.btn i
{
    padding-left: 1rem;
}

.btn:hover
{
    color:            var(--white);
    background-color: var(--purple);
    cursor:           pointer;
}

/*#endregion Button CSS */

/*#region Header Area CSS */
header
{
    position:           fixed;
    top:                0;
    left:               0;
    width:              100%;
    padding:            2rem 5%;
    display:            -webkit-box;
    display:            -ms-flexbox;
    display:            flex;
    -webkit-box-pack:   justify;
    -ms-flex-pack:      justify;
    justify-content:    space-between;
    -webkit-box-align:  center;
    -ms-flex-align:     center;
    align-items:        center;
    background:         rgba(0, 0, 0, 0.8);
    -webkit-transition: all 0.5s linear;
    -moz-transition:    all 0.5s linear;
    -o-transition:      all 0.5s linear;
    transition:         all 0.5s linear;
    z-index:            999;
}

header.sticky
{
    border-bottom: 0.1rem solid var(--grey);
}

header .logo h2
{
    font-size:      2.5rem;
    font-weight:    900;
    color:          var(--purple);
    letter-spacing: 0.2rem;
}

header .navbar a
{
    color:       var(--white);
    font-size:   1.8rem;
    margin-left: 1rem;
}

header .navbar a:hover,
header .navbar a.active
{
    color: var(--purple);
}

header #menu-btn
{
    font-size:          3rem;
    color:              var(--white);
    cursor:             pointer;
    -webkit-transition: all 0.5s linear;
    -moz-transition:    all 0.5s linear;
    -o-transition:      all 0.5s linear;
    transition:         all 0.5s linear;
    display:            none;
}

header .fa-times
{
    -webkit-transform: rotate(180deg);
    transform:         rotate(180deg);
}

header #menu-btn:hover
{
    color: var(--purple);
}

/*#endregion Header Area CSS */

/*#region Home Area CSS */
.home
{
    padding:          0rem 5%;
    background-color: var(--black);
    min-height:       100vh;
}

.home .box-container
{
    min-height:        100vh;
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-pack:  center;
    -ms-flex-pack:     center;
    justify-content:   center;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    -ms-flex-wrap:     wrap;
    flex-wrap:         wrap;
    gap:               4rem;
}

.home .image
{
    text-align:       center;
    -webkit-box-flex: 1;
    -ms-flex:         1 1 40rem;
    flex:             1 1 40rem;
}

.home .image img
{
    height:        40rem;
    width:         40rem;
    border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
    object-fit:    cover;
}

.home .content
{
    -webkit-box-flex:  1;
    -ms-flex:          1 1 40rem;
    flex:              1 1 40rem;

    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;

    -webkit-box-pack:  center;
    -ms-flex-pack:     center;
    justify-content:   center;

    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;

    margin-top:        7rem;
}

.home .content h2
{
    font-size:   2.5rem;
    font-weight: 400;
    color:       var(--purple);
}

.home .content h1
{
    font-size: 4rem;
    color:     var(--white);
    padding:   1rem 0;
}

.home .content h1 .typing-text
{
    color: var(--purple);
}

.home .content p
{
    font-size:      1.7rem;
    font-weight:    400;
    color:          var(--white);
    padding-bottom: 2rem;
    line-height:    1.5;
}

.home .social
{
    display:          -webkit-box;
    display:          -ms-flexbox;
    display:          flex;
    -webkit-box-pack: center;
    -ms-flex-pack:    center;
    justify-content:  left;
    padding:          2rem 0;
}

.home .social .fab
{
    display: flex;
    border-radius:     50%;
    height:            4rem;
    width:             4rem;
    color:             var(--white);
    font-size:         3.5rem;
    -webkit-box-pack:  center;
    -ms-flex-pack:     center;
    justify-content:   center;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    margin:            0 0.5rem;
}

/*#endregion Home Area CSS */

/*#region About Area CSS */
.about .box-container
{
    display:          -webkit-box;
    display:          -ms-flexbox;
    display:          flex;
    -webkit-box-pack: center;
    -ms-flex-pack:    center;
    justify-content:  center;
    -ms-flex-wrap:    wrap;
    flex-wrap:        wrap;
    gap:              2rem;
    padding:          2rem 0;
}

.about .image
{
    width:      32rem;
    text-align: center;
}

.about .image img
{
    width:  100%;
    border: 0.2rem solid var(--purple);
}

.about .content
{
    -webkit-box-flex: 1;
    -ms-flex:         1 1 55rem;
    flex:             1 1 55rem;
}

.about .content h2
{
    font-size:      3rem;
    color:          var(--white);
    padding-bottom: 1rem;
}

.about .content > p
{
    font-size:      1.6rem;
    color:          var(--grey);
    line-height:    1.6;
    padding-bottom: 1rem;
}

.about .content .about-info
{
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-pack:  start;
    -ms-flex-pack:     start;
    justify-content:   flex-start;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    -ms-flex-wrap:     wrap;
    flex-wrap:         wrap;
    gap:               1rem;
}

.about .content .about-info .info
{
    -webkit-box-flex: 1;
    -ms-flex:         1 1 15rem;
    flex:             1 1 15rem;
}

.about .content .about-info .info h4
{
    font-size:      1.6rem;
    color:          var(--white);
    padding-bottom: 1rem;
}

.about .content .about-info .info span
{
    font-size:   1.6rem;
    font-weight: 400;
    color:       var(--grey);
}

.about .content .about-info .info .btn
{
    margin-top: 1rem;
}

.counting
{
    -webkit-box-flex:  1;
    -ms-flex:          1 1 35rem;
    flex:              1 1 35rem;
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    -webkit-box-pack:  center;
    -ms-flex-pack:     center;
    justify-content:   center;
    -ms-flex-wrap:     wrap;
    flex-wrap:         wrap;
    gap:               1rem;
}

.counting .box
{
    -webkit-box-flex: 1;
    -ms-flex:         1 1 18rem;
    flex:             1 1 18rem;
    text-align:       center;
    background-color: #222222;
    padding:          2rem;
}

.counting .box .count
{
    font-size:      3.5rem;
    color:          var(--purple);
    padding-bottom: 0.5rem;
}

.counting .box h3
{
    font-size: 1.8rem;
    color:     var(--white);
}

/*#endregion About Area CSS */

/*#region Skills Area CSS */
.skill-container
{
    padding: 2rem 0;
}

/* ----- Skill Cards ----- */
.skill-cards
{
    display:       -webkit-box;
    display:       -ms-flexbox;
    display:       flex;
    -ms-flex-wrap: wrap;
    flex-wrap:     wrap;
    gap:           2rem;
    padding:       1rem 0;
}

.skill-card
{
    -webkit-box-flex:      1;
    -ms-flex:              1 1 28rem;
    flex:                  1 1 28rem;
    background-color:      var(--dark-gray);
    border:                0.1rem solid transparent;
    border-radius:         0.5rem;
    padding:               2.5rem 2rem;
    display:               -webkit-box;
    display:               -ms-flexbox;
    display:               flex;
    -webkit-box-orient:    vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction:    column;
    flex-direction:        column;
    -webkit-box-align:     center;
    -ms-flex-align:        center;
    align-items:           center;
    text-align:            center;
    gap:                   1rem;
}

.skill-card:hover
{
    border-color: var(--purple);
}

.skill-card-icon
{
    margin:    1rem;
    width:     4rem;
    height:    4rem;
    font-size: 4rem;
    color:     var(--white); /* fallback for icons without a colored variant */
}

.skill-card-name
{
    font-size:   1.8rem;
    font-weight: 700;
    color:       var(--purple);
}

.skill-card-blurb
{
    font-size:   1.4rem;
    color:       var(--grey);
    line-height: 1.6;
}

/*#endregion Skills Area CSS */

/*#region Qualification Area CSS */
.qualification .box-container
{
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-pack:  center;
    -ms-flex-pack:     center;
    justify-content:   center;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    -ms-flex-wrap:     wrap;
    flex-wrap:         wrap;
    gap:               4rem;
}

.education, .experience
{
    -webkit-box-flex: 1;
    -ms-flex:         1 1 40rem;
    flex:             1 1 40rem;
}

.experience-item
{
    position:         relative;
    -webkit-box-flex: 1;
    -ms-flex:         1 1 40rem;
    flex:             1 1 40rem;
    padding:          0 3rem 2rem 3rem;
    border-left:      0.2rem solid var(--purple);
    margin-left:      2rem;
}

.experience-item i
{
    position:      absolute;
    top:           0;
    left:          -2.5rem;
    height:        5rem;
    width:         5rem;
    border-radius: 50%;
    line-height:   5rem;
    text-align:    center;
    font-size:     2rem;
    color:         var(--white);
    background:    var(--purple);
}

.experience-item .content
{
    border-radius: 0.5rem;
    padding:       1rem 2rem;
    border-left:   2rem;
}

.experience-item span
{
    background:    #222222;
    color:         var(--white);
    padding:       0.5rem 1.5rem;
    font-size:     1.8rem;
    border-radius: 50rem;
}

.experience-item h3
{
    font-size: 2.5rem;
    color:     var(--white);
    padding:   1rem 0;
}

.experience-item h4
{
    font-size: 1.8rem;
    color:     var(--white);
    padding:   0 0 1rem 0;
}

.experience-item p,
.experience-item li
{
    color:       var(--grey);
    font-size:   1.6rem;
    line-height: 2.5rem;
    padding:     0.5rem 0;
}

.experience-item .content ul
{
    padding: 0 2.5rem;
}

.experience-item .content .columns
{
    display: flow-root list-item;
}

.experience-item .content .columns .column
{
    width: 45%;
}

.experience-item .content .columns .left
{
    float: left;
}

.experience-item .content .columns .right
{
    float: right;
}

.experience-item .content ul li a
{
    color: var(--purple);
}

.experience-item .content ul li a:hover
{
    color: inherit;
}

/*#endregion Qualification Area CSS */

/*#region Portfolio Area CSS */
.controls
{
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-pack:  center;
    -ms-flex-pack:     center;
    justify-content:   center;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    -ms-flex-wrap:     wrap;
    flex-wrap:         wrap;
    list-style-type:   none;
    margin-top:        2rem;
}

.controls .button
{
    cursor: pointer;
    margin: 0.5rem;
}

.controls .button.active
{
    cursor:           pointer;
    background-color: var(--purple);
    color:            var(--white);
}

.portfolio .box-container
{
    display:               -ms-grid;
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(33rem, 1fr));
    gap:                   0.5rem;
    padding:               2rem 0;
}

.portfolio-item
{
    border-radius: 0.5rem;
    height:        25rem;
    overflow:      hidden;
    position:      relative;
}

.portfolio-item img
{
    height:     100%;
    width:      100%;
    object-fit: contain;
}

.portfolio-item .content
{
    content:               '';
    position:              absolute;
    top:                   10%;
    left:                  10%;
    height:                80%;
    width:                 80%;
    border-radius:         0.5rem;
    background-color:      rgba(0, 0, 0, 0.8);
    display:               -webkit-box;
    display:               -ms-flexbox;
    display:               flex;
    -webkit-box-pack:      center;
    -ms-flex-pack:         center;
    justify-content:       center;
    -webkit-box-align:     center;
    -ms-flex-align:        center;
    align-items:           center;
    -webkit-box-orient:    vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction:    column;
    flex-direction:        column;
    -webkit-transform:     scale(0);
    transform:             scale(0);
}

.portfolio-item .content h4
{
    font-size:          clamp(1.5rem, 1.1vw, 1.85rem);
    font-weight:        bold;
    color:              var(--purple);
    transform-origin:   top;
    -webkit-transform:  translateY(-10rem);
    transform:          translateY(-10rem);
    opacity:            0;
    padding-bottom:     1rem;
    -webkit-transition: all 0.4s linear;
    -moz-transition:    all 0.4s linear;
    -o-transition:      all 0.4s linear;
    transition:         all 0.4s linear;
}

.portfolio-item .content p
{
    font-size:          .75rem;
    font-weight:        400;
    color:              var(--white);
    transform-origin:   top;
    -webkit-transform:  translateY(-10rem);
    transform:          translateY(-10rem);
    opacity:            0;
    -webkit-transition: all 0.4s linear;
    -moz-transition:    all 0.4s linear;
    -o-transition:      all 0.4s linear;
    transition:         all 0.4s linear;
}

.portfolio-item .content .view-btn
{
    font-size:          clamp(1.5rem, 0.75vw, 1.75rem);
    color:              var(--purple);
    transform-origin:   top;
    -webkit-transform:  translateY(-10rem);
    transform:          translateY(-10rem);
    opacity:            0;
    -webkit-transition: all 0.4s linear;
    -moz-transition:    all 0.4s linear;
    -o-transition:      all 0.4s linear;
    transition:         all 0.4s linear;
    border-radius:      5rem;
    margin-top:         1.5rem;
}

.portfolio-item:hover .content
{
    -webkit-transform: scale(1);
    transform:         scale(1);
    border:            0.2rem solid var(--purple);
}

.portfolio-item:hover .content h4
{
    -webkit-transform: translateY(0);
    transform:         translateY(0);
    opacity:           1;
}

.portfolio-item:hover .content p
{
    -webkit-transform: translateY(0);
    transform:         translateY(0);
    opacity:           1;
}

.portfolio-item:hover .content .view-btn
{
    -webkit-transform: translateY(0);
    transform:         translateY(0);
    opacity:           1;
}

.portfolio-item:hover img
{
    -webkit-transform: scale(1.2);
    transform:         scale(1.2);
}

/*CSS3 Animation Effects for Magnific Popup */

/* start state */
.mfp-newspaper .mfp-with-anim
{
    opacity:            0;
    -webkit-transition: all 0.2s ease-in-out;
    transition:         all 0.2s ease-in-out;

    -webkit-transform:  scale(0) rotate(500deg);
    transform:          scale(0) rotate(500deg);
}

.mfp-newspaper.mfp-bg
{
    opacity:            0;
    -webkit-transition: all 0.2s ease-in-out;
    transition:         all 0.2s ease-in-out;
}

/* animate in */
.mfp-newspaper.mfp-ready .mfp-with-anim
{
    opacity:           1;
    -webkit-transform: scale(1) rotate(0deg);
    transform:         scale(1) rotate(0deg);
}

.mfp-newspaper.mfp-ready.mfp-bg
{
    opacity: 0.8;
}

/* animate out */
.mfp-newspaper.mfp-removing .mfp-with-anim
{
    -webkit-transform: scale(0) rotate(500deg);
    transform:         scale(0) rotate(500deg);
    opacity:           0;
}

.mfp-newspaper.mfp-removing.mfp-bg
{
    opacity: 0;
}

/* Extended project card layout within the existing portfolio hover overlay */
.portfolio-item.project .content
{
    justify-content: flex-start;
    gap:             0.35rem;
    padding:         1.4rem 1rem 1rem;
    overflow:        hidden;
}

.portfolio-item.project .portfolio-tags
{
    font-size:      clamp(1.25rem, 0.6vw, 2.0rem);
    opacity:        0.75;
    margin:         0;
    letter-spacing: 0.02em;
}

.portfolio-item.project .portfolio-desc
{
    font-size:   clamp(1.0rem, 0.5vw, 1.5rem);
    line-height: 1.45;
    margin:      0.15rem 0 0.5rem;
    opacity:     0.92;
}

.portfolio-item.project .portfolio-links
{
    margin-top: auto;
}

/* Backdrop for the infrastructure card.
   position: absolute + full width/height makes it fill the card the same
   way .content does. Flex centers the logos horizontally and vertically. */
.infra-logo-backdrop
{
    position:         absolute;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              2.5rem;
    background-color: var(--dark-gray);
}

/* .portfolio-item img has specificity (0,1,1).
   .portfolio-item .infra-logo has specificity (0,2,0) which wins,
   so these values override the full-bleed img rule without needing !important. */
.portfolio-item .infra-logo
{
    width:      50%;
    height:     50%;
    object-fit: contain;
}

/*#endregion Portfolio Area CSS */

/*#region Blog CSS */
.blog-page
{
    background-color: var(--black);
    color:            var(--white);
    min-height:       100vh;
}

.blog-post
{
    width:   100%;
    margin:  0 auto;
    padding: 4rem 4rem 8rem;
}

.blog-header
{
    margin-top:     3.5rem;
    padding-bottom: 2rem;
    border-bottom:  1px solid rgba(255, 255, 255, 0.08);
}

.blog-header h1
{
    font-size:     3.6rem;
    font-weight:   700;
    color:         var(--white);
    line-height:   1.25;
    margin-bottom: 1rem;
}

.blog-meta
{
    font-size: 1.4rem;
    color:     var(--purple);
    opacity:   0.85;
}

.blog-body h2
{
    font-size:     2.4rem;
    font-weight:   600;
    color:         var(--purple);
    margin-bottom: 1.2rem;
}

.blog-body p
{
    font-size:     1.6rem;
    line-height:   1.75;
    color:         var(--white);
    opacity:       0.88;
    margin-bottom: 1.2rem;
}

.blog-body code
{
    font-family:      'JetBrains Mono', monospace;
    font-size:        1.3rem;
    background-color: rgba(139, 92, 246, 0.12);
    color:            var(--purple);
    padding:          0.15em 0.45em;
    border-radius:    0.3rem;
}

.blog-figure
{
    margin: 3rem 0;
}

.blog-figure img
{
    margin-left:   auto;
    margin-right:  auto;
    display:       block;
    max-width:     75rem;
    width:         50%;
    border-radius: 0.8rem;
    border:        1px solid rgba(255, 255, 255, 0.08);
}

.blog-figure figcaption
{
    text-align: center;
    font-size:  1.3rem;
    color:      var(--white);
    opacity:    0.5;
    margin-top: 1rem;
    font-style: italic;
}

/* diff2html ships a light theme. These rules override every background,
   border, and text color to match the site's dark palette.
   Specificity is kept at two classes minimum to reliably beat the CDN stylesheet. */
.d2h-wrapper
{
    margin-top: 2rem;
}

/* File header bar */
.d2h-file-header,
.d2h-file-wrapper .d2h-file-header
{
    background-color: var(--black);
    border-bottom:    1px solid rgba(139, 92, 246, 0.3);
    color:            var(--purple);
}

.d2h-file-name
{
    color: var(--purple);
}

/* Outer file wrapper */
.d2h-file-wrapper
{
    border:        1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.6rem;
    overflow:      hidden;
    margin-bottom: 1.5rem;
    background:    #0E0B14;
}

/* Code area background */
.d2h-diff-table,
.d2h-diff-tbody tr td
{
    background-color: #0E0B14;
    color:            #D4D0E0;
    border-color:     rgba(255, 255, 255, 0.06);
}

/* Line number gutters */
.d2h-code-linenumber,
.d2h-code-side-linenumber
{
    background-color: #130F1E;
    color:            rgba(255, 255, 255, 0.25);
    border-right:     1px solid rgba(255, 255, 255, 0.06);
}

/* Context (unchanged) lines */
.d2h-cntx td,
.d2h-cntx .d2h-code-side-line
{
    background-color: #0E0B14;
}

/* Inserted lines ? green tint */
.d2h-code-side-line ins
{
    background-color: #013220;
}

.d2h-ins .d2h-code-linenumber,
.d2h-ins .d2h-code-side-linenumber
{
    background-color: rgba(40, 167, 69, 0.2);
    border-color:     rgba(40, 167, 69, 0.3);
}

/* Deleted lines ? red tint */
.d2h-code-side-line del
{
    background-color: #990000;
}

.d2h-del .d2h-code-linenumber,
.d2h-del .d2h-code-side-linenumber
{
    background-color: rgba(220, 53, 69, 0.2);
    border-color:     rgba(220, 53, 69, 0.3);
}

/* Character-level diff highlights within a line */
.d2h-ins .d2h-change
{
    background-color: rgba(40, 167, 69, 0.35);
}

.d2h-del .d2h-change
{
    background-color: rgba(220, 53, 69, 0.35);
}

/* Hunk / section info rows (@@ ... @@) */
.d2h-info td,
.d2h-info .d2h-code-side-line
{
    background-color: #1A1225;
    color:            rgba(139, 92, 246, 0.7);
    border-color:     rgba(139, 92, 246, 0.2);
}

/* Empty placeholder column in side-by-side view */
.d2h-emptyplaceholder
{
    background-color: #0A0812;
    border-color:     rgba(255, 255, 255, 0.04);
}

/* File list (shown when drawFileList: true) */
.d2h-file-list-wrapper
{
    background-color: #130F1E;
    border:           1px solid rgba(255, 255, 255, 0.08);
    border-radius:    0.6rem;
    margin-bottom:    1.5rem;
}

.d2h-file-list-header
{
    background-color: #1A1225;
    color:            var(--purple);
    border-bottom:    1px solid rgba(255, 255, 255, 0.06);
}

.d2h-file-list li
{
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.d2h-file-list a
{
    color: rgba(255, 255, 255, 0.7);
}

.d2h-file-list a:hover
{
    color: var(--purple);
}

/* Tag badges (e.g. "changed", "added") */
.d2h-tag
{
    background-color: rgba(139, 92, 246, 0.15);
    color:            var(--purple);
    border-color:     rgba(139, 92, 246, 0.3);
}

/*#endregion Blog CSS */

/*#region Contact Area CSS */
.contact .alert
{
    font-size:     2rem;
    color:         var(--purple);
    border-radius: 0.5rem;
    padding-left:  1rem;
}

.contact .box-container
{
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-pack:  center;
    -ms-flex-pack:     center;
    justify-content:   center;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    -ms-flex-wrap:     wrap;
    flex-wrap:         wrap;
    gap:               2rem;
}

.contact-info
{
    -webkit-box-flex: 1;
    -ms-flex:         1 1 42rem;
    flex:             1 1 42rem;
}

.contact-info h3
{
    font-size: 3rem;
    color:     var(--white);
}

.contact-info > p
{
    font-size: 1.6rem;
    color:     var(--grey);
    padding:   0.5rem 0;
}

.contact-info .info-item
{
    padding: 1rem 0;
}

.contact-info .info-item h4
{
    font-size: 1.8rem;
    color:     var(--white);
}

.contact-info .info-item .detail
{
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
}

.contact-info .info-item .detail .fas,
.contact-info .info-item .detail .fab
{
    border-radius:     50%;
    color:             var(--purple);
    display:           -webkit-box;
    display:           -ms-flexbox;
    display:           flex;;
    -webkit-box-pack:  center;
    -ms-flex-pack:     center;
    justify-content:   center;
    -webkit-box-align: center;
    -ms-flex-align:    center;
    align-items:       center;
    font-size:         1.5rem;
}

.contact-info .info-item .detail a,
.contact-info .info-item .detail p
{
    font-size:    1.6rem;
    color:        var(--grey);
    line-height:  1.6;
    padding-left: 1rem;
}

/*#endregion Contact Area CSS */

/*#region Footer Area CSS */
footer
{
    background-color: var(--purple);
    padding:          2rem 0;
    text-align:       center;
}

footer .content p
{
    font-size: 2rem;
    color:     var(--white);
}

footer .content p span
{
    color: var(--black);
}

/*#endregion Footer Area CSS */

/*#region Scroll-Top */
.scroll-top
{
    position:           fixed;
    bottom:             1rem;
    right:              1rem;
    height:             5rem;
    width:              5rem;
    font-size:          5rem;
    font-weight:        lighter;
    background:         var(--black);
    color:              var(--white);
    border:             0.2rem solid var(--white);
    border-radius:      50%;
    -webkit-transition: all 0.2s;
    -moz-transition:    all 0.2s;
    -o-transition:      all 0.2s;
    transition:         all 0.2s;
    z-index:            999;
    display:            -webkit-box;
    display:            -ms-flexbox;
    display:            flex;
    -webkit-box-pack:   center;
    -ms-flex-pack:      center;
    justify-content:    center;
    -webkit-box-align:  center;
    -ms-flex-align:     center;
    align-items:        center;
}

.scroll-top:hover
{
    background:   var(--white);
    color:        var(--black);
    border-color: var(--black);
}

/*#endregion Scroll-Top */