* Import fonts */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* Base variables & resets(mobile-first) */ :root{ --primary-font: 'Oswald', sans-serif; --secondary-font: 'Poppins', sans-serif; --primary-color: #000; --secondary-color: #1E1E1E; --accent-color: #fff; --gradient-bg: linear-gradient(to right, #000, #fff); --text-contrast: #2c2c2c; --font-sizeTW:1.25rem; } html{ scroll-behavior: smooth; } *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } /* Base elements */ body{ background-color: var(--primary-color); color:var(--secondary-color); font-family: var(--secondary-font); } video{ border:none; border: none; outline: none; padding: 0; margin: 0; display: block; /* Prevents inline spacing issues */ background-color: transparent; /* Removes background, if any */ } img{ width:100%; height: 100%; } a{ text-decoration: none; color:black; } /* Layout containers */ #page, header{ width:100%; } /* Header & Navigation */ header{ height:9.101vh; } header .container{ padding:0; margin:0; } .header_container{ display:flex; align-items: center; flex-direction:row; justify-content: space-between; } .header_container :not(nav)> * { background-color: white; border:0.052vw solid black; border-radius:0.521vw; line-height: 9.101vh; height:9.101vh; } /* Logo */ #logo{ width: 5.052vw; position:relative; } #logo a, #logo a img{ display:block; } #logo a img{ position:absolute; width:2.76vw; height:5.608vh; border-radius:50px; ; background-color: #D9D9D9; border:0; top:50%; left:50%; transform:translate(-50%, -50%); } /*Utility classes*/ .display_flex{ display:flex; } .flex_direction{ } .flex-grow{ flex-grow:1; } .margin-center{ margin: 0 auto; } nav .footer-header{ display:none; } /*Nameban*/ #namebar{ width:45.417vw; background-color:white; border:0.052vw solid black; border-radius:0.521vw; line-height:9.101vh; height:9.101vh; } #namebar h2{ padding-left:1.042vw; text-transform: uppercase; font-size:1.25rem; } /*Navigation toggle & menu */ .nav-toggle{ display:none; background:none; border:none; cursor:pointer; position:absolute; right:40px; top:35px; width:30px; height:25px; z-index:9999; } #nav-toggle img{ width:6.588vw; height:2.981vh; border:0; } .nav-menu{ width:24.583vw; } .nav-menu ul{ width:100%; padding:0; text-align: center; display:flex; justify-content:space-around; } .nav-menu ul li{ list-style-type:none; } .nav-menu ul li a { font-family:"Poppins", sans-serif; font-size: 1.063rem; color:#1E1E1E; border: 0!important; } /* Footer header inside nav & footer */ .footer-header{ margin-top:1rem; padding-top:1rem; border-top:0.5px solid #000; } .smwidth{ width: 5.573vw; } .lgwidth{ width: 6.719vw; } /*.nav-toggle div, .nav-toggle div::before, .nav-toggle div::after{ background-color:#000; position:absolute; width:100%; height:3px; transition:all 0.3s ease; } .nav-toggle div{ top:50%; left:0; transform:translateY(-50%); } .nav-toggle div::before{ content: ''; top: -10px; left:0; } .nav-toggle div::after{ content: ''; top: 10px; left:0; }*/ /*Main content*/ main{ display: flex; flex-direction: column; overflow: hidden; font-size:var(--font-sizeTW); } main section:not(.hero-section){ border: 0.5px solid #000; border-radius: 0.521vw; background-color: #fff } /* Hero Section */ .hero-section{ height:101.376vh ; overflow:hidden; color:#fff; background-image:url('../IMG/left-side.png'), url('../IMG/top-right.png'); background-size: 13.125vw 99.259vh, 14.01vw 60.741vh; background-repeat: no-repeat, no-repeat; background-position: top left, top right; position: relative; } .hero-section::after{ content: ''; position: absolute; width:17.569vw; height: 57.566vh; background-image: url('../IMG/bottom-right.png'); background-size: cover; background-repeat: no-repeat; bottom:-200px; right: 0; transform: rotate(5deg); /* Rotates the last image */ } main section .container{ justify-content:center; align-items:center; text-align: center; } /*Sections(About, skills, Projects, Reviews, Contact)*/ /* You can add or adjust specific styles for each section as needed*/ .about-section, .project-section , .review-section, #contact-me{ padding:2rem 0; } /*.hero-section:hover{ background-image: url('../IMG/hero-hover.png'); background-repeat: no-repeat; }*/ /*#left-bg{ width:13.125vw; height:99.259vh; background-image: url('../IMG/left-side.png'); background-repeat: no-repeat; background-position: top right; } #column-row div{ width:14.01vw; height:60.741vh; } #column-one{ background-image: url('../IMG/top-right.png'); background-repeat: no-repeat; background-position: top right } #column-two{ background:url('../IMG/bottom-right.png'); background-repeat: no-repeat; background-position: bottom right; transform: rotate(25deg); } .hero-section:hover #left-bg{ background-image: url('../IMG/left-side-hover.png'); } .hero-section:hover #column-one{ background-image: url('../IMG/top-right-hover.png'); } .hero-section:hover #column-two{ background-image: url('../IMG/bottom-right-hover.png'); } */ #middle-wrapper{ width:53.294vw; position:relative; } .intro-section{ margin-top:20%; width:49.921vw; height:11.005vh; } .hero-title {
    font-family: "Oswald", sans-serif;
    /* why isn't the background image working? */
    font-weight: 700;
    text-align: center;
    color: #fff;

    font-size: clamp(2.8rem, 5vw, 5rem);
    line-height: 1.05;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto 2rem auto;
}

.hero-title span {
    display: block;
    font-size: inherit;        /* Always matches main size */
    margin-top: 0.4rem;
} .intro-parg{ width:33.263vw; font-size:var(--font-sizeTW); font-weight:400; margin-top:1.058vh; } .intro-skills{ width:40.733vw; margin-top: 2.116vh; } .intro-skills > :nth-of-type(1){ width:19.819vw; padding-left:0.525vw; } .intro-skills > :nth-of-type(2){ width: 16.5vw; margin-left:2.627vw; } .intro-skills-{ height:9.524vh; font-size:var(--font-sizeTW); } .intro-skills- p::before{ content: ""; display: inline-block; background: url('../IMG/element.png') no-repeat; width:1.576vw; height:2.34vh; } .project-button{ width:17.867vw; height:auto; margin-top:10.582vh; margin-left:37%; } #button-wrapper{ width:13.873vw; height:6.878vh; background-color: #fff; text-align: center; line-height: 6.878vh; border-radius: 8px; } .button{ color:black; font-size:1.313rem; font-weight:600; } div#icon-button{ width:75%; height:6.25vh; margin-top:11.873vh; } .icon-bar{ display: block; width:1.906vw; height:6.25vh; background:url('../IMG/icon-bar.png') } #aboutme{ width:100%; height:34.603vh; } #about-info{ width:48.345vw; height:15.873vh; margin-top:8.466vh; } .header{ /*width:13.137vw;*/ text-align: center; margin-bottom:1rem; } .header h2{ font-family: var(--primary-font); font-size:2.563rem; position:relative; } .header h2::after{ content: ""; display: block; width:2.522vw; /*height:0.635vh;*/ background-color: #000; /* margin-top:0.529vh; margin-left:auto; margin-right:auto;*/ height:0.5vh; margin:0.5rem auto; } #about-content{ margin-top:2.116vh; height:6.349vh; } #skill-section{ height:117.778vh; } .skill-info{ width:71.944vw; } #skill-info-header{ height:4.656vh ; margin-top:4.233vh; } #skill-info-header h2{ font-size:1.875rem; } #skill-info-content{ height:19.048vh; margin-top:1.058vh; } #skill-info-content p:last-child{ height:30%; margin-top:20px; } #skill-list-item{ width:20.284vw; height:4.656vh; } #skill-list-item h3{ font-size:1.875rem; } #skill-list-item-list{ margin-top:4.233vh; } #skill-list-item-list ul li{ height:4.55vh; display: inline-block; list-style-type: none; text-align: center; line-height:4.55vh; background-color:#E6E6E6; border-radius:3px; } #skill-list-item-list ul li:nth-of-type(1){ width:4.151vw; } #skill-list-item-list ul li:nth-of-type(2){ width:3.678vw; } #skill-list-item-list ul li:nth-of-type(3){ width:6.306vw; } #skill-list-item-list ul li:nth-of-type(4){ width:4.414vw } #video-container{ width: 54.44vw; height:64.021vh; margin-top:6.349vh; } video{ width:100%; height:100%; box-shadow: inset 0 0 0 15px #000; } .play-button{ position:absolute; /*top:50%;*/ left:50%; transform:translate(-50%, -600%); width:2.781vw; height:6.541vh; background-color:transparent; color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; cursor:pointer; border:none; } #project-info-content{ height:75.344vh; margin-left:20%; margin-top: 10.582vh; } #projects-list{ height:117.778vh; } #project-info .header{ width:8.565vw; margin-top:8.466vh; text-transform: uppercase; } #project-info .header h2::after{ margin-left:40%; } .pitem{ width:18.76vw; height:35.556vh; } .pitem:not(:nth-of-type(1)){ margin-left:0.694vw; } .project-item:nth-of-type(2){ margin-top:1.058vh; } #review{ height:75.132vh; } .testimonial-section{ margin-top:11.64vh; width:67.899vw; gap:1px; } #review-info{ margin-top:8.466vh; } #review-info #review-info-header{ margin-left:-1.5%; } .testimonial-card{ background-color:black; border-radius: 15px; box-shadow:0 4px 10px rgba(0, 0, 0, 0.1); max-width:304px; text-align:center; position:relative; height:32.593vh; overflow:hidden; } .testimonial-wrapper{ background-color:white; width:15.25vw; height:32.381vh; border-radius: 15px; margin-top:1px; margin-left:10px; overflow: hidden; font-size:0.938rem; } .quote-icon{ width:12.454vw; height:4.974vh; margin-top:20px; justify-content: space-between; } .quote-img{ width:2.105vw; height:3.164vh; ; } .author-details{ width:11.088vw; height:4.868vh; } .client-img{ width:2.47vw; height:4.974vh; } .client-img img{ border-radius:50px; background-color:#D9D9D9; } .testimonial-text{ width: 13.137vw; height:12.169vh; } .testimonial-section::before{ content: ""; background:url('../IMG/arrow-elementL.png'); margin-right:15px; } .testimonial-section::after{ content: ""; background:url('../IMG/arrow-elementR.png'); } .testimonial-section::after, .testimonial-section::before{ transform: translateY(100%); width:3.678vw; height:7.407vh; background-size: cover; z-index: 1; } #contact-me{ background:url("../IMG/bg-image-form.png") no-repeat; background-size: cover; height:120.212vh; } #contact-info-content{ width:47.294vw; height:68.148vh; border-radius:10px; background-color: #fff; filter:drop-shadow(0px 1px 1px #000); } #contact-form{ width:43.09vw; margin-right:auto ; margin-left:auto; overflow:hidden; } #contact-form *{ display: block; } #contact-info-header h2{ width:7.777vw; height:8.042vh; margin-top:5%; } #contactP { width:48.187vw; height:9.524vh; text-align: center; } #contact-form input, #contact-form textarea{ width:42.88vw; border-radius:5px; background-color: #F1F1F1; border:0; padding-left:5px; } #contact-form input{ height:5.608vh; } #contact-form textarea{ height:21.481vh; } #contact-form button{ width:7.987vw; height:5.397vh; background-color: #fff; border-radius:8px; border: 1px solid #000; float:right; } #contact-info .header{ margin-left:45%; } .formgroup{ margin-top:40px; } .formgroup label{ margin-bottom:5px; text-align:left; } #Ready-connect{ font-family: "Oswald", serif; font-weight: 500; font-size: 4.438rem; height:11.111vh; margin-top:5%; } #Ready-connect p:nth-of-type(1){ width:50.563vw; margin-left:10%; } #Ready-connect p span{ display: inline-block; width:3.205vw; height:6.561vh; } footer{ height:46.772vh; background-color: #000; } .F-dev-info{ width:85.734vw; height:35.323vh; margin-top:5%; margin-left:10%; padding-bottom:20px; border-bottom: 0.5px solid #fff; } .f-title{ width:24.172vw; height:7.619vh; } .f-title p{ font-size:0.938; color:#fff; } .f-icon{ width:6.936vw; height:8.677vh; margin-left:60%; } .social-icon{ font-family: "Oswald", serif; font-size:1.875rem; color:white; font-weight: 600; } .ion-social-linkedin{ width:0.998vw; height:2.008vh; } .ion-social-github{ width:1.051vw; height:2.066vh; } .ion-social-instagram{ width:1.051vw; height:2.116vh; } .ion-social-youtube{ width:1.314vw; height:1.852vh; } .social-icons-list{ margin-top:20%; } .social-icons-list div:not(:nth-of-type(1)){ margin-left:10%; } .dev-name p{ font-family: "Oswald", serif; font-size:11.375rem; color:#fff; text-transform: uppercase; } .copyright{ width:5.78vw; height:1.905vh; font-size:0.75rem; margin-top:3%; color:#fff; } @media only screen and (max-width: 240px){ body{font-size: 0. 75rem} header{height:7vh} #logo{width:10vw} #logo a img{width: 6vw; height:3vh;} .intro-header{font-size: 1.75rem; margin-left: 5%;} .intro-parg, .intro-skills, #contact-form input, #contact-form textarea{width:90%;} nav ul li a {font-size:0.875rem;} } @media only screen and (max-width:1626px){ body{width:100vw; } #logo{ width: 6.736vw; } #namebar{ width:60.556vw; } .smwidth{ width:7.431vw; } .lgwidth{ width:8.958vw; } .intro-section{ width:52.722vw; } #left-bg{ width:17.5vw; } .intro-parg{ width:43.958vw; } #middle-wrapper{ width:70vw; } .intro-section{ width:auto; margin-top:20%; } .intro-skills{ width:50vw; } .intro-skills >:nth-of-type(1){ width:25.583vw; } .intro-skills > :nth-of-type(2){ width:21.806vw; } .intro-skills- p::before{ width:2.083vw; height:3vh; } .project-button{ margin-left:auto; } #button-wrapper{ width:18.333vw; } div#icon-button{ width:auto; } .icon-bar{ width:2.519vw } .header{ width:auto; } #skill-info-content{ height:20vh; margin-bottom:10vh; } #skill-section{ height:146.222vh } .skill-info{ width:71.944vw; } #video-container{ width:100%; height:67.222vh; margin-left:0; margin-right:100%; } #project-info .header h2::after{ margin-left:48%; } .pitem{ width:24.792vw; height:37.333vh; } #project-info-content{ margin-left:12%; } #project-info .header{ width:auto; } #review-info #review-info-header{ margin-left:-3%; } .quote-img{ width:2.464vw; height:3.289vh; } .testimonial-section{ width:90vw; margin-right:6%; } .testimonial-wrapper{ width: 20.153vw; } .testimonial-section::after, .testimonial-section::before{ width:4.861vw; height:7.778vh; } .testimonial-text{ width:16.605vw; height:12.778vh; } .author-details{ width:12.977vw; } #contact-me{ height:126.222vh; } #contact-info-header h2{ margin-top:20%; } #contact-info-header h2::after{ margin-left: 50%; } #contactP{ width:63.681vw; height:10vh; } #contact-form{ width:58vw; } #contact-info-content{ width:62.5vw; height:71.556vh; } #contact-form input, #contact-form textarea{ width:56.667vw; } #contact-form input{ height:5.889vh; } #Ready-connect p:nth-of-type(1){ width:auto; margin-left:1.5%; } #Ready-connect p:nth-of-type(2){ padding-left:15%; } .F-dev-info{ width:90.833vw; margin-left:5%; } .dev-name p{ font-size:8.775rem; } #Ready-connect{ font-size:4.063rem; margin-top:1%; } #Ready-connect p span{ width:4.306vw; } .icon-bar{ height:7vh; } .ion-social-instagram{ width:1.389vw; } .ion-social-youtube{ width:1.736vw; height:1.944vh; } } /*Extra Larger desktop(min-width:1627px)*/ @media only screen and (min-width:1627px){ .intro-header{font-size:5rem;} } @media only screen and (max-width:1024px){ .header_container{ width:100%; } #logo{ width:9.473vw; } #logo a img{ width:5.176vw; height:5.889vh; } #namebar{ /*width:46.094vw; width:68.556vw;*/ } .nav-menu{ width:auto; } .flex-grow{ flex-grow:0; } .smwidth{ width:10.449vw; max-width: 107px; flex-shrink:0; } .lgwidth{ width:12.598vw; flex-shrink:0; } nav ul{ width:23.047vw; } nav ul li{ display: inline-block; } #row-wrapper{ display: block!important; } #middle-wrapper{ width:90vw; } .intro-header{ font-size:3.313rem; margin-left:1%; } .intro-parg{ width:61.816vw; } .intro-skills- p::before{ width:2.93vw; } .intro-skills{ width:80%; margin-left:17%; } .intro-skills >:nth-of-type(1){ width:30.539vw; } .intro-skills > :nth-of-type(2){ width:30.664vw; } #button-wrapper{ width:25.781vw; } .icon-bar{ width:3.543vw; } .project-button{ width:25.781vw; } #skill-list-item-list ul li:nth-of-type(1){ width:7.715vw; } #skill-list-item-list ul li:nth-of-type(2){ width:6.836vw; } #skill-list-item-list ul li:nth-of-type(3){ width:17.578vw; } #skill-list-item-list ul li:nth-of-type(4){ width:12.109vw; } #project-info-content{ margin-left:5.5%; } .pitem{ width:29.004vw; } #vide-container{ border:0; padding:0; background-color:transparent; } video { width: 100%; height: 59.082vw; box-shadow: inset 0 0 0 15px #000; /* Apply shadow */ background: black; padding: 0; margin: 0; display: block; } .testimonial-section{ width:100%; } .testimonial-card{ width:28.341vw } .quote-icon{ width:19.531vw; padding-left:3px; } .testimonial-section::after, .testimonial-section::before{ width:6.836vw; height:7.778vh; } .testimonial-section::before{ margin-left:0; } .testimonial-section::after{ margin-right:10px; } .quote-img{ width:3.912vw; } .client-img{ width:4.59vw; } .testimonial-text{ width:95%; } .author-details{ width:100%; } .testimonial-card:nth-of-type(1) .testimonial-wrapper .author-details{ margin-top:40px; } .testimonial-card:nth-of-type(3) .testimonial-wrapper .author-details{ margin-top:40px; } #Ready-connect{ font-size:2.8rem; margin-top:7%; } #Ready-connect p:nth-of-type(1){ margin-left:0; } #Ready-connect p span{ width:4.957vw; height:4.561vh; } #contact-info .header{ margin-left:42%; } #contact-info-header h2::after{ margin-left:58%; } .F-dev-info{ width:92.833vw; } .ion-social-youtube{ width:2.441vw; height:1.944vh; } .ion-social-instagram{ width:2.953vw; height:2.222vh; } .ion-social-github{ width:2.953vw; height:2.169vh } .ion-social-linkedin{ width:2.855vw; height:2.109vh } .dev-name{ margin-top:5%; } .dev-name p{ font-size:6.35rem; } } @media only screen and (max-width:768px){ #namebar{ width:90%; background-color: white; border:0.052vw solid black; border-radius:0.521vw; line-height: 9.101vh; height:9.101vh; margin-top:2px; } #namebar h2{ display:none; } .nav-toggle{ display:block; } .nav-menu{ position:fixed; top:65px; left: -900px; width:100%; height:80.889vh; background-color: #fff; flex-direction: column; padding-top:60px; transition:left 0.3s ease-in-out; z-index: 9999; } .nav-menu.active{ left:0; } .nav-menu ul{ flex-direction: column; width:100%; } #nav-toggle img{ width:3.65vw; } .nav-menu ul li { border: 0; border-bottom:0.5px solid #000; margin-bottom:20px; max-width:100%; width:100%; } .nav-menu ul:first-child{ border-top:0.5px solid #000; } .nav-menu a { text-decoration:none; font-size:18px; } nav .footer-header{ display:block; } .header_container #nav-menu .footer-header *{ border: 0!important; color: black; line-height: initial; height: auto; } .nav-container .F-dev-info{ padding-bottom:0; } .nav-container .F-dev-info .display_flex .f-title{ margin: 0 auto; height:8.889vh; font-size: 0.813rem; } .nav-container .F-dev-info .display_flex .f-icon{ width:24.235vw; margin-left:10%; } .nav-dev-name{ margin-left:8%; margin-bottom: 5%!important; } .nav-container .F-dev-info .display_flex .f-icon .social-icon{ font-size:1.25rem; } .icon-bar{ width:4.8vw; } .pitem{ height:20.333vh; } #skill-section{ height:130.222vh; } #projects-list{ height:75.778vh; } } @media only screen and (max-width:425px){ .hero-section::before{ content:''; width:100%; height:100%; background-image: url(../IMG/mobile-ready.png); background-size:cover; display:block; position:absolute; } .hero-section{ background-image:url(../IMG/moblie-right-side.png), url(../IMG/mobile-upside.png); background-size:29.176vw 60.111vh, 10.118vw 25.333vh; } .hero-section::after{ background-image:url(../IMG/bottom-left.png); background-size:17.882vw 31.778vh; } #logo a img{ margin-top:9px; width:10.824vw; height:5.111vh; } #logo{ width:22.118vw; } #namebar{ width:90%; background-color: white; border:0.052vw solid black; border-radius:0.521vw; line-height: 9.101vh; height:9.101vh; margin-top:2px; } #namebar h2{ display:none; } .nav-toggle{ display:block; } .nav-menu{ position:fixed; top:65px; left: -500px; width:100%; height:80.889vh; background-color: #fff; flex-direction: column; padding-top:60px; transition:left 0.3s ease-int-out; z-index: 9999; } .nav-menu.active{ left:0; } .nav-menu ul{ flex-direction: column; width:100%; } .nav-menu ul li { border: 0; border-bottom:0.5px solid #000; margin-bottom:20px; max-width:100%; width:100%; } .nav-menu ul:first-child{ border-top:0.5px solid #000; } .nav-menu a { text-decoration:none; font-size:18px; } nav .footer-header{ display:block; } .header_container #nav-menu .footer-header *{ border: 0!important; color: black; line-height: initial; height: auto; } .nav-container .F-dev-info{ padding-bottom:0; } .nav-container .F-dev-info .display_flex .f-title{ margin: 0 auto; height:8.889vh; font-size: 0.813rem; } .nav-container .F-dev-info .display_flex .f-icon{ width:24.235vw; margin-left:10%; } .nav-dev-name{ margin-left:8%; margin-bottom: 5%!important; } .nav-container .F-dev-info .display_flex .f-icon .social-icon{ font-size:1.25rem; } .nav-linkedin{ width: 3.489vw!important; } .nav-copyright{ } main section:not(.hero-section){ border-radius:4.706vw; } #middle-wrapper{ width:100%; } .intro-header{ font-size:1.875rem; } .intro-parg{ width:64.941vw; font-size: 0.875rem; } .intro-skills{ width:100%; flex-direction: column; } .intro-skills-{ width: 64.235vw !important; margin-left: auto!important; margin-right: auto; margin-top:40px; font-size: 0.875rem; } .intro-skills- p::before{ width:7.529vw; height:3.444vh; margin:0 auto; margin-bottom: 10px; display:block; } .project-button{ width:32vw; } #button-wrapper{ width:36.235vw; } .icon-bar{ width:8.529vw; } #aboutme{ height:33.667vh; } #about-info{ width:77.176vw; font-size:1rem; } .header h2{ font-size:1.75rem; } .header h2::after{ width:11.294vw; } #skill-section{ height:119.444vh; } .skill-info{ width:77.176vw; } #skill-info-header{ margin-bottom:30px; } #skill-info-content{ height:32vh; font-size:1rem; } #skill-list-item{ width:26.588vw; } #skill-list-item h3{ font-size:1.563rem; } #skill-list-item-list{ font-size:0.938rem; } #skill-list-item-list ul li:nth-of-type(1){ width:15.699vw; } #skill-list-item-list ul li:nth-of-type(2){ width:13.911vw; } #skill-list-item-list ul li:nth-of-type(3){ width:24.553vw; } #skill-list-item-list ul li:nth-of-type(4){ width:16.692vw; } #video-section{ width:76.941vw; height:38.778vh; } #video-container, video{ height:inherit; } .play-button{ width:7.746vw; height:4.272vh; } #project-info .header h2::after{ margin-left:45%; } .project-item{ flex-direction: column; } #projects-list{ height:266.556vh; } #project-info-content{ margin-left: auto; } .pitem{ width:79.294vw; height:37.791vh; margin-left:auto; margin-right:auto; } .pitem:not(:nth-of-type(1)){ margin-left:auto; margin-top:10px; } .testimonial-section{ flex-direction: column; position: relative; } .testimonial-card{ width:299px; height: 337px; margin:auto; } .testimonial-wrapper{ width:280px; height:322px; margin-top:6px; } .testimonial-card:not(:nth-of-type(1)){ display:none; } .testimonial-section::after, .testimonial-section::before{ width:14.412vw; } .testimonial-section::before, .testimonial-section::after{ position:absolute; top:15%; } .testimonial-section::before{ left:-5px; } .testimonial-section::after{ right:0; margin-right:10px; } #contact-info-content{ width:95%; margin-top:30%; } #contact-form{ width:76.941vw; } #contact-form input, #contact-form textarea{ width:76.941vw; } #contact-form button{ width:29.882vw; float:left; } #contact-form textarea{ height:4.778vh; } #Ready-connect{ font-size:2.938rem; } #Ready-connect p span{ width:12vw; } footer{ height:43.444vh; } #Ready-connect p span.hidden-text, #Ready-connect p:nth-of-type(2){ display:none; } .F-dev-info{ height:auto; } .F-dev-info .display_flex{ flex-direction: column; } .f-title{ width:71.765vw; margin-top:30px; margin-bottom:25%; } .f-icon{ margin:0; } .f-icon .social-icons-list{ flex-direction: row; width:24.235vw; } .dev-name{ width:78.118vw; height:7.778vh; margin-bottom:10%; } .dev-name p{ font-size:37px; } .ion-social-linkedin{ width:3.485vw; height:1.646vh; } .ion-social-github{ width:3.673vw; height: 1.692vh; } .ion-social-instagram{ width:3.673vw; height:1.734vh; } .ion-social-youtube{ width:4.614vw; height:1.518vh; } .copyright{ width:100%; text-align:center; } } @media only screen and (max-width:397px){ #logo a img{ width:12.267vw; margin-top:2px; } .project-button{ margin-left:32%; } .icon-bar{ width: 9.833vw; background-repeat: no-repeat; margin-left:50%; } #button-wrapper{ width:41.067vw; } .testimonial-section::after, .testimonial-section::before{ width:10.667vw; height:4.444vh; background-size:cover; } .testimonial-section::after{ margin-right:0px; } #Ready-connect{ font-size:2.5rem; } #Ready-connect p span{ width:13.6vw; height:5.76vh; } .dev-name{ width:auto; } #skill-list-item{ width:29.6vw; } .intro-header{ font-size:1.438rem; } } @media only screen and (max-width:320px){ .icon-bar{ width: 11.533vw; } .intro-skills- p::before{ width:9.688vw; } #skill-info-header h2{ font-size:1.75rem; } #skill-list-item h3{ font-size:1.25rem; } .testimonial-card{ width:259px; } .testimonial-wrapper{ width:240px; } } body.no-scroll{ overflow:hidden; }