/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Open+Sans:wght@300;400;600&display=swap');

/* General Font Style */
body, html {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #111111;
}

/* Navigation */
nav a {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    color: #444;
}

/* Buttons */
button, .btn {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

/* Footer */
footer {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

/* Additional sections retain existing styles */
/* ----------------------------------------------------------------
[Table of contents]
01. Google Fonts
02. Default styles
03. Sidebar styles
04. Content styles
05. Slider styles
06. Heading styles
07. Blog & Post styles
08. Project styles
09. Footer styles
10. Contact styles
11. Services styles
12. Navigation styles
13. Team styles
14. Section styles
15. Animated Headline
16. Skills Progress Bar 
17. Button style
------------------------------------------------------------------- */

/*** 01. Google Fonts ***/

@import url('https://fonts.googleapis.com/css?family=Oswald:400,500|Rambla:400,700');

/*** 02. Default styles ***/

html,
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

body {
    /* font-family: 'Rambla', sans-serif; */
    font-size: 15px;
    line-height: 1.75em;
    font-weight: 400;
    color: #174e4b;
}


/*** typography ***/


/* headings */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #218665;
    /* font-family: 'Rambla'; */
    font-weight: 550;
    line-height: 1.75em;
    margin: 0 0 0 0;
}


/* paragraph */

p {
    font-family: 'Open Sans';
    font-size: 14.4px;
    line-height: 1.75em;
    font-weight: 400;
    color: rgb(56 56 56)

    ;
    margin: 0 0 10px;
}


/* lists */

ul {
    list-style-type: none;
}


/* links */

a {
    color: #101010;
    /* -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s; */
}

a:hover,
a:active,
a:focus {
    color: #101010;
    outline: none;
    text-decoration: none !important;
}

a:link {
    text-decoration: none;
}

a:focus {
    outline: none;
}

img {
    width: 100%;
    height: auto;
}

.mb-30 {
    margin-bottom: 30px;
}

.small,
small {
    font-size: 80%;
}

b,
strong {
    color: #101010;
    font-weight: bold;
}


/*** form element ***/


/* text field */

button,
input,
optgroup,
select,
textarea {
    font-family: 'Rambla', sans-serif;
}

input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
    outline: none;
}

input[type="password"],
input[type="email"],
input[type="text"],
input[type="file"],
textarea {
    max-width: 100%;
    margin-bottom: 15px;
    border-color: #ececec;
    padding: 18px 0px 10px;
    height: auto;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-width: 0 0 1px;
    border-style: solid;
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.75em;
    font-weight: 400;
    color: #101010;
    background-image: none;
    border-bottom: 1px solid #ececec;
    border-color: ease-in-out .15s, box-shadow ease-in-out .15s;
}

input:focus,
textarea:focus {
    border-bottom-width: 2px;
    border-color: #101010;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    text-shadow: none;
    padding: 9px 20px;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 400;
    border: none;
    color: #fff;
    -webkit-transition: background-color .15s ease-out;
    transition: background-color .15s ease-out;
    background-color: #101010;
    margin-top: 10px;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    background-color: #101010;
    color: #fff;
}

select {
    padding: 10px;
    border-radius: 5px;
}

table,
th,
tr,
td {
    border: 1px solid #101010;
}

th,
tr,
td {
    padding: 10px;
}

input[type="radio"],
input[type="checkbox"] {
    display: inline;
}


/* Scrollbar  */

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
    background: #17a2b8;
}

::-webkit-scrollbar-thumb:hover {
    background: #101010;
}


/* Selection */

::-webkit-selection {
    color: #888;
    background: rgba(0, 0, 0, 0.1);
}

::-moz-selection {
    color: #888;
    background: rgba(0, 0, 0, 0.1);
}

::selection {
    color: #888;
    background: rgba(0, 0, 0, 0.1);
}


/*** 03. Sidebar styles ***/
#addo-page {
    width: 100%;
    overflow: hidden;
    position: relative;
}

#addo-aside {
    z-index: 1000;
    padding: 10px 30px;
    width: 27%;
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    overflow-y: scroll;
    z-index: 1001;
    /* background: teal; */
    /* background: linear-gradient(135deg, #22c3c9, #366d6d); Teal gradient */
    /* background-color: #007B7F; /* Base teal color */
    /* background-image: url('../backgorund_1.jpg'); Replace with your pattern image */
    background: linear-gradient(rgba(54, 172, 179, 0.6), rgba(0, 95, 97, 1.0)), url('../background_2.jpg');
    background-size: cover;

    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.225);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.225);
    scrollbar-width: none;
}

@media screen and (max-width: 1200px) {
    #addo-aside {
        width: 30%;
    }
}

@media screen and (max-width: 768px) {
    #addo-aside {
        width: 295px;
        -moz-transform: translateX(-295px);
        -webkit-transform: translateX(-295px);
        -ms-transform: translateX(-295px);
        -o-transform: translateX(-295px);
        transform: translateX(-295px);
        padding-top: 4em;
    } 


}

#addo-aside #addo-logo {
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 30px;
    line-height: 1em;
    text-transform: uppercase;
    margin-bottom: 10px; 
    display: block;
    width: 100%;  
    
} 


#addo-aside #addo-logo span {
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 400;
    letter-spacing: 3px;
}

#addo-logo-footer {
    text-align: center;
    font-weight: 400;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 0;
    display: block;
    width: 100%;
}

@media screen and (max-width: 768px) {
    #addo-aside #addo-logo {
        margin-bottom: 60px;
    }
} 

#addo-aside #addo-logo a {
    display: inline-block;
    text-align: center;
    color: #000;
    letter-spacing: 3px;
}

#addo-logo-footer a {
    display: inline-block;
    text-align: center;
    color: #101010;
} 

#addo-aside #addo-logo{
    margin-top: 0.2rem;
}

#addo-aside #addo-logo a span {
    display: block;
    margin-top: 0px;
    text-align: center;
}

#addo-aside #addo-main-menu ul {
    text-align: left;
    margin-top: 5px;
    padding: 0;
}

@media screen and (max-width: 768px) {
    #addo-aside #addo-main-menu ul {
        margin: 0 0 30px 0;
    }
} 

.project-tile h5{
    font-family: 'Oswald', sans-serif;
}

#addo-aside #addo-main-menu ul a li {
    margin: 0px 0 10px 0;
    padding: 0 0 5px 0;
    list-style: none;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 8px;
    border-bottom: 1px solid #ececec;
}


#addo-aside #addo-main-menu ul a li  {
    color: #000;
    text-decoration: none;
    position: relative;
    padding: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 450;
    -webkit-transition: 0.3s; 
    -o-transition: 0.3s;
    transition: 0.3s;
} 

#addo-aside #addo-main-menu ul a:active {
    color: #938f8f;
}

#addo-aside #addo-main-menu ul  a:hover li {
    text-decoration: none;
}

#addo-aside #addo-main-menu ul li.addo-active {
    color: #12875c;
}

#addo-aside #addo-main-menu ul li.addo-active {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

#addo-aside .addo-footer {
    position: absolute;
    bottom: 30px;
    right: 0;
    left: 0;
    font-size: 15px;
    text-align: center;
    font-weight: 400;
    color: #888;
    padding:30px;
}


/* footer */

.addo-footer p {
    margin-bottom: 0;
    color: #999;
}

.addo-footer a {
    color: #101010;
}

@media screen and (max-width: 768px) {
    #addo-aside .addo-footer {
        position: relative;
        padding-top: 90px;
    }
}

#addo-aside .addo-footer span {
    display: block; 
    
}

#addo-aside .addo-footer ul {
    padding: 0 0 5px 0;
    margin: 0 0 5px 0;
    
}

#addo-aside .addo-footer ul li {
    padding: 0;
    margin: 0;
    display: inline;
    list-style: none; 
}

#addo-aside .addo-footer ul li a {
    color: #101010;
    padding: 2px;
}

#addo-aside .addo-footer ul li a:hover,
#addo-aside .addo-footer ul li a:active,
#addo-aside .addo-footer ul li a:focus {
    text-decoration: none;
    outline: none;
    color: #101010;
}


/*** 04. Content styles ***/

#addo-main {
    width: 73%;
    float: right;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
}

@media screen and (max-width: 1200px) {
    #addo-main {
        width: 70%;
    } 

    
}

@media screen and (max-width: 768px) {
    #addo-main {
        width: 100%;
    }
}

/* For larger screens */
@media screen and (min-width: 768px) {
    .modal {
        left: var(--sidebar-width, 295px); /* Dynamically adjust based on the sidebar */
        width: calc(100% - var(--sidebar-width, 295px)); /* Adjust for the sidebar */
    }

    #addo-aside {
        z-index: 1000; /* Keep sidebar below the modal */
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 295px; /* Sidebar width */
        overflow-y: auto; /* Enable scrolling for longer menus */
    }

    #addo-main {
        margin-left: 295px; /* Sidebar offset */
        width: calc(100% - 295px); /* Adjust width to avoid overlap */
    }
}

/* For smaller screens (e.g., mobile) */
@media screen and (max-width: 767px) {
    .modal {
        left: 0 !important; /* Modal covers the entire screen */
        width: 100% !important; /* Full-screen width */
    }

    #addo-aside {
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 220px; /* Slightly smaller sidebar for mobile */
        overflow-y: auto;
    }

    #addo-main {
        margin-left: 0; /* No sidebar offset on mobile */
        width: 100%; /* Full width for the content */
    }
}


.addo-hero {
    min-height: 560px;
    background: #fff url(../images/loader.gif) no-repeat center center;
    width: 100%;
    float: left;
    margin-bottom: 0;
    clear: both;
}

.addo-hero .btn {
    font-size: 24px;
}

.addo-hero .btn.btn-primary {
    padding: 15px 30px !important;
} 

.addo-about .row {
    width: 150%; 

    
}


/*** 05. Slider styles ***/

.addo-hero .flexslider {
    border: none;
    z-index: 1;
    margin-bottom: 0;
}

.addo-hero .flexslider .slides {
    position: relative;
    overflow: hidden;
}

.addo-hero .flexslider .slides li {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    position: relative;
    min-height: 400px;
}

.addo-hero .flexslider .flex-control-nav {
    bottom: 20px;
    z-index: 1000;
    right: 20px;
    float: right;
    width: auto;
}

.addo-hero .flexslider .flex-control-nav li {
    display: block;
    margin-bottom: 6px;
}

.addo-hero .flexslider .flex-control-nav li a {
    background: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 8px;
    height: 8px;
    cursor: pointer;
}

.addo-hero .flexslider .flex-control-nav li a.flex-active {
    cursor: pointer;
    background: #101010;
}

.addo-hero .flexslider .flex-direction-nav {
    display: none;
}

.addo-hero .flexslider .slider-text {
    display: table;
    opacity: 0;
    min-height: 500px;
    padding: 0;
    z-index: 9;
}

.addo-hero .flexslider .slider-text > .slider-text-inner {
    display: table-cell;
    vertical-align: middle;
    min-height: 700px;
    padding: 20px;
    position: relative;
}

.addo-aside .image_wrap{
    width: 200px;
    height: 200px; 
    display: block;
    margin-top: 0.5rem;   
    padding-bottom: 0; 
    align-items: center; 
    /* padding-left: 2rem; */
    margin-bottom: 0rem;  
    margin-left: auto;
    margin-right: auto;
}

.addo-aside .image_wrap img{
    border-radius: 100%;
    border: 8px solid rgba(41, 41, 41, 0.1);
}
.addo-hero .flexslider .slider-text > .slider-text-inner .desc .image_wrap img {
    border-radius: 100%;
    border: 8px solid rgba(0, 0, 0, .1);
}

.addo-hero .flexslider .slider-text > .slider-text-inner .arrow {
    position: absolute;
    bottom: 3vh;
    width: 97%;
    text-align: center;
    z-index: 8;
}

.addo-hero .flexslider .slider-text > .slider-text-inner .arrow.bounce {
    -webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}

.addo-hero .flexslider .slider-text > .slider-text-inner .arrow i {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 20px;
}

.addo-hero .flexslider .slider-text > .slider-text-inner .arrow i:hover:after {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
}

@media screen and (max-width: 768px) {
    .addo-hero .flexslider .slider-text > .slider-text-inner {
        text-align: center;
    }
    .addo-hero .flexslider .slider-text > .slider-text-inner .arrow {
        width: 89%;
    }
}

.addo-hero .flexslider .slider-text > .slider-text-inner h1,
.addo-hero .flexslider .slider-text > .slider-text-inner h1 {
    font-size: 45px;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    margin: 0;
    letter-spacing: 0px;
    line-height: normal;
}

.addo-hero .flexslider .slider-text > .slider-text-inner h2,
.addo-hero .flexslider .slider-text > .slider-text-inner h2 {
    font-size: 27px;
    line-height: 1.75em;
    color: #fff;
    font-family: 'Rambla', sans-serif;
    font-weight: 700;
    margin: 0;
    letter-spacing: -1px;
}

.addo-hero .flexslider .slider-text > .slider-text-inner h2 b,
.addo-hero .flexslider .slider-text > .slider-text-inner h2 b {
    color: #fff;
}

@media screen and (max-width: 768px) {
    .addo-hero .flexslider .slider-text > .slider-text-inner h1 {
        font-size: 30px;
    }
    .addo-hero .flexslider .slider-text > .slider-text-inner h2 {
        font-size: 20px;
    }
}

.addo-hero .flexslider .slider-text > .slider-text-inner .heading-section {
    font-size: 50px;
}

@media screen and (max-width: 768px) {
    .addo-hero .flexslider .slider-text > .slider-text-inner .heading-section {
        font-size: 30px;
    }
}

.addo-hero .flexslider .slider-text > .slider-text-inner p { 
    margin-bottom: 0;
}

@media screen and (max-width: 768px) {
    .addo-hero .flexslider .slider-text > .slider-text-inner .btn {
        width: 100%;
    }
}

body.offcanvas {
    overflow-x: hidden;
}

body.offcanvas #addo-aside {
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    width: 295px;
    z-index: 999;
    position: fixed;
}

body.offcanvas #addo-main,
body.offcanvas .addo-nav-toggle {
    top: 0;
    -moz-transform: translateX(295px);
    -webkit-transform: translateX(295px);
    -ms-transform: translateX(295px);
    -o-transform: translateX(295px);
    transform: translateX(295px);
}


/*** 06. Heading styles ***/

.addo-heading {
    color: #101010;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.addo-heading span {
    display: block;
}

.addo-about-heading {
    color: #101010;
    font-family: 'Rambla', sans-serif;
    font-weight: 700;
    font-size: 24px;
} 

.addo-about-contact-wrap {
    width: 100%;
    height: auto;
    clear: both;
    float: left;
    margin-bottom: 13px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.addo-about-contact-wrap ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.addo-about-contact-wrap ul li {
    margin: 0px 0px 10px 0px;
    width: 50%;
    float: left;
}

.addo-about-contact-wrap ul li:nth-of-type(2n) {
    clear: right;
}

.addo-about-contact-wrap ul li label {
    min-width: 90px;
    display: inline-block;
    font-weight: 700;
    color: #101010;
}

.addo-about-contact-wrap ul li a {
    text-decoration: none;
    color: #888;
    position: relative;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
}

.addo-about-contact-wrap ul li a:hover {
    color: #BD0A0D;
}

.addo-post-heading {
    color: #101010;
    font-family: 'Rambla', sans-serif;
    margin-bottom: 30px;
    font-weight: 700;
    font-size: 24px;
}

.addo-post-heading span {
    display: block;
}

.heading-meta {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    color: #888;
    font-weight: 400;
    letter-spacing: 5px;
}

@media screen and (max-width: 768px) {
    .addo-post-heading {
        margin-bottom: 15px;
    }
}


/*** 07. Blog & Post styles ***/

.blog-entry {
    width: 100%;
    float: left;
    background: #fff;
    margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
    .blog-entry {
        margin-bottom: 30px;
    }
}

.blog-entry .blog-img {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}

.blog-entry .blog-img img {
    position: relative;
    max-width: 100%;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.blog-entry .desc {
    padding: 20px;
}

.blog-entry .desc h3 {
    font-size: 24px;
    margin-bottom: 10px;
    line-height: 1.75em;
    font-weight: 400;
}

.blog-entry .desc h3 a {
    color: #101010;
    text-decoration: none;
    font-family: 'Rambla', sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.blog-entry .desc span {
    display: block;
    margin-bottom: 0px;
    font-size: 13px;
    color: #888 !important;
}

.blog-entry .desc span small i {
    color: #888;
}

.blog-entry .desc .lead {
    font-size: 12px;
    color: #101010;
    font-weight: 400;
    font-family: 'Rambla', sans-serif;
}

.blog-entry .desc .lead:hover {
    color: #101010;
}

.blog-entry:hover .blog-img img {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

.addo-post img {
    padding-bottom: 30px;
}


/* Sidebar */

.addo-sidebar-part {}

.addo-sidebar-block {
    margin-bottom: 60px;
    position: relative;
}

.addo-sidebar-block .addo-sidebar-block-title {
    color: #101010;
    text-decoration: none;
    font-family: 'Rambla', sans-serif;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 10px;
}


/* Search */

.addo-sidebar-search-form {
    position: relative;
}

.addo-sidebar-search-submit {
    position: absolute;
    right: 0px;
    top: 0px;
    background: none;
    border: 0;
    padding: 12px 20px;
    font-size: 16px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    color: #888;
    background: transparent;
}


/* Categories */

.ul1 {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ul1 > li {
    padding: 5px 0;
    border-bottom: 1px solid #f7f7f7;
    line-height: 32px;
}

.ul1 > li a {
    color: #888;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}

.ul1 > li a:hover {
    color: #101010;
    text-decoration: none;
}


/* Latest Posts */

.latest {
    margin-bottom: 10px;
    border-bottom: 1px solid #f7f7f7;
    padding-bottom: 20px;
}

.latest a {
    display: block;
    text-decoration: none;
}

.latest a .txt1 {
    font-weight: 700;
    line-height: 1.75em;
}

.latest a .txt2 {
    color: #888;
    font-size: 13px;
    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}

.latest a:hover .txt2 {
    color: #101010;
}


/* Tags, Keywords */

.tags {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.tags li {
    display: inline-block;
    margin: 0 5px 5px 0px;
    float: left;
}

.tags li a {
    display: inline-block;
    background: #fff;
    border: 1px solid #ececec;
    padding: 9px 12px;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    text-decoration: none;
    font-size: 13px;
    color: #888;
    transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
}

.tags li a:hover {
    background: #101010;
    color: #fff;
    border-color: #101010;
}


/* Pagination */

.addo-pagination-wrap {
    padding: 0;
    margin: 0;
    text-align: center;
}

.addo-pagination-wrap li {
    display: inline-block;
    margin: 0 5px;
}

.addo-pagination-wrap li a {
    background: #f7f7f7;
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    color: #888;
    font-weight: 400;
    border-radius: 50%;
}

.addo-pagination-wrap li a:hover {
    opacity: 1;
    text-decoration: none;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.20);
}

.addo-pagination-wrap li a.active {
    background-color: #101010;
    border: 1px solid #101010;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .addo-pagination-wrap {
        padding: 0 0 60px 0;
        margin: 0;
        text-align: center;
    }
}


/*Post Comment */

.comments-area {
    padding: 30px 0;
}

.comments-area .comments-title {
    font-size: 24px;
    font-family: 'Rambla', sans-serif;
    line-height: 1.75em;
    font-weight: 700;
}

ol.comment-list {
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

ol.comment-list li.comment {
    position: relative;
    padding: 0;
}

ol.comment-list li.comment .comment-body {
    position: relative;
    padding: 20px 30px 20px 120px;
    margin-left: 40px;
    color: #101010;
    position: relative;
}

ol.comment-list li.comment .comment-author {
    display: block;
    margin-bottom: 0px;
}

ol.comment-list li.comment .comment-author .avatar {
    position: absolute;
    top: 20px;
    left: -40px;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    background-color: #fff;
}

ol.comment-list li.comment .comment-author .name {
    display: inline-block;
    color: #101010;
    font-family: 'Rambla', sans-serif;
    font-size: 18px;
    line-height: 1.75em;
    font-weight: 700;
    margin-bottom: 0;
}

ol.comment-list li.comment .comment-author .says {
    display: none;
    color: #888;
    font-weight: 700;
}

ol.comment-list li.comment .comment-meta {
    color: #888;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 400;
}

ol.comment-list li.comment .comment-meta a {
    color: #101010;
}

ol.comment-list li.comment .comment-meta:before,
ol.comment-list li.comment .reply a:before {
    font-family: "FontAwesome";
    font-size: 16px;
    vertical-align: top;
}

ol.comment-list li.comment p {
    font-family: 'Rambla', sans-serif;
    font-size: 15px;
    line-height: 1.75em;
    margin: 0 0 20px;
    color: #888;
}

ol.comment-list li.comment .reply a {
    position: absolute;
    top: 50px;
    right: 30px;
    margin-top: -5px;
    font-size: 13px;
    color: #888;
}

ol.comment-list li .children {
    list-style: none;
    margin-left: 80px;
}

ol.comment-list li .children li {
    padding: 0;
}

@media only screen and (max-width: 767px) {
    .comments-area .padding-30 {
        padding: 15px;
    }
    ol.comment-list li.comment .comment-body {
        margin-bottom: 30px;
        margin-left: 30px;
    }
    ol.comment-list li.comment .comment-author .avatar {
        left: -35px;
        height: 70px;
        width: 70px;
    }
    ol.comment-list li .children {
        margin-left: 20px;
    }
    ol.comment-list li.comment .reply a {
        position: static;
    }
}

@media only screen and (max-width: 480px) {
    ol.comment-list li.comment .comment-body {
        margin-left: 26px;
    }
    ol.comment-list li.comment .comment-author .avatar {
        left: -15px;
        top: 12px;
        width: 60px;
        height: 60px;
    }
    ol.comment-list li.comment .comment-body {
        padding-left: 55px;
    }
}


/*** 08. Project styles ***/

.project {
    position: relative;
    margin-bottom: 30px;
}

.project .desc {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    right: 0;
    background: rgba(0, 0, 0, .9);
    opacity: 0;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.project .desc .con {
    padding: 30px;
    display: block;
    position: relative;
}

.project .desc .con .icon {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px
}

.project .desc .con .icon span {
    display: inline;
    padding-right: 5px
}

.project .desc .con .icon span a {
    color: #ccc;
    padding: 5px;
    background: #333;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px
}

.project .desc .con .icon i {
    font-size: 16px;
    color: #ccc
}

.project .desc h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    -o-transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s, -webkit-transform .3s;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    margin-bottom: 0px
}

.project .desc h3 a {
    color: #fff
}

.project .desc span {
    display: block;
    color: #174e4b;
    font-size: 14px;
    -webkit-transition: -webkit-transform .3s, opacity .3s;
    -webkit-transition: opacity .3s, -webkit-transform .3s;
    transition: opacity .3s, -webkit-transform .3s;
    -o-transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s;
    transition: transform .3s, opacity .3s, -webkit-transform .3s;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0)
}

.project .desc span a {
    color: #101010
}

.project:hover .desc {
    opacity: 1
}

.project:hover .desc h3 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.project:hover .desc span {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.project-desc h2 {
    color: #101010;
    font-family: 'Rambla', sans-serif;
    font-weight: 700;
    font-size: 24px;
}

.project-desc span {
    display: block;
    color: #666;
    font-size: 13px;
    margin-bottom: 15px
}

.project-desc span a {
    color: #666
}

.project-desc .icon span {
    display: inline;
    padding-right: 5px
}


/*** 9. Footer styles ***/

#addo-footer2 {
    padding: 2%;
    /* background: #101010; */
    /* background-image: url(../backgorund_2.jpg);     */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgb(0, 0, 0)), url('../background_2.jpg');
}

#addo-footer2 h2 {
    margin: 0 0 10px 0;
    color: #fff;
    font-size: 35px;
    line-height: 30px;
    letter-spacing: 3px;
}

#addo-footer2 h2 span {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 400;
    letter-spacing: 3px;
} 

@media screen and (max-width: 768px) {
    #addo-footer2 {
        padding: 50px 15px 40px 15px;
        text-align: center;
    } 

    #about .addo-about .addo-about-contact-wrap .contact-btn {
        padding: 10px 30px 40px 50px;
        text-align: center;
    }
} 

.addo-lead {
    font-size: 14px;
    line-height: 2em;
    color: #fff;
}


/* social 1 */
.addo-social {
    padding: 0;
    margin: 0;
    text-align: center;
}

.addo-social li {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
}

.addo-social li a {
    font-size: 22px;
    color: #101010;
    padding: 10px;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    border-radius: 7px;
} 

#addo-footer2 .addo-narrow-content .row .col-md-4 .addo-lead img{
    max-width: 50%;
    height: auto;
    /* flex: 1;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    text-align: center; */
}

@media screen and (max-width: 768px) {
    .addo-social li a {
        padding: 10px 8px;
    }
}

.addo-social li a:hover {
    color: #101010;
}

.addo-social li a:hover,
.addo-social li a:active,
.addo-social li a:focus {
    outline: none;
    text-decoration: none;
    color: #101010;
}


/* social 2 */

ul.social-network {
    list-style: none;
    display: inline;
    margin-left: 0 !important;
    padding: 0;
    float: left;
    margin-bottom: 10px; 
}

ul.social-network li {
    display: inline;
    margin: 0 10px;
}

.social-network li a {
    display: inline-block;
    position: relative;
    margin: 0 auto 0 auto;
    font-size: 30px;
}

@media screen and (max-width: 768px) {
    ul.social-network {
        display: inherit;
        text-align: center;
        float: none;
        margin-bottom: 0;
    }
}


/*** 10. Contact styles ***/

.map-section {
    overflow: hidden;
    margin-bottom: 60px;
}

#contactMap {
    width: 100%;
    height: 550px;
}

.addo-more-contact {
    background: #fafafa;
}


/* Form */

.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
    border: none;
    border-bottom: 1px solid #e5e5e5;
    height: 54px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    padding: 0;
    font-family: 'Rambla', sans-serif;
    font-size: 15px;
    line-height: 1.75em;
    font-weight: 400;
}

.form-control:active,
.form-control:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #101010;
    border-bottom: 2px solid #101010;
}

.toolbar {
    padding: 0;
}

.btn {
    font-family: 'Rambla', sans-serif;
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    border-style: solid;
    color: #fff;
    border-width: 0;
    -webkit-transition: background-color .15s ease-out;
    transition: background-color .15s ease-out;
    background-color: #101010;
    margin-top: 10px;
    border-radius: 0;
    margin-right: 10px;
    float: left;
}

#message {
    height: 130px;
}


/*** 11. Services styles ***/

.addo-feature {
    width: 100%;
    float: left;
    margin-bottom: 30px;
    position: relative;
    text-align: center;
    padding: 30px;
    border: 1px solid #ececec;
}

.addo-feature .addo-icon {
    text-align: center;
    background: transparent;
    margin-bottom: 10px;
}

@media screen and (max-width: 1200px) {}

.addo-feature .addo-text {
    width: 100%;
}

.addo-feature .addo-text h2,
.addo-feature .addo-text h3 {
    margin: 0;
    padding: 0;
}

.addo-feature .addo-text h3 {
    font-weight: 700;
    margin-bottom: 10px;
    color: #101010;
    font-size: 18px;
    font-family: 'Rambla', sans-serif;
}

.addo-feature.addo-feature-sm .addo-text {
    margin-top: 6px;
}

.addo-feature.addo-feature-sm .addo-icon i {
    color: #101010;
    font-size: 40px;
}

@media screen and (max-width: 1200px) {
    .addo-feature.addo-feature-sm .addo-icon i {
        font-size: 28px;
    }
}


/*** 12. Navigation styles ***/

.addo-nav-toggle {
    cursor: pointer;
    text-decoration: none;
}

.addo-nav-toggle.active i::before,
.addo-nav-toggle.active i::after {
    background: #fff;
}

.addo-nav-toggle.dark.active i::before,
.addo-nav-toggle.dark.active i::after {
    background: #101010;
}

.addo-nav-toggle:hover,
.addo-nav-toggle:focus,
.addo-nav-toggle:active {
    outline: none;
    border-bottom: none !important;
}

.addo-nav-toggle i {
    position: relative;
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    width: 20px;
    height: 1px;
    color: #fff;
    font: bold 14px/.4 Helvetica;
    text-transform: uppercase;
    text-indent: -55px;
    background: #fff;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    top: -2px;
}

.addo-nav-toggle i::before,
.addo-nav-toggle i::after {
    content: '';
    width: 20px;
    height: 1px;
    background: #fff;
    position: absolute;
    left: 0;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.addo-nav-toggle.dark i {
    position: relative;
    color: #101010;
    background: #101010;
    -webkit-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

.addo-nav-toggle.dark i::before,
.addo-nav-toggle.dark i::after {
    background: #101010;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.addo-nav-toggle i::before {
    top: -7px;
}

.addo-nav-toggle i::after {
    bottom: -7px;
}

.addo-nav-toggle:hover i::before {
    top: -10px;
}

.addo-nav-toggle:hover i::after {
    bottom: -10px;
}

.addo-nav-toggle.active i {
    background: transparent;
}

.addo-nav-toggle.active i::before {
    top: 0;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.addo-nav-toggle.active i::after {
    bottom: 0;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
}

.addo-nav-toggle {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9999;
    cursor: pointer;
    opacity: 1;
    visibility: hidden;
    padding: 12px 15px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    background: #101010;
    margin: 15px 30px;
    border-radius: 50%;
}

@media screen and (max-width: 768px) {
    .addo-nav-toggle {
        opacity: 1;
        visibility: visible;
    }
}

.js .animate-box {
    opacity: 0;
}



/* 13. Team styles */

.team {
    position: relative;
    margin-bottom: 30px;
}

.team .desc {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    opacity: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

.team .desc .con {
    padding: 30px;
    display: block;
    position: relative;
}

.team .desc .con .icon {
    position: absolute;
}

.team .desc .con .icon span {
    display: inline;
    padding-right: 5px;
}

.team .desc .con .icon i {
    font-size: 16px;
    color: #fff;
}

.team .desc h3 {
    font-size: 18px;
    color: #fff;
    font-family: 'Rambla', sans-serif;
    font-weight: 700;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
    margin-bottom: 0px;
}

.team .desc h3 a {
    color: #fff;
}

.team .desc span {
    display: block;
    color: #FFF;
    font-size: 13px;
    font-weight: 400;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    -o-transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s;
    transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
    margin-bottom: 10px;
}

.team .desc span a {
    color: #101010;
}

.team:hover .desc {
    opacity: 1;
}

.team:hover .desc h3 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.team:hover .desc span {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.team-desc h2 {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.team-desc span {
    display: block;
    color: #666;
    font-size: 13px;
    margin-bottom: 15px;
}

.team-desc span a {
    color: #666;
}

.team-desc .icon span {
    display: inline;
    padding-right: 5px;
}

@media screen and (max-width:768px) {
    .team .desc {
        opacity: 1;
        background: rgba(0, 0, 0, 0.4);
    }
    .team .desc h3 {
        font-style: 28px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        color: #101010
    }
    .team .desc span {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    } 
}

.container-fluid {
    padding-right: 30px;
    padding-left: 30px;
}

.font-35px {
    font-size: 35px;
}

.font-14px {
    font-size: 14px;
}

.black-icon {
    color: #101010;
    background: transparent;
    padding: 6px;
    border-radius: 50%;
}

.white-icon {
    color: #fff;
}

hr {
    margin-top: 0px;
    margin-bottom: -20px;
    border: 0;
} 



/* 14. Section styles */

.addo-references,
.addo-testimonials,
.addo-skills,
.addo-blog,
.addo-post,
.addo-projects,
.addo-recent-projects,
.addo-team,
.addo-about,
.addo-services,
.addo-contact {
    padding-top: 60px;
    padding-bottom: 60px;
    clear: both;
    width: 98%;
    display: block;
}

@media screen and (max-width: 768px) {
    .addo-testimonials,
    .addo-skills,
    .addo-post,
    .addo-projects,
    .addo-blog,
    .addo-about,
    .addo-contact {
        padding-top: 90px;
        padding-bottom: 60px;
    }
    .addo-team {
        padding-top: 0px;
    }
    .heading-meta {
        margin-bottom: 0px;
    }
    .addo-services {
        padding-top: 90px;
        padding-bottom: 0px;
    }
    .addo-references {
        padding-top: 90px;
        padding-bottom: 0px;
    }
    .addo-recent-projects {
        padding-top: 30px;
        padding-bottom: 60px; 
    } 
    .addo-about{
        width: 75%;
    }  
    .addo-experience{
        width: 75%;
    }
}
/* Refined style for Projects section heading */
.projects-section > h2 {
    color: #101010 !important;
    font-family: 'Oswald', sans-serif !important;
    margin-bottom: 30px !important;
    margin-left: 10px;
    font-weight: 500 !important;
    font-size: 30px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}


.section {
    width: 98%;
    height: auto;
    clear: both;
    float: left;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}

#portfolio,
#contact,
#services {
    background: #fff;
}

#news,
#skills,
#references {
    background: #f7f7f7;
} 

@media screen and (max-width:300px){
    .addo-experience{ 
        padding: 0px 20px;
        width: 75%; 
        padding-left: 0.5rem;
        margin-left: 20px;
    }
} 


/* 15. Animated Headline */

.cd-headline {
    font-size: 20px;
    font-weight: 700;
    font-family: 'Rambla', sans-serif;
}

.cd-words-wrapper {
    display: inline-block;
    position: relative;
    text-align: left;
}

.cd-words-wrapper b {
    display: inline-block;
    position: absolute;
    white-space: nowrap;
    left: 0;
    top: 0;
}

.cd-words-wrapper b.is-visible {
    position: relative;
}

.no-js .cd-words-wrapper b {
    opacity: 0;
}

.no-js .cd-words-wrapper b.is-visible {
    opacity: 1;
}


/* xclip */

.cd-headline.clip span {
    display: inline-block;
    padding: 0.2em 0;
}

.cd-headline.clip .cd-words-wrapper {
    overflow: hidden;
    vertical-align: top;
}

.cd-headline.clip .cd-words-wrapper::after {
    /* line */
    content: '';
    position: absolute;
    top: 25%;
    right: 0;
    width: 4px;
    height: 50%;
    background-color: #fff;
}

.cd-headline.clip b {
    opacity: 0;
    font-weight: 700;
}

.cd-headline b.is-visible {
    opacity: 1;
}


/* 16. Skills Progress Bar */

.bar {
    position: relative;
    background-color: #ececec;
    height: 3px;
    margin: 0 0 15px 0;
}

.bar-fill {
    position: absolute;
    height: 3px;
}

.bar-title {
    position: relative;
    font-family: 'Rambla', sans-serif;
    font-size: 15px;
    text-align: left;
    margin: 0 0 5px 0;
    color: #101010;
}

.percent {
    position: absolute;
    right: 0;
}


/* Animations for Skills Progress Bar */

.bar-fill-developer {
    width: 90%;
    background-color: #101010;
    animation: bar-fill-developer 2s ease-out;
    -moz-animation: bar-fill-developer 2s ease-out;
    -webkit-animation: bar-fill-developer 2s ease-out;
}

@keyframes bar-fill-developer {
    0% {
        width: 0px;
    }
    100% {
        width: 90%;
    }
}

@-moz-keyframes bar-fill-developer {
    0% {
        width: 0px;
    }
    100% {
        width: 90%;
    }
}

@-webkit-keyframes bar-fill-developer {
    0% {
        width: 0px;
    }
    100% {
        width: 90%;
    }
}

.bar-fill-photoshop {
    width: 80%;
    background-color: #101010;
    animation: bar-fill-photoshop 2s ease-out;
    -moz-animation: bar-fill-photoshop 2s ease-out;
    -webkit-animation: bar-fill-photoshop 2s ease-out;
}

@keyframes bar-fill-photoshop {
    0% {
        width: 0px;
    }
    100% {
        width: 80%;
    }
}

@-moz-keyframes bar-fill-photoshop {
    0% {
        width: 0px;
    }
    100% {
        width: 80%;
    }
}

@-webkit-keyframes bar-fill-photoshop {
    0% {
        width: 0px;
    }
    100% {
        width: 80%;
    }
}

.bar-fill-webdesign {
    width: 95%;
    background-color: #101010;
    animation: bar-fill-webdesign 2s ease-out;
    -moz-animation: bar-fill-webdesign 2s ease-out;
    -webkit-animation: bar-fill-webdesign 2s ease-out;
}

@keyframes bar-fill-webdesign {
    0% {
        width: 0px;
    }
    100% {
        width: 95%;
    }
}

@-moz-keyframes bar-fill-webdesign {
    0% {
        width: 0px;
    }
    100% {
        width: 95%;
    }
}

@-webkit-keyframes bar-fill-webdesign {
    0% {
        width: 0px;
    }
    100% {
        width: 95%;
    }
}

.bar-fill-socialmedia {
    width: 85%;
    background-color: #101010;
    animation: bar-fill-socialmedia 2s ease-out;
    -moz-animation: bar-fill-socialmedia 2s ease-out;
    -webkit-animation: bar-fill-socialmedia 2s ease-out;
}

@keyframes bar-fill-socialmedia {
    0% {
        width: 0px;
    }
    100% {
        width: 85%;
    }
}

@-moz-keyframes bar-fill-socialmedia {
    0% {
        width: 0px;
    }
    100% {
        width: 85%;
    }
}

@-webkit-keyframes bar-fill-socialmedia {
    0% {
        width: 0px;
    }
    100% {
        width: 85%;
    }
}



/* 17. Button style */
/* button primary */
.button-primary {
  display: inline-block;
  height: auto;
  padding: 15px 32px;
  border: 1px solid transparent;
  border-radius: 80px;
  background-color: #45b4bb;
  -webkit-transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  color: #030303;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
}
.button-primary:hover,
.button-primary:focus {
  border: 1px solid #101010;
  background-color: transparent;
  color: #101010;
}

/* button secondary */
.button-secondary {
  display: inline-block;
  height: auto;
  padding: 15px 32px;
  border: 1px solid #101010;
  border-radius: 80px;
  background-color: transparent;
  -webkit-transition: border-color 400ms ease, background-color 400ms ease;
  transition: border-color 400ms ease, background-color 400ms ease;
  color: #101010;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}
.button-secondary:hover {
  border-color: #000;
  background-color: #101010;
  color: #fff;
}

/* button tersiyer */
.button-tersiyer {
  display: inline-block;
  height: auto;
  padding: 15px 32px;
  border: 1px solid #fff;
  border-radius: 80px;
  background-color: transparent;
  -webkit-transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
  color: #fff;
  line-height: 20px;
  font-weight: 500;
  text-align: center;
}
.button-tersiyer:hover {
  border: 1px solid #fff;
  background-color: #fff;
  color: #101010;
}



/* button link */
.link-btn {
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
    margin-bottom: -2px;
}
.link-btn i {
    margin-left: 5px;
    font-size: 10px;
}
.link-btn:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px;
    background-color: #101010;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s
}
.link-btn:hover::before {
    width: 100%
}


/* ======= toTop Button style ======= */
.progress-wrap {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.progress-wrap::after {
    position: absolute;
    font-family: 'themify';
    content: '\e648';
    text-align: center;
    line-height: 40px;
    font-size: 12px;
    font-weight: 700;
    color: #555;
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.progress-wrap svg path {
    fill: none;
}
.progress-wrap svg.progress-circle path {
    stroke: #555;
    stroke-width: 3;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}
.progress-wrap {
    -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.progress-wrap::after {
    color: #555
}
.progress-wrap svg.progress-circle path {
    stroke: #555;
} 

/* adjust side menu alignment */
/* #addo-main-menu .nav-item {
    display: flex; /* Align icon and text horizontally */
    /* align-items: center; Center icon and text vertically */
    /* margin: 10px 0; Add spacing between menu items */
/* } */

#addo-main-menu .nav-item a {
    display: flex; /* Treat icon and text as a single row */
    align-items: center; /* Align items in the center */
    text-decoration: none; /* Remove underline */
    font-size: 15px; /* Adjust text size */
    color: #333; /* Set link color */
    transition: color 0.3s ease; /* Smooth hover effect */
}

#addo-main-menu .nav-item a:hover {
    color: #007bff; /* Change text color on hover */
}

#addo-main-menu .nav-item i {
    width: 24px; /* Set fixed width for icons */
    text-align: center; /* Center icons within the fixed width */
    margin-right: 5px; /* Add space between icon and text */
}



/* New */  
/* Education */

#education .addo-education{ 
    padding: 0px 50px;  
    width: 98%;
    background-color:#f7f7f7;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem;
}   

#education .addo-education .box-container {
    padding-bottom: 0px; 
    width: 100%;
    margin: 0rem 1rem;  
    margin-bottom: 3rem;
    padding-left: 2.2rem; 
    border-left: 0.3rem solid #c4d5ce; 
} 

#education .addo-education .box-container .box h6{
    margin-bottom: 0px;
}

#education .addo-education .box-container .box ul li{
    list-style-type: disc;
    color: #12875c
}

#education .addo-education .box-container .box span{
    font-size: 1rem; 
}

#education .addo-education .box-container .box i{
    position: absolute; 
    background-color: #27b476; 
    margin-left: -3.8rem;
    width: 3rem;  
    height: 3rem;
    line-height: 2.6rem;
    text-align: center; 
    font-size: 1.4rem;    
    border-radius: 50%; 
    text-align: center; 
    border-style: solid; 
    color: #FFF;
}   

/* Academic Experience */ 
#academic-experience .addo-experience{ 
    padding: 0px 50px; 
    width:98%;
    background-color:#fff;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem;
}   

#academic-experience .addo-experience .box-container {
    padding-bottom: 0px; 
    width: 100%;
    margin: 0rem 1rem;  
    margin-bottom: 3rem;
    padding-left: 2.2rem; 
    border-left: 0.3rem solid #c4d5ce;
}    
#academic-experience .addo-experience .box-container .box h6{
    margin-bottom: 0px;
}

#academic-experience .addo-experience .box-container .box span{
    font-size: 1rem; 
}

#academic-experience .addo-experience .box-container .box i{
    position: absolute; 
    background-color: #27b476; 
    margin-left: -3.8rem;
    width: 3rem;  
    height: 3rem;
    line-height: 2.6rem;
    text-align: center; 
    font-size: 1.4rem;    
    border-radius: 50%; 
    text-align: center; 
    border-style: solid; 
    color: #FFF;
    
}    

#academic-experience .addo-experience .box-container .box ul li{
    list-style-type: disc;
    color: #12875c
} 

#academic-experience .addo-experience .box-container .box ul li ul li{
    list-style-type: circle;
}


/* Professional Experience */
#professional-experience .addo-experience{ 
    padding: 0px 50px; 
    width: 98%;
    background-color:#f7f7f7;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem; 
}   

#professional-experience .addo-experience .box-container {
    padding-bottom: 0px; 
    width: 90%;
    margin: 0rem 1rem;  
    margin-bottom: 3rem;
    padding-left: 2.2rem; 
    border-left: 0.3rem solid #c4d5ce;
}   

#professional-experience .addo-experience .box-container .box h6{
    margin-bottom: 0px;
}
#professional-experience .addo-experience .box-container .box span{
    font-size: 1rem; 
}

#professional-experience .addo-experience .box-container .box i{
    position: absolute; 
    background-color: #27b476; 
    margin-left: -3.8rem;
    width: 3rem;  
    height: 3rem;
    line-height: 2.6rem;
    text-align: center; 
    font-size: 1.5rem;    
    border-radius: 50%; 
    text-align: center; 
    border-style: solid; 
    color: #FFF;
    
}    

#professional-experience .addo-experience .box-container .box ul li{
    list-style-type: disc;
    color: #12875c
} 

#professional-experience .addo-experience .box-container .box ul li ul li{
    list-style-type: circle;
}


/* Award */ 

#award .addo-award{ 
    padding: 0px 50px; 
    background-color:#ffffff;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem; 
    width: 98%;
}   

/* #award .addo-award .box-container .box{
    padding-bottom: 10px; 
    width: 90%; 
    margin: 2rem 1rem; 
    padding-left: 1rem;
}    */

#award .addo-award .box-container .box span{
    font-size: 1rem; 
}

#award .addo-award .box-container .box i{
    position: absolute; 
    /* margin-top: -4.5rem;  */
    margin-left: -3.8rem;
    height: 3rem;
    width: 3rem;  
    line-height: 2.6rem;
    text-align: center; 
    font-size: 1.7rem;    
    border-radius: 50%; 
    text-align: center; 
    border-style: solid;
    
}    

#award .addo-award .box-container .box ul li{
    list-style-type:disc ;
    color: #12875c
}  
#award .addo-award .addo-heading h2{ 
    color: #101010;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    line-height: 1.75em;
    margin: 0 0 10px 0; 
}

/* teaching and monitoring */ 

#teaching-monitoring .addo-teaching{ 
    padding: 0px 50px; 
    width: 98%;
    background-color:#f7f7f7;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem;
}   

#teaching-monitoring .addo-teaching .box-container {
    padding-bottom: 0px; 
    width: 90%;
    margin: 0rem 1rem;  
    /* margin-bottom: 3rem; */
    padding-left: 2.2rem; 
    border-left: 0.3rem solid #c4d5ce; 
}   

#teaching-monitoring .addo-teaching .box-container .box span{
    font-size: 1rem; 
}

#teaching-monitoring .addo-teaching .box-container .box i{
    position: absolute; 
    background-color: #27b476; 
    /* margin-top: 0.9rem;  */
    margin-left: -3.8rem;
    width: 3rem;  
    height: 3rem;
    line-height: 2.6rem;
    text-align: center; 
    font-size: 1.4rem;    
    border-radius: 50%; 
    text-align: center; 
    border-style: solid; 
    color: #FFF;
    
}    

#teaching-monitoring .addo-teaching .box-container .box ul li{
    list-style-type: disc;
    color: #12875c
} 

#teaching-monitoring .addo-teaching .box-container .box ul li ul li{
    list-style-type: circle;
} 

/* project Supervision */ 

#project-supervision .addo-project-supervision{  
    width: 100%;
    padding: 0px 50px; 
    width: 98%;
    background-color:#f7f7f7;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem;
} 

#project-supervision .addo-project-supervision .box-container ul li{ 
    list-style: disc;
    margin: 0 0 20px;
    color: #12875c
}

/* Publication */
 

#publication .addo-publication{ 
    padding: 0px 50px; 
    width: 98%;
    background-color:#f7f7f7;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem;
}     

#addo-aside #addo-main-menu ul .nav-link {
    padding: 1.5% 0;
    padding-left: 0.4rem; 
}

#addo-aside #addo-main-menu ul .nav-link {
    color: #000; /* Set a darker, more distinct text color */
}

#addo-aside #addo-main-menu ul .nav-link:hover {
    /* background-color: #389274; A vibrant blue for hover */
    background-color: #389274;
    color: #f7f8f8; /* White text on hover for contrast */
}
#publication .addo-publication .box-container p img{
    height: 35px;
    width: 35px; 
    margin-right: 5px;
} 

#publication .addo-publication .box-container ul li{ 
    list-style: disc;
    margin: 0 0 20px;
    color: #12875c
}

/* research grant */
#research-grant .addo-research-grant{ 
    padding: 0px 50px;  
    width: 98%;
    background-color:#fff;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem;
}

#research-grant .addo-research-grant .box-container .box ul li{
    list-style-type:disc ;
    color: #12875c
}  

/* External Projects */ 
#externel-projetc .addo-external-project{ 
    padding: 0px 50px; 
    width: 98%;
    background-color:#fff;    
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem;
}   

#externel-projetc .addo-external-project .box-container ul li{
    list-style-type: disc;
    color: #12875c
}

/* Academic Sevice */

#academic-service .addo-academic-service{ 
    padding: 0px 50px;  
    width: 98%;
    background-color:#ffffff;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 1rem 0; 
    padding-left: 2rem; 
    margin-right: 2rem;
}  

/* #academic-service .addo-academic-service .box-container .box{
    padding-bottom: 10px; 
    width: 90%; 
    margin: 2rem 1rem; 
    padding-left: 1rem; 
}    */

#academic-service .addo-academic-service .box-container .box span{
    font-size: 1rem; 
}

#academic-service .addo-academic-service .box-container .box i{
    position: absolute; 
    margin-top: -4.5rem; 
    margin-left: -6.5rem;
    height: 4rem;
    width: 4rem;  
    line-height: 4rem;
    text-align: center; 
    font-size: 1.7rem;    
    border-radius: 25%; 
    text-align: center; 
    border-style: solid; 
}    

#academic-service .addo-academic-service .box-container .box ul li{
    list-style-type:disc ;
    color: #12875c
}  
#academic-service .addo-academic-service .addo-heading h2{ 
    color: #101010;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    line-height: 1.75em;
    margin: 0 0 10px 0; 
} 


/* About */ 
#about .addo-about .container-fluid p img{
    height: 45px;
    width: auto; 
    margin-right: 20px;
}      

#about .addo-about .container-fluid .Social-row{
    margin-left: -5px; 
    margin-top: 20px;
} 

#about .addo-about .container-fluid .Social-row ul.social-network {
    list-style: none;
    margin-left: 0 !important;
    padding: 0;
    float: left;
}

#about .addo-about .container-fluid .Social-row ul.social-network li {
    text-align: -webkit-match-parent;
} 

#about .addo-about .container-fluid .Social-row ul.social-network li i{ 
    font-size: 20px;
    background:#000; 
    width: 3rem;
    height: 3rem;  
    text-align: center; 
    line-height: 50px !important;  
    border-radius: 50%; 
    color: #fff;


}  

.addo-aside .Social-row .a-Social-row{
    margin-top: 20px;  
    padding:30px
} 

.addo-aside .Social-row .a-social-network {
    list-style: none;
    padding: 0;
    float: left;
}

.addo-aside .Social-row .a-social-network li {
    text-align: center; 
    display: inline; 
    margin-left: 10px; 
    margin-bottom: 50px; 
    position: relative;
} 

.addo-aside .Social-row .a-social-network li i{ 
    font-size: 20px;
    text-align: center; 
    line-height: 50px;  
    color: #000;
}  

#contact .addo-contact{
    background-color:#f7f7f7 ;
}

/* Media Query */  
@media only screen and (min-width: 1900px){
    #education .addo-education h2,
    #award .addo-award h2, 
    #professional-experience .addo-experience h2, 
    #academic-experience .addo-experience h2 ,
    #teaching-monitoring .addo-teaching h2,
    #publication .addo-publication h2,
    #research-grant .addo-research-grant h2,
    #externel-projetc .addo-external-project h2, 
    #project-supervision .addo-project-supervision h2{
    font-weight: 500;
    line-height: 1.75em;
    margin-bottom: 0px; 
    margin-top: 10px;
    margin-right: 400px; 
    display: inline;  
    float: left; 
    text-align: left; 
    padding-right: 600px; 
    }    
} 

.addo-aside .navbar-nav .show>.nav-link,
.addo-aside .navbar-nav .active>.nav-link,
.addo-aside .navbar-nav .nav-link.show,
.addo-aside .navbar-nav .nav-link.active,
.addo-aside .navbar-nav .nav-link:hover,
.addo-aside .navbar-nav .nav-link:focus {
	background: #dffefe;
}


/* Projects Section */
.projects-section {
    padding: 40px 20px;
    background-color: #ffffff;
    text-align: center;
}

.projects-section h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-transform: uppercase;
    color: #333;
}

/* Tile Container */
.projects-tiles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Space between tiles */
}

/* Project Tile Styling */
.project-tile {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    width: 30%;
    cursor: pointer; /* Indicate clickability */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* For smaller screens (e.g., mobile) */
@media screen and (max-width: 767px) {
    /* Project Tile Styling */
    .project-tile {
        background-color: #ffffff;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 0px;
        width: 47%;
        cursor: pointer; /* Indicate clickability */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
}

.project-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Modal Styling */
.modal {
    z-index: 2000; /* Ensure it stays above other elements */
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: var(--sidebar-width, 295px); /* Use CSS variable or fallback for the sidebar width */
    width: calc(100% - var(--sidebar-width, 295px)); /* Calculate remaining space dynamically */
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    max-width: 80%; /* Ensure modal doesn't exceed a comfortable width */
    max-height: 90%; /* Limit height to avoid overflow */
    overflow-y: auto; /* Enable scrolling for larger content */
    position: relative;
}

#modal-media img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}

#modal-media iframe {
    width: 100%;
    height: 400px;
    margin-top: 20px;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

.close-button:hover {
    color: #007acc;
}

/* NEW ABOUT ME */
.about-me-container {
    padding-left: 2%;
    max-width: 95%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 5%;
    justify-content: space-between;
  }

.about-me-section {
    padding: 20px 30px;
    background-color: #f7f7f7;
    font-family: inherit;
    color: #333333;
    width: 98%;
}

.about-me-section h2 {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}

.about-me-section p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.about-me-column {
    flex: 1;
    max-width: 35%;
}

.about-me-column h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.about-me-column ul {
    list-style-type: none;
    padding: 0;
}

.about-me-column ul li {
    margin-bottom: 10px;
    font-size: 16px;
    position: relative;
    padding-left: 20px;
}

.about-me-column ul li::before {
    content: "\2022";
    color: #039999;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
}

.fa {
    margin-right: 10px;
    color: #039999;
}

.about-me-column-compact {
    flex: 1 1 20%; /* Adjust width to suit compact content */
    min-width: 150px; /* Ensure it doesn't shrink too much */
    max-width: 250px; /* Upper limit for compact columns */
    /* padding: 0px; */
    text-align: justify;
    /* border-left: 1px solid #ddd; Optional: Add structure */
}

.about-me-column-compact h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.about-me-column-compact ul {
    list-style-type: none;
    padding: 0;
}

.about-me-column-compact ul li {
    margin-bottom: 10px;
    font-size: 16px;
    position: relative;
    padding-left: 25px;
}

.about-me-column-compact ul li::before {
    content: "\2022";
    color: #039999;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
}

.about-me-column-expanded {
    flex: 1 1 20%; /* Adjust width to suit compact content */
    min-width: 150px; /* Ensure it doesn't shrink too much */
    max-width: 100%; /* Upper limit for compact columns */
    padding: 0px;
    text-align: justify;
    /* border-left: 1px solid #ddd; Optional: Add structure */
}

.about-me-column-expanded h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.about-me-column-expanded ul {
    list-style-type: none;
    padding: 0;
}

.about-me-column-expanded ul li {
    margin-bottom: 10px;
    font-size: 16px;
    position: relative;
    padding-left: 25px;
}

.about-me-column-expanded ul li::before {
    content: "\2022";
    color: #039999;
    font-size: 20px;
    position: absolute;
    left: 0;
    top: 0;
}
/* For smaller screens (e.g., mobile) */
@media screen and (max-width: 767px) {
    .about-me-container {
        padding-left: 5%;
        max-width: 95%;
        display: flex;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 15px;
        justify-content: space-between;
        flex-direction: column;
        text-align: justify;
      } 
      .about-me-column {
        flex: 1;
        max-width: 100%;
    }
    .about-me-section {
        padding: 0px 20px;
        background-color: #f7f7f7;
        font-family: inherit;
        color: #333333;
        text-align: justify;
    }
}