@tailwind base; @tailwind components; @tailwind utilities; @font-face { font-family: "GOTHAM_BOOK"; src: url("assets/fonts/GOTHAM-BOOK-1361523257_0.TTF"); } @font-face { font-family: "GOTHAM_LIGHT"; src: url("assets/fonts/GOTHAM-LIGHT_0.TTF"); } @font-face { font-family: "GOTHAM_MEDIUM"; src: url("assets/fonts/GOTHAM-MEDIUM_0.TTF"); } @font-face { font-family: "GOTHAM_BOLD"; src: url("assets/fonts/UFONTS.COM_GOTHAM-BOLD.TTF"); } * { /* line-height: 1; */ margin: 0; padding: 0; box-sizing: border-box; font-family: "GOTHAM_BOOK"; } .newZindex { z-index: 100; } a { outline: none; } .headerSuperMainDiv { position: fixed; width: 100%; } .headerMainDiv { height: 8vh; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-left: auto; margin-right: auto; background-color: white; padding-left: 6%; padding-right: 6%; } .headerMainLogoAnchor { display: flex; align-items: center; } .headerMainLogo { width: 175px; } .footerMainDiv { padding-top: 30px; padding-bottom: 10px; } .contactUsMainDiv { width: 100%; height: 90vh; } .contactUsForm { width: 25%; position: absolute; right: 20%; top: 8%; overflow: hidden; } .contactUsText { position: absolute; top: 40%; left: 20%; width: 25%; font-size: 50px; } .FirstFoldMainDiv { height: 93vh; /* height: 100vh; */ width: 100%; position: absolute; top: 1%; line-height: 1; } .firstFoldImgFirst { position: absolute; top: -5%; left: -1%; width: 17%; } .firstFoldImgSecond { position: absolute; left: 26%; bottom: -20%; width: 17%; } .firstFoldImgThird { position: absolute; top: 5%; right: 20%; width: 17%; } .firstFoldImgFourth { position: absolute; bottom: 0%; right: 0%; width: 17%; } .FirstFoldMainTextDiv { display: flex; justify-content: center; align-items: center; height: 100%; } .FirstFoldMainText { font-size: 130px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; -webkit-text-stroke: 2px white; } .secondFoldMainDiv { height: 35vh; width: 100%; line-height: 1; } .secondFoldMainText { font-size: 150px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; -webkit-text-stroke: 2px white; opacity: 0.9; } .thirdFoldMainDiv { height: 65vh; width: 100%; line-height: 1; } .thirdFoldMainText { font-size: 130px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; -webkit-text-stroke: 3px rgb(118, 118, 118); opacity: 0.9; } .fourthFoldMainDiv { height: 100vh; width: 100%; line-height: 1; } .fourthFoldMainText { font-size: 130px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: right; text-transform: uppercase; background: linear-gradient( to left, rgb(154, 153, 153) 0%, rgb(231, 231, 231) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* -webkit-text-stroke: 10px rgb(187, 186, 186) 100%; */ } .fifthFoldMainDiv { height: 65vh; width: 100%; line-height: 1; } .fifthFoldMainTextDiv { display: flex; flex-direction: column; align-items: flex-end; } .fifthFoldMainText { font-size: 130px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; } .fifthFoldImgs { margin-left: -140px; width: 30%; } .sixthFoldMainDiv { height: 65vh; width: 100%; line-height: 1; } .sixthFoldImgsDoor { height: 100%; } .sixthFoldImgsKeyTags { position: absolute; left: 30%; top: 11%; } .sixthFoldMainText { font-size: 120px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 10%; top: 40%; -webkit-text-stroke: 4px rgb(163 163 163); } .seventhFoldMainDiv { height: 110vh; width: 100%; line-height: 1; } .seventhFoldImgsUSB { position: absolute; right: 0%; top: 5%; } .seventhFoldImgsFootlight { position: absolute; left: 18%; bottom: -12%; } .seventhFoldMainText { font-size: 130px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; left: 25%; top: 20%; -webkit-text-stroke: 4px rgb(64 64 64); } .eighthFoldMainDiv { height: 60vh; width: 100%; line-height: 1; } .eightthFoldMainText { font-size: 125px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 17%; top: 5%; } .exploreNewBtnDiv { position: relative; top: 60%; left: 44%; } .exploreNewBtn { height: 60px; width: 400px; font-size: 20px; font-family: "GOTHAM_BOLD"; } li > ul { transform: translatex(100%) scale(0); } li:hover > ul { transform: translatex(101%) scale(1); } li > button svg { transform: rotate(-90deg); } li:hover > button svg { transform: rotate(-270deg); } .group:hover .group-hover\:scale-100 { transform: scale(1); } .group:hover .group-hover\:-rotate-180 { transform: rotate(180deg); } .scale-0 { transform: scale(0); } .min-w-32 { min-width: 8rem; } /* iphone SE */ @media screen and (min-width: 50px) and (max-width: 380px) { .headerMainLogo { width: 95px; } .contactUsMainDiv { width: 100%; height: 125vh; } .contactUsForm { width: 90%; position: absolute; right: 4%; top: 15%; overflow: hidden; } .contactUsText { position: absolute; top: 5%; left: 8%; width: 70%; font-size: 26px; } .firstFoldImgFirst { position: absolute; top: 0; left: 0; width: 40%; } .firstFoldImgSecond { position: absolute; left: 5%; bottom: -10%; width: 40%; } .firstFoldImgThird { position: absolute; top: 18%; right: 0%; width: 38%; } .firstFoldImgFourth { position: absolute; bottom: 10%; right: 0%; width: 40%; } /* .FirstFoldMainTextDiv { position: absolute; top: 45%; left: 5%; } */ .FirstFoldMainText { font-size: 35px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .secondFoldMainDiv { height: 25vh; width: 100%; } .secondFoldImg { width: 30%; } .secondFoldMainText { font-size: 40px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .arrowImg { width: 10%; } .thirdFoldMainDiv { height: 30vh; width: 100%; } .regulatorImg { width: 35%; } .thirdFoldMainText { font-size: 30px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; -webkit-text-stroke: 1px rgb(118, 118, 118); } .fourthFoldMainDiv { height: 30vh; width: 100%; } .fourthFoldImg { width: 35%; } .fourthFoldMainText { font-size: 40px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: right; text-transform: uppercase; background: linear-gradient( to left, rgb(138, 138, 138) 0%, rgb(231, 231, 231) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fifthFoldMainDiv { height: 40vh; width: 100%; } .fifthFoldMainTextDiv { display: flex; flex-direction: column; align-items: flex-end; /* height: 30vh; */ } .fifthFoldMainText { font-size: 25px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; /* line-height: 40px; */ } .fifthFoldImgs { margin-left: -40px; width: 50%; } .sixthFoldMainDiv { height: 25vh; width: 100%; } .sixthFoldImgsDoor { height: 100%; width: 35%; } .sixthFoldImgsKeyTags { position: absolute; left: 30%; top: 25%; width: 10%; } .sixthFoldMainText { font-size: 30px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 5%; top: 48%; -webkit-text-stroke: 1px rgb(163 163 163); } .seventhFoldMainDiv { height: 50vh; width: 100%; } .seventhFoldImgsUSB { position: absolute; right: 0%; top: 10%; width: 60%; } .seventhFoldImgsFootlight { position: absolute; left: 5%; bottom: -12%; width: 35%; } .seventhFoldMainText { font-size: 50px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; left: 5%; top: 15%; -webkit-text-stroke: 1px rgb(64 64 64); } .eighthFoldMainDiv { height: 30vh; width: 100%; } .eightthFoldMainText { font-size: 40px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 5%; top: 10%; } .exploreNewBtnDiv { position: relative; top: 60%; left: 12%; } .exploreNewBtn { height: 35px; width: 55%; font-size: 10px; } } /* mobile */ @media screen and (min-width: 380px) and (max-width: 500px) { .headerMainLogo { width: 95px; } .contactUsMainDiv { width: 100%; height: 100vh; } .contactUsForm { width: 90%; position: absolute; right: 5%; top: 15%; overflow: hidden; } .contactUsText { position: absolute; top: 5%; left: 8%; width: 75%; font-size: 30px; } .FirstFoldMainDiv { height: 98vh; } .firstFoldImgFirst { position: absolute; top: 0; left: 0; width: 45%; } .firstFoldImgSecond { position: absolute; left: 5%; bottom: -10%; width: 48%; } .firstFoldImgThird { position: absolute; top: 20%; right: 0%; width: 45%; } .firstFoldImgFourth { position: absolute; bottom: 15%; right: 0%; width: 45%; } /* .FirstFoldMainTextDiv { position: absolute; top: 45%; left: 5%; } */ .FirstFoldMainText { font-size: 35px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .secondFoldMainDiv { height: 25vh; width: 100%; } .secondFoldImg { width: 30%; } .secondFoldMainText { font-size: 40px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .arrowImg { width: 10%; } .thirdFoldMainDiv { height: 30vh; width: 100%; } .regulatorImg { width: 35%; } .thirdFoldMainText { font-size: 30px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; -webkit-text-stroke: 1px rgb(118, 118, 118); } .fourthFoldMainDiv { height: 30vh; width: 100%; } .fourthFoldImg { width: 35%; } .fourthFoldMainText { font-size: 40px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: right; text-transform: uppercase; background: linear-gradient( to left, rgb(138, 138, 138) 0%, rgb(231, 231, 231) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fifthFoldMainDiv { height: 40vh; width: 100%; } .fifthFoldMainTextDiv { display: flex; flex-direction: column; align-items: flex-end; /* height: 30vh; */ } .fifthFoldMainText { font-size: 30px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; /* line-height: 40px; */ } .fifthFoldImgs { margin-left: -40px; width: 50%; } .sixthFoldMainDiv { height: 25vh; width: 100%; } .sixthFoldImgsDoor { height: 100%; width: 35%; } .sixthFoldImgsKeyTags { position: absolute; left: 30%; top: 25%; width: 10%; } .sixthFoldMainText { font-size: 30px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 5%; top: 48%; -webkit-text-stroke: 1px rgb(163 163 163); } .seventhFoldMainDiv { height: 50vh; width: 100%; } .seventhFoldImgsUSB { position: absolute; right: 0%; top: 10%; width: 60%; } .seventhFoldImgsFootlight { position: absolute; left: 5%; bottom: -12%; width: 35%; } .seventhFoldMainText { font-size: 50px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; left: 5%; top: 15%; -webkit-text-stroke: 1px rgb(64 64 64); } .eighthFoldMainDiv { height: 30vh; width: 100%; } .eightthFoldMainText { font-size: 40px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 5%; top: 10%; } .exploreNewBtnDiv { position: relative; top: 60%; left: 15%; } .exploreNewBtn { height: 35px; width: 60%; font-size: 11px; } } /* ipad */ @media screen and (min-width: 501px) and (max-width: 950px) { .contactUsMainDiv { width: 100%; height: 90vh; } .contactUsForm { width: 65%; position: absolute; right: 10%; top: 20%; overflow: hidden; } .contactUsText { position: absolute; top: 5%; left: 10%; width: 40%; font-size: 35px; } .FirstFoldMainDiv { height: 98vh; } .firstFoldImgFirst { position: absolute; top: 0; left: 0; width: 35%; } .firstFoldImgSecond { position: absolute; left: 5%; bottom: -15%; width: 40%; } .firstFoldImgThird { position: absolute; top: 15%; right: 5%; width: 35%; } .firstFoldImgFourth { position: absolute; bottom: 10%; right: 0; width: 35%; } /* .FirstFoldMainTextDiv { position: absolute; top: 45%; left: 5%; } */ .FirstFoldMainText { font-size: 60px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .secondFoldMainDiv { height: 30vh; width: 100%; } .secondFoldMainText { font-size: 80px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .thirdFoldMainDiv { height: 40vh; width: 100%; } .regulatorImg { width: 27%; } .thirdFoldMainText { font-size: 70px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; -webkit-text-stroke: 1px rgb(118, 118, 118); } .fourthFoldMainDiv { height: 60vh; width: 100%; } .fourthFoldImg { width: 35%; } .fourthFoldMainText { font-size: 80px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: right; text-transform: uppercase; background: linear-gradient( to left, rgb(138, 138, 138) 0%, rgb(231, 231, 231) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fifthFoldMainDiv { height: 40vh; width: 100%; } .fifthFoldMainTextDiv { display: flex; flex-direction: column; align-items: flex-end; } .fifthFoldMainText { font-size: 60px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; } .fifthFoldImgs { margin-left: -70px; width: 40%; } .sixthFoldMainDiv { height: 25vh; width: 100%; } .sixthFoldImgsDoor { height: 100%; width: 35%; } .sixthFoldImgsKeyTags { position: absolute; left: 30%; top: 10%; width: 10%; } .sixthFoldMainText { font-size: 60px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 10%; top: 40%; -webkit-text-stroke: 1px rgb(163 163 163); } .seventhFoldMainDiv { height: 70vh; width: 100%; } .seventhFoldImgsUSB { position: absolute; right: 0%; top: 10%; width: 60%; } .seventhFoldImgsFootlight { position: absolute; left: 15%; bottom: -8%; width: 35%; } .seventhFoldMainText { font-size: 90px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; left: 10%; top: 20%; } .eighthFoldMainDiv { height: 20vh; width: 100%; } .eightthFoldMainText { font-size: 60px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 10%; top: -55%; } .exploreNewBtnDiv { position: relative; top: 60%; left: 33%; } .exploreNewBtn { height: 45px; width: 300px; font-size: 15px; } } /* mini laptop */ @media screen and (min-width: 951px) and (max-width: 1200px) { .headerMainLogo { width: 120px; } .headerMainDiv { height: 8vh; width: 90%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-left: auto; margin-right: auto; background-color: white; } .contactUsMainDiv { width: 100%; height: 130vh; } .contactUsForm { width: 35%; position: absolute; right: 8%; top: 2%; overflow: hidden; } .contactUsText { position: absolute; top: 45%; left: 10%; width: 30%; font-size: 30px; } .headerMainLogo { width: 130px; } .firstFoldImgFirst { position: absolute; top: -5%; left: -1%; width: 19%; } .firstFoldImgSecond { position: absolute; left: 26%; bottom: -20%; width: 19%; } .firstFoldImgThird { position: absolute; top: 5%; right: 20%; width: 19%; } .firstFoldImgFourth { position: absolute; bottom: 0%; right: 0%; width: 19%; } .FirstFoldMainText { font-size: 65px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .secondFoldMainDiv { height: 35vh; width: 100%; } .secondFoldMainText { font-size: 80px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .secondFoldImg { width: 10%; } .thirdFoldMainDiv { height: 60vh; width: 100%; } .regulatorImg { width: 25%; } .thirdFoldMainText { font-size: 80px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; } .fourthFoldMainDiv { height: 90vh; width: 100%; } .fourthFoldImg { width: 35%; } .fourthFoldMainText { font-size: 90px; } .fifthFoldMainDiv { height: 60vh; width: 100%; } .fifthFoldMainTextDiv { display: flex; flex-direction: column; align-items: flex-end; } .fifthFoldMainText { font-size: 60px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; } .fifthFoldImgs { margin-left: -70px; width: 30%; } .sixthFoldMainDiv { height: 60vh; width: 100%; } .sixthFoldImgsDoor { height: 100%; width: 35%; } .sixthFoldImgsKeyTags { position: absolute; left: 30%; top: 12%; width: 10%; } .sixthFoldMainText { font-size: 60px; position: absolute; right: 10%; top: 40%; } .seventhFoldMainDiv { height: 100vh; width: 100%; } .seventhFoldImgsUSB { position: absolute; right: 0%; top: 5%; width: 50%; } .seventhFoldImgsFootlight { position: absolute; left: 19%; bottom: -13%; width: 25%; } .seventhFoldMainText { font-size: 80px; position: absolute; left: 20%; top: 15%; } .eighthFoldMainDiv { height: 60vh; width: 100%; } .eightthFoldMainText { font-size: 65px; position: absolute; right: 20%; top: 5%; } .exploreNewBtnDiv { position: relative; top: 70%; left: 35%; } .exploreNewBtn { height: 40px; width: 250px; font-size: 12px; } } /* mini laptop */ @media screen and (min-width: 1201px) and (max-width: 1400px) { .contactUsMainDiv { width: 100%; height: 95vh; } .contactUsForm { width: 35%; position: absolute; right: 8%; top: 2%; overflow: hidden; } .contactUsText { position: absolute; top: 40%; left: 10%; width: 32%; font-size: 40px; } .firstFoldImgFirst { position: absolute; top: -5%; left: -1%; width: 18%; } .firstFoldImgSecond { position: absolute; left: 26%; bottom: -20%; width: 20%; } .firstFoldImgThird { position: absolute; top: 6%; right: 20%; width: 20%; } .firstFoldImgFourth { position: absolute; bottom: -5%; right: 0%; width: 20%; } .FirstFoldMainText { font-size: 95px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .secondFoldImg { width: 12%; } .secondFoldMainDiv { height: 35vh; width: 100%; } .secondFoldMainText { font-size: 110px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .regulatorImg { width: 25%; } .thirdFoldMainDiv { height: 60vh; width: 100%; } .thirdFoldMainText { font-size: 100px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; -webkit-text-stroke: 3px rgb(118, 118, 118); opacity: 0.9; } .fourthFoldImg { width: 35%; } .fourthFoldMainDiv { height: 90vh; width: 100%; } .fourthFoldMainText { font-size: 110px; } .fifthFoldMainDiv { height: 60vh; width: 100%; } .fifthFoldMainTextDiv { display: flex; flex-direction: column; align-items: flex-end; } .fifthFoldMainText { font-size: 100px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; } .fifthFoldImgs { margin-left: -120px; width: 40%; } .sixthFoldMainDiv { height: 50vh; width: 100%; } .sixthFoldImgsDoor { height: 100%; } .sixthFoldImgsKeyTags { position: absolute; left: 28%; top: 10%; width: 9%; } .sixthFoldMainText { font-size: 90px; } .seventhFoldMainDiv { height: 100vh; width: 100%; } .seventhFoldImgsUSB { position: absolute; right: 0%; top: 5%; width: 50%; } .seventhFoldImgsFootlight { position: absolute; left: 15%; bottom: -13%; width: 25%; } .seventhFoldMainText { font-size: 110px; position: absolute; left: 20%; top: 20%; } .eighthFoldMainDiv { height: 60vh; width: 100%; } .eightthFoldMainText { font-size: 110px; position: absolute; right: 10%; top: 5%; } .exploreNewBtnDiv { position: relative; top: 65%; left: 38%; } .exploreNewBtn { height: 50px; width: 300px; font-size: 15px; } } /* mini laptop */ @media screen and (min-width: 1401px) and (max-width: 1500px) { .contactUsMainDiv { width: 100%; height: 95vh; } .contactUsForm { width: 35%; position: absolute; right: 8%; top: 2%; overflow: hidden; } .contactUsText { position: absolute; top: 40%; left: 10%; width: 28%; font-size: 40px; } .firstFoldImgFirst { position: absolute; top: -5%; left: -1%; width: 20%; } .firstFoldImgSecond { position: absolute; left: 26%; bottom: -10%; width: 18%; } .firstFoldImgThird { position: absolute; top: 5%; right: 20%; width: 20%; } .firstFoldImgFourth { position: absolute; bottom: -5%; right: 0%; width: 20%; } .FirstFoldMainText { font-size: 95px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .secondFoldImg { width: 12%; } .secondFoldMainDiv { height: 35vh; width: 100%; } .secondFoldMainText { font-size: 110px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .regulatorImg { width: 25%; } .thirdFoldMainDiv { height: 70vh; width: 100%; } .thirdFoldMainText { font-size: 100px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; -webkit-text-stroke: 3px rgb(118, 118, 118); opacity: 0.9; } .fourthFoldImg { width: 35%; } .fourthFoldMainDiv { height: 100vh; width: 100%; } .fourthFoldMainText { font-size: 110px; } .fifthFoldMainDiv { height: 60vh; width: 100%; } .fifthFoldMainTextDiv { display: flex; flex-direction: column; align-items: flex-end; } .fifthFoldMainText { font-size: 100px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; } .fifthFoldImgs { margin-left: -120px; width: 35%; } .sixthFoldMainDiv { height: 60vh; width: 100%; } .sixthFoldImgsDoor { height: 100%; } .sixthFoldImgsKeyTags { position: absolute; left: 30%; top: 10%; width: 9%; } .sixthFoldMainText { font-size: 90px; } .seventhFoldMainDiv { height: 120vh; width: 100%; } .seventhFoldImgsUSB { position: absolute; right: 0%; top: 5%; width: 50%; } .seventhFoldImgsFootlight { position: absolute; left: 18%; bottom: -13%; width: 25%; } .seventhFoldMainText { font-size: 110px; position: absolute; left: 20%; top: 20%; } .eighthFoldMainDiv { height: 60vh; width: 100%; } .eightthFoldMainText { font-size: 110px; position: absolute; right: 13%; top: 8%; } .exploreNewBtnDiv { position: relative; top: 65%; left: 38%; } .exploreNewBtn { height: 50px; width: 300px; font-size: 15px; } } /* laptop */ @media screen and (min-width: 1501px) and (max-width: 1900px) { .contactUsMainDiv { width: 100%; height: 100vh; } .contactUsForm { width: 30%; position: absolute; right: 10%; top: 5%; overflow: hidden; } .contactUsText { position: absolute; top: 40%; left: 10%; width: 35%; } .firstFoldImgFirst { position: absolute; top: -5%; left: -1%; width: 20%; } .firstFoldImgSecond { position: absolute; left: 26%; bottom: -10%; width: 18%; } .firstFoldImgThird { position: absolute; top: 5%; right: 20%; width: 20%; } .firstFoldImgFourth { position: absolute; bottom: -5%; right: 0%; width: 20%; } .FirstFoldMainText { font-size: 95px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .secondFoldImg { width: 12%; } .secondFoldMainDiv { height: 35vh; width: 100%; } .secondFoldMainText { font-size: 110px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; } .regulatorImg { width: 25%; } .thirdFoldMainDiv { height: 70vh; width: 100%; } .thirdFoldMainText { font-size: 100px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; -webkit-text-stroke: 3px rgb(118, 118, 118); opacity: 0.9; } .fourthFoldImg { width: 35%; } .fourthFoldMainDiv { height: 100vh; width: 100%; } .fourthFoldMainText { font-size: 110px; } .fifthFoldMainDiv { height: 60vh; width: 100%; } .fifthFoldMainTextDiv { display: flex; flex-direction: column; align-items: flex-end; } .fifthFoldMainText { font-size: 100px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; } .fifthFoldImgs { margin-left: -120px; width: 35%; } .sixthFoldMainDiv { height: 60vh; width: 100%; } .sixthFoldImgsDoor { height: 100%; } .sixthFoldImgsKeyTags { position: absolute; left: 30%; top: 10%; width: 9%; } .sixthFoldMainText { font-size: 90px; } .seventhFoldMainDiv { height: 120vh; width: 100%; } .seventhFoldImgsUSB { position: absolute; right: 0%; top: 5%; width: 50%; } .seventhFoldImgsFootlight { position: absolute; left: 18%; bottom: -13%; width: 25%; } .seventhFoldMainText { font-size: 110px; position: absolute; left: 20%; top: 20%; } .eighthFoldMainDiv { height: 60vh; width: 100%; } .eightthFoldMainText { font-size: 120px; position: absolute; right: 13%; top: 8%; } .exploreNewBtnDiv { position: relative; top: 65%; left: 40%; } .exploreNewBtn { height: 50px; width: 300px; font-size: 15px; } } @media screen and (min-width: 2201px) { .headerMainLogo { width: 220px; } .contactUsMainDiv { width: 100%; height: 55vh; } .contactUsForm { width: 22%; position: absolute; right: 20%; top: 5%; overflow: hidden; } .contactUsText { position: absolute; top: 30%; left: 18%; width: 25%; font-size: 70px; } /* .FirstFoldMainDiv { */ /* height: 92vh; */ /* height: 100vh; width: 100%; } */ .firstFoldImgFirst { position: absolute; top: -5%; left: -1%; width: 18%; } .firstFoldImgSecond { position: absolute; left: 26%; bottom: -20%; width: 18%; } .firstFoldImgThird { position: absolute; top: 5%; right: 20%; width: 18%; } .firstFoldImgFourth { position: absolute; bottom: 0%; right: 0%; width: 20%; } .FirstFoldMainTextDiv { display: flex; justify-content: center; align-items: center; height: 100%; } .FirstFoldMainText { font-size: 170px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; -webkit-text-stroke: 2px white; } .secondFoldMainDiv { height: 35vh; width: 100%; } .secondFoldImg { width: 14%; } .secondFoldMainText { font-size: 200px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; -webkit-text-stroke: 2px white; opacity: 0.9; } .thirdFoldMainDiv { height: 60vh; width: 100%; } .thirdFoldMainText { font-size: 150px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; -webkit-text-stroke: 3px rgb(118, 118, 118); opacity: 0.9; } .fourthFoldMainDiv { height: 100vh; width: 100%; } .fourthFoldMainText { font-size: 200px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: right; text-transform: uppercase; background: linear-gradient( to left, rgb(154, 153, 153) 0%, rgb(231, 231, 231) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* -webkit-text-stroke: 5px rgb(187, 186, 186) 100%; opacity: 0.9; */ } .fifthFoldMainDiv { height: 60vh; width: 100%; } .fifthFoldMainTextDiv { display: flex; flex-direction: column; align-items: flex-end; } .fifthFoldMainText { font-size: 130px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-align: center; text-transform: uppercase; } .fifthFoldImgs { margin-left: -180px; width: 30%; } .sixthFoldMainDiv { height: 60vh; width: 100%; } .sixthFoldImgsDoor { height: 100%; } .sixthFoldImgsKeyTags { position: absolute; left: 30%; top: 20%; } .sixthFoldMainText { font-size: 150px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 15%; top: 45%; -webkit-text-stroke: 4px rgb(163 163 163); } .seventhFoldMainDiv { height: 100vh; width: 100%; } .seventhFoldImgsUSB { position: absolute; right: 0%; top: 5%; width: 50%; } .seventhFoldImgsFootlight { position: absolute; left: 18%; bottom: -15%; width: 30%; } .seventhFoldMainText { font-size: 200px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; left: 20%; top: 20%; -webkit-text-stroke: 4px rgb(64 64 64); } .eighthFoldMainDiv { height: 50vh; width: 100%; } .eightthFoldMainText { font-size: 170px; font-family: "GOTHAM_BOLD"; overflow: hidden; text-transform: uppercase; position: absolute; right: 15%; top: 10%; } .exploreNewBtnDiv { position: relative; top: 70%; } .exploreNewBtn { height: 90px; width: 500px; font-size: 25px; } } /* explore btn */ .secbtn { position: relative; display: inline-block; width: 300px; height: 50px; font-weight: 600; font-family: "GOTHAM_BOLD"; /* line-height: 55px; */ text-align: center; /* text-transform: uppercase; */ background-color: transparent; text-decoration: none; letter-spacing: 0.045em; } .secbtn svg { position: absolute; top: 0; left: 0; } .secbtn svg rect { stroke-width: 4; stroke-dasharray: 353, 0; stroke-dashoffset: 0; -webkit-transition: all 600ms ease; transition: all 600ms ease; } .secbtn:hover svg rect { stroke-width: 4; stroke-dasharray: 210, 543; stroke-dashoffset: 437; }