/* CSS Index
-----------------------------------
1.default css
2.header section 
3.banner section
4.responsibility section
5.magnitude section
6.future southeast section
7.featured projects section
8.testimonial slider section
9.safety section
10.cta section
11.footer section
-----------------------------------
*/


/* default css start */
@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&family=Rajdhani:wght@300;400;500;600;700&display=swap');

/* font  family  */
.tk-la{
    font-family: "La Belle Aurore", cursive;
}
.tk-rajdhani{
    font-family: "Rajdhani", sans-serif;
}
.tk-coolvetica{
    font-family: 'Coolvetica'; 
}
@font-face {
    font-family: 'Coolvetica';
    src: url('../fonts/CoolveticaRg-Regular.woff2') format('woff2'),
      url('../fonts/CoolveticaRg-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
  }
  


body {
    background-color:#222831;
    color: #EEEEEE;
	font-size: 16px;
	line-height: 1.5;
	font-weight: 400;
    font-family: "Rajdhani", sans-serif;
}

html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.row {
    --bs-gutter-y: 40px;
}
main {
    position: relative;
    z-index: 9;
    width: calc(100% - 270px);
    margin-right: 0;
    margin-left: auto;
    padding: 20px 0;
}
section{
   min-height: 100vh;
}
a {
	text-decoration: none;
	color: #EEEEEE;
}

a:hover {
	color: #EEEEEE;
}

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

.bg-fix {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

    /* Mouse pointer */
    #mousepointer
    {
        z-index:999999;
        height: 40px;
        width: 40px;
        position: fixed;
        pointer-events:none;
        -webkit-transition:left .15s ease-out, top .15s ease-out;
        -o-transition:left .15s ease-out, top .15s ease-out;
        transition:left .15s ease-out, top .15s ease-out;
        mix-blend-mode:difference;
    }

    #mousepointer>div
        {
        width:10px;
        height:10px;
        position: absolute;
        top:0px;
        bottom:0px;
        left:0px;
        right:0px;
        margin:auto;
        opacity:1;
        border-radius: 50%;
        -webkit-transition:all .5s ease-out;
        -o-transition:all .5s ease-out;
        transition:all .5s ease-out;
        background-color: #00ADB5;
    }

    #mousepointer>div>img,
    #mousepointer>div>span,
    #mousepointer>div>div
    {
        display:block;
        width:50%;
        position:absolute;
        top:50%;
        left:0px;
        right:0px;
        margin:auto;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        opacity:0;
        -webkit-transition:opacity .3s ease-out;
        -o-transition:opacity .3s ease-out;
        transition:opacity .3s ease-out;
        will-change: opacity; 
    }

    #mousepointer>div>span,
    #mousepointer>div>div
    {
        width:100%;
        text-align:center;
        color:#000;
    }

    #mousepointer>div>*.active
    {
        opacity:1;
        -webkit-transition:opacity .5s ease-out;
        -o-transition:opacity .5s ease-out;
        transition:opacity .5s ease-out;
        will-change: opacity; 
    }

    #mousepointer.active>div
    {
        width:100%;
        height:100%;
        -webkit-transition:all .5s linear;
        -o-transition:all .5s linear;
        transition:all .5s linear;
    }

    #mousepointer.active_text
    {
        opacity:0;
        -webkit-transition:opacity .5s ease-out;
        -o-transition:opacity .5s ease-out;
        transition:opacity .5s ease-out;
        will-change: opacity; 
    }
/* container */
.container {
	max-width: 1164px;
}

/* preloader */
#preloader {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	z-index: 9999;
}

/* heading  style*/
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #00ADB5;
	font-weight: 700;
	line-height: 1.2;
    font-family: 'Coolvetica';
    letter-spacing: 1.08px;
}

h1 {
	font-size: 56px;
}

h2 {
	font-size: 48px;
}

h3 {
	font-size: 40px;
}

h4 {
	font-size: 32px;
}

h5 {
	font-size: 24px;
}

h6 {
	font-size: 20px;
}

/* all button */

.portfolio-btn {
    color: #EEEEEE;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid #EEEEEE;
    border-radius: 100px;
    background-color: transparent;
    text-align: center;
    display: inline-block;
    transition: all 0.6s cubic-bezier(0.38, 0.005, 0.215, 2); /* Slower transition */
    overflow: hidden;
    position: relative;
    z-index: 1;
    font-size: 16px;
    padding: 10px 30px;
    letter-spacing: 1.08px;
}
.portfolio-btn i {
    margin-right: 8px;
}

.portfolio-btn:hover{
    border-color: #00ADB5;
}
.portfolio-btn:hover::before {
    --size: 450px;
}
.portfolio-btn::before {
    --size: 0;
    content: "";
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background-color: #00ADB5;
    transition: width 0.2s ease, height 0.2s ease;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: -1;
}
.mb-p p:last-child{
    margin-bottom: 0;
}

/* section padding start */
.section-padding {
	padding: 112px 0;
}

/* section padding end */


/* background color  */


/* background color  */

/* color */
.color-cerulean{
    color: #00ADB5 !important;
 }
/* color */


/* input  */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

textarea, input[type="search"], input[type="url"], input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="date"] {
    width: 100%;
    border: 0;
    background: #393E46;
    font-size: 16px;
    color: #fff;
    padding: 8px 12px;
    box-sizing: border-box;
}

textarea:focus,
input[type="url"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="search"]:focus {
	outline: 0;
}
textarea:focus::placeholder,
input:focus::placeholder {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

textarea{
	min-height: 180px;
}
::placeholder {
	color: #B8B8B8;
}

.input-search-wrapper input[type="search"] {
	color: #898989;
	padding: 12px 12px 12px 52px;
	border-radius: 100px;
}

.input-search-wrapper ::placeholder {
	color: #898989;
}

.body-color{
    background-color:#2A2E37;
    color: #EEEEEE;
}
.header-color1{

    color: #0CEDE2;
}

/* input  */


/* default css end */

/* offcanvas */
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl {
    --bs-offcanvas-width: 500px;
}
.offcanvas-header {
    padding: 15px 30px;
}
.offcanvas-body {
    padding: 20px 50px;
}
/* offcanvas */


/* header section start */


/* mobile menu */
.offcanvas-header h5 ,
.mobile-header-logo h5 {
    font-family: "Rajdhani", sans-serif;

}
.menu-icon{
    border: 0;
    background-color: transparent;
    height: 16px;
    width: 20px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    padding: 0;
    position: relative;
    z-index: 1;
}
.menu-icon span{
    height: 2px;
    width: 100%;
    background-color: #00ADB5;
    display: inline-block;
}
.mobile-header {
    padding: 10px 0;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5);
    position: fixed;
    width: 100%;
    z-index: 999;
    top: 0;
    left: 0;
}
.close-icon {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 0;
    height: 18px;
    width: 18px;
    -webkit-transition: top ease-in-out.3s, -webkit-transform ease-in-out.3s .3s;
    -o-transition: top ease-in-out.3s, transform ease .3s .3s;
    transition: background-color ease-in-out.3s, top ease-in-out.3s, transform ease-in-out.3s .3s, -webkit-transform ease-in-out.3s .3s;
    justify-content: center;
    transform: translateY(-2px);
    border: 0;
    background-color: transparent;
}
.close-icon span {
    display: inline-block;
    background-color: #00ADB5;
    height: 2px;
    width: 18px;
    transition: all 0.5s ease-out;
}
.mobile-menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.mobile-menu ul li {
    margin-bottom: 15px;
}
.mobile-menu ul li a {
    color: #000;
    font-weight: 700;
    font-size: 20px;
    line-height: 1.3;
    transition: all 0.3s ease-in-out;
}
.mobile-menu ul li a i{
    display: inline-block;
    margin-right: 12px;
    width: 25px;
    transition: all 0.3s ease-in-out;
}
.mobile-menu ul li a:hover{
    color: #00ADB5;
}
.mobile-menu nav {
    margin-bottom: 40px;
}
.mobile-menu h6{
    margin-bottom: 0;
    font-family: "Rajdhani", sans-serif;
}
.mobile-menu .my-socails-link-wrapper {
    margin-top: 10px;
}
/* mobile menu */




.header-area {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 250px;
    background-color: #393E46;
    z-index: 999;
}
.my-img img {
    height: 80px;
    width: 80px;
    display: block;
    margin-right: auto;
    margin-left: auto;
    border-radius: 100%;
    object-fit: cover;
    object-position: top;
    margin-bottom: 8px;
}
.my-information-info h5 {
    color: #EEEEEE;
    margin-bottom: 0;
    font-family: "Rajdhani", sans-serif;
}
.my-information-info p {
    font-size: 14px;
}
.my-socails-link-wrapper a {
    display: inline-block;
    margin-right: 5px;
    transition: all 0.3s linear;
}
.my-socails-link-wrapper a:last-child{
    margin-right: 0;
}
.my-socails-link-wrapper a i {
    color: #EEEEEE;
    font-size: 15px;
    background: #00ADB5;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    transition: all 0.3s linear;
}
.my-socails-link-wrapper a:hover i{
    background-color: #EEEEEE;
    color: #00ADB5;
}
.my-socails-link-wrapper {
    margin-top: 24px;
}
.sidebar-portoflio {
    padding: 0 15px;
}
.my-profile {
    border-bottom: 1px solid #eeee;
    margin-bottom: 30px;
    padding: 30px 0;
}

/* main menu start*/
.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.main-menu ul li {
    display: block;
    margin-bottom: 10px;
    background-color: transparent;
    padding: 10px 16px;
    border-radius: 10px;
    transition: all 0.3s linear;
}
.main-menu ul li:hover{
    background-color:#00ADB5;
}
.main-menu ul li:last-child{
    margin-bottom: 0;
}
.main-menu ul li a{
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.3;
    gap: 10px;
}
.main-menu ul li a i {
    font-size: 20px;
    width: 25px;
    height: auto;
    display: inline-block;
}
/* main menu end*/
/* header section end */

/* banner section start */
/* tag design start */
.top-head-tags-area {
    margin-bottom: 30px;
}
.tags {
    color: #00ADB5;
    opacity: 0.8;
    font-size: 18px;
    font-family: "La Belle Aurore", cursive;
}
.body-tag{
    margin-left: 15px;
}
.text-zone h1::before {
    content: "<h1>";
    font-family: "La Belle Aurore", cursive;
    color: #00ADB5;
    font-size: 18px;
    position: absolute;
    margin-top: -20px;
    opacity: 0.6;
    font-weight: 400;
}
.text-zone h1::after {
    content: "</h1>";
    font-family: "La Belle Aurore", cursive;
    color: #00ADB5;
    font-size: 18px;
    margin-top: 10px;
    position: absolute;
    animation: fadeIn 1s 1.7s backwards;
    opacity: 0.6;
    font-weight: 400;
}
.text-zone h2::before {
    content: "<h2>";
    font-family: "La Belle Aurore", cursive;
    color: #00ADB5;
    font-size: 18px;
    position: absolute;
    margin-top: -20px;
    opacity: 0.6;
    font-weight: 400;
}
.text-zone h2::after {
    content: "</h2>";
    font-family: "La Belle Aurore", cursive;
    color: #00ADB5;
    font-size: 18px;
    margin-top: 10px;
    position: absolute;
    animation: fadeIn 1s 1.7s backwards;
    opacity: 0.6;
    font-weight: 400;
    display: block;
}
.text-zone .paragrap-area::before {
    content: "<p>";
    font-family: "La Belle Aurore", cursive;
    color: #00ADB5;
    font-size: 18px;
    position: absolute;
    margin-top: -27px;
    opacity: 0.6;
}
.text-zone .paragrap-area::after {
    content: "</p>";
    font-family: "La Belle Aurore", cursive;
    color: #00ADB5;
    font-size: 18px;
    position: absolute;
    margin-top: 0px;
    animation: fadeIn 1s 1.7s backwards;
    opacity: 0.6;
}

.layout-design {
    margin: 0 30px;
}
/* tag design end*/
.banner-content-wrapper  .paragrap-area {
    margin-top: 75px;
}
.banner-content-wrapper .portfolio-btn{
    margin-top: 55px;
}
.banner-content-wrapper p {
    font-weight: 600;
    letter-spacing: 1.08px;
    font-size: 20px;
}
.title-wrapper{
    font-size: 110px;
}
/* banner section end */

/* about me section start */
.about-me-content  .paragrap-area {
    margin-bottom: 55px;
}

/* about me section end */

/* skill and experience section start  */
.skill-content-wrapper .paragrap-area{
    margin-top: 70px;
}

.prograss-item h6 {
    color: #EEEEEE;
}
.prograss-info {
    height: 6px;
    background: #EEEEEE;
    border-radius:4px;
    margin-top: 5px;
}

.prograss-inner-info {
    background: #00ADB5;
    height: 6px;
}
.prograss-item {
    margin-bottom: 15px;
}
.prograss-item:last-child {
    margin-bottom: 0px;
}
.box-area {
    background: #393E46;
    padding: 15px;
    flex-basis: 50%;
    min-height: 292px;
}

.box-area p {
    font-size: 13px;
}
.skills-box {
    display: flex;
    align-items: start;
    gap: 10px;
    margin-top: 30px;
}
.time-line{
    margin-bottom: 10px;
}
.time-line span i{
    display: inline-block;
    margin-right: 5px;
}
.time-line span {
    display: block;
}
.counter-wrapper {
    margin-top: 50px;
}
.counter {
    font-size: 80px;
    display: inline-block;
    font-weight: 700;
    line-height: 1.2;
}
/* skill and experience section end  */

/* portfolio section start */
.portfolio-content .paragrap-area{
    margin-top: 70px;
}
.showcase-area {
    margin-top: 50px;
}
.filter-buttons {
    margin-bottom: 40px;
    gap: 16px;
}

.filter-buttons button {
    border: 0;
    background: transparent;
    color: #eee;
    font-size: 20px;
    font-weight: 600;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid transparent;
    transition: all 0.5s ease-in-out;
}
.filter-buttons button:hover ,
.filter-buttons button.active{
    color: #00ADB5;
    border-color:#00ADB5;
}
.project-card .project-img:first-child img {
    transform: scale(1);
    transition: all 0.5s ease-in-out;
}
.project-card .project-img:first-child {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    transform: translatex(50%) scalex(2);
    opacity: 0;
    filter: blur(10px);
}
.project-card .project-img {
    position: relative;
    overflow: hidden;
    width: 100%;
    display: block;
    transition: all 0.5s ease-in-out;
    border-radius: 5px;
}

.project-card .project-img-wrapper:hover  .project-img:first-child {
    transform: translatex(0) scalex(1);
    opacity: 1;
    filter: blur(0);
}
.project-card .project-img-wrapper:hover .project-img:nth-child(2) {
    transform: translatex(-50%) scalex(2);
    opacity: 0;
    filter: blur(10px);
}
.project-tag {
    margin: 15px 0;
}
.tag-btn {
    display: inline-block;
    border: 1px solid #00ADB5;
    padding: 2px 18px;
    border-radius: 5px;
    letter-spacing: 1.08px;
    background: #00ADB5;
    transition: all 0.5s ease-in-out;
}

.project-content h4 {
    color: #EEEEEE;
    margin-bottom: 0;
}
.project-bottom-wrapper{
    margin-top: 30px;
}
.project-img img {
    height: 257px;
    width: 100%;
    object-fit: cover;
    display: inline-block;
}
.showcase-area .row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 30px;
}
.project-content {
    min-height: 80px;
}
/* portfolio section end */

/* contact section start */
.contact-wrapper{
    margin-top: 50px;
}
.map-area{
    height: 348px;
    width: 100%;
}
.gm-style > div > div > a ,
.gm-style .gm-style-cc a,
  .gm-style .gm-style-cc button ,
  .gm-style .gm-style-cc span {
    display: none !important;
}
.map-card {
    height: 50px;
    width: 150px;
    padding: 0;
    margin: 0;
    text-align: center;
}
.gm-style .gm-style-iw-c {
    margin: 0;
    padding: 0;
}
.map-card p {
    color: #222831;
}

.gm-style-iw-ch {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    -webkit-flex-shrink: 1;
    flex-shrink: 1;
    padding-top: 17px;
    overflow: hidden;
    display: none;
}
.gm-ui-hover-effect{
    height: 25px !important;
    width: 25px !important;
    margin-right: 15px !important;
    margin-bottom: 10px !important;
}
.gm-style-iw-chr {
    justify-content: end;
}
.gm-style-iw-d{
    overflow: inherit !important;
    max-height: 100% !important;
    height: 100% !important;
    padding-bottom: 50px !important;
}
/* contact section end */

.div-rotator {
    margin: 0;
    font-size: 16px;
    width: 600px;
    height: 550px;
    color: #00ADB5;
    padding: 20px !important;
    overflow: hidden !important;
}


.div-rotator a,
.div-rotator a:link,
.div-rotator a:active
{
text-decoration:none;	
color:#00ADB5;
}

.div-rotator a:hover
{	
color:#00ADB5;
}

.div-rotator .small
{
font-size:80%;		
}

.div-rotator .big
{
font-size:130%;		
}

.div-rotator .medium
{
font-size:100%;		
}

.div-rotator img
{
    top:-2em;	
    left:-1em;	
    width:4em;		
    height:auto;
}



.infobox
{
margin-top:1em;
border:2px solid #1188cc;
background:#aaddff;
border-radius:1em;	
}


@keyframes rubberBand {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }
  
    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }
  
    65% {
      -webkit-transform: scale3d(0.95, 1.05, 1);
      transform: scale3d(0.95, 1.05, 1);
    }
  
    75% {
      -webkit-transform: scale3d(1.05, 0.95, 1);
      transform: scale3d(1.05, 0.95, 1);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }




  .letter {
    transition: all 0.3s ease-in-out;
    transform-origin: center;
  }
  
  .letter:hover {
    color: #EEEEEE;
    animation: rubberBand 1s;

  }
  .loading-page {
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    color: #191654;
    z-index: 999999;
  }
  
  #svg {
    height: 150px;
    width: 150px;
    stroke: #EEEEEE;
    fill-opacity: 0;
    stroke-width: 3px;
    stroke-dasharray: 4500;
    animation: draw 8s ease;
  }
  
  @keyframes draw {
    0% {
      stroke-dashoffset: 4500;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
  
  .name-container {
    height: 30px;
    overflow: hidden;
  }
  
  .logo-name {
    color: #EEEEEE;
    font-size: 20px;
    letter-spacing: 12px;
    text-transform: uppercase;
    margin-left: 20px;
    font-weight: bolder;
    font-family: "Rajdhani", sans-serif;
  }