/* Responsive Design for KennyPortfolio */

/* Desktop (1024px and below) */
@media screen and (max-width: 1024px) {
  .frame-402 {
    padding: 20px 16px !important;
  }
  
  /* Enhanced responsive padding for specific components */
  .project-card-frame {
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .project-card-inner-frame-1, .project-card-inner-frame-2 {
    gap: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .project-872 {
    min-width: auto;
    max-width: 100%;
    padding: 0 0 20px 0;
    gap: 20px;
  }
  
  .project-101 {
    max-width: 100%;
    padding: 0 0 20px 0;
    gap: 20px;
  }
  
  .project-48 {
    max-width: 100%;
    padding: 0 0 20px 0;
    gap: 20px;
  }
  
  .frame-32209, .frame-32337, .frame-32155, .frame-32191, .frame-32534, .frame-32412 {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .project-872, .projectda-21, .project-426, .project-101, .project-48, .project-916 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .frame-32209, .frame-32337, .frame-32155, .frame-32191, .frame-32534, .frame-32412 {
    padding: 15px;
  }
  
  .what-i-do-234 {
    padding: 30px 15px;
  }

  .frame-333-ew-2 {
    max-width: 100%;
    width: 100%;
    min-width: 100%;
  }
  
  .what-i-do-cards-2-qw {
    gap: 15px;
  }
  
  .what-i-do-card-05, .what-i-do-card-04, .what-i-do-card-03 {
    padding: 20px 15px;
  }
  
  .software-tools-frame-trw {
    padding: 30px 15px;
  }
  
  .tools-23 {
    padding-bottom: 20px;
  }
  
  .carousel {
    padding: 0 10px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }
  
  .carousel::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
  
  .testimonial-672 {
    padding: 40px 15px;
  }
  
  .testimonial-inner-frame-783 {
    padding: 0;
  }
  
  .happy-clients-c-5362 {
    padding-bottom: 20px;
  }
  
  .testimonial-card-831-d {
    padding: 20px 15px;
  }
  
  .contact-67-c {
    padding: 40px 15px;
  }
  
  .discuss-project-framerts-672 {
    padding-bottom: 20px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .frame-5484-ywt {
    width: 100%;
  }

  .adress-card-gts {
    width: 100%;
  }
  
  .adress-card-gts {
    gap: 15px;
  }
  
  .address-card, .email-card, .call-card {
    padding: 15px;
  }

  .address-card2, .address-card3 {
    padding: 12px !important;
  }

  .there-are-many-variations-of-passages-of-lorem-ipsu-available-but-the-majority-have-suffered-alte {
    font-size: 12px !important;
    line-height: 18px !important;
    min-width: unset !important;
    text-align: justify !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  ._279076874-5423397867672596-6321688719474860745-n-removebg-preview-1 {
    height: 300px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-picture-social-media {
    max-width: 280px !important;
    width: 100% !important;
    min-width: 100% !important;
  }
  
  .user-info {
    padding: 0;
  }
  
  .user-infromation-inner-frame {
    padding: 20px 15px;
  }
  
  .form {
    padding-top: 20px;
  }
  
  .frame-2840-fgsq-45 {
    padding: 20px 15px !important;
  }
  
  .about-picture-social-media {
    padding-bottom: 20px;
  }
  
  .frame-436 {
    padding: 0 10px;
  }
}

/* Large Desktop (1329px and below) */
@media screen and (max-width: 1329px) {
  .frame-2922 {
    padding: 0 20px;
  }
}

/* Tablet and below (820px and below) */
@media screen and (max-width: 820px) {
  .hello-i-m-adepetun-robert-kehinde,
  .button2 {
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  
  /* Also center the parent containers */
  .frame-15,
  .frame-13-e-op,
  .frame-12-ga {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  .frame-293-rat {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Mobile Navigation Styles */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  padding: 10px;
  gap: 4px;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: #333;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

.MobileNav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  padding-top: 80px;
}

.MobileNav.active {
  display: block;
}

.mobile-nav-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  padding: 40px 20px;
}

.MobileNav .home-button,
.MobileNav .about-button,
.MobileNav .process-button,
.MobileNav .portfolio-button,
.MobileNav .service-button,
.MobileNav .connect-button {
  width: 100%;
  max-width: 300px;
  text-align: center;
  padding: 15px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.MobileNav .home-button:hover,
.MobileNav .about-button:hover,
.MobileNav .process-button:hover,
.MobileNav .portfolio-button:hover,
.MobileNav .service-button:hover,
.MobileNav .connect-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Large Desktop (1440px and up) - Default styles are already in homepage.css */

/* Desktop (1200px to 1439px) */
@media screen and (max-width: 1439px) {
  .frame-402 {
    max-width: 1000px;
  }

  .frame-56-afda-3 {
    width: 600px;
  }
}

/* Small Desktop/Large Tablet (992px to 1199px) */
@media screen and (max-width: 1199px) {
  .frame-402 {
    max-width: 900px;
  }
  
  .frame-56-afda-3 {
    width: 550px;
  }
  
  .process2 {
    padding: 80px 120px;
  }
  
  .work-process-frame {
    flex-direction: column;
    gap: 30px;
  }
  
  .work-process-03 {
    max-width: 100%;
  }
  
  .process-cards {
    max-width: 100%;
  }
  
  .frame-3889 {
    justify-content: center;
  }
  .process-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Center project cards from 972px and below */
@media screen and (max-width: 972px) {
  .project-card-frame {
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .project-card-inner-frame-1, .project-card-inner-frame-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    justify-content: center;
  }
  
  .frame-32209, .frame-32337, .frame-32155, .frame-32191, .frame-32534, .frame-32412 {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .project-872, .projectda-21, .project-426, .project-101, .project-48, .project-916 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .project-872 {
    min-width: auto;
    max-width: 100%;
    padding: 0 0 24px 0;
    gap: 24px;
  }
  
  .project-101 {
    max-width: 100%;
    padding: 0 0 24px 0;
    gap: 24px;
  }
  
  .project-48 {
    max-width: 100%;
    padding: 0 0 24px 0;
    gap: 24px;
  }
  
  .frame-402 {
    max-width: 900px;
  }

  .frame-56-afda-3 {
    width: 550px;
  }

  .process2 {
    padding: 80px 120px;
  }

  .work-process-frame {
    flex-direction: column;
    gap: 30px;
  }

  .work-process-03 {
    max-width: 100%;
  }

  .process-cards {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .frame-3889 {
    justify-content: center;
  }
}

/* Medium screens (992px to 1227px) */
@media screen and (min-width: 992px) and (max-width: 1227px) {
  .contact-67-c {
    gap: 22px;
  }
}

/* Tablet (768px to 991px) */
@media screen and (max-width: 991px) {
  .home-page {
    gap: 80px;
  }
  
  .project-card-frame {
    padding: 30px 40px;
  }

  .frame-402 {
    padding: 15px 20px;
    max-width: 100%;
  }

  .frame-56-afda-3 {
    width: 100%;
  }

  .frame-3945 {
    flex-wrap: wrap;
    justify-content: center;
  }

  .home-button, .about-button, .process-button, .portfolio-button, .service-button, .connect-button {
    padding: 10px 15px;
  }

  .brooklyn {
    font-size: 28px;
    line-height: 36px;
  }

  .b {
    font-size: 20px;
    line-height: 48px;
  }

  .portfolio2 {
    padding: 0 20px;
  }

  .frame-2922 {
    flex-direction: column;
    gap: 40px;
  }

  .frame-2916 {
    width: 100%;
  }

  .frame-2892-rt-2 {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .process2 {
    padding: 60px 40px;
  }

  .project-card-inner-frame-1, .project-card-inner-frame-2 {
    flex-direction: column;
    gap: 20px;
  }

  .frame-32209, .frame-32337, .frame-32155, .frame-32191, .frame-32534, .frame-32412 {
    width: 100%;
  }

  .what-i-do-cards-2-qw {
    flex-direction: column;
    gap: 20px;
  }

  .what-i-do-card-05, .what-i-do-card-04, .what-i-do-card-03 {
    width: 100%;
  }

  .carousel {
    overflow-x: visible;
    padding: 0 20px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }
  
  .carousel::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }

.frame-280 {
    width: max-content;
    display: flex;
    gap: 20px;
    will-change: transform;
  }
  
  .figma, .wix, .vscode, .github, .framer, .coreldraw, .typescript, .react-js, .postman, .axios {
    padding: 12px;
    height: 110px;
  }

  .testimonial-card-831-d {
    padding: 15px 10px;
    height: 224px;
  }

  .contact-67-c {
    flex-direction: column;
    gap: 40px;
  }

  .adress-card-gts {
    width: 100%;
  }

  .user-info {
    width: 100%;
  }

  .main-footer-frametahf {
    padding: 0 40px;
    flex-direction: column;
    gap: 30px;
  }

  .frame-393098-gfa {
    max-width: 100%;
  }
  
  .upper-frame-2332 {
    padding: 80px 0;
  }
  
  .frame-286-wes {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
  }
  
  .frame-286-wes > * {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
}

/* Show mobile menu toggle on tablets and mobile */
@media screen and (max-width: 991px) {
  .mobile-menu-toggle {
    display: flex;
  }
  
  .frame-56-afda-3 {
    display: none;
  }
}

/* Mobile (480px to 767px) */
@media screen and (max-width: 767px) {
  .home-page {
    gap: 60px;
  }

  .frame-011-e {
    grid-template-columns: repeat(3, 1fr);
  }

  .frame-402 {
    padding: 15px;
    flex-direction: column;
    gap: 20px;
  }

  .frame-cafdh {
    width: 100%;
  }

  .frame-56-afda-3 {
    width: 100%;
  }

  .frame-3945 {
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .home-button, .about-button, .process-button, .portfolio-button, .service-button, .connect-button {
    width: 100%;
    justify-content: center;
    padding: 12px;
  }

  .brooklyn {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  .b {
    font-size: 18px !important;
    line-height: 40px !important;
  }

  /* Responsive alignment and styling for frame-423 and process description text */
  .frame-423 {
    align-items: center;
  }

  .i-design-and-develop-platform-services-for-customers-specializing-modern-websites-web-mobile-app-services-and-online-stores-my-passion-is-to-create-digital-user-experiences {
    text-align: justify;
    font-size: 16px;
    line-height: 24px;
  }

  .my-ui-ux-design-process-can-be-defined-systematic-approach-to-creating-user-friendly-visually-appealing-and-functional-digital-products-this-process-includes-several-stages-such-as-research-analysis-design-and-launch-which-ensure-the-final-product-meets-both-user-needs-and-business-goals,
  .this-process-includes-several-stages-such-as-research-analysis-design-and-launch-which-ensure-the-final-product-meets-both-user-needs-and-business-goals-here-s-a-breakdown-of-the-process {
    text-align: justify;
    font-size: 14px;
    line-height: 22px;
  }

  .work-process {
    font-size: 32px;
    line-height: 40px;
    text-align: center;
  }

  .cody-fisher {
    font-size: 16px !important;
    line-height: 22px !important;
  }

  .name2, .email, .location, .budget, .subject, .message {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .portfolio2 {
    padding: 0 15px;
  }

  .frame-2922 {
    gap: 30px;
  }

  .hello-i-m-adepetun-robert-kehinde {
    font-size: 32px;
    line-height: 40px;
    width: 100%;
    text-align: center;
  }

  .am-a-product-designer-with-the-ability-to-speak-developers-language-i-strives-to-build-immersive-and-beautiful-web-and-mobile-applications-through-carefully-crafted-user-centric-goal {
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
  }

  .frame-011-e {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .process2 {
    padding: 40px 20px;
  }

  .work-process {
    font-size: 36px;
    line-height: 44px;
  }

  .do-you-have-project-idea-let-s-discuss-your-project {
    font-size: 36px;
    line-height: 44px;
  }

  .call-to-action-356 {
    padding: 60px 16px 60px 16px;
  }

  .my-ui-ux-design-process-can-be-defined-systematic-approach-to-creating-user-friendly-visually-appealing-and-functional-digital-products-this-process-includes-several-stages-such-as-research-analysis-design-and-launch-which-ensure-the-final-product-meets-both-user-needs-and-business-goals,
  .this-process-includes-several-stages-such-as-research-analysis-design-and-launch-which-ensure-the-final-product-meets-both-user-needs-and-business-goals-here-s-a-breakdown-of-the-process {
    font-size: 14px;
    line-height: 20px;
  }

  .frame-3889, .frame-3894 {
    flex-direction: column;
  }

  .process-cards {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .work-process-card, .work-process-card-1, .work-process-card-2 {
    width: 100%;
    max-width: 100%;
  }

  .portfolio-3-t {
    font-size: 36px;
    line-height: 44px;
  }

  .a-seasoned-product-56-h-23 {
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
  }

  .project-card-inner-frame-1, .project-card-inner-frame-2 {
    gap: 15px;
  }

  .ui-ux-design-frontend, .ui-ux-design {
    font-size: 12px;
  }

  .ovaboss-e-commerce, .vanly-logistics, .shop-easy-e-commerce, .watchour-movie, .car-max-car-dealer, .coin-agora-crypto {
    font-size: 18px;
  }

  .vivamus-eleifend-convallis-ante-non-pharetra-libero-molestie-laoreet-donec-id-imperdiet-lacus,
  .shop-easy-is-an-e-commerce-mobile-app-designed-to-provide-users-with-a-seamless-and-personalized-shopping-experience,
  .it-featured-responsiveness-cross-platform-compatibility-and-an-attractive-background-easy-to-navigate-available-cars-and-deals,
  .i-ensured-coin-agora-is-both-innovative-and-user-friendly-i-conducted-extensive-research-on-existing-cryptocurrency-platforms {
    font-size: 14px;
    line-height: 20px;
  }

  .what-i-do-32 {
    font-size: 36px;
    line-height: 44px;
  }

  .am-an-experienced-product-designer-software-developer-with-a-deep-understanding-of-how-to-create-user-friendly-visually-compelling-digital-products-my-work-involves-designing-for-both-web-and-mobile-applications-with-a-focus-on-improving-the-overall-user-experience-through-research-analysis-design-and-implementation {
    font-size: 16px;
    line-height: 24px;
  }

  .user-experience-ux, .user-interface-ui, .web-development-783 {
    font-size: 20px;
  }

  .i-focus-on-78342, .i-bring-creativty-762, .i-am-a-highly-536 {
    font-size: 14px;
    line-height: 20px;
  }

  .software-tools-era {
    font-size: 36px;
    line-height: 44px;
  }

  .my-favorite-563 {
    font-size: 16px;
    line-height: 24px;
  }

  .testimonial {
    font-size: 36px;
    line-height: 44px;
  }

  .here-are-some-reviews {
    font-size: 16px;
    line-height: 24px;
  }

  .i-had-the-pleasure-of-working-with-adepetun-robert-kehinde-on-the-design-and-development-of-a-skincare-platform-called-glow-skin-from-start-to-finish-adepetun-demonstrated-a-high-level-of-creativity-professionalism-and-technical-expertise {
    font-size: 14px;
    line-height: 20px;
    flex-grow: 1;
    overflow: hidden;
  }

  .let-s-discuss-your-project {
    font-size: 36px !important;
    line-height: 44px !important;
  }

  .whether-you-re-looking-to-bring-a-fresh-concept-to-life-or-improve-an-existing-platform-i-m-here-to-help-transform-your-vision-into-a-functional-and-visually-captivating-reality-with-my-expertise-in-user-experience-ux-user-interface-ui-and-no-code-web-and-mobile-development-we-can-collaborate-to-create-a-solution-tailored-to-your-needs {
    font-size: 16px;
    line-height: 24px;
  }

  .adress-card-gts {
    flex-direction: column;
    gap: 20px;
  }

  .address-card, .email-card, .call-card {
    width: 100%;
  }

  .budget-subject {
    flex-direction: column;
    gap: 15px;
  }

  .budget-field, .subject-field {
    width: 100%;
  }

  .main-footer-frametahf {
    padding: 0 20px;
  }

  .frame-3930-fs {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }
  
  .work-process,
  .i-am-a-professional-user-experience-designer {
    font-size: 36px !important;
    line-height: 44px !important;
  }
}

/* Medium Mobile (484px to 750px) */
@media screen and (max-width: 750px) and (min-width: 484px) {
  /* Center align specified elements in mobile view */
  .button-4-qa-2,
  .frame-313-rhg,
  .frame-411-fgst-3,
  .button2,
  .about-picture-social-media,
  .frame-32209 {
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
  
  /* Center all cards in project frames */
  .project-card-inner-frame-1,
  .project-card-inner-frame-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Center individual project card containers */
  .frame-32209,
  .frame-32337,
  .frame-32155,
  .frame-32191,
  .frame-32534,
  .frame-32412 {
    justify-content: center !important;
  }
  .project-card-frame {
    padding: 40px 30px !important;
  }
  
  .what-i-do-234 {
    padding: 40px 30px !important;
  }
  
  .upper-frame-2332 {
    padding: 60px 0 !important;
  }
  
  .software-tools-frame-trw {
    padding: 40px 30px !important;
  }
  
  .frame-286-wes {
    width: 100% !important;
    max-width: 100%;
    padding: 0 5px !important;
  }
  
  .frame-286-wes > * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  
  .testimonial-672 {
    padding: 80px 30px !important;
  }
  
  .frame-2840-fgsq-45 {
    padding: 80px 30px !important;
  }
}

/* Medium Mobile (484px to 750px) */
@media screen and (max-width: 750px) {
  /* Center align specified elements in mobile view */
  .project-card-inner-frame-1,
  .project-card-inner-frame-2 {
    display: flex;
    justify-content: center;
  }
}

/* Small Mobile (320px to 479px) */
@media screen and (max-width: 479px) {
  .home-page {
    gap: 40px;
  }

  .frame-011-e {
    grid-template-columns: 1fr;
  }

  .hello-i-m-adepetun-robert-kehinde {
    font-size: 28px !important;
    line-height: 36px !important;
    width: 100%;
    text-align: center;
  }

  .frame-13-e-op {
    width: 100%;
  }

  .frame-402 {
    padding: 10px;
  }

  .brooklyn {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .b {
    font-size: 16px !important;
    line-height: 36px !important;
  }

  .cody-fisher {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .name2, .email, .location, .budget, .subject, .message {
    font-size: 12px !important;
    line-height: 18px !important;
  }
  
  .contact-text {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  .am-a-product-designer-with-the-ability-to-speak-developers-language-i-strives-to-build-immersive-and-beautiful-web-and-mobile-applications-through-carefully-crafted-user-centric-goal {
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
  }

  .work-process {
    font-size: 28px;
    line-height: 36px;
  }

  .portfolio-3-t {
    font-size: 28px;
    line-height: 36px;
  }

  .what-i-do-32 {
    font-size: 28px;
    line-height: 36px;
  }

  .software-tools-era {
    font-size: 28px;
    line-height: 36px;
  }

  .frame-286-wes > * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  
  .testimonial-672 {
    padding: 80px 30px !important;
  }
  
  .frame-2840-fgsq-45 {
    padding: 80px 30px !important;
  }
  
  /* Add responsive styles for frame-423 and process description sections for small screens */
  .frame-423 {
    align-items: center;
  }

  .i-design-and-develop-platform-services-for-customers-specializing-modern-websites-web-mobile-app-services-and-online-stores-my-passion-is-to-create-digital-user-experiences {
    text-align: justify;
    font-size: 14px;
    line-height: 20px;
    padding: 0 10px;
  }

  .my-ui-ux-design-process-can-be-defined-systematic-approach-to-creating-user-friendly-visually-appealing-and-functional-digital-products-this-process-includes-several-stages-such-as-research-analysis-design-and-launch-which-ensure-the-final-product-meets-both-user-needs-and-business-goals,
  .this-process-includes-several-stages-such-as-research-analysis-design-and-launch-which-ensure-the-final-product-meets-both-user-needs-and-business-goals-here-s-a-breakdown-of-the-process {
    text-align: justify;
    font-size: 12px;
    line-height: 20px;
    padding: 0 10px;
  }

  .work-process {
    font-size: 28px;
    line-height: 36px;
  }
  
  /* Unclip frame-338 on smaller screens */
  .frame-338 {
    overflow: hidden !important;
  }
  
  /* Make image fit parent container on small screens and prevent clipping */
  ._279076874-5423397867672596-6321688719474860745-n-removebg-preview-1 {
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: cover;
    overflow: hidden !important;
    overflow-clip-margin: unset !important;
  }
}

/* Medium Mobile (484px to 750px) */
@media screen and (max-width: 750px) {
  /* Center align specified elements in mobile view */
  .project-card-inner-frame-1,
  .project-card-inner-frame-2 {
    display: flex;
    justify-content: center;
  }
}

/* Small Mobile (320px to 479px) */
@media screen and (max-width: 479px) {
  .home-page {
    gap: 40px;
  }

  .hello-i-m-adepetun-robert-kehinde {
    font-size: 28px !important;
    line-height: 36px !important;
    width: 100%;
    text-align: center;
  }

  .brooklyn {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .b {
    font-size: 16px !important;
    line-height: 36px !important;
  }

  .cody-fisher {
    font-size: 14px !important;
    line-height: 20px !important;
  }

  .name2, .email, .location, .budget, .subject, .message {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  .contact-text {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  .am-a-product-designer-with-the-ability-to-speak-developers-language-i-strives-to-build-immersive-and-beautiful-web-and-mobile-applications-through-carefully-crafted-user-centric-goal {
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
  }

  .work-process {
    font-size: 28px;
    line-height: 36px;
  }

  .portfolio-3-t {
    font-size: 28px;
    line-height: 36px;
  }

  .what-i-do-32 {
    font-size: 28px;
    line-height: 36px;
  }

  .software-tools-era {
    font-size: 28px;
    line-height: 36px;
  }

  .testimonial {
    font-size: 28px;
    line-height: 36px;
  }

  .let-s-discuss-your-project {
    font-size: 28px !important;
    line-height: 36px !important;
  }

  .do-you-have-project-idea-let-s-discuss-your-project {
    font-size: 28px;
    line-height: 36px;
  }

  .call-to-action-356 {
    padding: 40px 16px 40px 16px;
  }

  .wether-your-looking-34251 {
    font-size: 14px;
    line-height: 20px;
  }
  
  .work-process,
  .i-am-a-professional-user-experience-designer {
    font-size: 28px !important;
    line-height: 36px !important;
  }
  
  /* Enhanced responsive padding for specific components */
  .project-card-frame {
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .project-card-inner-frame-1, .project-card-inner-frame-2 {
    gap: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .project-872 {
    min-width: auto;
    max-width: 100%;
    padding: 0 0 20px 0;
    gap: 20px;
  }
  
  .project-101 {
    max-width: 100%;
    padding: 0 0 20px 0;
    gap: 20px;
  }
  
  .project-48 {
    max-width: 100%;
    padding: 0 0 20px 0;
    gap: 20px;
  }
  
  .frame-32209, .frame-32337, .frame-32155, .frame-32191, .frame-32534, .frame-32412 {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .project-872, .projectda-21, .project-426, .project-101, .project-48, .project-916 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .frame-32209, .frame-32337, .frame-32155, .frame-32191, .frame-32534, .frame-32412 {
    padding: 15px;
  }
  
  .what-i-do-234 {
    padding: 40px 15px;
  }

  .frame-333-ew-2 {
    max-width: 100%;
    width: 100%;
    min-width: 100%;
  }
  
  .what-i-do-cards-2-qw {
    gap: 15px;
  }
  
  .what-i-do-card-05, .what-i-do-card-04, .what-i-do-card-03 {
    padding: 20px 15px;
  }
  
  .software-tools-frame-trw {
    padding: 40px 15px;
  }
  
  .tools-23 {
    padding-bottom: 20px;
  }
  
  .carousel {
    padding: 0 10px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }
  
  .carousel::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
  
  .testimonial-672 {
    padding: 40px 15px;
  }
  
  .testimonial-inner-frame-783 {
    padding: 0;
  }
  
  .happy-clients-c-5362 {
    padding-bottom: 20px;
  }
  
  .testimonial-card-831-d {
    padding: 20px 15px;
  }
  
  .contact-67-c {
    padding: 40px 15px;
  }
  
  .discuss-project-framerts-672 {
    padding-bottom: 20px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .frame-5484-ywt {
    width: 100%;
  }

  .adress-card-gts {
    width: 100%;
  }
  
  .adress-card-gts {
    gap: 15px;
  }
  
  .address-card, .email-card, .call-card {
    padding: 15px;
  }

  .address-card2, .address-card3 {
    padding: 12px !important;
  }

  .there-are-many-variations-of-passages-of-lorem-ipsu-available-but-the-majority-have-suffered-alte {
    font-size: 12px !important;
    line-height: 18px !important;
    min-width: unset !important;
    text-align: justify !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  ._279076874-5423397867672596-6321688719474860745-n-removebg-preview-1 {
    height: 300px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-picture-social-media {
    max-width: 280px !important;
    width: 100% !important;
    min-width: 100% !important;
  }
  
  .user-info {
    padding: 0;
  }
  
  .user-infromation-inner-frame {
    padding: 20px 15px;
  }
  
  .form {
    padding-top: 20px;
  }
  
  .frame-2840-fgsq-45 {
    padding: 20px 15px !important;
  }
  
  .about-picture-social-media {
    padding-bottom: 20px;
  }
  
  .frame-436 {
    padding: 0 10px;
  }
}

/* Extra Small Mobile (below 350px) */
@media screen and (max-width: 349px) {
  .i-gather-information-about-users-competitors-and-industry-trends-this-phase-helps-me-to-understand-the-users-pain-points-preferences-and-behaviour,
  .i-deliver-the-final-product-test-its-usability-and-gather-feedback-for-future-improvements,
  .i-synthesize-the-research-data-identify-key-patterns-and-create-actionable-insights-this-phase-ensures-i-understand-the-target-audience-s-needs,
  .i-create-wireframes-prototypes-and-visual-designs-based-on-the-analysis-then-i-work-on-implementing-agreed-designs-to-working-codes {
    font-size: 10px !important;
    line-height: 14px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 5px !important;
  }
  
  .work-process-card,
  .work-process-card-1,
  .work-process-card-2 {
    padding: 10px 8px !important;
    max-width: 100% !important;
  }
  
  .frame-46,
  .frame-462 {
    padding: 0 5px !important;
    max-width: 100% !important;
  }
  
  .project-card-frame {
    padding: min(8px, 2vw) min(4px, 1vw) !important;
  }
  
  .project-card-inner-frame-1,
  .project-card-inner-frame-2 {
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  .frame-32209, .frame-32337, .frame-32155, .frame-32191, .frame-32534, .frame-32412 {
    max-width: 100% !important;
    padding: 8px !important;
    margin: 0 !important;
  }
  
  .project-872, .projectda-21, .project-426, .project-101, .project-48, .project-916 {
    max-width: 100% !important;
    padding: 8px !important;
  }
  
  .frame-57 {
    padding: 5px !important;
  }
  
  .frame-56 {
    max-width: 100% !important;
  }

  .what-i-do-234 {
    padding: min(8px, 2vw) min(4px, 1vw);
  }
  
  .software-tools-frame-trw {
    padding: min(8px, 2vw) min(4px, 1vw);
  }
}

/* Extra Small Mobile (300px to 319px) */
@media screen and (max-width: 319px) {
  .hello-i-m-adepetun-robert-kehinde {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  .brooklyn {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .b {
    font-size: 14px !important;
    line-height: 32px !important;
  }

  .cody-fisher {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  .name2, .email, .location, .budget, .subject, .message {
    font-size: 11px !important;
    line-height: 16px !important;
  }

  .i-gather-information-about-users-competitors-and-industry-trends-this-phase-helps-me-to-understand-the-users-pain-points-preferences-and-behaviour,
  .i-deliver-the-final-product-test-its-usability-and-gather-feedback-for-future-improvements,
  .i-synthesize-the-research-data-identify-key-patterns-and-create-actionable-insights-this-phase-ensures-i-understand-the-target-audience-s-needs,
  .i-create-wireframes-prototypes-and-visual-designs-based-on-the-analysis-then-i-work-on-implementing-agreed-designs-to-working-codes {
    font-size: 9px !important;
    line-height: 13px !important;
    padding: 0 3px !important;
  }
  
  .home-page {
    gap: 30px;
  }
  
  /* Enhanced responsive padding for specific components at minimum screen size */
  .project-card-frame {
    padding: 10px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .project-card-inner-frame-1, .project-card-inner-frame-2 {
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .project-872 {
    min-width: auto;
    max-width: 100%;
    padding: 0 0 12px 0;
    gap: 12px;
  }
  
  .project-101 {
    max-width: 100%;
    padding: 0 0 12px 0;
    gap: 12px;
  }
  
  .project-48 {
    max-width: 100%;
    padding: 0 0 12px 0;
    gap: 12px;
  }
  
  .project-872, .projectda-21, .project-426, .project-101, .project-48, .project-916 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .frame-32209, .frame-32337, .frame-32155, .frame-32191, .frame-32534, .frame-32412 {
    padding: 8px;
  }
  
  .what-i-do-234 {
    padding: min(10px, 3vw) min(5px, 1vw);
  }
  
  .what-i-do-cards-2-qw {
    gap: 10px;
  }
  
  .what-i-do-card-05, .what-i-do-card-04, .what-i-do-card-03 {
    padding: 15px 10px;
  }
  
  .software-tools-frame-trw {
    padding: min(10px, 3vw) min(5px, 1vw);
  }
  
  .tools-23 {
    padding-bottom: 15px;
  }
  
  .carousel {
    padding: 0 5px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }
  
  .carousel::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
  
  .testimonial-672 {
    padding: min(10px, 3vw) min(5px, 1vw);
  }
  
  .testimonial-inner-frame-783 {
    padding: 0;
  }
  
  .happy-clients-c-5362 {
    padding-bottom: 15px;
  }
  
  .testimonial-card-831-d {
    padding: 15px 10px;
  }
  
  .contact-67-c {
    padding: 30px 10px;
  }
  
  .discuss-project-framerts-672 {
    padding-bottom: 15px;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    overflow-wrap: break-word;
  }

  .frame-5484-ywt {
    width: 100%;
    overflow-wrap: break-word;
  }

  .adress-card-gts {
    width: 100%;
  }
  
  .adress-card-gts {
    gap: 10px;
  }
  
  .address-card, .email-card, .call-card {
    padding: 10px;
  }

  .address-card2, .address-card3 {
    padding: 8px !important;
  }

  .there-are-many-variations-of-passages-of-lorem-ipsu-available-but-the-majority-have-suffered-alte {
    font-size: 11px !important;
    line-height: 16px !important;
    min-width: unset !important;
    text-align: justify !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  ._279076874-5423397867672596-6321688719474860745-n-removebg-preview-1 {
    height: 250px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .about-picture-social-media {
    max-width: 250px !important;
    width: 100% !important;
    min-width: 100% !important;
  }
  
  .user-info {
    padding: 0;
  }
  
  .user-infromation-inner-frame {
    padding: 15px 10px;
  }
  
  .form {
    padding-top: 15px;
  }
  
  .frame-2840-fgsq-45 {
    padding: min(10px, 3vw) min(5px, 2vw) !important;
  }
  
  .about-picture-social-media {
    padding-bottom: 15px;
  }
  
  .frame-436 {
    padding: 0 5px;
  }
  
  /* Adjust text sizes for very small screens */
  .hello-i-m-adepetun-robert-kehinde {
    font-size: 24px !important;
    line-height: 32px !important;
  }

  .brooklyn {
    font-size: 18px !important;
    line-height: 24px !important;
  }

  .b {
    font-size: 14px !important;
    line-height: 32px !important;
  }

  .cody-fisher {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  .name2, .email, .location, .budget, .subject, .message {
    font-size: 11px !important;
    line-height: 16px !important;
  }

  .contact-text {
    font-size: 11px !important;
    line-height: 16px !important;
  }
  
  .portfolio-3-t, .what-i-do-32, .software-tools-era, .testimonial, .let-s-discuss-your-project, .do-you-have-project-idea-let-s-discuss-your-project {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  
  .am-a-product-designer-with-the-ability-to-speak-developers-language-i-strives-to-build-immersive-and-beautiful-web-and-mobile-applications-through-carefully-crafted-user-centric-goal,
  .wether-your-looking-34251,
  .am-an-experienced-product-designer-software-developer-with-a-deep-understanding-of-how-to-create-user-friendly-visually-compelling-digital-products-my-work-involves-designing-for-both-web-and-mobile-applications-with-a-focus-on-improving-the-overall-user-experience-through-research-analysis-design-and-implementation,
  .my-favorite-563,
  .here-are-some-reviews,
  .i-had-the-pleasure-of-working-with-adepetun-robert-kehinde-on-the-design-and-development-of-a-skincare-platform-called-glow-skin-from-start-to-finish-adepetun-demonstrated-a-high-level-of-creativity-professionalism-and-technical-expertise,
  .whether-you-re-looking-to-bring-a-fresh-concept-to-life-or-improve-an-existing-platform-i-m-here-to-help-transform-your-vision-into-a-functional-and-visually-captivating-reality-with-my-expertise-in-user-experience-ux-user-interface-ui-and-no-code-web-and-mobile-development-we-can-collaborate-to-create-a-solution-tailored-to-your-needs {
    font-size: 13px;
    line-height: 18px;
    text-align: justify;
  }
  
  .ui-ux-design-frontend, .ui-ux-design {
    font-size: 11px;
  }
  
  .ovaboss-e-commerce, .vanly-logistics, .shop-easy-e-commerce, .watchour-movie, .car-max-car-dealer, .coin-agora-crypto {
    font-size: 16px;
  }
  
  .user-experience-ux, .user-interface-ui, .web-development-783 {
    font-size: 18px;
  }
  
  .i-focus-on-78342, .i-bring-creativty-762, .i-am-a-highly-536 {
    font-size: 13px;
    line-height: 18px;
  }
  
  .vivamus-eleifend-convallis-ante-non-pharetra-libero-molestie-laoreet-donec-id-imperdiet-lacus,
  .shop-easy-is-an-e-commerce-mobile-app-designed-to-provide-users-with-a-seamless-and-personalized-shopping-experience,
  .it-featured-responsiveness-cross-platform-compatibility-and-an-attractive-background-easy-to-navigate-available-cars-and-deals,
  .i-ensured-coin-agora-is-both-innovative-and-user-friendly-i-conducted-extensive-research-on-existing-cryptocurrency-platforms {
    font-size: 12px;
    line-height: 16px;
  }
}

/* Additional Desktop styling for project-card-frame */
@media screen and (max-width: 1439px) {
  .project-card-frame {
    padding: 0px 120px;
  }
}

/* Extra Small Screens (300px to 349px) */
@media screen and (max-width: 349px) {
  .project-card-frame {
    padding: 15px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .i-had-the-pleasure-of-working-with-adepetun-robert-kehinde-on-the-design-and-development-of-a-skincare-platform-called-glow-skin-from-start-to-finish-adepetun-demonstrated-a-high-level-of-creativity-professionalism-and-technical-expertise {
    flex-grow: 1;
    overflow: hidden;
    font-size: 12px !important;
    line-height: 16px !important;
    padding: 0 5px !important;
  }
}

/* Small Screens (350px to 535px) */
@media screen and (max-width: 535px) {
  .project-card-frame {
    padding: 18px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* Small Screens (below 550px) */
@media screen and (max-width: 550px) {
  .testimonial-card-831-d {
    height: 260px !important;
  }

  .testimonial-inner-frame-783 {
    gap: 30px; /* Reduced by 10px from original 70px */
  }

  .testimonial-672 {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* Form description text - 16px on all mobile sizes */
@media screen and (max-width: 1024px) {
  .there-are-many-variations-of-passages-of-lorem-ipsu-available-but-the-majority-have-suffered-alte {
    font-size: 16px !important;
    line-height: 24px !important;
  }
}