@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; src: url("../g_font/Roboto-Regular.woff2") format("woff2"), url("../g_font/Roboto-Regular.woff") format("woff"), url("../g_font/Roboto-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Roboto"; font-weight: 400; font-style: italic; src: url("../g_font/Roboto-Italic.woff2") format("woff2"), url("../g_font/Roboto-Italic.woff") format("woff"), url("../g_font/Roboto-Italic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; src: url("../g_font/Roboto-Medium.woff2") format("woff2"), url("../g_font/Roboto-Medium.woff") format("woff"), url("../g_font/Roboto-Medium.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; src: url("../g_font/Roboto-Bold.woff2") format("woff2"), url("../g_font/Roboto-Bold.woff") format("woff"), url("../g_font/Roboto-Bold.ttf") format("truetype"); font-display: swap; } html { overflow-y: scroll; -webkit-text-size-adjust: none; } body { background-color: #000000; margin: 0px; font-family: "Roboto", Arial, Helvetica, sans-serif; font-weight: 400; font-size: 14px; color: rgb(50, 50, 50); -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ width: 100%; min-width: auto; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } ::-webkit-selection { color: var(--wh-color); background: var(--prpl-color); } ::-moz-selection { color: var(--wh-color); background: var(--prpl-color); } ::selection { color: var(--wh-color); background: var(--prpl-color); } :root { --wh-color: #f5f5f5; --wh-pp-color: #dcdcdc; --prpl-color: #3305D9; --grey-color: #18202f; --pulse-outline-color: transparent; --fs-intro: 6em; --fs-1: 4.2em; --fs-2: 3em; --fs-3: 1.629em; --fs-4: 1.285714em; --fs-5: 3em; --fs-6: 1.4em; --ttl-padding: 60px; --main-border-radius: 22px; --line-border-radius: 21px; } .typography_1 { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: var(--fs-intro); line-height: 1.2em; font-weight: 700; letter-spacing: -0.002em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } .typography_2 { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: var(--fs-3); color: var(--wh-color); line-height: 1.5em; font-weight: 400; letter-spacing: .009em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } .typography_3 { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: var(--fs-2); color: var(--wh-color); font-weight: 700; letter-spacing: 0.025em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } .typography_4 { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: var(--fs-5); color: var(--wh-color); font-weight: 700; letter-spacing: 0.025em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } .typography_5 { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: var(--fs-6); color: var(--wh-pp-color); font-weight: 400; letter-spacing: 0.015em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; } /* Page Loader */ #preloader { position: fixed; width: 100%; height: 100vh; background: #000000; /*background: rgb(8, 12, 19);*/ /*background-image: linear-gradient(to bottom right, rgba(8, 12, 19, 1), rgba(0, 102, 102, 1));*/ z-index: 99999999999; } .noScrollSimple { overflow:hidden; } #vision { height: 175px; background-color: rgb(0, 0, 0); width: 100%; position: relative; } .section_bk, .section_bka { /* padding-top: 50px; */ background-color: rgb(0, 0, 0); width: 100%; position: relative; text-align: center; display: inline-block; } .section_bk { padding-bottom: 200px; } #services { padding-top: 200px; } .container_vision { position: relative; width: 78%; /* max-width: 1650px; */ max-width: 1260px; margin: 75px auto 60px; /* display: flex; */ } .exp_col { width: 85%; height: 100%; max-height: 127%; position: absolute; /* top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) translateZ(0); transform: translate(-50%, -50%) translateZ(0); */ border-radius: var(--main-border-radius); background: var(--prpl-color); will-change: transform; } .exp_cont { width: 100%; height: 100%; /* border: 1px solid red; */ display: flex; justify-content: center; align-items: center; } .bg_blr_cont { position: relative; width: 83%; height: 100%; margin: 0 auto; /* display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap; will-change: transform; */ } .blr_cont_child { padding: 10.5%; margin: 0 auto; /* position: relative; */ border-radius: var(--main-border-radius); display: flex; align-items: center; justify-content: center; } /* .br_cont_child { height: 100vh; } */ .square_1, .square_2, .square_3 { margin: 0 auto; text-align: left; width: 100% !important; height: auto; } .cont_sq_3, .cont_sq_2 { position: absolute;/* top: 50%; left: 50%; transform: translate(-50%, -50%); */ /* display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center; */ display: flex; align-items: center; justify-content: center; border: 1px solid transparent; text-align: left; width: 95%; /* height: 100%; */ } .cont_sq_1, .cont_sq_2, .cont_sq_3 { will-change: transform; } .div_dot { display: inline-block; } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-left: 6px; will-change: transform; background: var(--wh-color); } .wh_dot { fill: var(--wh-color); } #intro::-webkit-selection, .div_dot::-webkit-selection, #title2::-webkit-selection, .div_dot::-webkit-selection { color: var(--wh-color); background: transparent; } #intro::-moz-selection, .div_dot::-moz-selection, #title2::-moz-selection, .div_dot::-moz-selection { color: var(--wh-color); background: transparent; } #intro::selection, .div_dot::selection, #title2::selection, .div_dot::selection { color: var(--wh-color); background: transparent; } /* ScrollMagic Animations */ #title { font-size: var(--fs-intro); font-weight: 500; letter-spacing: 0.009em; line-height: 0.75em; background: -webkit-linear-gradient(90deg, rgba(245,245,245,1) 45%, rgba(24, 32, 47, 0) 55%); background: -moz-linear-gradient(90deg, rgba(245,245,245,1) 45%, rgba(24, 32, 47, 0) 55%); background: -ms-linear-gradient(90deg, rgba(245,245,245,1) 45%, rgba(24, 32, 47, 0) 55%); background: -o-linear-gradient(90deg, rgba(245,245,245,1) 45%, rgba(24, 32, 47, 0) 55%); background: linear-gradient(90deg, rgba(245,245,245,1) 45%, rgba(24, 32, 47, 0) 55%); background-size: 220% 100%; background-position-x: 100%; color: transparent; -webkit-background-clip: text; -moz-background-clip: text; -ms-background-clip: text; -o-background-clip: text; background-clip: text; width: fit-content; margin: 0 auto; padding: 0px var(--ttl-padding); } #title2{ background-image: -webkit-linear-gradient(10deg, #f5f5f5 -200%, rgba(245, 245, 245, .5), #f5f5f5 0%); background-image: -moz-linear-gradient(10deg, #f5f5f5 -200%, rgba(245, 245, 245, .5), #f5f5f5 0%); background-image: -ms-linear-gradient(10deg, #f5f5f5 -200%, rgba(245, 245, 245, .5), #f5f5f5 0%); background-image: -o-linear-gradient(10deg, #f5f5f5 -200%, rgba(245, 245, 245, .5), #f5f5f5 0%); background-image: linear-gradient(10deg, #f5f5f5 -200%, rgba(245, 245, 245, .5), #f5f5f5 0%); background-position: "100px 100px"; -webkit-background-clip: text; -moz-background-clip: text; -ms-background-clip: text; -o-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -moz-text-fill-color: transparent; -ms-text-fill-color: transparent; -o-text-fill-color: transparent; display: inline-block; } .text { width: 100%; max-width: 1490px; margin: 15px auto 50px; text-align: center; display: inline; } #glare { background-image: -webkit-radial-gradient(rgba(51, 5, 217, 0.9) 5%, rgba(0, 0, 0, 0)60%); background-image: -moz-radial-gradient(rgba(51, 5, 217, 0.9) 5%, rgba(0, 0, 0, 0)60%); background-image: -ms-radial-gradient(rgba(51, 5, 217, 0.9) 5%, rgba(0, 0, 0, 0)60%); background-image: -o-radial-gradient(rgba(51, 5, 217, 0.9) 5%, rgba(0, 0, 0, 0)60%); background-image: radial-gradient(rgba(51, 5, 217, 0.9) 5%, rgba(0, 0, 0, 0)60%); -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center; position: absolute; left: -25%; top: 10%; width: 30%; height: 50%;} .section_blr { width: 100%; height: 100%; background-color: rgb(0, 0, 0); display: inline-block; } /*=====service=====*/ .container { position: relative; width: 78%; max-width: 1260px; /* margin: 75px auto 100px; */ margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; flex: 1; flex-wrap: wrap; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .container .button-wrapper:before { border-color: #FF8B94; } .container .button-wrapper div { border-color: #FF8B94; } .boxskillsimg { width: 100%; height: 100%; margin: 0 auto; vertical-align: middle; text-align: left; position: relative; } .card { will-change: transform; } .skillsimg { position: relative; padding: 0%; width: 48.2%; height: 100%; display: inline-block; float: left; border-radius: var(--main-border-radius); overflow: hidden; will-change: transform; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .skillsimg:first-child { margin: 0px 1.8% 1.8% 0px; } .skillsimg:nth-child(2) { margin: 0px 0px 1.8% 1.8%; } .skillsimg:nth-child(3) { margin: 1.8% 1.8% 0px 0px; } .skillsimg:nth-child(4) { margin: 1.8% 0px 0px 1.8%; } .cont_skillsimg { height: 100%; margin: 0 auto; overflow: hidden; /* min-height: 270px;*/ width: 100%; /* padding: 9.5% 9.5%; */ } .cont_skillsimg img, .cont_skillsimg svg { width: 55px; height: auto; margin: 0 auto; } .cont_skillsimg object { width: 100px; height: auto; margin: 0 auto; } .cont_skillstext { width: 100%; height: 100%; margin: 0 auto; } .skillstext { line-height: 1; margin: 25px auto; } .skilldesc { margin: 0 auto; text-align: left; max-width: 900px; } .proj_title{ line-height: 1;} .pr_title { line-height: 1.25; /*width: 80%;*/ max-width: 900px; display: inline-block; /* margin-bottom: 20px; */ } .me { display: inline-block; } .vsn_desc { width: 100%; margin: 50px auto 0px; } .proj_desc { width: 100%; display: inline-block; } .pr_title::-webkit-selection, .proj_desc::-webkit-selection { color: var(--prpl-color); background: var(--wh-color); } .pr_title::-moz-selection, .proj_desc::-moz-selection { color: var(--prpl-color); background: var(--wh-color); } .pr_title::selection, .proj_desc::selection { color: var(--prpl-color); background: var(--wh-color); } /* === Border Animation */ .container .button-wrapper, .cnt_card .button-wrapper { overflow: hidden; border-radius: var(--line-border-radius); } .container .button-wrapper .button, .container .button-wrapper .button2, .container .button-wrapper .button3, .container .button-wrapper .button4 { padding: var(--ttl-padding); } /* .cnt_card .button-wrapper .button4, .cnt_card .button-wrapper .button3 { padding: 6% 6%; } */ .container .button-wrapper .button, .container .button-wrapper .button2, .container .button-wrapper .button3, .cnt_card .button-wrapper .button4, .cnt_card .button-wrapper .button3, .container .button-wrapper .button4 { position: relative; border: 2px solid transparent; z-index: 1; display: grid; border-radius: var(--main-border-radius); /* min-height: 340px;*/ } .container .button-wrapper .button { background: -webkit-linear-gradient(to right, var(--grey-color), var(--grey-color)), -webkit-linear-gradient(135deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -moz-linear-gradient(to right, var(--grey-color), var(--grey-color)), -moz-linear-gradient(135deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -ms-linear-gradient(to right, var(--grey-color), var(--grey-color)), -ms-linear-gradient(135deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -o-linear-gradient(to right, var(--grey-color), var(--grey-color)), -o-linear-gradient(135deg, #7a7bbf 0%, var(--prpl-color) 100%); background: linear-gradient(to right, var(--grey-color), var(--grey-color)), linear-gradient(135deg, #7a7bbf 0%, var(--prpl-color) 100%); background-clip: padding-box, border-box; background-origin: padding-box, border-box; } .container .button-wrapper .button2 { background: -webkit-linear-gradient(to right, var(--grey-color), var(--grey-color)), -webkit-linear-gradient(-135deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -moz-linear-gradient(to right, var(--grey-color), var(--grey-color)), -moz-linear-gradient(-135deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -ms-linear-gradient(to right, var(--grey-color), var(--grey-color)), -ms-linear-gradient(-135deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -o-linear-gradient(to right, var(--grey-color), var(--grey-color)), -o-linear-gradient(-135deg, #7a7bbf 0%, var(--prpl-color) 100%); background: linear-gradient(to right, var(--grey-color), var(--grey-color)), linear-gradient(-135deg, #7a7bbf 0%, var(--prpl-color) 100%); background-clip: padding-box, border-box; background-origin: padding-box, border-box; } .container .button-wrapper .button3, .cnt_card .button-wrapper .button3 { background: -webkit-linear-gradient(to right, var(--grey-color), var(--grey-color)), -webkit-linear-gradient(45deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -moz-linear-gradient(to right, var(--grey-color), var(--grey-color)), -moz-linear-gradient(45deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -ms-linear-gradient(to right, var(--grey-color), var(--grey-color)), -ms-linear-gradient(45deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -o-linear-gradient(to right, var(--grey-color), var(--grey-color)), -o-linear-gradient(45deg, #7a7bbf 0%, var(--prpl-color) 100%); background: linear-gradient(to right, var(--grey-color), var(--grey-color)), linear-gradient(45deg, #7a7bbf 0%, var(--prpl-color) 100%); background-clip: padding-box, border-box; background-origin: padding-box, border-box; } .container .button-wrapper .button4, .cnt_card .button-wrapper .button4 { background: -webkit-linear-gradient(to right, var(--grey-color), var(--grey-color)), -webkit-linear-gradient(-45deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -moz-linear-gradient(to right, var(--grey-color), var(--grey-color)), -moz-linear-gradient(-45deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -ms-linear-gradient(to right, var(--grey-color), var(--grey-color)), -ms-linear-gradient(-45deg, #7a7bbf 0%, var(--prpl-color) 100%); background: -o-linear-gradient(to right, var(--grey-color), var(--grey-color)), -o-linear-gradient(-45deg, #7a7bbf 0%, var(--prpl-color) 100%); background: linear-gradient(to right, var(--grey-color), var(--grey-color)), linear-gradient(-45deg, #7a7bbf 0%, var(--prpl-color) 100%); background-clip: padding-box, border-box; background-origin: padding-box, border-box; } .container .button-wrapper .button::before, .container .button-wrapper .button2::before { position: absolute; content: ""; min-height: 10px; min-width: 100px; z-index: 200; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 60%; opacity: 1; transition-duration: 0.5s; border-radius: 12px; } .container .button-wrapper .button::after{ pointer-events: none; position: absolute; content: ""; width: 200%; height: 300%; border-radius: 50%; background-color: var(--grey-color); top: -170%; left: -60%; z-index: -10; } .container .button-wrapper .button:hover::after { top: -200%; left: -200%; } .container .button-wrapper .button:hover::before, .container .button-wrapper .button2:hover::before { opacity: 0; } /* Border Anim 2 */ .container .button-wrapper .button2::after { pointer-events: none; position: absolute; content: ""; width: 200%; height: 300%; border-radius: 50%; background-color: var(--grey-color); top: -160%; right: -65%; z-index: -10; } .container .button-wrapper .button2:hover::after { top: -200%; right: -200%; } /* Border Anim 3 */ .container .button-wrapper .button3::before, .cnt_card .button-wrapper .button3::before, .container .button-wrapper .button4::before, .cnt_card .button-wrapper .button4::before { position: absolute; /*border-bottom: solid 3px;*/ content: ""; min-height: 10px; min-width: 100px; z-index: 200; right: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: 60%; opacity: 1; transition-duration: 0.5s; border-radius: 12px; } .container .button-wrapper .button3::after, .cnt_card .button-wrapper .button3::after { pointer-events: none; position: absolute; content: ""; width: 200%; height: 300%; border-radius: 50%; background-color: var(--grey-color); bottom: -170%; left: -60%; z-index: -10; } .container .button-wrapper .button3:hover::after, .cnt_card .button-wrapper .button3:hover::after { bottom: -200%; left: -200%; } /* Border Anim 4 */ .container .button-wrapper .button4::after, .cnt_card .button-wrapper .button4::after{ pointer-events: none; position: absolute; content: ""; width: 200%; height: 300%; border-radius: 50%; background-color: var(--grey-color); bottom: -170%; right: -60%; z-index: -10; } .container .button-wrapper .button4:hover::after, .cnt_card .button-wrapper .button4:hover::after { bottom: -200%; right: -200%; } .container .button-wrapper .button::before, .container .button-wrapper .button2::before, .container .button-wrapper .button3::before, .container .button-wrapper .button4::before, .cnt_card .button-wrapper .button3::before, .cnt_card .button-wrapper .button4::before, .container .button-wrapper .button::after, .container .button-wrapper .button2::after, .container .button-wrapper .button3::after, .container .button-wrapper .button4::after, .cnt_card .button-wrapper .button3::after, .cnt_card .button-wrapper .button4::after { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 1s; transition-timing-function: initial; transition-delay: initial; } /* Works Sec */ picture img { width: 100%; height: auto; display: block; } /* .w_main_cont { position: relative; width: 78%; max-width: 1260px; margin: 0 auto; overflow: hidden; vertical-align: middle; display: flex; flex-wrap: wrap; } */ .w_main_cont { height: 100%; margin: 0 auto; vertical-align: middle; text-align: left; position: relative; width: 78%; max-width: 1260px; } .zoomin { will-change: transform; } .work_cont { width: 48.2%; border-radius: var(--main-border-radius); overflow: hidden; position: relative; float: left; /* flex: 0 0 48.2%; display: inline-block; flex-direction: row; */ } .work_cont_2{ border-radius: var(--main-border-radius); width: 100%; height: auto; float: left; /* aspect-ratio: 4.1/2; */ /* flex: 0 0 100%; display: inline-block; flex-direction: column; */ } .work_cont_2:first-child { margin: 0px 0px 1.8% 0px; } .work_cont_2:nth-child(2) { margin: 1.8% 0px 1.8% 0px; } .work_cont:nth-child(3) { margin: 1.8% 1.8% 1.8% 0px; } .work_cont:nth-child(4) { margin: 1.8% 0px 1.8% 1.8%; } .work_cont_2:nth-child(5) { margin: 1.8% 0px 1.8% 0px; } .work_cont_2:nth-child(6) { margin: 1.8% 0px 0px 0px; } .ifbg { background: linear-gradient(150deg, rgba(51,5,217,1) 0%, rgba(20,0,65,1) 80%); } .ifbg_2 { background: linear-gradient(-135deg, rgba(20,0,65,1) 0%, rgba(38,22,51,1) 100%); } .ifbg_3 { background: linear-gradient(160deg, rgba(38,22,51,1) 20%, rgba(35,25,108,1) 100%); } .ifbg_4 { background: linear-gradient(-40deg, rgba(35,25,108,1) 70%, rgba(38,22,51,1) 100%); } .ifbg_5 { background: linear-gradient(35deg, rgba(25,15,49,1) 30%, rgba(23,36,144,1) 100%); } .ifbg_6 { background: linear-gradient(135deg, rgba(25,15,49,1) 20%, rgba(23,36,166,1) 100%); } .element_img_cont { position: relative; max-width: 100%; max-height: 100%; display: block; overflow: hidden; border-radius: var(--main-border-radius); will-change: transform; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .element_img_cont img { border-radius: var(--main-border-radius); width: 100%; height: auto; display: block; -webkit-transition: scale 0.35s; -moz-transition: scale 0.35s; -ms-transition: scale 0.35s; -o-transition: scale 0.35s; transition: scale 0.35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } /* .element_img_cont.move { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } */ /* Image hover effect */ .element_img_cont:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .element_img_cont img.clicked { -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } /* .element_img_cont::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backdrop-filter: saturate(100%) blur(20px); -moz-backdrop-filter: saturate(100%) blur(20px); -ms-backdrop-filter: saturate(100%) blur(20px); -o-backdrop-filter: saturate(100%) blur(20px); backdrop-filter: saturate(100%) blur(20px); transition: opacity 0.3s ease; opacity: 0; visibility: hidden; } .element_img_cont:hover::before { opacity: 1; visibility: visible; } */ /* Image hover effect */ /* .element_img_cont:hover img { width: 100% !important; height: 100% !important; } */ /* .element_img_cont:hover { cursor: pointer; } */ .open_plus_wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99; box-sizing: border-box; } .open_plus_wrap a { width: 100%; height: 100%; } .open_plus, .open_plus_2 { width: 55px; height: 55px; border-radius: 999px; background: var(--prpl-color); color: var(--wh-color); display: flex; justify-content: center; align-items: center; position: absolute; } .open_plus { top: 20px; left: 20px; z-index: 2; } .open_plus_2 { top: 20px; right: 20px; z-index: 2; } /* .open_plus_wrap:hover .open_plus { top: 50%; left: 50%; transform: translate(-50%, -50%); } .open_plus_wrap:hover .open_plus_2 { top: 50%; right: 50%; transform: translate(50%, -50%); } .open_plus, .open_plus_2, .open_plus_wrap:hover .open_plus, .open_plus_wrap:hover .open_plus_2 { -webkit-transition: all 0.35s; -moz-transition: all 0.35s; -ms-transition: all 0.35s; -o-transition: all 0.35s; transition: all 0.35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } */ /* .open_plus, .open_plus_2 { transition: none; } .open_plus.transition, .open_plus_2.transition { transition: left 0.2s ease, top 0.2s ease; } */ .open_plus:after, .open_plus_2:after { content: ''; position: absolute; height: 5px; width: 50%; background: var(--wh-color); border-radius: 999px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .open_plus:before, .open_plus_2:before { content: ''; position: absolute; background: var(--wh-color); height: 50%; width: 5px; border-radius: 999px; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*hover img */ .element_img_cont_bnt { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* a.iframe{ z-index:10; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } */ .pulseLoader { width: 65px; height: 65px; border-radius: 50%; background-color: var(--wh-color); outline: 1px solid var(--pulse-outline-color); animation: pulseload 1.5s ease-in-out infinite; position: absolute; pointer-events: none; display: none; z-index: 999; } @keyframes pulseload { 0% { transform: scale(0); opacity: 0.8; } 100% { transform: scale(1); opacity: 0; } } /* .open_plus_wrap a:hover { cursor: none; } */ .open_plus_wrap:hover .pulseLoader { display: block; } .element_img_cont a { line-height: 1; } .proj_ttl, .proj_ttl_2, .proj_ttl_3, .proj_ttl_4 { padding: var(--ttl-padding); width: -moz-min-content; width: min-content; z-index: 2; } .proj_ttl { position: absolute; top: 50%; left: 0; transform: translate(0%, -50%); text-align: left; } .proj_ttl_2 { position: absolute; top: 50%; right: 0; transform: translate(0%, -50%); text-align: right; } .proj_ttl_3 { position: absolute; bottom: 0; left: 0; text-align: left; } .proj_ttl_4 { position: absolute; bottom: 0; right: 0; text-align: right; } /* Awards */ .blr_s_cont{ height: 100%; /* margin: 75px 1.5% 100px 1.5%; */ margin: 0px 1.5%; } .awds_main_cont { /* width: 90%; */ position: relative; max-width: 1260px; height: 100%; margin: 0 auto; display: flex; justify-content: center; } .awds_cont{ /* padding: var(--ttl-padding) calc(var(--ttl-padding) * 1.25); */ background: var(--prpl-color); text-align: left; display: inline-block; border-radius: var(--main-border-radius); overflow: hidden; position: relative; vertical-align: middle; margin: 0 1.8%; } .awds_cont a { display: inline-block; padding: var(--ttl-padding) calc(var(--ttl-padding) * 1.25); } .awds_svg { position: absolute; left: 0; top: 0; bottom: 0; right: 50%; transform: translateX(0%); display: flex; align-items: center; } .awds_svg img { max-width: 80px; margin: 0 auto; opacity: 0; } .awds_svg, .awds_txt_cont { overflow: hidden; } .awds_txt_cont { display: flex; justify-content: center; align-items: center; flex: 1.4; } .awds_txt_wrap { display: grid; align-items: center; justify-items: start; } .awds_txt_cont img { opacity: 1; } .img_awds { max-width: 235px; min-width: 235px; width: 100%; display: inline-block; margin-bottom: 50px; } .awds_nb { opacity: 1; display: inline-block; font-weight: 500; color: var(--wh-color); line-height: 1; margin-bottom: 50px; } .awds_txt { width: 100%; font-weight: 500; opacity: 1; display: inline-block; max-width: 160px; } .awds_nb::-webkit-selection, .awds_txt::-webkit-selection { color: var(--prpl-color); background: var(--wh-color); } .awds_nb::-moz-selection, .awds_txt::-moz-selection { color: var(--prpl-color); background: var(--wh-color); } .awds_nb::selection, .awds_txt::selection { color: var(--prpl-color); background: var(--wh-color); } .awds_cont:hover .awds_svg { transform: translateX(50%) } .awds_cont:hover .awds_svg img { opacity: 1; } .awds_cont:hover .img_awds, .awds_cont:hover .awds_nb, .awds_cont:hover .awds_txt { /* right: -100%; */ opacity: 0; } .img_awds, .awds_cont .awds_svg, .awds_cont .awds_nb, .awds_cont .awds_txt, .img_awds:hover, .awds_cont:hover .awds_svg, .awds_cont:hover .awds_nb, .awds_cont:hover .awds_txt { -webkit-transition: all 0.35s ease; -moz-transition: all 0.35s ease; -ms-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; -webkit-transition-property: initial; -moz-transition-property: initial; -ms-transition-property: initial; -o-transition-property: initial; transition-property: initial; -webkit-transition-timing-function: initial; -moz-transition-timing-function: initial; -ms-transition-timing-function: initial; -o-transition-timing-function: initial; transition-timing-function: initial; -webkit-transition-delay: initial; -moz-transition-delay: initial; -ms-transition-delay: initial; -o-transition-delay: initial; transition-delay: initial; } /*=== contact ===*/ .cnt_cont { position: relative; width: 78%; /* max-width: 1650px; */ max-width: 1260px; /* margin: 75px auto 100px auto; */ margin: 0 auto; display: inline-block; } .cnt_card_txt, .cnt_card{ display: inline-block; width: 48.1%; min-width: 48.1%; float: left; border-radius: var(--main-border-radius); overflow: hidden; position: relative; vertical-align: middle; /* border: 1px solid red; */ will-change: transform; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .cnt_card:first-child { margin: 0px 1.8% 0px 0px; } .cnt_card:nth-child(2) { margin: 0px 0px 0px 1.8%; } .cnt_card_txt { background: var(--grey-color); height: 100%; } .txt_wrap { display: flex; align-items: center; } .cnt_text{ /*width: 90%; margin-right: 10%;*/ width: auto; padding: var(--ttl-padding); /* padding-top: 8.85%; padding-bottom: 8.85%; */ display: inline-block; vertical-align: middle; text-align: left; } .writeme { height: 100%; /* max-height: 560px; */ min-height: 635px; max-height: 635px; overflow: hidden; } .cnt_title { text-align: left; width: 100%; padding: 0px; -webkit-text-size-adjust: 100%; margin: 50px auto 50px; } .call_btn { overflow: hidden; position: relative; float: right; /* margin-top: 20px; */ font-weight: 700; border-radius: 999px; background-color: var(--prpl-color); } .bacbtn { position: relative; padding: 18px 45px; height: 100%; margin: 0px; display: inline-block; text-align: center; cursor: pointer; text-decoration: none; color: inherit; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 0px solid transparent; opacity: 1; background: transparent; } .bacbtn:hover { opacity: 0; } .bacbtn, .bacbtn:hover { -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-transition-property: initial; -moz-transition-property: initial; -ms-transition-property: initial; -o-transition-property: initial; transition-property: initial; -webkit-transition-timing-function: initial; -moz-transition-timing-function: initial; -ms-transition-timing-function: initial; -o-transition-timing-function: initial; transition-timing-function: initial; -webkit-transition-delay: initial; -moz-transition-delay: initial; -ms-transition-delay: initial; -o-transition-delay: initial; transition-delay: initial; } .bac_ico { border-radius: 999px; background: url(../images/icons/videocall.png) no-repeat; background: url(../images/icons/videocall.svg) no-repeat, -webkit-linear-gradient(transparent, transparent); background: url(../images/icons/videocall.svg) no-repeat, -moz-linear-gradient(transparent, transparent); background: url(../images/icons/videocall.svg) no-repeat, -ms-linear-gradient(transparent, transparent); background: url(../images/icons/videocall.svg) no-repeat, -o-linear-gradient(transparent, transparent); background: url(../images/icons/videocall.svg) no-repeat, linear-gradient(transparent, transparent); background-position: 50% 50%; background-size: 23px auto; /*padding: 18px 50px;*/ height: 100%; width: 100%; float: right; margin: 0px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 0px solid transparent; opacity: 0; -webkit-transition: opacity .5s; -moz-transition: opacity .5s; -ms-transition: opacity .5s; -o-transition: opacity .5s; transition: opacity .5s; -webkit-transition-property: initial; -moz-transition-property: initial; -ms-transition-property: initial; -o-transition-property: initial; transition-property: initial; -webkit-transition-timing-function: initial; -moz-transition-timing-function: initial; -ms-transition-timing-function: initial; -o-transition-timing-function: initial; transition-timing-function: initial; -webkit-transition-delay: initial; -moz-transition-delay: initial; -ms-transition-delay: initial; -o-transition-delay: initial; transition-delay: initial; position: absolute; top: 50%; left: 0%; right: 0%; -webkit-transform: translate(0%, -49%); -moz-transform: translate(0%, -49%); -ms-transform: translate(0%, -49%); -o-transform: translate(0%, -49%); transform: translate(0%, -49%); } .call_btn:hover .bac_ico { background-position: 50% 50%; background-size: 23px auto; width: auto; color: transparent; border: 0px solid transparent; opacity: 1; -webkit-transition: opacity 0s; -moz-transition: opacity 0s; -ms-transition: opacity 0s; -o-transition: opacity 0s; transition: opacity 0s; -webkit-animation: fgbac .35s; -moz-animation: fgbac .35s; -ms-animation: fgbac .35s; -o-animation: fgbac .35s; animation: fgbac .35s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes fgbac { from { background-position: -20% 110%; background-size: 0px auto; } to { background-position: 50% 50%; background-size: 23px auto; } } @-moz-keyframes fgbac { from { background-position: -20% 110%; background-size: 0px auto; } to { background-position: 50% 50%; background-size: 23px auto; } } @-ms-keyframes fgbac { from { background-position: -20% 110%; background-size: 0px auto; } to { background-position: 50% 50%; background-size: 23px auto; } } @-o-keyframes fgbac { from { background-position: -20% 110%; background-size: 0px auto; } to { background-position: 50% 50%; background-size: 23px auto; } } @keyframes fgbac { from { background-position: -20% 110%; background-size: 0px auto; } to { background-position: 50% 50%; background-size: 23px auto; } } /* Footer */ .foot_divider { width: 100%; height: 100%; background: var(--grey-color); background-image: radial-gradient(252% 75% at 120% 0%, rgba(0, 0, 0, 95) 50%, rgba(0, 0, 0, .6) 91%), radial-gradient(130% 100% at 60% 100%, rgba(51, 5, 217, 0.9) -10%, transparent 70%), radial-gradient(50% 30% at 50% 80%, rgb(102, 103, 171) 15%, transparent 80%), radial-gradient(40% 25% at 30% 90%, rgb(152, 94, 109) 60%, transparent 130%), radial-gradient(210% 100% at 80% 80%, rgba(0, 0, 0, 95) 160%, transparent 80%); -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; -o-background-size: cover; background-size: 100% 103%; background-position: center center; background-attachment: local; position: relative; } .footer{ position: relative; width: 100%; height: 100%; display: inline-block; overflow: hidden; } .footsvg_cont { position: relative; width: 100%; height: 45px; margin: 100px auto; display: flex; justify-content: center; } .footsvg { width: 100px; height: auto; display: inline-block; } .foottext { width: 100%; max-width: 1490px; margin: 15px auto 50px; text-align: center; } .footrow1, .footrow2 { width: 100%; height: auto; margin: 0 auto; text-align: center; font-family: inherit; font-size: var(--fs-4); font-weight: 400; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; color: var(--wh-color); letter-spacing: .8px; display: inline-block; vertical-align: middle; } .footrow1 { text-align: center; margin-bottom: 8px; } .footrow2, .footrow2 a { text-align: center; margin: 8px auto; } .footrow_l { text-align: center; } .footrow1 a, .footrow2 a { text-decoration: none; color: var(--wh-color); opacity: 1; outline: none; } .footrow1 a:hover, .footrow2 a:hover { opacity: .75; } .footrow1 a, .footrow1 a:hover, .footrow2 a, .footrow2 a:hover { -webkit-transition: all .35s; -moz-transition: all .35s; -ms-transition: all .35s; -o-transition: all .35s; transition: all .35s; transition-property: initial; transition-duration: 0.35s; transition-timing-function: initial; transition-delay: initial; } .cpttc_item, .cpttc_blk { display: inline-block; } .cpttc_blk { margin: 0px 5px 0px 10px; } .copyright { display: inline-block; } #year { display: inline-block; } @media only screen and (max-width: 1672px) { .writeme { min-height: 660px; max-height: 660px; /* max-height: 560px; */ } } /* @media only screen and (max-width: 1545px) { .call_btn { margin-top: 75px; } } */ @media only screen and (max-width: 1484px) { .writeme { min-height: 695px; max-height: 695px; } } @media only screen and (max-width: 1450px) and (-webkit-min-device-pixel-ratio: 1.1) { .cont_sq_3, .cont_sq_2 { width: 95%; } .call_btn { margin-bottom: 20px; } } @media only screen and (max-width: 1389px) { .bg_blr_cont { width: 82%; } } @media only screen and (max-width: 1380px) { :root { --ttl-padding: 50px; } } @media only screen and (max-width: 1312px) { .writeme { min-height: 720px; max-height: 720px; } } @media only screen and (max-width: 1311px) { :root { --fs-intro: 5.75em; } .call_btn { margin-top: 0px; margin-bottom: 0px; } /* .cnt_text { padding-top: 8.85%; padding-bottom: 8.85%; } */ .writeme { min-height: 680px; max-height: 680px; /* max-height: 610px; */ } } @media only screen and (max-width: 1241px) { /* .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 35px; } */ .call_btn { margin-top: 0px; } .writeme { min-height: 720px; max-height: 720px; } } @media only screen and (max-width: 1185px) { .proj_ttl, .proj_ttl_2, .proj_ttl_3, .proj_ttl_4 { line-height: 1.1em; /* background: linear-gradient(to top, var(--grey-color) 20%, transparent 100%); */ } .proj_head { line-height: 1.1em; } } @media only screen and (max-width: 1172px) { .exp_col { max-height: 137%; } } @media only screen and (max-width: 1122px) { .writeme { min-height: 750px; max-height: 750px; } } @media only screen and (max-width: 1108px) { .writeme { min-height: 780px; max-height: 780px; } } @media only screen and (max-width: 1100px) { :root { --fs-intro: 5.5em; --ttl-padding: 45px; } .linea{ margin-top:30px; } .dot { width: 8px; height: 8px; } .cont_sq_3, .cont_sq_2 { width: 95%; } .section_bk { padding-bottom: 175px; } #services { padding-top: 175px; } .row2, .row3 { margin-bottom: 125px; } .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 35px; } } @media only screen and (max-width: 1092px) { .writeme { min-height: 750px; max-height: 750px; } } @media only screen and (max-width: 1080px) { :root { --fs-intro: 5em; --fs-1: 3.9em; --fs-2: 2.6em; --fs-3: 1.5em; --fs-5: 2.6em; --ttl-padding: 45px; --main-border-radius: 21px; --line-border-radius: 20px; } .typography_3 { line-height: 1.2em; } .work_cont.element_inmg_cont{ padding-bottom: 25px; } .proj_ttl, .proj_ttl_2, .proj_ttl_3, .proj_ttl_4 { /* padding: 35px 35px; */ line-height: 1.2em; } /* .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 50px; } */ .exp_col { max-height: 102%; } .cont_sq_3, .cont_sq_2 { width: 100%; height: 100%; padding: 0% 0%; } .square_2, .square_3 { width: 100%; } .awds_cont a{ padding: var(--ttl-padding); } .img_awds { max-width: 225px; min-width: 225px; } .call_btn { margin-top: 50px; } .cnt_title { margin: 50px auto 25px; } .writeme { min-height: 750px; max-height: 750px; } } @media only screen and (max-width: 1028px) { .writeme { min-height: 740px; max-height: 740px; } } @media only screen and (max-width: 988px) { .exp_col { max-height: 110%; } } @media only screen and (max-width: 977px) { .cnt_title { margin: 50px auto 50px; } .call_btn { margin-top: 10px; } } @media only screen and (max-width: 939px) { /* .cnt_text { padding-top: 8.79%; padding-bottom: 8.79%; } */ /* .call_btn { margin-top: 45px; } */ } @media only screen and (max-width: 930px) { .introsvg { width: 125px; margin-bottom: 20px; } } @media only screen and (max-width: 921px) { .call_btn { margin-top: 10px; } } /* @media only screen and (max-width: 912px) { .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 60px; } } */ @media only screen and (max-width: 909px) { .writeme { min-height: 760px; max-height: 760px; } } @media only screen and (max-width: 907px) { .call_btn { margin-top: 0px; } } @media only screen and (max-width: 900px) { :root { --ttl-padding: 35px; --fs-2: 2.142em; } .typography_3 { line-height: 1.35em; } .exp_col { max-height: 95%; } .open_plus_wrap { display: inline-block; } } @media only screen and (max-width: 879px) { .call_btn { margin-top: 45px; } } @media only screen and (max-width: 861px) { /* .bg_blr_cont { width: 79%; } */ .blr_cont_child { padding: 10% 8%; } .cont_sq_3, .cont_sq_2 { width: 100%; } .call_btn { margin-top: 5px; } .img_awds { max-width: 200px; min-width: 200px; } } @media only screen and (max-width: 824px) { .exp_col { max-height: 113%; } } @media only screen and (max-width: 800px) { body { font-size: 14px; } :root { --fs-intro: 4.5em; --fs-1: 4.2em; --fs-2: 2.142em; --fs-3: 1.5em; --ttl-padding: 40px; } .module_full_bg_placeholder { width: 799px; } .module_full_bg { background-position: 20% 50%; overflow: hidden; } .introsvg { width: 130px; float: none; position: relative; overflow: hidden; } .row { margin: 0 auto; width: 90%; margin-top: 0px; } .row2 { width: 90%; } .row3 { width: 83%; } .linea { width: 100%; text-align: center; bottom: 0px; margin-top:25px; } .downarrow_cont { bottom: 0px; left: 0; right: 0; } /*======================*/ .section_bk { padding-bottom: 150px; } #services { padding-top: 150px; } .row2, .row3 { margin-bottom: 100px; } /* .cont_sq_3, .cont_sq_2 { width: 93%; } */ .blr_cont_child { padding: 8%; } .container { width: 78%; } .skillsimg { width: 100%; margin: 1.5% auto; } .skillsimg:first-child { margin: 4.5% 0px; } .skillsimg:nth-child(2) { margin: 4.5% 0px; } .skillsimg:nth-child(3) { margin: 4.5% 0px; } .skillsimg:nth-child(4) { margin: 4.5% 0px; } .blr_cont_child { padding: 10%; } .work_cont, .work_cont_2{ position: relative; min-width: 100%; flex: 0 0 100%; } /* .work_cont_2 .element_img_cont { aspect-ratio: 1/1; } */ .work_cont_2:first-child, .work_cont_2:nth-child(2), .work_cont:nth-child(3), .work_cont:nth-child(4), .work_cont_2:nth-child(5), .work_cont_2:nth-child(6) { margin: 4.5% 0px; } .open_plus, .open_plus_2 { width: 50px; height: 50px; } .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 90px; } .proj_ttl, .proj_ttl_2, .proj_ttl_3, .proj_ttl_4 { position: absolute; bottom: 0; top: unset; transform: none; width: auto; max-width: 380px; } .proj_ttl_4 { right: 0; left: unset; } .awds_main_cont { width: 80%; margin-top: -3.5%; display: inline-block; } .awds_cont { margin: 4.5%; top: 0%; display: inline-block; height: unset; width: auto; } .awds_txt_cont { width: 100%; } .awds_nb { position: relative; display: inline-block; } .awds_txt { max-width: 200px; } /* .awds_svg { right: 0px; transform: translateX(0px); top: calc(50% - 75px); bottom: unset; } */ .awds_svg img { max-width: 65px; } .img_awds { max-width: 200px; min-width: 200px; } .awds_nb { margin-bottom: 50px; } .awds_txt { width: unset; margin-top: 0px; } .awds_cont:hover .awds_txt { opacity: 0; } .cnt_card{ width: 100%; /* padding: 0 1%; */ } /* .cnt_cont { margin: 75px auto 50px auto; } */ .cnt_card:first-child { margin: 0px 0px 0px 0px; } .cnt_card:nth-child(2) { margin: 150px 0px 0px 0px; } .writeme { min-height: 675px; max-height: 675px; /* max-height: 565px; */ } } /* @media only screen and (max-width: 799px) and (-webkit-min-device-pixel-ratio: 1.1) { .cont_sq_3, .cont_sq_2 { width: 93%; } } */ @media only screen and (max-width: 750px) { :root { --main-border-radius: 20px; --line-border-radius: 19px; } } @media only screen and (max-width: 720px) { .exp_col { max-height: 131%; } } @media only screen and (max-width: 667px) { .awds_cont { margin: 4.5% 0px; } .writeme { min-height: 653px; max-height: 653px; } .proj_ttl.typography_3, .proj_ttl_2.typography_3, .proj_ttl_3.typography_3, .proj_ttl_4.typography_3 { line-height: 1.1em; } } @media only screen and (max-width: 650px) { .typography_3 { line-height: 1.1em; } .square_1, .square_2, .square_3 { width: 100% !important; } .skillsimg_l, .skillsimg_r { margin: 4.5% auto; } .skillsimg_r:nth-child(2) { margin-top: 4.5%; } .row2, .row3 { margin-bottom: 75px; } /* .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 60px; } */ /* .iot_image { width: 100%; height: 100%; background-image: url(../images/works/iot_covera2.jpg); background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -ms-background-size: contain; -o-background-size: contain; background-size: contain; padding-bottom: 100%; } .fn_image { width: 100%; height: 100%; background-image: url(../images/works/fn_cover2.jpg); background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -ms-background-size: contain; -o-background-size: contain; background-size: contain; padding-bottom: 100%; } .fk_image { width: 100%; height: 100%; background-image: url(../images/works/fk_cover2.jpg); background-repeat: no-repeat; -webkit-background-size: contain; -moz-background-size: contain; -ms-background-size: contain; -o-background-size: contain; background-size: contain; padding-bottom: 100%; } .work_cont_2 .element_img_cont img{ display:none; } */ .cnt_card:nth-child(2) { margin: 100px 0px 0px 0px; } .writeme { min-height: 645px; max-height: 645px; } .cpttc_item, .cpttc_blk { width: 100%; margin: 0 auto; } .cpttc_blk { margin: 0px auto; } .copyright { max-width: 250px; } .footrow2 { margin-top: 50px; } } @media only screen and (max-width: 635px) { .writeme { min-height: 665px; max-height: 665px; } } @media only screen and (max-width: 609px) { .writeme { min-height: 685px; max-height: 685px; } } @media only screen and (max-width: 605px) { .exp_col { max-height: 147%; } } @media only screen and (max-width: 592px) { .exp_col { max-height: 131%; } } @media only screen and (max-width: 577px) { .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 130px; } } @media only screen and (max-width: 567px) { .exp_col { max-height: 144%; } } @media only screen and (max-width: 526px) { .writeme { min-height: 680px; max-height: 680px; } } @media only screen and (max-width: 537px) { .exp_col { max-height: 131%; } } @media only screen and (max-width: 499px) { .exp_col { max-height: 144%; } } @media only screen and (max-width: 480px) { body { font-size: 14px; } :root { --fs-intro: 4em; --fs-1: 4em; --fs-2: 2.03em; --fs-3: 1.5em; } .typography_3 { line-height: 1.1em; } .introsvg, .footsvg { width: 110px; } .row { width: 75%; } .dot { width: 6px; height: 6px; margin-left: 4px; } .exp_col { max-height: 123%; } .bg_blr_cont { width: 83%; } .cont_sq_3, .cont_sq_2 { width: 94%; } #parent_1, .container_vision, .container, .w_main_cont, .cnt_cont { width: 85%; } .work_cont .element_img_cont, .work_cont_2 .element_img_cont{ padding-bottom: 10px; } .blr_cont_child { padding: 12%; } .cookie_container_h1 { width: 90%; } .img_awds { min-width: unset; } } @media only screen and (max-width: 462px) { .exp_col { max-height: 135%; } } @media only screen and (max-width: 436px) { .exp_col { max-height: 147%; } } @media only screen and (max-width: 418px) { .writeme { min-height: 700px; max-height: 700px; } } @media only screen and (max-width: 414px) { #cookie-bar .cb-enable { margin-left: 0px; } .module_full_bg_placeholder { height: 99vh; width: 414px; } } @media only screen and (max-width: 400px) { .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 50px; } .awds_main_cont { width: 85%; } .awds_cont { width: 100%; } } @media only screen and (max-width: 388px) { .exp_col { max-height: 137%; } .writeme { min-height: 740px; max-height: 740px; } } @media only screen and (max-width: 375px) { .exp_col { max-height: 147%; } } @media only screen and (max-width: 361px) { .exp_col { max-height: 157%; } } @media only screen and (max-width: 354px) { /* .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 70px; } */ .writeme { min-height: 700px; max-height: 700px; } } @media only screen and (max-width: 350px) { .line, .proj_head { display: none; } .awds_txt_cont img { width: 100%; } } @media only screen and (max-width: 340px) { .writeme { min-height: 700px; max-height: 700px; } } @media only screen and (max-width: 334px) { .exp_col { max-height: 151%; } } @media only screen and (max-width: 329px) { .bacbtn { padding: 18px 30px; } } @media only screen and (max-width: 320px) { :root { --fs-intro: 3.2em; --fs-2: 1.93em; --fs-5: 2.25em; } .introsvg, .footsvg { width: 90px; } .exp_col { max-height: 148%; } .bg_blr_cont { width: 90%; } .foottext { width: 85%; } .module_full_bg_placeholder { height: 99vh; width: 320px; } .cnt_card:nth-child(2) { margin: 100px 0px 0px 0px; } } @media only screen and (max-width: 304px) { .writeme { min-height: 725px; max-height: 725px; } } @media only screen and (max-width: 300px) { .exp_col { max-height: 160%; } } @media only screen and (max-width: 293px) { .exp_col { max-height: 150%; } } @media only screen and (max-width: 285px) { .call_btn { width: 100%; } .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 70px; } } @media only screen and (max-width: 265px) { .exp_col { max-height: 160%; } } @media only screen and (max-width: 263px) { body { font-size: 14px; } :root { --fs-intro: 2.75em; --ttl-padding: 25px; } .cnt_card_txt, .cnt_card { border-radius: 15px; } .call_btn { float: none; text-align: center; margin: 50px auto 0px; } .bacbtn { padding: 20px 25px; } .awds_txt { line-height: 1.25em; } } @media only screen and (max-width: 250px) { body { font-size: 10px; } :root { --fs-intro: 3.5em; --fs-1: 3em; --fs-2: 1.75em; } .exp_col { max-height: 133%; } .dot { width: 5px; height: 5px; margin-left: 5px; } .open_plus, .open_plus_2 { width: 45px; height: 45px; } /* .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 50px; } */ .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 40px; } .awds_nb, .img_awds { margin-bottom: 25px; } .awds_svg img { max-width: 50px; } .cnt_card:nth-child(2) { margin: 100px 0px 0px 0px; } } @media only screen and (max-width: 200px) { :root { --fs-intro: 3em; --fs-1: 3.25em; --fs-2: 2em; } .exp_col { max-height: 151%; } .open_plus, .open_plus_2 { width: 40px; height: 40px; } .open_plus:before, .open_plus_2:before { width: 4px; } .open_plus:after, .open_plus_2:after { height: 4px; } .open_plus { top: 15px; left: 15px; } .open_plus_2 { top: 15px; right: 15px; } .work_cont .element_img_cont, .work_cont_2 .element_img_cont { padding-bottom: 60px; } .awds_cont a { padding: calc(var(--ttl-padding) * 2) var(--ttl-padding); } .awds_nb { margin-bottom: 35px; } } @media only screen and (max-width: 192px) { .exp_col { max-height: 160%; } } @media only screen and (max-width: 180px) { :root { --ttl-padding: 10px; } .introsvg, .footsvg { width: 85%; } .linea_2, a.scrolldown, a.scrollup { width: 100%; } .dot { width: 4px; height: 4px; margin-left: 2px; } .exp_col, .blr_cont_child, .skillsimg, .container .button-wrapper, .work_cont, .awds_cont { border-radius: 15px; } .open_plus, .open_plus_2 { top: 10px; left: 10px; width: 35px; height: 35px; } .open_plus:before, .open_plus_2:before { width: 3px; } .open_plus:after, .open_plus_2:after { height: 3px; } /* .awds_main_cont a:first-child .awds_cont .awds_svg, .awds_main_cont a .awds_cont .awds_svg{ top: calc(50% - 55px); } */ .cnt_card:first-child { padding: 15px 0px; } .call_btn { float: none; text-align: center; } .bacbtn { padding: 18px 10%; } } @media only screen and (max-width: 160px) { body { font-size: 5.7vw; } } @media only screen and (max-width: 100px) { .writeme { min-height: 695px; max-height: 695px; } } @media only screen and (max-width: 80px) { .exp_col { height: 250% !important; } }