html{
    font-size: 10px;
    scroll-behavior: smooth;
}
*{
    margin: 0;
    padding: 0;
   box-sizing: border-box; 
}
:root {
    --common-font-family: "Urbanist" , "sans-serif";
    --background-color: #F7F8FF;
    --pure-white: #FFFFFF;
    --pure-black: #000000;
    --light-white: #eee;
    --primary-color: #5777FF;
    --hover-primary: #05100B;
    --text-primary: #666666;
    --title-primary: #05100B;
    --bg-primary: #F2F4FF;
    --bg-secondary: #F9FAFF;
    --border-primary: #0000000D;
    --border-secondary: #66666633;
    --rgba-1: #FFFFFF12;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fs-body: 1.8rem;
    --fs-p: 1.8rem;
    --fs-h1: 9rem;
    --fs-h2: 5rem;
    --fs-h3: 3.8rem;
    --fs-h5: 2.4rem;
    --fs-h6: 2rem;
    --fs-b1: 1.4rem;
    --fs-b2: 1.6rem;
    --fs-b3: 1.8rem;
    --transition-1: all 0.3s ease-out 0s;
}
body{
    font-family: var(--common-font-family);
    line-height: 1.5;
    font-weight: var(--fw-regular);
    font-size: var(--fs-body);
    background-color: var(--background-color);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
    color: var(--title-primary);
    margin-top: 0;
}
h1,h2,h3,h5{
    font-weight: var(--fw-bold);
    line-height: 1.3;
}
h1{
    font-size: var(--fs-h1);
}
h2{
    font-size: var(--fs-h2);
}
h3{
    font-size: var(--fs-h3);
}
h5{
    font-size: var(--fs-h5);
}
p{
    font-size: var(--fs-p);
    font-weight: var(--fw-regular);
    color: var(--text-primary);
    margin-bottom: 2rem;
    line-height: 1.6;
}
ul{
padding-left: 0;
margin-bottom: 0;
}
.mb-30{
    margin-bottom: 3rem;
}
/*Navbar*/

.navbar .nav-menu .nav-item a{
font-weight: var(--fs-p);
font-weight: var(--fw-semibold);
padding: 4.2rem 2rem;
transition: all 0.3s linear;
}
.navbar .nav-menu .nav-item a:hover{
    color: var(--primary-color) !important;
}
.navbar .fa-solid.fa-bars{
    font-size: 2rem;
    padding: 0.5rem;
}
.offset-close-btn{
    width: 4rem;
    height: 4rem;
    background-color: var(--primary-color);
}
.offset-close-btn .fa-solid.fa-xmark{
    font-size: 2rem;
}
.offcanvas-main-title{
    margin-bottom: 2rem;
}
.offcanvas-backdrop.show{
    height: 100%;
}
.mobile-nav-menu ul li{
    border-bottom: 1.1rem solid var(--border-primary);
}
.mobile-nav-menu>ul>li:first-child>a{
    border-top: 0;
}
.mobile-nav-menu ul li a{
    padding: 1rem 0;
    border-top: 1.1rem solid var(--rgba-1);
    font-size: var(--fs-b2);
    font-weight: var(--fw-medium);
}
.offcanvas-contact ul li:not(:last-child){
    margin-bottom: 2rem;
}
.offcanvas-contact-icon{
    padding: 1.2rem;
    border: 0.1rem solid var(--border-secondary);
    transition: var(--transition-1);
}
.offcanvas-contact--icon i{
width: 1.5rem;
font-size: var(--fs-b1);
color: var(--primary-color);
}
.offcanvas-contact-text a{
    font-size: var(--fs-b2);
}
.offcanvas-social{
    margin-bottom: 4rem;
}
.offcanvas-social ul li:not(:last-child){
    margin-right: 0.5rem;
}
.offcanvas-social ul li a{
    width: 4rem;
    height: 4rem;
    border: 0.1rem solid var(--border-secondary);
    font-size: var(--fs-b2);
}
.navbar .nav-button{
    font-size: var(--fs-b3);
    padding: 1.5rem 3rem;
    transition: all, 0.3s linear;
    border-radius: 3rem;
    font-weight: var(--fw-medium);
    background-color: var(--primary-color);
}
.navbar .nav-button:hover{
    background-color: var(--hover-primary);
}
.navbar .nav-button .icon-box{
    transition: var(--transition-1);
    transform: rotate(-45deg);
}
.navbar .nav-button .icon-box svg{
    width: 1.7rem;
    fill: var(--pure-white)
}

.navbar .nav-button .icon-first .navbar .nav-button .icon-second{
    transition: var(--transition-1);
}
.navbar .nav-button .icon-second{
    transform: translateX(150%);
}
.navbar .nav-button:hover .icon-first{
    transform: translateX(150%);
}
.navbar .nav-button:hover .icon-second{
    transform: translateX(0%);
}
/* hero section */
.hero-section{
    padding-top: 20rem; /*old 25rem */
    padding-bottom: 10rem;
    margin-left: 20px;
    
}
.hero-section .row>* {
    padding-right: 0
    !important;
    padding-left: 0
    !important;
}
.hero-banner-content .hero-banner-title{
    line-height: 1.4;


}
.headline-text{
    background-color: var(--primary-color);
    padding: 1.2rem 3.5rem;
    font-weight: var(--fw-medium);

}
.hero-banner-description{
    font-size: var(--fs-h5);
    font-weight: var(--fw-medium);
    letter-spacing: 0.24rem;
    margin: 2rem 0 5rem 0;
}
.hero-btn-circle svg{
    width: 1.7rem;
    height: 1.7rem;
    fill: var(--pure-white);
}

.hero-btn{
    background-color: var(--primary-color);
    font-size: var(--fs-b3);
    padding: 1.5rem 3rem;
    transition: all 0.3s linear;
    border-radius: 3rem;
    font-weight: var(--fw-medium);
}
.hero-btn-circle{
    width: 6rem;
    height: 6rem;
    transition: all 0.3s ease;
}
.hero-btn-group>*:nth-child(1){
    transform: scale3d(0.5,0.5,1);
    margin-inline-end: -7rem;

}
.hero-btn-group>*:nth-child(2){
    transform: scale3d(1,1,1);
}
.hero-btn-group>*:nth-child(2){
    transform: scale3d(1,1,1);
    margin-inline-start: 0;
}
.hero-btn-group:hover>*:nth-child(1){
    transform: scale3d(1,1,1);
    margin-inline-end: 0;
}
.hero-btn-group:hover>*:nth-child(2){
    transform: scale3d(1,1,1);
}
.hero-btn-group:hover>*:nth-child(1){
    transform: scale3d(1,1,1);
    margin-inline-start: -7rem;
}
.hero-section .hero-banner-shape-1{
    width: 3rem;
    top: 35rem;
    inset-inline-end: 15rem;
}
.hero-section .hero-banner-shape-2{
    
    top: 35rem;
    inset-inline-end: 33rem;
}
.hero-section .hero-banner-shape-1 img{
    animation: toptobottom 2s alternate infinite;

}
.hero-section .hero-banner-shape-2 img{
    animation: lefttoright 2s alternate infinite;   
}
.hero-section .hero-banner-shape-3{
width: 15rem;
 inset-inline-start: 35%;
 bottom: 9.2rem;

}
.hero-social{
    margin-top: 6rem;
    gap: 2rem;
}
.hero-social a{
    color: var(--primary-color);
    width:4.8rem;
    height: 4.8rem;
    font-size: var(--fs-b3);
    background-color: #EAEEFF;
    transition: 0.3s;
}
.hero-social a:hover{
    background-color: var(--primary-color);
    color: var(--pure-white);
}
.hero-banner-image-div{
    margin-top: -25rem;
    position: relative;
 
   
}
.hero-banner-image-container .img-fluid:hover .hero-banner-image-div img{
  border-radius: 0.5rem;
    transform: scale(1.04);
    
}



.banner-exp-div{
    background-color: var(--primary-color);
    inset-inline-end: 45rem;
    top: 50%;
    height: 18rem;
    padding: 3.2rem 2.6rem 3.5rem 2.6rem;
    transform: translateY(-50%);
    box-shadow: 0.6rem 0.6rem 0.8rem 0 #0a322033;
}
.banner-exp-title{
    font-size: 4.8rem;
    margin-bottom: 0.5rem;
}
.banner-exp-div p{
    font-size: var(--fs-b2);
    font-weight: var(--fw-bold);
    line-height: 2.2rem;
}
/*animations*/

@keyframes toptobottom{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateX(-2rem);
    }
}

/*About- Me- sections*/

.about-me-section{
    padding-top: 11rem;
}
.about-me-section .wrapper-subtitle, .services-section, .experience-section, .portfolio-section, .contact-wrapper-div .section-subtitle{
    font-size: 2rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.2rem;
    color: var(--primary-color);
    margin-bottom: 1.2rem;
} 
.about-me-section .wrapper-subtitle img{
    width: 3rem;
}
.about-me-section .about-me-description{
    max-width: 91.2rem;
    margin: 0 auto;
}
.about-me-section .about-me-description p{
    font-size:2.2rem;
    font-weight: var(--fw-medium);
    line-height: 1.6;

}
/*skill section*/
.skill-section{
    padding-top: 7rem;
    padding-bottom: 10rem;
}
.skill-item-div{
    background-color: var(--pure-white);
    padding: 4rem;
    border-radius: 0.4rem;
    border: 0.1rem solid transparent;
    transition: 0.3s;
}
.skill-item-div:hover{
    border-color: var(--primary-color);
}
.skill-item-div .skill-item-top{
    gap: 2rem;
    margin-bottom: 4rem;
}
.skill-item-top .skill-item-icon{
    width: 5.5rem;
    height: 5.5rem;
    background-color: var(--primary-color);
}
.skill-item-top .skill-item-icon img{
    height: 3.4rem;
}
.skill-item-bottom .skill-item-description{
    margin-bottom: 4.8rem;
}
.skill-item-bottom .skill-item-progress{
    margin-top: 2rem;
}
.skill-item-progress .progress{
    height:0.6rem;
    background-color: var(--light-white);
    border-radius: 1rem;
}
.skill-item-progress .progress .progress-number{
    position: absolute;
    top: -2.8rem;
    inset-inline-end: 0;
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    color: var(--title-primary);

}
/*.services-section*/
.services-section{
    padding-top: 11rem;
    padding-bottom: 11rem;
    background-color: var(--bg-primary);
}
.services-section .section-wrapper-div{
    margin-bottom: 4rem;
}
.services-section .section-subtitle img{
    width: 3rem;
}
.services-section .services-wrapper-div .services-item{
    background-color: var(--pure-white);
    padding: 4rem;
    border-radius: 0.4rem;
    transition: all 0.3s;
    border: 0.1rem solid transparent;
}
.services-section .services-wrapper-div .services-item:hover{
    border-color: var(--primary-color);
}
.services-section .services-wrapper-div .services-item .services-title{
    margin-bottom: 5rem;
}
.services-section .services-wrapper-div .services-item .services-title a{
  color: var(--title-primary);
}
.services-section .services-wrapper-div .services-item .services-icon{
    margin-bottom: 5.3rem;
}
.services-section .services-wrapper-div .services-item .services-icon img{
    height: 5.7rem;
}
.services-section .services-text{
    padding-top: 5.5rem;
}
.services-section .services-text{
    font-size: 2.2rem;
    font-weight: var(--fw-medium);
    line-height: 1.5;
}
.services-text-primary{
    color: var(--primary-color);
}
.services-btn{
    margin-top: 2rem;
}

/*experience-section*/
.experience-section{
    background-color: var(--bg-secondary);
    padding-top: 11rem;
    padding-bottom: 11rem;
}
.experience-section .section-title-wrapper{
margin-bottom: 4rem;
}
.experience-section .section-subtitle img{
 width:3rem;
}
.experience-section .experience-item-div{
    border: 0.1rem solid #5777ff4d;
    border-radius: 0.4rem;
}
.experience-section .experience-item-top{
    background-color: var(--pure-white);
    padding: 3rem;
}
.experience-section .experience-designation-wrapper-div{
    gap: 2rem;
}
/*.experience-section .experience-item-shape{
    position:relative;
    width: 4rem;
    height: 3rem;
    border: 0.1rem dashed #c2c2c2;
}
.experience-section .experience-item-shape::before{
    position:absolute;
    content: '';
    width: 1rem;
    height: 1rem;
    background-color: var(--primary-color);
    border-radius: 50%;
}*/
.experience-section .experience-item-years{
    font-size: 2rem;
}
.experience-item-bottom{
    padding: 3.7rem 6rem 4.5rem 8rem;
    gap: 3.8rem;
}
.experience-item-bottom .experience-item-brand-thumb img{
    max-width: 13rem;
}
.experience-item-content .experience-item-place{
    margin-bottom: 1rem;
    font-size: 2.2rem;
    font-weight: var(--fw-semibold);
}
.experience-item-content .experience-item-description p{
    margin-bottom: 0;
}

/*portfolio*/
.portfolio-section{
    padding-top: 11rem;
    padding-bottom: 11rem;
    background-color: var(--bg-primary);
}
.portfolio-section .section-subtitle-wrapper{
    margin-bottom: 4rem;
}
.portfolio-section .section-subtitle img{
 width: 3rem;
}
.portfolio-section .portfolio-thumb{
 margin-bottom: 2rem;
 border-radius: 0.4rem;
}
.portfolio-section .portfolio-thumb img{
 width: 100%;
 transition: 0.3s;
 border-radius: 0.4rem;
}
.portfolio-section .portfolio-inner:hover .portfolio-thumb img{
transform: scale(1.04);

}
.portfolio-section .portfoli-content .portfolio-title{
    margin-bottom: 0.5rem;
}
.portfolio-section .portfoli-content .portfolio-title a{
    color: var(--title-primary);
}
/*Contact section*/
.contact-section{
    padding-top:11rem;
    padding-bottom: 11rem;
}
.contact-wrapper-div .contact-subtitle{
    font-size: var(--fs-h6);
}
.contact-wrapper-div .contact-subtitle img{
    width: 3rem;
}
.contact-wrapper-div .section-title-wrapper{
    margin-bottom: 3rem;
}
.contact-section .contact-list .contact-list-item:not(:last-child){
margin-bottom: 3rem;
}
.contact-section .contact-list .contact-icon-div span{
    width: 6rem;
    height: rem;
    background-color: var(--primary-color);
    transition: 0.5s;
}
.contact-section ,.contact-list .contact-icon-div span:hover{
transform:scale(1.02);
cursor: pointer;
}
.contact-section .contact-list .contact-icon-div span i{
    color: var(--pure-white);
}
.contact-section .contact-list .contact-list-content span{
    font-size: 1.7rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--text-primary);
}
.contact-section .contact-list .contact-list-content h6{
    font-size: 2.2rem;
}
.contact-section .contact-form{
    background-color: var(--pure-white);
    padding: 5rem;
    border-radius:0.4rem ;
    box-shadow: 0 0.1rem 0.75rem #00000025;
}
.contact-section .contact-form .contact-form-input input, .contact-section .contact-form .contact-form-input textarea{
    width: 100%;
    height: 6.5rem;
    border: 0;
    padding: 0 2.5rem;
    background-color: var(--bg-secondary);
    box-shadow: 0 0.1rem 0.75rem #0000003c;
    border-radius: 1rem;
}
.contact-section .contact-form .contact-form-input input, .contact-section .contact-form .contact-form-input textarea{
    height: 16rem;
    padding: 2.3rem 2.5rem;
    resize: none;
    background-color: var(--bg-secondary);
}
.contact-section .contact-form  .contact-form-button button{
    font-size: 1.8rem;
    color: var(--pure-white);
    padding: 1.5rem 3rem;
    height: 6rem;
    font-weight: var(--fw-medium);
 background-color: var(--primary-color);
 outline: 0;
cursor: pointer;
transition: 0.5s;
}
.contact-section .contact-form .contact-form-button button:hover{
    background-color: var(--hover-primary);
}

/*Footer*/
.footer-section{
    background-color: var(--bg-primary);
    border-top: 0.1rem solid var(--border-primary);
    padding: 6rem 0.5rem;
}
.footer-section .footer-links-list{
    display: flex;
    gap: 2rem 5rem;
}
.footer-section .footer-links-list li a{
    font-size: 2rem;
    font-weight: var(--fw-medium);
    color: var(--text-primary);
    text-decoration: none;
    cursor: pointer;
    transition: 0.5s;
}
.footer-section .footer-links-list li a:hover{
    color: var(--primary-color);
}




/*animations*/
@keyframes toptobottom{
0%{
        transform: translateY(0);
    }
    100%{
        transform: translateX(-2rem);
    }
}
 /*media queries*/

 @media (min-width: 991px){
    .offcanvas-backdrop.fade{
        opacity: 0 !important;

    }
 }
 @media (max-width: 991px){
    .hero-section .hero-banner-shape-3{
        inset-inline-start: 42%;
    }
 }

 @media (max-width: 1439px){
    .navbar .nav-menu .nav-item a{
        padding: 4.2rem 1 rem;
    }
.hero-section{
    padding-top: 15rem;
} 
.hero-banner-image-div{
    margin-top: 0;
    
}
.hero-section .hero-banner-shape-1{
    top: 43rem;
}
.hero-section .hero-banner-shape-2{
   inset-inline-end: 0;
}
/*.banner-exp-div{
    top: 17%;
    inset-inline-end: 6rem;
}
.achievement-section{
    margin-top: -10rem;
    padding: 10rem 0 6rem 0 ;
}*/

.about-me-section{
    padding-top: 6rem;
}
.skill-section .services-section .experience-section .portfolio-section .contact-section{
    padding-top: 6rem;
    padding-bottom: 6rem;
}
.contact-section .contact-form{
    margin-inline-start: 0;
}
}

/*Mobile media queries*/

@media (max-width: 600px){
    :root{
           --fs-h1: 5.2rem;
           --fs-h2: 4rem;
    }
    .hero-section{
        padding-top: 11rem;
    }
    .hero-banner-description{
        font-size: 2.2rem;
        margin: 2rem 0 3rem 0;

    }
    .banner-exp-div{
        top: 100%;
    }
    .hero-section .hero-banner-shape-1 .hero-section .hero-banner-shape-2 .hero-section .hero-banner-shape-3{
        display: none;
    }
    .about-me-section .about-me-description, .services-section, .services-text p{
        font-size: 1.8rem;
    }
    .experience-section .experience-item-top, .experience-section .experience-item-bottom{
        flex-direction: column;
    }
    .experience-section .experience-item-top{
        gap: 2rem;
    }
    .experience-section .experience-item-bottom{
        padding: 1.7rem 4rem 4.5rem 4rem;
    }
    /*contact*/
    .contact-section .contact-list .contact-list-content h6{
        font-size: 1.8rem;
    }
    .contact-section .contact-form{
        padding: 5rem 2 rem 5rem 2rem;

    }
    .contact-section .contact-form .contact-form-button button{
        font-size: 1.6rem;
        padding: 1rem 3rem;
        height:5rem;
    }
    /*Footer*/
    .footer-copyright-div p{
        margin-bottom: 0;
    }
    
}