html {
scroll-behavior: smooth;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: white;
background-color: black;
}
.about_Banner {
height:50vh;
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* h1 {
max-width: 1400px;
text-align: center;
font-size: 72px;
transform: translateY(-50px);
} */
.about_Banner_Par {
font-size: 24px;
max-width: 1000px;
text-align: center;
}
/* local navigation */
.about_Local_Nav {
/* display: flex; */
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
height: 100px;
/* background-color: rgb(24, 24, 24); */
background-color: rgb(34, 34, 34);
}
.about_Local_Nav ul {
width: 100%;
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, 1fr);
justify-content: center;
align-items: center;
list-style: none;
color: white;
flex-wrap: wrap;
text-align: center;
gap: 35% 15%;
}
.subject_Link a {
color: #12bbf8;
text-decoration: none;
transition: all 200ms ease;
font-size: clamp(0.5rem, 5vw, 1.5rem);
}
.subject_Link a:hover {
color: white;
text-decoration: none;
}
/* Who we are */
.who_We_Are {
background-color: rgb(24, 24, 24);
padding-top: 100px;
padding-bottom: 100px;
display: flex;
flex-direction: column;
gap: 15vh;
}
.wwa_Intro {
display: flex;
justify-content: space-between;
/* flex-direction: column-reverse; */
width: 90vw;
max-width: 1920px;
margin: 0 auto;
padding: clamp(20px, 5%, 30px);
border-radius: 30px;
background-color: rgb(36, 36, 36);
}
.wwa_Img_Wrapper {
/* width: 30vw;
height: 80vh;
overflow: hidden;
border-radius: 30px; */
display: none;
/* justify-content: center;
align-items: center; */
}
/* .wwa_Img_Wrapper img {
height: 100%;
width: auto;
} */
.wwa_Info {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.who_We_Are_Text > h2 {
font-size: clamp(1rem, 10vw, 2.25rem);
text-align: center;
margin-bottom: 25px;
font-weight: bold;
}
.who_We_Are_Text > p {
font-size: clamp(0.5rem, 5vw, 1.5rem);
text-align:justify;
margin: 0 auto;
}
.mini_Windows_Containers {
padding: clamp(5px, 2%, 30px) 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.mini_Window {
background-color: rgb(24, 24, 24);
padding: 10px 10px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 15px;
max-width: 100%;
}
.mini_Img_Wrapper {
height: clamp(50px, 6vw, 80px);
width: clamp(50px, 6vw, 80px);
background: rgb(48, 48, 48);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
}
.mini_Img_Wrapper img {
height: 100%;
width: auto;
}
.mini_Description {
display: flex;
flex-direction: column;
justify-content: center;
}
.mini_Description p {
font-size: clamp(0.8rem, 3vw, 2.24rem);
}
/* services Section */
.services_Section {
display: flex;
justify-content: left;
justify-content: center;
align-items: center;
}
.service_Box {
padding: 50px 20px;
width: 90vw;
background-color: rgb(36, 36, 36);
/* height: 60vh; */
border-radius: 30px;
display: flex;
align-items: center;
flex-direction: column;
gap: 20px;
transition: all 200ms ease;
}
.service_Text {
display: flex;
flex-direction: column;
width: auto;
gap: 20px;
/* padding: clamp(10px, 4vw, 40px); */
height: 100%;
align-items: center;
text-align: justify;
}
.service_Text h3 {
font-size: clamp(1.5rem, 7.5vw, 3rem);
}
.service_Text p {
font-size: clamp(0.5rem, 5vw, 1.5rem);
}
.service_Text button {
margin: auto 0;
}
.service_Selection {
background-color: rgb(31, 30, 30);
width: 100%;
height: 50vh;
padding: 10px;
display: flex;
flex-direction: column;
gap: 5px;
overflow-y: scroll;
scrollbar-color: #00b2d6 rgb(24, 24, 24);
}
.service_Container {
padding: 10px;
display: flex;
gap: 10px;
align-items: center;
height: 100px;
border-radius: 15px;
border: 2px solid #00b2d600;
background-color: rgb(24, 24, 24);
}
/* .service_Container_Desc {
font-size: clamp(0.5rem, 3vw, 1rem);
} */
.service_Container:hover {
cursor: pointer;
}
.service_Img_Wrapper {
padding: 5px;
background-color: rgb(36, 36, 36);
border-radius: 10px;
}
.service_Img_Wrapper img {
width: clamp(40px, 3.1vw, 60px);
height: clamp(40px, 3.1vw, 60px);
}
.selected {
border: 2px solid #00b2d6;
/* border-right: none;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
top: 0; */
/* width: 520px; */
}
.service_Info_Page {
transition: all 200ms ease;
/* width: 0px; */
width: clamp(280px, 80vw, 600px);
height: clamp(250px, 60vh, 600px);
display: none;
/* justify-content: center;
align-items: center;
margin-left: 10px; */
position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
color: transparent;
}
.service_Info_Page_Activate {
display: flex;
color: white;
z-index: 1;
}
/* .closeBtn{
position: fixed;
top: 0;
right: 0;
height: clamp(30px, 8vw, 35px);
width: clamp(30px, 8vw, 35px);
background-color: #2b2b2b;
border:3px #12bbf8 solid;
border-radius: 50px;
transform: translate(50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.closeBtn img{
height: 90%;
width: 90%;
transition: all 500ms ease-in-out;
}
.closeBtn:hover, .closeBtn:hover img {
cursor:pointer;
}
.closeBtn:hover img {
transform: rotate(270deg);
}
.page_Background {
position: fixed;
width: 100vw;
height: 105vh;
background-color: rgba(37, 37, 37, 0.068);
background-blend-mode:color-dodge;
backdrop-filter: blur(10px);
z-index: -1;
} */
/* post selection */
/* .service_Box {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 100%;
} */
.page_Contents {
background-color: transparent;
/* overflow: hidden; */
/* contain: paint; */
height: 100%;
max-width: 100%;
max-height: 100%;
padding: 20px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
text-align: center;
border:2px #12bbf8 solid;
/* transform: translateY(200px); */
}
.page_Img_Wrapper {
width: 90%;
height: max-content;
overflow: hidden;
contain: paint;
background-color: aliceblue;
display: flex;
align-items: center;
}
.page_Img_Wrapper img {
width: 100%;
contain: paint;
}
.page_Description {
/* height: 300px; */
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.page_Description h3{
font-size: clamp(1rem, 3vw, 2.25rem);
}
.page_Description p{
font-size: clamp(0.5rem, 0.5rem + 1vw, 1.25rem);
}
.learn_More_Container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.learn_More_Page {
text-decoration: none;
color:#00b2d6;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(1rem, 3vw, 1.4rem);
height: 50px;
display: flex;
align-items: center;
transition: all 200ms ease;
}
.learn_More_Page::before {
width: 50px;
height: 50px;
content: " ";
display: inline-block;
}
.arrow-Right {
width: 50px;
height: 50px;
margin: auto 0;
/* background-color: #00b2d6; */
background-image: url("../Images/Webpage/keyboard_arrow_down_30dp_08BFFF_FILL0_wght400_GRAD0_opsz24.svg");
background-repeat: no-repeat;
background-size: 50px;
background-position-y: -200px;
transform: rotate(-90deg);
}
.learn_More_Page:hover {
color:#46e0ff;
/* color: #00b2d6; */
}
.learn_More_Container:hover .arrow-Right{
animation: slideright 200ms ease forwards;
}
/* vision */
.core_Values {
display: flex;
flex-direction: column;
align-items: center;
padding: 5%;
gap: 10vh;
}
.values_Preface {
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-evenly;
min-height: 100px;
}
.values_Preface h3 {
font-size: clamp(1rem, 10vw, 2rem);
}
.values_Preface > p {
font-size: clamp(0.8rem, 5vw, 1.5rem);
}
.values_List {
display: grid;
grid-template-columns: repeat(auto-fit, clamp(40px, 10vw, 80px));
width: 100%;
justify-content: space-evenly;
align-items: center;
gap: 20px 20vw;
text-align: center;
}
.value_Container {
color: #00b2d6;
font-size: clamp(0.8rem, 5vw, 1.5rem);
font-weight: 700;
display: flex;
flex-direction: column;
align-items: center;
}
.value_Img_Cont {
background-color: rgb(21, 21, 21);
padding: clamp(10px, 8vw, 30px);
border-radius: 50%;
}
.value_Image {
height: clamp(40px, 10vw, 80px) ;
width: auto;
}
/* Why Choose Us Section */
.why_Choose_Us_Section {
/* background-color: rgb(12, 12, 12); */
display: flex;
flex-direction: column;
gap: 10vh;
background-color: rgb(24, 24, 24);
padding: 100px 0;
align-items: center;
}
.why_Choose_Us_Section h2 {
font-size: clamp(1.5rem, 10vw, 2.25rem);
display: flex;
justify-content: center;
}
.why_Choose_Container {
display: flex;
flex-direction: column;
width: 90%;
align-items: center;
padding-bottom: 10%;
border-radius: 30px;
background-attachment: fixed;
background-size: cover;
background-image: url(https://img.freepik.com/premium-photo/black-architectural-design-skyscraper-dark-gray-background-highrise-geometric-building-futuristic3d-render_507676-1213.jpg);
background-position: bottom;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 21px;
/* text-shadow: 0px 0px 15px black; */
overflow: hidden;
}
.backdrop_Styling {
/* padding: 40px; */
display: flex;
flex-direction: column;
width: 100%;
flex-grow: 1;
}
.backdrop_Styling > div > p {
/* background-color: rgba(192, 192, 192, 0.384); */
background-color: rgba(34, 34, 34, 0.384);
border-radius: 20px;
width: max-content;
display: inline-block;
padding: clamp(5px, 5%, 25px) clamp(10px, 10%, 50px);
backdrop-filter: blur(12px)
}
.icon_Container {
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.icon_Container img {
height: 100%;
width: auto;
}
.why_Choose_Centerer {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
}
.why_Card_Container {
display: grid;
grid-template-columns: repeat(auto-fit, clamp(300px, 60vw, 700px));
grid-template-rows: minmax(auto, max-content);
row-gap: 20px;
column-gap: 20px;
}
.why_Choose_Card {
padding: 10px 0;
height: fit-content;
width: clamp(300px, 80%, 700px);
display: flex;
/* background-color: rgba(192, 192, 192, 0.384); */
background-color: rgba(34, 34, 34, 0.384);
border-radius: 20px;
backdrop-filter: blur(12px);
}
.why_Choose_Heading {
font-size: clamp(1rem, 10vw, 2rem);
text-align: center;
}
.why_Choose_Desc {
font-size: clamp(0.5rem, 4.5vw, 1.25rem);
}
.why_Choose_Titiling {
height: 200px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
padding: 0 5%;
}
/* Getting Started */
.getting_Started {
background-color: #0c0c0c;
padding: clamp(20px, 10%, 100px);
/* display: none; */
}
.how_To_Start {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.how_To_Start h2 {
font-size: clamp(0.5rem, 10vw, 2.24rem);
margin-bottom: 3vh;
}
.how_To_Start > p{
font-size: 25px;
margin-bottom: 3vh;
text-align: center;
}
.steps_To_Reach_Us {
display: flex;
flex-direction: column;
gap: 20px;
list-style-type: none;
}
.step_Container {
display: flex;
align-items: center;
gap: 15px;
padding: 5px;
font-size: 25px;
border-radius: 10px;
background-color: rgb(24, 24, 24);
}
.step_Container {
font-size: clamp(0.5rem, 4.3vw, 1.5rem);
}
.step_Img_Wrapper {
padding: 10px;
background-color: #0c0c0c;
border-radius: 15px;
}
/* conclusion */
.get_In_Touch {
padding: 100px 0;
}
.conclusion_Container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
gap: 30px;
}
.quote_Container {
display: flex;
max-height: 100%;
justify-content: center;
gap: 60px;
}
.conclusion_Img_Wrapper {
height: 80vw;
width: 80vw;
display: flex;
justify-content: center;
align-items: top;
overflow: hidden;
}
.img_Quote {
height: 980px;
width: auto;
}
.conclusion_Desc_Positioner {
display: flex;
flex-direction: column;
align-items: center;
}
.conc_Desc_Container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
gap: 30px;
text-align: center;
}
.conc_Desc_Container h3 {
font-size: clamp(1rem, 8vw, 3rem);
margin-bottom: 10px;
}
.conc_Desc_Container p {
font-size: 20px;
margin-bottom: 20px;
}
.conc_Contact_Btn {
padding: 8px 16px;
}
/* Faq section */
.faq_Section {
background-color: black;
padding: 100px 0px;
}
.faq_Section h2 {
text-align: center;
font-size: 36px;
margin-bottom: 10vh;
}
.accordion_Container {
display: grid;
grid-template-columns: repeat(2, 40vw);
gap: 50px;
justify-content: center;
}
.subtopic {
display: flex;
flex-direction: column;
gap: 5px;
}
@media (min-width: 500px) {
.page_Contents {
flex-direction: row;
gap: 5%;
}
.page_Img_Wrapper {
min-width: 50%;
height: 100%;
}
.page_Img_Wrapper img {
height: 100%;
width: auto;
}
.page_Description h3 {
font-size: clamp(1rem, 2vw, 1.5rem);
}
.page_Description p {
font-size: clamp(0.3rem, 1.8vw, 1rem);
}
.service_Info_Page {
height: clamp(250px, 75vh, 600px);
}
}
@media (min-width: 1220px) {
/* .about_Banner {
height:50vh;
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
} */
/* h1 {
max-width: 1400px;
text-align: center;
font-size: 72px;
transform: translateY(-50px);
} */
/* .about_Banner_Par {
font-size: 24px;
max-width: 1000px;
text-align: center;
} */
/* local navigation */
.about_Local_Nav {
/* display: flex; */
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
height: max-content;
/* background-color: rgb(24, 24, 24); */
background-color: rgb(34, 34, 34);
}
.about_Local_Nav ul {
padding: 3px;
grid-template-rows: repeat(1, 1fr);
gap: 35% 8%;
}
.subject_Link a {
color: #12bbf8;
text-decoration: none;
transition: all 200ms ease;
font-size: clamp(0.5rem, 5vw, 1.5rem);
}
.subject_Link a:hover {
color: white;
text-decoration: none;
}
/* Who we are */
.who_We_Are {
background-color: rgb(24, 24, 24);
padding-top: 100px;
padding-bottom: 100px;
display: flex;
flex-direction: column;
gap: 15vh;
}
.wwa_Intro {
display: flex;
justify-content: space-between;
gap:2.5%;
/* flex-direction: column-reverse; */
width: 80vw;
margin: 0 auto;
padding: clamp(10px, 10%, 20px);
border-radius: 30px;
background-color: rgb(36, 36, 36);
}
.wwa_Img_Wrapper {
min-width: clamp(400px, 30vw, 900px);
height: clamp(600px, 80vh, 900px);
overflow: hidden;
border-radius: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.wwa_Img_Wrapper img {
height: 100%;
width: auto;
}
.wwa_Info {
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex-grow: 0;
}
.who_We_Are_Text > h2 {
font-size: clamp(1rem, 10vw, 2.25rem);
text-align: center;
margin-bottom: 25px;
font-weight: bold;
}
.who_We_Are_Text > p {
font-size: clamp(0.5rem, 1.3vw, 1.5rem);
text-align:justify;
margin: 0 auto;
}
.mini_Windows_Containers {
padding: clamp(5px, 2%, 30px) 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.mini_Window {
background-color: rgb(24, 24, 24);
padding: 10px 10px;
border-radius: 15px;
display: flex;
align-items: center;
gap: 15px;
max-width: 100%;
}
.mini_Img_Wrapper {
height: clamp(50px, 6vw, 80px);
width: clamp(50px, 6vw, 80px);
background: rgb(48, 48, 48);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
}
.mini_Img_Wrapper img {
height: 100%;
width: auto;
}
.mini_Description {
display: flex;
flex-direction: column;
justify-content: center;
}
.mini_Description p {
font-size: clamp(0.5rem, 1.3vw, 1.5rem);
}
/* services Section */
.services_Section {
display: flex;
justify-content: left;
align-items: center;
}
.service_Box {
padding: 2vw;
width: max-content;
background-color: rgb(36, 36, 36);
margin: 0;
/* height: 60vh; */
border-radius: 30px;
display: flex;
flex-direction: row;
gap: 2vw;
transition: all 200ms ease;
}
.service_Text {
display: flex;
flex-direction: column;
width: clamp(300px, 30vw, 600px);
gap: 5%;
/* padding: 40px; */
height: clamp(300px, 35vw, 600px);
/* padding: clamp(10px, 4vw, 40px); */
min-height: 100%;
align-items: center;
justify-content: center;
text-align: justify;
}
.service_Text h3 {
font-size: clamp(1.5rem, 4.5vw, 2.5rem);
}
.service_Text p {
font-size: clamp(0.5rem, 1.25vw, 1.5rem);
}
.service_Text button {
margin: 0 0;
}
.service_Selection {
background-color: rgb(31, 30, 30);
/* min-width: 500px;
max-width: 500px; */
height: clamp(250px, 30vw, 500px);
width: clamp(300px, 30vw, 600px);;
padding: 10px;
display: flex;
flex-direction: column;
gap: 5px;
overflow-y: scroll;
scrollbar-color: #00b2d6 rgb(24, 24, 24);
background-color: rgb(31, 30, 30);
border-radius: 20px;
gap: 5px;
overflow-y: scroll;
scrollbar-color: #00b2d6 rgb(24, 24, 24);
}
.service_Container {
padding: 10px;
display: flex;
gap: 10px;
align-items: center;
height: 100px;
border-radius: 15px;
border: 2px solid #00b2d600;
background-color: rgb(24, 24, 24);
}
/* .service_Container_Desc {
font-size: clamp(0.5rem, 3vw, 1rem);
} */
.service_Container:hover {
cursor: pointer;
}
.service_Img_Wrapper {
padding: 5px;
background-color: rgb(36, 36, 36);
border-radius: 10px;
}
.service_Img_Wrapper img {
width: clamp(40px, 3.1vw, 60px);
height: clamp(40px, 3.1vw, 60px);
}
.selected {
border: 2px solid #00b2d6;
/* border-right: none;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
top: 0; */
/* width: 520px; */
}
.service_Info_Page {
/* width: 0px; */
height: clamp(300px, 35vw, 600px);
display: flex;
/* justify-content: center;
align-items: center;
margin-left: 10px; */
position: static;
top: unset;
left: unset;
transform: unset;
color: transparent;
width: 0;
transition: all 200ms ease;
}
.service_Info_Page_Activate {
display: flex;
color: white;
width: clamp(300px, 30vw, 600px);
/* width: 500px; */
z-index: 5;
}
.closeBtn{
position: fixed;
top: 0;
right: 0;
height: clamp(30px, 8vw, 35px);
width: clamp(30px, 8vw, 35px);
background-color: #2b2b2b;
border:3px #12bbf8 solid;
border-radius: 50px;
transform: translate(50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.closeBtn img{
height: 90%;
width: 90%;
transition: all 500ms ease-in-out;
}
.closeBtn:hover, .closeBtn:hover img {
cursor:pointer;
}
.closeBtn:hover img {
transform: rotate(270deg);
}
.page_Background {
position: fixed;
width: 100vw;
height: 105vh;
background-color: rgba(37, 37, 37, 0.068);
background-blend-mode:color-dodge;
backdrop-filter: blur(10px);
z-index: 1;
}
/* post selection */
/* .service_Box {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
width: 100%;
} */
.page_Contents {
background-color: transparent;
overflow: hidden;
contain: paint;
height: 100%;
max-width: 100%;
max-height: 100%;
padding: 20px;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
text-align: center;
transform: none;
border-color: transparent;
/* transform: translateY(200px); */
}
.page_Img_Wrapper {
width: 90%;
height: max-content;
overflow: hidden;
contain: paint;
background-color: aliceblue;
display: flex;
align-items: center;
}
.page_Img_Wrapper img {
width: 100%;
contain: paint;
display: none;
}
.page_Description {
/* height: 300px; */
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.page_Description h3{
font-size: clamp(1rem, 1.8vw, 2rem);
margin-bottom: 2%;
}
.page_Description p {
font-size: clamp(0.5rem, 1rem + 0.2vw, 1.3rem);
overflow: scroll;
}
.learn_More_Container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.learn_More_Page {
text-decoration: none;
color:#00b2d6;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(1rem, 3vw, 1.4rem);
height: 50px;
display: flex;
align-items: center;
transition: all 200ms ease;
}
.learn_More_Page::before {
width: 50px;
height: 50px;
content: " ";
display: inline-block;
}
.arrow-Right {
width: 50px;
height: 50px;
margin: auto 0;
/* background-color: #00b2d6; */
background-image: url("../Images/Webpage/keyboard_arrow_down_30dp_08BFFF_FILL0_wght400_GRAD0_opsz24.svg");
background-repeat: no-repeat;
background-size: 50px;
background-position-y: -200px;
transform: rotate(-90deg);
}
.learn_More_Page:hover {
color:#46e0ff;
/* color: #00b2d6; */
}
.learn_More_Container:hover .arrow-Right{
animation: slideright 200ms ease forwards;
}
/* vision */
.core_Values {
display: flex;
flex-direction: column;
align-items: center;
padding: 5%;
}
.values_Preface {
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-evenly;
min-height: 100px;
}
.values_Preface h3 {
font-size: clamp(1rem, 10vw, 2rem);
}
.values_Preface > p {
font-size: clamp(0.8rem, 5vw, 1.5rem);
}
.values_List {
display: grid;
grid-template-columns: repeat(auto-fit, clamp(40px, 10vw, 80px));
width: 100%;
justify-content: space-evenly;
align-items: center;
gap: 20px 20vw;
text-align: center;
}
.value_Container {
color: #00b2d6;
font-size: clamp(0.8rem, 5vw, 1.5rem);
font-weight: 700;
display: flex;
flex-direction: column;
align-items: center;
}
.value_Img_Cont {
background-color: rgb(21, 21, 21);
padding: clamp(10px, 8vw, 30px);
border-radius: 50%;
}
.value_Image {
height: clamp(40px, 10vw, 80px) ;
width: auto;
}
/* Why Choose Us Section */
.why_Choose_Us_Section {
/* background-color: rgb(12, 12, 12); */
display: flex;
flex-direction: column;
gap: 10vh;
background-color: rgb(24, 24, 24);
padding: 100px 0;
align-items: center;
}
.why_Choose_Us_Section h2 {
font-size: clamp(1.5rem, 10vw, 2.25rem);
display: flex;
justify-content: center;
}
.why_Choose_Container {
display: flex;
flex-direction: column;
width: clamp(650px, 62.5vw, 2304px);
align-items: center;
padding-bottom: 0;
border-radius: 30px;
background-attachment: fixed;
background-size: cover;
background-image: url(https://img.freepik.com/premium-photo/black-architectural-design-skyscraper-dark-gray-background-highrise-geometric-building-futuristic3d-render_507676-1213.jpg);
background-position: bottom;
color:white;
font-family: Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 21px;
/* text-shadow: 0px 0px 15px black; */
overflow: hidden;
}
.backdrop_Styling {
padding: 40px;
display: flex;
flex-direction: column;
width: 100%;
flex-grow: 1;
}
.backdrop_Styling > div > p {
/* background-color: rgba(192, 192, 192, 0.384); */
background-color: rgba(34, 34, 34, 0.384);
border-radius: 20px;
width: max-content;
display: inline-block;
padding: clamp(5px, 5%, 25px) clamp(10px, 10%, 50px);
backdrop-filter: blur(12px)
}
.icon_Container {
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.icon_Container img {
height: 100%;
width: auto;
}
.why_Choose_Centerer {
display: flex;
align-items: center;
justify-content: center;
flex-grow: 1;
}
.why_Card_Container {
display: grid;
grid-template-columns: repeat(2, minmax(auto, 700px));
grid-template-rows: minmax(auto, max-content);
row-gap: 20px;
column-gap: 20px;
}
.why_Choose_Card {
padding: 10px 0;
height: fit-content;
width: unset;
display: flex;
/* background-color: rgba(192, 192, 192, 0.384); */
background-color: rgba(34, 34, 34, 0.384);
border-radius: 20px;
backdrop-filter: blur(12px);
}
.why_Choose_Heading {
font-size: clamp(1rem, 10vw, 3rem);
text-align: center;
}
.why_Choose_Desc {
font-size: clamp(0.5rem, 4.5vw, 1.25rem);
}
.why_Choose_Titiling {
height: 200px;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
padding: 0 5%;
}
/* Getting Started */
.getting_Started {
background-color: #0c0c0c;
padding: clamp(20px, 10%, 100px);
/* display: none; */
}
.how_To_Start {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.how_To_Start h2 {
font-size: clamp(0.5rem, 10vw, 2.24rem);
margin-bottom: 3vh;
}
.how_To_Start > p{
font-size: 25px;
margin-bottom: 3vh;
text-align: center;
}
.steps_To_Reach_Us {
display: flex;
flex-direction: column;
gap: 20px;
list-style-type: none;
}
.step_Container {
display: flex;
align-items: center;
gap: 15px;
padding: 5px;
font-size: 25px;
border-radius: 10px;
background-color: rgb(24, 24, 24);
}
.step_Container {
font-size: clamp(0.5rem, 4.3vw, 1.5rem);
}
.step_Img_Wrapper {
padding: 10px;
background-color: #0c0c0c;
border-radius: 15px;
}
/* conclusion */
.get_In_Touch {
padding: 100px 0;
}
.conclusion_Container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
gap: 30px;
height: 700px;
width: 100%;
padding: 40px 80px;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.quote_Container {
display: flex;
max-height: 100%;
justify-content: center;
gap: 60px;
}
.conclusion_Img_Wrapper {
height: 80vw;
width: 80vw;
display: flex;
justify-content: center;
align-items: top;
overflow: hidden;
height: 600px;
width: clamp(350px, 31.25vw, 1200px);
min-width: 600px;
display: flex;
justify-content: center;
align-items: top;
overflow: hidden;
}
.img_Quote {
height: 980px;
width: auto;
}
.conclusion_Desc_Positioner {
display: flex;
flex-direction: column;
align-items: center;
}
.conc_Desc_Container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: unset;
height: 350px;
gap: 30px;
text-align: center;
}
.conc_Desc_Container h3 {
font-size: clamp(1rem, 8vw, 3rem);
margin-bottom: 10px;
}
.conc_Desc_Container p {
font-size: 20px;
margin-bottom: 20px;
}
.conc_Contact_Btn {
padding: 8px 16px;
}
/* Faq section */
.faq_Section {
background-color: black;
padding: 100px 0px;
}
.faq_Section h2 {
text-align: center;
font-size: 36px;
margin-bottom: 10vh;
}
.accordion_Container {
display: grid;
grid-template-columns: repeat(2, 40vw);
gap: 50px;
justify-content: center;
}
.subtopic {
display: flex;
flex-direction: column;
gap: 5px;
}
}
@media (min-width: 1600px) {
.page_Img_Wrapper {
width: 90%;
min-height: 180px;
height: clamp(180px, 40%, 300px);
overflow: hidden;
contain: paint;
background-color: aliceblue;
display: flex;
align-items: center;
}
.page_Img_Wrapper img {
width: 100%;
height: auto;
contain: paint;
display: block;
}
}
@media (min-width: 2000px) {
.subject_Link a {
color: #12bbf8;
text-decoration: none;
transition: all 200ms ease;
font-size: clamp(1.5rem, 5vw, 3.5rem);
}
.subject_Link a:hover {
color: white;
text-decoration: none;
}
/* Who we are */
.who_We_Are {
background-color: rgb(24, 24, 24);
padding-top: clamp(100px, 10vh, 250px);
padding-bottom: clamp(100px, 10vh, 250px);
}
.wwa_Intro {
display: flex;
justify-content: space-between;
gap:clamp(20px, 1.5vw, 60px);
/* flex-direction: column-reverse; */
width: 80vw;
max-width: unset;
padding: clamp(20px, 1.5vw, 60px);
border-radius: 60px;
}
.wwa_Img_Wrapper {
min-width: clamp(600px, 30vw, 1250px);
height: clamp(600px, 80vh, 2500px);
overflow: hidden;
border-radius: 60px;
}
.wwa_Info {
display: flex;
flex-direction: column;
justify-content: space-evenly;
flex-grow: 0;
}
.who_We_Are_Text > h2 {
font-size: clamp(2.25rem, 10vw, 5rem);
margin-bottom: clamp(25px, 1.5vw, 50px);
}
.who_We_Are_Text > p {
font-size: clamp(1.5rem, 1.8vw, 4.5rem);
text-align:justify;
margin: 0 auto;
/* padding: 0 clamp(20px, 1.5vw, 60px);; */
}
.mini_Windows_Containers {
padding: clamp(5px, 2%, 30px) 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.mini_Window {
background-color: rgb(24, 24, 24);
padding: 20px 20px;
border-radius: 30px;
display: flex;
align-items: center;
gap: 15px;
max-width: 100%;
}
.mini_Img_Wrapper {
height: clamp(80px, 6vw, 200px);
width: clamp(80px, 6vw, 200px);
background: rgb(48, 48, 48);
border-radius: clamp(15px, 1vw, 30px);
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
}
.mini_Img_Wrapper img {
height: 100%;
width: auto;
}
.mini_Description {
display: flex;
flex-direction: column;
justify-content: center;
}
.mini_Description h3 {
font-size: clamp(1.5rem, 1.5vw, 4.5rem);
}
.mini_Description p {
font-size: clamp(1.5rem, 1.3vw, 4rem);
}
/* services Section */
.services_Section {
display: flex;
justify-content: left;
align-items: center;
}
.service_Box {
padding: 2vw;
width: max-content;
background-color: rgb(36, 36, 36);
margin: 0;
/* height: 60vh; */
border-radius: 30px;
display: flex;
flex-direction: row;
gap: 2vw;
transition: all 200ms ease;
}
.service_Text {
display: flex;
flex-direction: column;
width: clamp(600px, 30vw, 1200px);
gap: 5%;
/* padding: 40px; */
height: clamp(600px, 35vw, 1200px);
/* padding: clamp(10px, 4vw, 40px); */
/* min-height: 100%; */
align-items: center;
justify-content: center;
text-align: justify;
}
.service_Text h3 {
font-size: clamp(2.5rem, 4.5vw, 3.5rem);
}
.service_Text p {
font-size: clamp(1.5rem, 1.25vw, 4.5rem);
}
.service_Text button {
margin: 0 0;
}
.service_Selection {
background-color: rgb(31, 30, 30);
/* min-width: 500px;
max-width: 500px; */
height: clamp(500px, 30vw, 1000px);
width: clamp(600px, 30vw, 1200px);
padding: clamp(10px, 0.6vw, 20px);
display: flex;
flex-direction: column;
gap: clamp(7px, 0.6vw, 20px);
border-radius: clamp(20px, 1vw, 40px);
}
.service_Container {
padding: clamp(10px, 0.6vw, 20px);
gap: clamp(10px, 0.6vw, 20px);
/* height: clamp(100px, 5vw, 200px); */
height: unset;
border: clamp(2px, 0.15vw, 6px) solid #00b2d600;
border-radius: clamp(15px, 0.7vw, 30px);
background-color: rgb(24, 24, 24);
font-size: clamp(1.5rem, 1.5vw, 2.2rem);
}
.service_Container:hover {
cursor: pointer;
}
.service_Img_Wrapper {
padding: clamp(10px, 0.6vw, 20px);
background-color: rgb(36, 36, 36);
border-radius: clamp(10px, 0.6vw, 20px);
}
.service_Img_Wrapper img {
width: clamp(60px, 4.1vw, 150px);
height: clamp(60px, 4.1vw, 150px);
}
.selected {
border: clamp(2px, 0.15vw, 6px) solid #00b2d6;
}
.service_Info_Page {
height: clamp(600px, 35vw, 1200px);
}
.service_Info_Page_Activate {
width: clamp(600px, 30vw, 1200px);
z-index: 1;
}
.page_Contents {
padding: clamp(20px, 1vw, 40px);
border-radius: clamp(20px, 1vw, 40px);
}
.page_Img_Wrapper {
width: 90%;
height: max-content;
overflow: hidden;
contain: paint;
background-color: aliceblue;
display: flex;
align-items: center;
}
.page_Img_Wrapper img {
width: 100%;
contain: paint;
}
.page_Description {
/* height: 300px; */
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.page_Description h3{
font-size: clamp(2rem, 1.8vw, 4rem);
margin-bottom: 2%;
}
.page_Description p {
font-size: clamp(1.3rem, 1rem + 0.5vw, 2.9rem);
text-align: justify;
overflow: scroll;
}
.learn_More_Page {
font-size: clamp(1.4rem, 3vw, 2.8rem);
height: clamp(50px, 2.5vw, 100px);
}
.learn_More_Page::before {
width: clamp(50px, 2.5vw, 100px);
height: clamp(50px, 2.5vw, 100px);
content: " ";
display: inline-block;
}
.arrow-Right {
width: clamp(50px, 2.5vw, 100px);
height: clamp(50px, 2.5vw, 100px);
background-size: clamp(50px, 2.5vw, 100px);
}
/* vision */
.values_Preface {
min-height: clamp(100px, 5vw, 200px);
}
.values_Preface h3 {
font-size: clamp(2rem, 10vw, 4rem);
}
.values_Preface > p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
.values_List {
grid-template-columns: repeat(auto-fit, clamp(80px, 10vw, 240px));
gap: clamp(20px, 1vw, 40px) 20vw;
}
.value_Container {
font-size: clamp(1.5rem, 5vw, 3rem);
}
.value_Img_Cont {
padding: clamp(30px, 8vw, 90px);
}
.value_Image {
height: clamp(80px, 10vw, 240px);
width: auto;
}
/* Why Choose Us Section */
.why_Choose_Us_Section {
gap: 10vh;
padding: clamp(100px, 5vw, 200px) 0;
}
.why_Choose_Us_Section h2 {
font-size: clamp(2.25rem, 10vw, 5rem);
}
.why_Choose_Container {
width: clamp(650px, 80vw, 3500px);
border-radius: clamp(30px, 1.5vw, 60px);
font-size: clamp(1.5rem, 1vw, 3rem);
}
.backdrop_Styling {
padding: clamp(40px, 2.2vw, 80px);
}
.backdrop_Styling > div > p {
border-radius: clamp(20px, 1vw, 40px);
padding: clamp(10px, 5%, 50px) clamp(20px, 10%, 100px);
}
.icon_Container {
width: clamp(70px, 5vw, 210px);
height: clamp(70px, 5vw, 210px);
padding: clamp(10px, 1.5vw, 30px);
}
.why_Choose_Centerer {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: clamp(100px, 10vw, 200px);
flex-grow: 1;
}
.why_Card_Container {
display: grid;
grid-template-columns: repeat(2, minmax(auto, 700px));
grid-template-rows: minmax(auto, max-content);
gap: clamp(20px, 1.2vw, 40px);
}
.why_Choose_Card {
padding: 10px 0;
height: fit-content;
width: clamp(700px, 36.45vw, 1400px);
border-radius: clamp(20px, 1.2vw, 40px);
backdrop-filter: blur(12px);
}
.why_Choose_Heading {
font-size: clamp(3rem, 4vw, 5rem);
text-align: center;
}
.why_Choose_Desc {
font-size: clamp(1.25rem, 4.5vw, 2.5rem);
}
.why_Choose_Titiling {
height: clamp(200px, 10vw, 400px);
gap: clamp(10px, 0.6vw, 20px);
justify-content: center;
align-items: center;
padding: 0 5%;
}
/* Getting Started */
.getting_Started {
background-color: #0c0c0c;
padding: clamp(20px, 10%, 100px);
/* display: none; */
}
.how_To_Start {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.how_To_Start h2 {
font-size: clamp(0.5rem, 10vw, 2.24rem);
margin-bottom: 3vh;
}
.how_To_Start > p{
font-size: clamp(2.5rem, 2vw, 3rem);
margin-bottom: 3vh;
text-align: center;
}
.steps_To_Reach_Us {
gap: clamp(20px, 1vw, 30px);
}
.step_Container {
display: flex;
align-items: center;
gap: clamp(15px, 0.8vw, 30px);
padding: clamp(10px, 0.5vw, 20px);
border-radius: clamp(15px, 0.8vw, 30px);
background-color: rgb(24, 24, 24);
}
.step_Container {
font-size: clamp(1.5rem, 4.3vw, 2.5rem);
}
.step_Img_Wrapper {
padding: clamp(10px, 0.5vw, 20px);
background-color: #0c0c0c;
border-radius: clamp(15px, 0.8vw, 30px);
}
.step_Img_Wrapper img {
padding: 10px;
width: clamp(50px, 4.1vw, 150px);
height: clamp(50px, 4.1vw, 150px);
background-color: #0c0c0c;
border-radius: clamp(15px, 0.8vw, 30px);
}
/* conclusion */
.get_In_Touch {
padding: clamp(100px, 5.3vw, 200px) 0;
}
.conclusion_Container {
gap: clamp(30px, 1.5vw, 60px);
height: clamp(700px, 36.45vw, 1400px);
padding: 40px 80px;
}
.quote_Container {
display: flex;
max-height: 100%;
justify-content: center;
gap: 60px;
}
.conclusion_Img_Wrapper {
height: 80vw;
width: 80vw;
display: flex;
justify-content: center;
align-items: top;
overflow: hidden;
height: clamp(600px, 31.25vw, 1200px);
width: clamp(600px, 31.25vw, 1200px);
min-width: 600px;
display: flex;
justify-content: center;
align-items: top;
overflow: hidden;
}
.img_Quote {
height: auto;
width: 100%;
}
.conc_Desc_Container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: unset;
height: 350px;
gap: clamp(30px, 1.6vw, 60vw);
text-align: center;
}
.conc_Desc_Container h3 {
font-size: clamp(3rem, 8vw, 5rem);
margin-bottom: 10px;
}
.conc_Desc_Container p {
font-size: 20px;
margin-bottom: 20px;
}
.conc_Contact_Btn {
padding: 8px 16px;
}
}
/* animations */
@keyframes slideright {
from {
background-position-y: -200px;
}
to {
background-position-y: 0px;
}
}