:root {
    --primary-bg-color: #0f172a;
    --seconday-bg-color: #131c31;
    --box-bg-color: #1e293bb3;
    --light-bg-color: #3b82f633;
    --blue-color: #3b82f6; 
    --hover-blue-color: #2563eb;
    --title-color: #f8fafc;
    --sub-title-color: #9ca3af;
    --normal-txt-color: #d1d5db;
}
*{margin: 0;padding: 0;box-sizing: border-box;font-family: "Inter", sans-serif;}
html{scroll-behavior: smooth;}
body{position: relative;overflow-x: hidden;}
a{text-decoration: none;}
button{cursor: pointer;}
img{width: 100%;height: auto;display: block;}
ul, ol{list-style: none;} 
.wrapper{max-width: 1500px;margin: 0 auto;}

.section-title{color: var(--title-color);text-align: center;}
.section-title h2{font-size: 1.875rem;}
.section-title p{color: var(--sub-title-color);font-size: 1.1rem;margin-top: 1rem;}


/********* Header ************/

header{background-color: #0f172adb; color: #fff; position: fixed; top: 0; z-index: 10; width: 100%;}
.header-wrapper{display: flex;justify-content: space-between;align-items: center;padding: 1rem;}
.logo{width: 10rem;display: block;}
.logo img{width: 100%; height: auto;}
nav{width: auto;display: flex; justify-content: center; align-items: center;gap: 3rem;}
nav a{color: var(--normal-txt-color);transition: all 0.3s ease-in-out;position: relative;}
nav a:hover{color: var(--blue-color);}
nav a:before { content: ""; position: absolute; left: 0; top: 131%; width: 0; height: 2px; background-color: var(--blue-color); transition: all 0.3s linear; }
nav a:hover:before { width: 100%; }
.contact-me-btn{width: auto;display: block;padding: 0.8rem 1rem; border-radius: 6px;background-color: var(--blue-color);color: #fff;}
.nav-contact-me{display: none;}
.hamburger{display: none;}



/********* Banner ************/

.banner{height: 100vh;display: flex;justify-content: center;align-items: center;flex-direction: column;text-align: center; background-image: linear-gradient(180deg,rgba(15, 23, 42, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(15, 23, 42, 1) 100%), url(../images/banner.jpg);background-size: cover;background-position: center;/*background-attachment: fixed;*/}
.banner-texts h1{font-size: 3rem;color: #fff;}
.banner-texts h2{font-size: 2rem;color: var(--blue-color);padding: 1rem 0;}
.banner-texts p{font-size: 1.3rem;color: #d1d5db;}
.banner-buttons{margin-top: 2rem;display: flex; gap: 1rem;}
.banner-buttons a{display: inline-block;padding: 0.8rem 1rem;color: #fff;border-radius: 8px;}
.lets-talk{background-color: var(--blue-color);transform: scale(1);transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);}
.lets-talk:hover{background-color: var(--hover-blue-color);transform: scale(1.05);}
.view-my-work{background-color: transparent;border: 1px solid #ffffff4d;transform: scale(1);transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1);}
.view-my-work:hover{background-color: #fff;color: #0f172a;transform: scale(1.05);}



/********* Services ************/

#services, #recent-projects, #idea-to-launch, #contact-us, footer{background-color: var(--primary-bg-color);}
.services-wrapper, .why-me-wrapper, .recent-projects-wrapper, .testimonial-wrapper, .start-small-grow-big-wrapper, .idea-to-launch-wrapper, .contact-us-wrapper{padding: 5rem 0;}
.services-box, .why-me-body, .ssgb-body-inner, .footer-body{margin-top: 4rem;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.services-card{width: 32%;background-color: var(--box-bg-color);border-radius: 8px;padding: 2rem;transform: translateY(0px);box-shadow: none;transition: all 0.3s ease;}
.services-card-header{display: flex;justify-content: start;align-items: center;gap: 1rem;margin-bottom: 1rem;}
.services-icon, .ssgb-icon{background-color: var(--light-bg-color);font-size: 1.5rem; border-radius: 50%; width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; color: var(--blue-color); }
.services-card-title, .ssgb-card-title{ color: var(--title-color); font-size: 1.3rem; }
.services-card-subtitle, .ssgb-card-subtitle{ color: var(--sub-title-color); font-size: 1rem; line-height: 1.6rem; }
.services-main-list, .ssgb-main-list{list-style: none;margin-top: 1rem;}
.services-list, .ssgb-list{ display: flex; justify-content: start; align-items: center; gap: 0.5rem; padding-bottom: 1.1rem; }
.services-list-icon, .ssgb-list-icon{color: var(--blue-color);}
.services-list p, .ssgb-list p{color: var(--normal-txt-color);font-size: 1rem;}
.services-card:hover{transform: translateY(-5px);box-shadow: 0 10px 25px -5px #3b82f61a;}



/********* Why me ************/

#why-me, #testimonial{background-color: var(--seconday-bg-color);}
.why-me-body{overflow: hidden;}
.why-me-left{width: 48%;}
.why-me-img{height: 22rem;}
.why-me-img img{ height: 100%; object-fit: cover; border-radius: 8px; }
.why-me-right{width: 49%;}
.why-me-box{ background-color: var(--box-bg-color); border-radius: 8px; padding: 2rem; margin-bottom: 2rem; display: flex; justify-content: start; align-items: start; gap: 1rem; }
.why-me-icon i{ font-size: 2rem; color: var(--blue-color); }
.why-me-box-title{ font-size: 1.3rem; font-weight: 600; color: var(--title-color); margin-bottom: 0.8rem; }
.why-me-box-subtitle{ color: var(--sub-title-color); font-size: 1rem; line-height: 1.4rem; }
.why-me-box:last-child{ border-left: 0.3rem solid var(--blue-color); background-color: #3b82f61a; }



/********* Recent Projects ************/

.recent-projects-body{ margin-top: 4rem; display: flex; justify-content: start; align-items: center; flex-wrap: wrap; gap: 3.3rem; }
.recent-projects-box{ width: 48%; border-radius: 8px; transform: translateY(0px); box-shadow: none; transition: all 0.3s ease; }
.recent-projects-box:hover{ transform: translateY(-5px); box-shadow: 0 10px 25px -5px #3b82f61a; }
.recent-projects-img{height: 16rem;}
.recent-projects-img img{ height: 100%; object-fit: cover; border-top-left-radius: 8px; border-top-right-radius: 8px; }
.recent-projects-txt{ background-color: var(--box-bg-color); padding: 1.5rem; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.recent-projects-title{ font-size: 1.25rem; font-weight: 600; color: var(--title-color); margin-bottom: 0.5rem; }
.recent-projects-subtitle{color: var(--sub-title-color); font-size: 1rem; line-height: 1.4rem;margin-bottom: 1rem;}
.view-site{ color: var(--blue-color); }
.view-site i{padding-left: 0.3rem;}



/********* Testimonial ************/

.testimonial-body, .idea-to-launch-body, .contact-us-body{margin-top: 4rem;}
.testimonial-box{background-color: var(--box-bg-color);border-radius: 8px;padding: 1.5rem;}
.testimonial-header{ display: flex; justify-content: start; align-items: center; gap: 1rem; }
.testimonial-avatar{width: 3rem; height: 3rem; border-radius: 50%; background-color: #fff; }
.testimonial-avatar img{ object-fit: contain; border-radius: 50%; width: 3rem; height: 3rem; }
.testimonial-name{font-size: 1rem;font-weight: 600;color: var(--title-color);padding-bottom: 0.3rem;}
.testimonial-position{font-size: 0.9rem;color: var(--sub-title-color);}
.testimonial-box-body{margin-top: 1rem;}
.testimonial-text{color: var(--normal-txt-color);font-style: italic;font-size: 1rem;line-height: 1.5rem;}
.testimonial-star{margin-top: 1rem;}
.star-yellow{color: #facc15;}
.star-gray{color: var(--sub-title-color);}
.testimonial-carousel .owl-nav button{ font-size: 1.1rem !important; width: 35px; height: 35px; border-radius: 50% !important; background-color: #3b82f61a !important; color: var(--blue-color) !important; display: inline-flex !important; justify-content: center; align-items: center; margin-top: 2rem !important; transition: 0.1s linear; }
.testimonial-carousel .owl-nav button:hover{background-color: var(--blue-color) !important;color: var(--title-color) !important;}
.testimonial-carousel .owl-nav button span{margin-top: -5px;}



/********* Start Small Grow Big ************/

.start-small-grow-big-wrapper{position: relative;z-index: 1;}
.start-small-grow-big{position: relative;background-color: var(--seconday-bg-color);}
.bg-circle-overlay{position: absolute;background: radial-gradient(circle at 70% 50%, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0) 50%);inset: 0;}
.ssgb-card{width: 32%;background-color: #0f172a80;border: 1px solid;border-color: #3b82f61a;border-radius: 1.3rem;padding: 2rem;transition-property: all;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-duration: 150ms;}
.ssgb-card:hover{border-color: #3b82f64d;}
.ssgb-card-header{margin-bottom: 1.5rem;}
.ssgb-icon{background-color: #3b82f61a;}
.ssgb-card-title{padding-top: 1.5rem;}
.ssgb-main-list{margin-top: 1.5rem;}
.ssgb-list{padding-bottom: 1rem;}
.ssgb-btn{ text-align: center; margin-top: 4rem; }
.ssgb-btn a{ display: inline-block; background-color: var(--blue-color); color: var(--title-color); padding: 1rem 2rem; border-radius: 0.5rem; transform: scale(1); transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1); }
.ssgb-btn a:hover{ background-color: var(--hover-blue-color); transform: scale(1.05); }
.ssgb-btn a i{padding-left: 0.5rem;}



/********* From Idea to Launch ************/

.idea-to-launch-body{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.idea-to-launch-box{width: 23.8%;background-color: var(--box-bg-color);border-radius: 8px;padding: 1.5rem;height: 13.5rem;}
.idea-to-launch-no{display: flex; justify-content: center; align-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--blue-color); color: var(--title-color); }
.idea-to-launch-box-title{padding-top: 1.5rem;font-size: 1.12rem;color: var(--title-color);}
.idea-to-launch-box-subtitle{padding-top: 1rem;font-size: 1rem;color: var(--sub-title-color);line-height: 1.4rem;}




/********* 30 min Consultation ************/

.consultation{background: linear-gradient(45deg, rgba(59, 130, 246, 0.1) 0%, rgba(59, 130, 246, 0) 100%);background-color: var(--seconday-bg-color);padding: 5rem 0;}
.consultation-body{width: 56rem;margin: 0 auto;border-radius: 1.5rem;background-color: #0f172a80;padding: 3rem;box-shadow: 0 10px 25px -5px #0000001a;border: 1px solid #3b82f61a;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.consultation-details{width: 70%;}
.consultation-title{font-size: 1.875rem;line-height: 2.25rem;font-weight: 700;color: var(--title-color);}
.consultation-subtitle{font-size: 1.25rem;line-height: 1.75rem;color: var(--normal-txt-color);margin: 1rem 0 1.5rem;}
.consultation-services{display: flex;gap: 2rem;}
.cons-services-box{display: flex;justify-content: start;align-items: center;    gap: 0.8rem;}
.cons-services-icon{ background-color: var(--light-bg-color); font-size: 1.3rem; color: var(--blue-color); border-radius: 50%; width: 2.5rem; height: 2.5rem; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.cons-services-txt{color: var(--normal-txt-color);font-size: 1rem;}
.consultation-btn{width: 30%; display: flex; justify-content: space-evenly; align-items: center; padding: 1rem; border-radius: 6px; background-color: var(--blue-color); color: #fff; transform: scale(1); transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1); }
.consultation-btn:hover{ background-color: var(--hover-blue-color); transform: scale(1.05); }




/********* Contact Us Form ************/

.contact-us-body{width: 56rem;margin: 0 auto;}
.contact-us-row{padding-bottom: 2rem;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;position: relative;}
.contact-us-box{width: 48.5%;color: var(--title-color);}
.full-width{width: 100%;} 
.contact-us-box label{font-weight: 500;font-size: 0.875rem;color: var(--normal-txt-color);margin-bottom: 0.5rem;display: block;}
.contact-us-box input, .contact-us-box textarea{background-color: var(--box-bg-color);border: 2px solid var(--primary-bg-color); padding: 1rem;border-radius: 0.5rem;width: 100%;color: var(--title-color);margin-bottom: 0.3rem;}
.contact-us-box input:focus, .contact-us-box textarea:focus{border: 2px solid var(--blue-color);outline: none;}
.contact-us-btn{justify-content: end !important;margin-bottom: 0;}
.contact-us-captcha-error{justify-content: start;gap: 1rem;}
#send-msg{display: inline-block; background-color: var(--blue-color); color: var(--title-color); padding: 1rem 2rem; border-radius: 0.5rem; transform: scale(1); transition: 150ms all cubic-bezier(0.4, 0, 0.2, 1); border: none; font-size: 1rem;}
.error{color: #ba6767 !important;}
.captcha-alert{/*position: absolute;bottom: 0;*/color: var(--title-color);font-size: 14px;display: none;}
.form-submitted{display: none;background-color: #80eb8066; border-radius: 4px; padding: 1rem; font-size: 1.2rem; color: var(--title-color); text-align: center;}



/********* Footer ************/

.footer-wrapper{padding: 5rem 0 2rem;}
.footer-body{align-items: start;margin-bottom: 3rem;}
.footer-column{width: 30%;}
.footer-column:nth-child(2){width: 15%;}
.footer-title{font-size: 1.25rem;font-weight: 600;margin-bottom: 1.5rem;color: var(--title-color);}
.footer-txt{font-size: 1rem; color: var(--sub-title-color); line-height: 1.8rem;}
.footer-column ul li, .footer-column ul li a{padding-bottom: 1rem;font-size: 1rem;color: var(--sub-title-color);}
.footer-column ul li i{color: var(--blue-color);margin-right: 0.75rem;}
.copywrite{padding-top: 2rem;text-align: center;border-top: 1px solid #1f2937;color: #6b7280;}












/*************************** MEDIA QUERY ****************************/

@media only screen and (max-width: 1550px) {
    .wrapper{max-width: 1200px;}
    .recent-projects-body{gap: 3rem;}
}

@media only screen and (max-width: 1250px){
    .wrapper{max-width: 1000px;}
    .services-box, .ssgb-body-inner, .footer-body{gap: 2.3rem;justify-content: center;}
    .services-card{width: 48%;}
    .recent-projects-box, .ssgb-card, .idea-to-launch-box{width: 47.5%;}
    .idea-to-launch-body{row-gap: 3rem;}
    .footer-body{justify-content: space-between;}

}

@media only screen and (max-width: 1050px){
    .wrapper, .consultation-body, .contact-us-body{max-width: 90%;}
    .header-wrapper{padding: 0.5rem 0;}
    nav{gap: 2rem;}
    /* .logo{width: 8rem;} */
    .contact-me-btn{padding: 0.6rem 1rem;font-size: 0.9rem;}
    nav a{font-size: 0.9rem;}
    .banner-texts h1{font-size: 2.2rem;}
    .banner-texts h2{font-size: 1.5rem;}
    .banner-texts p{font-size: 1.1rem;}
    .banner-buttons a{padding: 0.6rem 1rem;font-size: 0.85rem;}
    .services-wrapper, .why-me-wrapper, .recent-projects-wrapper, .testimonial-wrapper, .start-small-grow-big-wrapper, .idea-to-launch-wrapper, .contact-us-wrapper{padding: 3rem 0;}
    .services-box, .why-me-body, .ssgb-body-inner, .footer-body, .recent-projects-body, .testimonial-body, .idea-to-launch-body{margin-top: 2rem;}
    .section-title h2 { font-size: 1.5rem; }
    .section-title p{font-size: 0.95rem;}
    .services-card { width: 45%; padding: 1.5rem; }
    .services-icon, .ssgb-icon{font-size: 1.1rem;width: 2.5rem;height: 2.5rem;}
    .services-card-title, .ssgb-card-title, .recent-projects-title{font-size: 1.1rem;}
    .services-card-subtitle, .ssgb-card-subtitle, .services-list p, .ssgb-list p, .why-me-box-subtitle, .recent-projects-subtitle, .view-site, .copywrite{font-size: 0.9rem;}
    .ssgb-card-header { margin-bottom: 1rem; }
    .ssgb-card-title { padding-top: 1rem; }
    .ssgb-btn{margin-top: 2.5rem;}
    .ssgb-btn a{font-size: 0.9rem;padding: 0.7rem 1.5rem;}
    .why-me-icon i{font-size: 1.5rem;}
    .why-me-box-title{font-size: 1.1rem;}
    .why-me-box, .ssgb-card{padding: 1.5rem;}
    .idea-to-launch-box-title{padding-top: 1rem;font-size: 1rem;}
    .recent-projects-box, .ssgb-card, .idea-to-launch-box { width: 47%; }
    .consultation{padding: 3rem 0;}
    .consultation-body{padding: 2rem;}
    .consultation-details{width: 62%;}
    .consultation-title{font-size: 1.5rem;}
    .consultation-subtitle { font-size: 1rem; line-height: 1.5rem; margin: 0.5rem 0 1rem; }
    .consultation-btn{width: 35%;}
    .cons-services-icon{font-size: 1rem;width: 2rem;height: 2rem;}
    #send-msg{ padding: 0.8rem 1.7rem;font-size: 0.9rem; }
    .footer-wrapper { padding: 3rem 0 1.5rem; }
    .footer-column, .footer-column:nth-child(2) { width: 40%; }
    .footer-title{font-size: 1.1rem;margin-bottom: 1.2rem;}
    .footer-txt{font-size: 0.9rem; line-height: 1.4rem; }
    .footer-column ul li, .footer-column ul li a{padding-bottom: 0.7rem;font-size: 0.9rem;}
    .copywrite{padding-top: 1.5rem;}
}


@media only screen and (max-width: 800px){
    .hamburger{display: block;width: 2rem; height: 2rem; cursor: pointer; padding-top: 1rem; }
    .hamburger .bar{ height: 2px; width: 100%; margin-bottom: 0px; background-color: white; border-radius: 5px; transition: 0.3s ease; }
    .hamburger #bar1{ transform: translateY(-7px); }
    .hamburger #bar3{ transform: translateY(7px); }
    nav { width: 100%; height: 100vh; text-align: center; flex-direction: column; justify-content: center; padding-top: 0; box-shadow: inset -2px 0px 20px -4px #2563eb3b; position: absolute; top: 0%; left: -100%; z-index: -1; background-color: var(--seconday-bg-color); transition: 0.3s ease; }
    nav a { display: block; text-decoration: none; color: white; font-size: 1.2rem; font-weight: 400; padding: 1rem 0; transition: color 0.3s linear; position: relative; }
    .change-ul { left: 0%; }
    .toggle-bar .icon #bar1{ transform: translateY(5px) rotate(-45deg); }
    .toggle-bar .icon #bar3{ transform: translateY(2px) rotate(45deg); }
    .toggle-bar .icon #bar2{ opacity: 0; }
    .nav-contact-me{display: block;font-size: 1.2rem;}
    .main-contact-btn{display: none;}
    .services-card, .why-me-left, .why-me-right, .recent-projects-box, .ssgb-card, .idea-to-launch-box, .consultation-details, .contact-us-box{width: 100%;}
    .why-me-body{gap: 3rem;}
    .idea-to-launch-box{height: auto;text-align: center;}
    .idea-to-launch-no{margin: 0 auto;}
    .consultation-body{justify-content: center;gap: 2rem;}
    .consultation-services{gap: 1rem;flex-direction: column;}
    .consultation-btn { width: 15rem; }
    .contact-us-row{gap: 2rem;}
}



@media only screen and (max-width: 450px){
    nav a{font-size: 1rem;padding: 0.5rem 0;}
    .nav-contact-me{font-size: 1rem;}
    .hamburger{width: 1.7rem;}
    .banner{background-image: linear-gradient(rgb(15, 23, 42) 0%, rgb(18 14 14 / 67%) 50%, rgb(15, 23, 42) 100%), url(../images/banner-mob-ver2.jpg)}
    .banner-texts{padding: 0 1rem;}
    .banner-texts h1 { font-size: 1.5rem; }
    .banner-texts h2 { font-size: 1.1rem; }
    .banner-texts p { font-size: 0.9rem; }
    .banner-buttons a { padding: 0.5rem 0.8rem; font-size: 0.8rem; }
    .section-title h2 { font-size: 1.2rem; }
    .section-title p { font-size: 0.9rem; }
    .services-box, .ssgb-body-inner, .footer-body{gap: 2rem;}
    .services-card { padding: 1rem; }
    .services-icon, .ssgb-icon{font-size: 0.9rem; width: 2rem; height: 2rem;}
    .services-card-title, .ssgb-card-title, .recent-projects-title{font-size: 0.98rem;}
    .services-card-subtitle, .ssgb-card-subtitle, .services-list p, .ssgb-list p, .why-me-box-subtitle, .recent-projects-subtitle, .view-site, .copywrite{font-size: 0.85rem;}
    .ssgb-card-header { margin-bottom: 0.5rem; }
    .ssgb-card-title { padding-top: 1rem; }
    .why-me-box, .ssgb-card, .recent-projects-txt { padding: 1rem; }
    .why-me-img { height: 15rem; }
    .why-me-icon i { font-size: 1.2rem; }
    .why-me-box-title { font-size: 1rem;margin-bottom: 0.5rem; }
    .why-me-box:last-child{margin-bottom: 0;}
    .testimonial-avatar { width: 2.5rem; }
    .testimonial-name{font-size: 0.9rem;}
    .testimonial-text{font-size: 0.9rem;line-height: 1.5rem;height: 12rem;}
    .testimonial-carousel .owl-nav button{margin-top: 1rem !important;  }
    .idea-to-launch-body { row-gap: 2rem; }
    .idea-to-launch-box-subtitle{ padding-top: 0.5rem; font-size: 0.85rem;line-height: 1.3rem; }
    .consultation { padding: 2rem 0; }
    .consultation-body{padding: 1.5rem;}
    .consultation-title { font-size: 1.3rem; }
    .consultation-subtitle{ font-size: 0.95rem; line-height: 1.5rem; }
    .cons-services-txt{font-size: 0.95rem;}
    .consultation-btn{font-size: 0.95rem;width: 13rem;padding: 0.7rem;} .footer-column, .footer-column:nth-child(2) { width: 100%; }
    .footer-title { font-size: 1rem; margin-bottom: 0.7rem; }
    .footer-body{margin-bottom: 2rem;}
    .footer-column ul li, .footer-column ul li a{padding-bottom: 1.2rem;}
}