/* CATEGORY: LONG PHONES — SMALL WIDTH (basically phones with a width range between 0-390px wide & height range from 0-882px tall) STYLES FOR SMALL NARROW PHONES */ @media (max-width: 390px) and (max-height: 882px) { /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HOMEPAGE STYLING - needed) */ .homepage { padding: 0 8px; /* Further adjust horizontal padding for very small screens */ padding-top: 2dvh; /* Maintain top padding */ height:fit-content; margin-bottom: 3dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (NAVBAR STYLING - none needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HAMBURGER MENU STYLING - needed) */ .hamburger { display: block; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LOGO CONTAINER - none needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS CONTAINER - needed) */ .links { display: none; /* Hide links by default on small screens */ position: absolute; top: 70px; /* Adjust based on your navbar height */ right: 0; background-color: white; flex-direction: column; gap: 20px; /* Slightly reduce gap for smaller screens */ padding: 20px; /* Slightly reduce padding for smaller screens */ width: 75%; /* Slightly increase width for better usability */ box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; } .links.show { display: flex; /* Show when toggled */ } .navbar { position: relative; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO CONTAINER STYLING - not needed)*/ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO TEXT STYLING - needed)*/ .herotitle { font-size: clamp(24px, 14vw, 64px); } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO SUBTITLE STYLING - needed) */ .herosubtitle { font-size: 16px; padding: 0 2px; /* Adjust horizontal padding for smaller screens */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON STYLING - needed)) */ .button { padding: 16px 12px; /* Adjust padding for smaller screens */ font-size: 14px; /* Smaller font size */ border-radius: 27px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALT BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 1 STYLING - needed) */ .About { padding: 0 8px; /* Horizontal padding */ gap:2dvh; flex-wrap: wrap; padding-top: 2dvh; /* Top padding for spacing */ height:fit-content; margin-bottom:3dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE CONTAINER(LEFT) - needed) */ .ellipse-container { width: 100%; /* Width FILL */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE STYLING - needed) */ .ellipse { width:304px; height:304px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (EVERYTHING IN THE RIGHT CONTAINER STYLING - needed) */ .right-container { gap: 1dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .content { gap:0px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ .title { text-align:center; font-size:40px; line-height:normal; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING - needed) */ .subtitle { padding:16px 2px; text-align:justify; /* word-break: break-all; */ hyphens: auto; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed. Already styled above.) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 2 STYLING - needed) */ .Aboutpage2 { padding: 0 12px; /* Adjust horizontal padding for smaller screens */ flex-wrap: wrap; position:relative; min-width:fit-content; gap:0; /* height:fit-content; */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .AboutTILE { min-height: fit-content; max-height: fit-content; min-width: fit-content; padding: 16px 8px; /* Adjust padding for smaller screens */ gap:2vh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ .approachTitle, .expertiseTitle, .clientsTitle { font-size: clamp(16px, 6vh, 24px); text-align: center; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LIST STYLING - needed) */ .approachItems, .expertiseItems, .clientsItems { font-size: 14px; padding-left: 16px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER TITLE ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SERVICE PAGE STYLING - not needed) */ .Services { padding:0 12px; padding-bottom: 3dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ( ANIMATION WHEN THE SERVICES SECTION IS EXPANDED (JAVASCRIPT SIDE OF THINGS) - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER STYLING - not needed) */ .Maincontainer { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE TITLE STYLING(DUE TO BACKGROUND BEING BLUE) - needed) */ .title-alt { /* font-size: clamp(24px, 14vw, 64px); */ font-size:40px; line-height:normal; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE SUBTITLE STYLING(DUE TO BACKGROUND BEING BLUE) - not needed) */ .subtitle-alt { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE - not needed) */ .ServiceTile { /* gap:24px; */ gap:16px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE NAME - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE NAME - needed) */ .BusinessName, .DataName, .EducationName, .ProjectName { font-size: clamp(24px, 8vh, 24px); text-align: left; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE DESCRIPTION CONTAINER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE LIST CONTAINER - not needed ) */ /* (THE SERVICE LIST STYLING - not needed ) */ .BusinessInfo, .DataInfo, .EducationInfo, .ProjectInfo { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CTA ) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT PAGE STYLING - later)*/ .Contact { flex-wrap: wrap; padding:0 12px; /* Adjust horizontal paddSing for smaller screens */ padding-top: 2dvh; gap:0px; align-content: flex-start; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT CONTENT CONTAINER) */ .LEFTContent { gap: 2dvh; padding:0px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING) */ .Contact-t { /* font-size: clamp(24px, 14vw, 64px); */ font-size: 40px; line-height:normal; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING) */ .Contact-subtitle { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT CONTENT CONTAINER) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT FORM CONTAINER) */ .ContactForm { padding :16px 2px } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE NAMES) */ .Names { flex-wrap: wrap; gap:8px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT NAME CONTAINER (FIRSTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT NAME CONTAINER (LASTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (FILL IN HEADINGS STYLING E.G ORGANIZATION , EMAIL) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (INPUT STYLING) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* END */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* CATEGORY: LONG PHONES — MEDIUM WIDTH ( basically phones with a width range between 391–430px wide & height range from 0-932px tall) STYLES FOR MEDIUM-WIDTH PHONES*/ @media (min-width: 391px) and (max-width: 430px) and (max-height: 932px) { /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HOMEPAGE STYLING - needed) */ .homepage { padding: 0 8px; /* Further adjust horizontal padding for very small screens */ padding-top: 2vh; /* Maintain top padding */ height:fit-content; margin-bottom: 3dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (NAVBAR STYLING - none needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HAMBURGER MENU STYLING - needed) */ .hamburger { display: block; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LOGO CONTAINER - none needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS CONTAINER - needed) */ .links { display: none; /* Hide links by default on small screens */ position: absolute; top: 70px; /* Adjust based on your navbar height */ right: 0; background-color: white; flex-direction: column; gap: 20px; /* Slightly reduce gap for smaller screens */ padding: 20px; /* Slightly reduce padding for smaller screens */ width: 75%; /* Slightly increase width for better usability */ box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; } .links.show { display: flex; /* Show when toggled */ } .navbar { position: relative; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO CONTAINER STYLING - not needed)*/ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO TEXT STYLING - needed)*/ .herotitle { font-size: clamp(24px, 14vw, 64px); /* font-size:56px; */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO SUBTITLE STYLING - needed) */ .herosubtitle { font-size: 16px; padding: 0 2px; /* Adjust horizontal padding for smaller screens */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON STYLING - needed)) */ .button { padding: 16px 16px; /* Adjust padding for smaller screens */ font-size: 14px; /* Smaller font size */ border-radius: 27px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALT BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 1 STYLING - needed) */ .About { padding: 0 12px; /* Horizontal padding */ gap:2dvh; flex-wrap: wrap; padding-top: 2dvh; /* Top padding for spacing */ height:fit-content; margin-bottom:3dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE CONTAINER(LEFT) - needed) */ .ellipse-container { width: 100%; /* Width FILL */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE STYLING - needed) */ .ellipse { width:336px; height:336px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (EVERYTHING IN THE RIGHT CONTAINER STYLING - needed) */ .right-container { gap: 1dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .content { gap:0px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ .title { text-align:center; font-size:48px; line-height:normal; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING - needed) */ .subtitle { padding:24px 2px; text-align:justify; /* word-break: break-all; */ hyphens: auto; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed. Already styled above.) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 2 STYLING - needed) */ .Aboutpage2 { flex-wrap: wrap; position:relative; min-width:fit-content; gap:0; padding: 0px 12px; padding-top: 2vh; /* height:fit-content; */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .AboutTILE { min-height: fit-content; max-height: fit-content; min-width: fit-content; padding: 16px 8px; /* Adjust padding for smaller screens */ gap:2vh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ .approachTitle, .expertiseTitle, .clientsTitle { font-size: clamp(16px, 6vh, 24px); text-align: center; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LIST STYLING - needed) */ .approachItems, .expertiseItems, .clientsItems { font-size: 14px; padding-left: 24px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER TITLE ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SERVICE PAGE STYLING - not needed) */ .Services { padding:0 12px; padding-bottom: 3dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ( ANIMATION WHEN THE SERVICES SECTION IS EXPANDED (JAVASCRIPT SIDE OF THINGS) - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER STYLING - not needed) */ .Maincontainer { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE TITLE STYLING(DUE TO BACKGROUND BEING BLUE) - needed) */ .title-alt { font-size:48px; line-height:normal; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE SUBTITLE STYLING(DUE TO BACKGROUND BEING BLUE) - not needed) */ .subtitle-alt { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE - not needed) */ .ServiceTile { gap:24px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE NAME - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE NAME - needed) */ .BusinessName, .DataName, .EducationName, .ProjectName { font-size: clamp(24px, 8vh, 32px); text-align: left; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE DESCRIPTION CONTAINER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE LIST CONTAINER - not needed ) */ /* (THE SERVICE LIST STYLING - not needed ) */ .BusinessInfo, .DataInfo, .EducationInfo, .ProjectInfo { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT PAGE STYLING - later)*/ .Contact { flex-wrap: wrap; padding:0 12px; /* Adjust horizontal paddSing for smaller screens */ padding-top: 2dvh; gap:0px; align-content: flex-start; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT CONTENT CONTAINER) */ .LEFTContent { gap: 2dvh; padding:0px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING) */ .Contact-t { font-size:48px; line-height:normal; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING) */ .Contact-subtitle { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT CONTENT CONTAINER) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT FORM CONTAINER) */ .ContactForm { padding :24px 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE NAMES) */ .Names { flex-wrap: wrap; gap:8px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT NAME CONTAINER (FIRSTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT NAME CONTAINER (LASTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (FILL IN HEADINGS STYLING E.G ORGANIZATION , EMAIL) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (INPUT STYLING) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* END */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* CATEGORY: LONG PHONES — LONG WIDTH (basically phones with a width range between 431–540px wide & height range from 0-720px tall) STYLES FOR WIDE PHONES (FOLDABLES, etc.) */ @media (min-width: 431px) and (max-width: 540px) and (max-height: 720px) { /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HOMEPAGE STYLING - needed) */ .homepage { padding: 0 16px; /* Further adjust horizontal padding for very small screens */ padding-top: 2dvh; /* Maintain top padding */ height:fit-content; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (NAVBAR STYLING - none needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HAMBURGER MENU STYLING - needed) */ .hamburger { display: block; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LOGO CONTAINER - none needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS CONTAINER - needed) */ .links { display: none; /* Hide links by default on small screens */ position: absolute; top: 70px; /* Adjust based on your navbar height */ right: 0; background-color: white; flex-direction: column; gap: 20px; /* Slightly reduce gap for smaller screens */ padding: 20px; /* Slightly reduce padding for smaller screens */ width: 75%; /* Slightly increase width for better usability */ box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; } .links.show { display: flex; /* Show when toggled */ } .navbar { position: relative; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO CONTAINER STYLING - not needed)*/ .hero-section { gap:2dvh } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO TEXT STYLING - needed)*/ .herotitle { font-size: clamp(24px, 14vw, 80px); } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO SUBTITLE STYLING - needed) */ .herosubtitle { font-size: 16px; padding: 0 2px; /* Adjust horizontal padding for smaller screens */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON STYLING - needed)) */ .button { padding: 16px 16px; /* Adjust padding for smaller screens */ font-size: 14px; /* Smaller font size */ border-radius: 27px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALT BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 1 STYLING - needed) */ .About { padding: 0 16px; /* Horizontal padding */ gap:2dvh; flex-wrap: wrap; padding-top: 2dvh; /* Top padding for spacing */ height:fit-content; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE CONTAINER(LEFT) - needed) */ .ellipse-container { width: 100%; /* Width FILL */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE STYLING - needed) */ .ellipse { width:368px; height:368px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (EVERYTHING IN THE RIGHT CONTAINER STYLING - needed) */ .right-container { gap: 4dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .content { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ .title { text-align:center; font-size:56px; line-height:1.1; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING - needed) */ .subtitle { padding:0 2px; text-align:justify; /* word-break: break-all; */ hyphens: auto; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed. Already styled above.) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 2 STYLING - needed) */ .Aboutpage2 { flex-wrap: wrap; position:relative; min-width:fit-content; gap:0; height:fit-content; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .AboutTILE { min-height: fit-content; max-height: fit-content; min-width: fit-content; padding: 16px 8px; /* Adjust padding for smaller screens */ gap:2vh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ .approachTitle, .expertiseTitle, .clientsTitle { font-size: clamp(16px, 6vh, 24px); text-align: center; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LIST STYLING - needed) */ .approachItems, .expertiseItems, .clientsItems { font-size: 14px; padding-left: 24px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER TITLE ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SERVICE PAGE STYLING - not needed) */ .Services { padding:0 16px; padding-top: 2dvh; padding-bottom: 3dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ( ANIMATION WHEN THE SERVICES SECTION IS EXPANDED (JAVASCRIPT SIDE OF THINGS) - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER STYLING - not needed) */ .Maincontainer { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE TITLE STYLING(DUE TO BACKGROUND BEING BLUE) - needed) */ .title-alt { /* font-size: clamp(24px, 14vw, 64px); */ font-size:56px; line-height:1.1; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE SUBTITLE STYLING(DUE TO BACKGROUND BEING BLUE) - not needed) */ .subtitle-alt { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE - not needed) */ .ServiceTile { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE NAME - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE NAME - needed) */ .BusinessName, .DataName, .EducationName, .ProjectName { font-size: clamp(24px, 8vh, 40px); text-align: left; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE DESCRIPTION CONTAINER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE LIST CONTAINER - not needed ) */ /* (THE SERVICE LIST STYLING - not needed ) */ .BusinessInfo, .DataInfo, .EducationInfo, .ProjectInfo { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT PAGE STYLING - later)*/ .Contact { flex-wrap: wrap; padding:0 16px; /* Adjust horizontal paddSing for smaller screens */ padding-top: 2dvh; gap:2dvh; align-content: flex-start; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT CONTENT CONTAINER) */ .LEFTContent { padding:0px; gap: 2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING) */ .Contact-t { /* font-size: clamp(24px, 14vw, 56px); */ font-size:56px; line-height:1.1; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING) */ .Contact-subtitle { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT CONTENT CONTAINER) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT FORM CONTAINER) */ .ContactForm { padding: 0px 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE NAMES) */ .Names { flex-wrap: wrap; gap:8px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT NAME CONTAINER (FIRSTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT NAME CONTAINER (LASTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (FILL IN HEADINGS STYLING E.G ORGANIZATION , EMAIL) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (INPUT STYLING) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* END */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /*CATEGORY: LONG TABLETS — SMALL WIDTH ( basically tablets with a width range between 541–912px wide & height range from 0-1368px tall ) STYLES FOR SMALL/MEDIUM TABLETS */ @media (min-width: 541px) and (max-width: 912px) and (min-height: 1024px) and (max-height: 1368px) { /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HOMEPAGE STYLING - needed) */ .homepage { padding: 0 16px; /* Further adjust horizontal padding for very small screens */ padding-top: 2vh; /* Maintain top padding */ gap:2dvh; height:fit-content; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (NAVBAR STYLING - none needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HAMBURGER MENU STYLING - not needed) */ .hamburger { display: block; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LOGO CONTAINER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS CONTAINER - not needed) */ .links { display: none; /* Hide links by default on small screens */ position: absolute; top: 70px; /* Adjust based on your navbar height */ right: 0; background-color: white; flex-direction: column; gap: 20px; /* Slightly reduce gap for smaller screens */ padding: 20px; /* Slightly reduce padding for smaller screens */ width: 75%; /* Slightly increase width for better usability */ box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; } .links.show { display: flex; /* Show when toggled */ } .navbar { position: relative; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO CONTAINER STYLING - not needed)*/ .hero-section { gap:2dvh } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO TEXT STYLING - needed)*/ /* .herotitle { font-size: clamp(24px, 14vw, 80px); } */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO SUBTITLE STYLING - needed) */ .herosubtitle { font-size: 16px; padding: 0 2px; /* Adjust horizontal padding for smaller screens */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON STYLING - needed)) */ .button { padding: 16px 16px; /* Adjust padding for smaller screens */ font-size: 14px; /* Smaller font size */ border-radius: 27px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALT BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 1 STYLING - needed) */ .About { padding: 0 24px; /* Horizontal padding */ gap:2dvh; flex-wrap: wrap; padding-top: 2dvh; /* Top padding for spacing */ height:fit-content; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE CONTAINER(LEFT) - needed) */ .ellipse-container { width: 100%; /* Width FILL */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE STYLING - needed) */ .ellipse { width:392px; height:392px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (EVERYTHING IN THE RIGHT CONTAINER STYLING - needed) */ .right-container { gap: 2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .content { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ .title { text-align:center; font-size:64px; line-height:1.1; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING - needed) */ .subtitle { padding:0 2px; text-align:justify; /* word-break: break-all; */ hyphens: auto; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed. Already styled above.) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 2 STYLING - needed) */ .Aboutpage2 { /* flex-wrap: wrap; */ position:relative; /* min-width:fit-content; */ /* gap:0; */ padding: 0 32px; padding-top: 2dvh; height:fit-content; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .AboutTILE { /* min-height: fit-content; */ max-height: fit-content; min-width:auto; padding: 16px 8px; /* Adjust padding for smaller screens */ gap:2vh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ .approachTitle, .expertiseTitle, .clientsTitle { font-size: clamp(16px, 6vh, 24px); text-align: center; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LIST STYLING - needed) */ .approachItems, .expertiseItems, .clientsItems { font-size: 14px; padding-left:0px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER TITLE ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SERVICE PAGE STYLING - not needed) */ .Services { padding:0 16px; padding-top: 2dvh; padding-bottom: 3dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ( ANIMATION WHEN THE SERVICES SECTION IS EXPANDED (JAVASCRIPT SIDE OF THINGS) - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER STYLING - not needed) */ .Maincontainer { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE TITLE STYLING(DUE TO BACKGROUND BEING BLUE) - needed) */ .title-alt { /* font-size: clamp(24px, 14vw, 64px); */ font-size:64px; line-height:1.1; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE SUBTITLE STYLING(DUE TO BACKGROUND BEING BLUE) - not needed) */ .subtitle-alt { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE - not needed) */ .ServiceTile { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE NAME - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE NAME - needed) */ .BusinessName, .DataName, .EducationName, .ProjectName { font-size: clamp(24px, 8vh, 48px); text-align: left; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE DESCRIPTION CONTAINER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE LIST CONTAINER - not needed ) */ /* (THE SERVICE LIST STYLING - not needed ) */ .BusinessInfo, .DataInfo, .EducationInfo, .ProjectInfo { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT PAGE STYLING - later)*/ .Contact { flex-wrap: wrap; padding:0 16px; /* Adjust horizontal paddSing for smaller screens */ gap:2dvh; align-content: flex-start; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT CONTENT CONTAINER) */ .LEFTContent { padding:0px; gap: 2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING) */ .Contact-t { /* font-size: clamp(24px, 14vw, 56px); */ font-size:64px; line-height:1.1; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING) */ .Contact-subtitle { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT CONTENT CONTAINER) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT FORM CONTAINER) */ .ContactForm { padding: 0px 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE NAMES) */ .Names { flex-wrap: wrap; gap:8px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT NAME CONTAINER (FIRSTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT NAME CONTAINER (LASTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (FILL IN HEADINGS STYLING E.G ORGANIZATION , EMAIL) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (INPUT STYLING) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* END */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /*CTAEGORY: LONG TABLETS — LONG WIDTH ( basically tablets with a width range between 913–1024px wide & height range from 0-1366px tall ) STYLES FOR LARGE TABLETS LIKE IPAD PRO*/ @media (min-width: 913px) and (max-width: 1024px) and (max-height: 1366px) { /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HOMEPAGE STYLING - needed) */ .homepage { gap:2dvh; padding: 0 28px; padding-top: 2dvh; height:110dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (NAVBAR STYLING - none needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HAMBURGER MENU STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LOGO CONTAINER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS CONTAINER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LINKS ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO CONTAINER STYLING - not needed)*/ .hero-section { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO TEXT STYLING - needed)*/ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (HERO SUBTITLE STYLING - needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON STYLING - needed)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALT BUTTON 1 BUTTON 2 INITIAL AND HOVER STYLING - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 1 STYLING - needed) */ .About { padding: 0 28px; /* Horizontal padding */ gap:5dvw; /* flex-wrap: wrap; */ padding-top: 2dvh; /* Top padding for spacing */ padding-bottom:2dvh; height:100dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE CONTAINER(LEFT) - needed) */ .ellipse-container { width:fit-content; /* Width FILL */ } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (IMAGE STYLING - needed) */ .ellipse { width:400px; height:400px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (EVERYTHING IN THE RIGHT CONTAINER STYLING - needed) */ .right-container { gap: 2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .content { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ .title { text-align:left; font-size:64px; line-height:1.1; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING - needed) */ .subtitle { padding:0 2px; text-align:justify; /* word-break: break-all; */ hyphens: auto; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (BUTTON CONTAINER STYLING - not needed. Already styled above.) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ABOUT PAGE 2 STYLING - needed) */ .Aboutpage2 { padding: 0 32px; padding-top: 2vh; gap:0px; height:100dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TEXT CONTAINER STYLING - needed) */ .AboutTILE { gap: 2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING - needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LIST STYLING - needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER TITLE ANIMATION ON HOVER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SERVICE PAGE STYLING - not needed) */ .Services { padding:0 28px; padding-top: 2dvh; padding-bottom: 3dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* ( ANIMATION WHEN THE SERVICES SECTION IS EXPANDED (JAVASCRIPT SIDE OF THINGS) - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER STYLING - not needed) */ .Maincontainer { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE TITLE STYLING(DUE TO BACKGROUND BEING BLUE) - needed) */ .title-alt { /* font-size: clamp(24px, 14vw, 64px); */ font-size:64px; line-height:1.1; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (ALTERNATE SUBTITLE STYLING(DUE TO BACKGROUND BEING BLUE) - not needed) */ .subtitle-alt { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE - not needed) */ .ServiceTile { gap:2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE SERVICE NAME - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE NAME - needed) */ .BusinessName, .DataName, .EducationName, .ProjectName { font-size: clamp(24px, 8vh, 48px); text-align: left; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE DESCRIPTION CONTAINER - not needed) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (THE SERVICE LIST CONTAINER - not needed ) */ /* (THE SERVICE LIST STYLING - not needed ) */ .BusinessInfo, .DataInfo, .EducationInfo, .ProjectInfo { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT PAGE STYLING - later)*/ .Contact { flex-wrap: wrap; padding:0 28px; /* Adjust horizontal paddSing for smaller screens */ gap:2dvh; align-content: flex-start; height: 110dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT CONTENT CONTAINER) */ .LEFTContent { padding:0px; gap: 2dvh; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (TITLE STYLING) */ .Contact-t { /* font-size: clamp(24px, 14vw, 56px); */ font-size:64px; line-height:1.1; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (SUBTITLE STYLING) */ .Contact-subtitle { padding:0 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT CONTENT CONTAINER) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTACT FORM CONTAINER) */ .ContactForm { padding: 0px 2px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (CONTAINER FOR THE NAMES) */ .Names { flex-wrap: wrap; gap:8px; } /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (LEFT NAME CONTAINER (FIRSTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (RIGHT NAME CONTAINER (LASTNAME)) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (FILL IN HEADINGS STYLING E.G ORGANIZATION , EMAIL) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /* (INPUT STYLING) */ /* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ } /*CATEGORY:LAPTOPS 1025px–1280px widE------------------------------ */ /* @media (min-width: 1025px) and (max-width: 1280px) { } */