*{ font-family: "Raleway"; font-feature-settings: 'lnum', 'tnum'; box-sizing: border-box; margin: 0; padding: 0; } body{ overflow-x: hidden; } :root { --primary-color: #13a4d6; --white-text: #ffffff; --search-box-background: rgba(255, 255, 255, 0.30); --mini-map-background: #FBF9F6; } .navigation-bar-mobile{ display: none; } .head-mob { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; background-color: #fff; color: #000; position: fixed; z-index: 1000; width: 100vw; } .logo-mob img { max-height: 30px; } .toggle-button-mob { font-size: 30px; cursor: pointer; } .side-menu-mob { position: fixed; top: 0; left: -80%; width: 80%; height: 100%; background-color: #fff; transition: left 0.3s ease-in-out; padding-top: 60px; color: black; z-index: 1000; } .side-menu-mob ul { list-style: none; padding: 0; } .side-menu-mob ul li { padding: 20px; text-align: center; } .side-menu-mob ul li a { text-decoration: none; color: black; font-size: 18px; } .side-menu-mob.open { left: 0; } .navigation-bar{ position: fixed; z-index: 1000; width: 100%; } .top-navigation{ height: 30px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: var(--primary-color); padding-inline: 2vw; } .socials{ margin-left: 2vw; display: flex; flex-direction: row; gap: 1vw; } .social-icon{ width: 12px; height: 16px !important; } .nav-contact{ display: flex; gap: 1vw; margin-right: 1vw; } .contacts{ position: relative; display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 1vw; } .nav-p{ font-size: 13px; color: var(--white-text); } .nav-left{ display: flex; margin-left: 1vw; } .nav-right{ margin-right: 1vw; } .main-navigation{ height: 48px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1.5px solid #EEF0F3; border-radius: 0px 0px 20px 20px; padding-inline: 2vw; background-color: var(--white-text); } .logo{ height: 24px; } .nav-elements{ display: flex; flex-direction: row; margin-left: 2vw; gap: 2vw; font-size: 13px; justify-content: center; align-items: center; } .login-btn, .register-btn{ padding: 8px; border-radius: 8px; border-color: transparent; } .login-btn{ background-color: #f0f0f0; } .register-btn{ background-color: var(--primary-color); color: var(--white-text); } .btn-arrow{ margin-left: 1vw; } .hero-section{ position: relative; display: flex; justify-content: center; width: 100vw; height: 100vh; background: url(assets/cic-homepage/hero-section/background-hero-img.png); background-repeat: no-repeat; background-size: cover; } .hero-text{ position: relative; color: var(--white-text);  text-align: center; font-size: 34px; } .hero-sub-text{ position: relative; color: var(--white-text); text-align: center; margin-top: 2vh; font-size: 16px; } .hero-contents{ margin-top:150px;width: fit-content; height: fit-content; position: relative; justify-content: center; } .highlight{ color: var(--primary-color); } .search-box { height: fit-content; position: relative; justify-self: center; margin-top: 8vh; width: 100%; display: flex; flex-direction: column; gap: 20px; align-items: center; padding: 20px; background: var(--search-box-background, #f5f5f5); border-radius: 20px; } .search-header { color: var(--white-text, #333); font-weight: bold; font-size: 18px; } .search-bar { display: flex; align-items: center; width: 70vw; border-radius: 12px; border: 2px solid #ccc; background-color: #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); overflow: hidden; } .keyword-search { flex: 1; height: 40px; border: none; padding: 10px; font-size: 14px; box-sizing: border-box; border-right: 1px solid #ccc; } .keyword-search:last-child { border-right: none; } .keyword-search:focus { outline: none; border-color: var(--primary-color, #007bff); } .cta-btn { margin-top: 10px !important; background-color: var(--primary-color) !important; color: var(--white-text) !important; padding: 10px 20px !important; border-radius: 8px !important; border-color: transparent !important; font-size: 14px !important; cursor: pointer !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; } .cta-btn:hover { background-color: #0097c9; } .search-cta-btn { height: 40px; background-color: var(--primary-color, #13a4d6); color: var(--white-text, white); border: none; border-radius: 0 12px 12px 0; padding: 0 20px; cursor: pointer; font-size: 16px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .search-cta-btn:hover { background-color: #0ba5d8; } .search-box p { margin-bottom: 0; } .two-grid-promo{ display: grid; grid-template-columns: 1fr 1fr 1fr; margin-top: 8vh; padding-inline: 12vw; justify-content: space-evenly; } .map-section, .reels-section,.resume-section{ display: flex; flex-direction: column; gap:20px; align-items: center; } .map-section p, .reels-section p,.resume-section p{ font-size: 14px; font-weight: bold;white-space:nowrap !important; } .mini-map-div{ background-color: var(--mini-map-background); border: 2.02px solid rgba(0, 0, 0, 0.05); box-shadow: 0px 344.235px 96.16px 0px rgba(0, 0, 0, 0.00), 0px 13.737px 30.706px 0px rgba(0, 0, 0, 0.10), 0px 0px 0px 0px rgba(0, 0, 0, 0.10); border-radius: 16px; width: fit-content; } .reels-select-div img{ height: 200px; } .mini-map-div img{ height: 200px; } .mini-cta-div button{ margin-top: 16px; } .map-reels{ margin-bottom: 12vh; } .form-control, .form-select { font-size:11px; } input::placeholder{ font-size:10px !important; } .dropdown1000{ display: none; position: absolute; top: 80%; border: 1px solid #ccc; background-color: white; max-height: 150px; overflow-y: auto; z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); font-size:10px !important; width: 30% !important; } .dropdown1003 { display: none; position: absolute; top: 80%; border: 1px solid #ccc; background-color: white; max-height: 150px; overflow-y: auto; z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); font-size:10px !important; width: 30.9% !important; left:32% !important; } .dropdown1002 { display: none; position: absolute; top: 80%; border: 1px solid #ccc; background-color: white; max-height: 150px; overflow-y: auto; z-index: 1000; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); font-size:10px !important; width: 30.7%; left:63.1%; } .dropdown1000, .dropdown1002, .dropdown1003 { list-style-type: none; padding: 0; margin: 0; } .dropdown1000 li, .dropdown1002 li, .dropdown1003 li { padding: 10px; cursor: pointer; } .dropdown1000 li:hover, .dropdown1002 li:hover, .dropdown1003 li:hover { background-color: #f0f0f0; } @media screen and (min-width: 768px) { .dropdown1000{ width: 27.1% !important; } .dropdown1003 { width: 27.5%; left:30.3%; } .dropdown1002 { width: 27.4%; left:57.8%; } } @media screen and (min-width: 1024px) { .dropdown1000{ width: 27%; } .dropdown1003 { width: 27.5%; left:30%; } .dropdown1002 { width: 27.4%; left:57.6%; } } @media screen and (min-width: 1320px) { .dropdown1000{ width: 28%; } .dropdown1003 { width: 29%; left:31%; } .dropdown1002 { width: 28.3%; left:60%; } } @media screen and (min-width: 1440px) { .dropdown1000{ width: 29%; } .dropdown1003 { width: 29%; left:31%; } .dropdown1002 { width: 29%; left:60.2%; } } @media screen and (min-width: 2560px) { .dropdown1000{ width: 31% !important; } .dropdown1003 { width: 30.9% !important; left:32% !important; } .dropdown1002 { width: 30.7%; left:63.1%; } } .dropdown1000::-webkit-scrollbar , .dropdown1002::-webkit-scrollbar ,.dropdown1003::-webkit-scrollbar{ display: none; } .job-box { padding: 6px; border-radius: 6px; font-size: 0.7rem; text-align: left; margin-bottom: 10px; border: 0.1px solid rgb(194, 191, 191); border-radius: 8px; border-style: solid; border-color: #a0a0a0; } .job-card { position:relative;padding: 15px !important; text-align: center !important; background-color: #fff !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .job-row { flex-wrap: wrap !important; gap: 20px !important; } .job-row .col-4 { flex: 1 0 30%!important; } .left-right-container { display: flex; justify-content: center;  } .left-container {padding-right:8px;border-right:0.5px solid #ccc; }.right-container {padding-left:8px;border-left:0.5px solid #ccc; } .button-container { text-align: center; margin-bottom: 30px; } p { margin-top: 0; margin-bottom: 0rem; } .btn-group { display: flex; justify-content: center; width: 300px; font-size: 14px; margin-left: 0px !important; border-radius: 7px; } .btn-group .btn { margin: 20px; background-color: #13a4d6; color: #fff; border-radius: 8px; font-size: 0.75rem; padding: 5px 10px; text-align: center; } .btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn.dropdown-toggle-split:first-child, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } .btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:nth-child(n+3), .btn-group>:not(.btn-check)+.btn { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .btn { color: #13a4d6; padding: 4px 8px; font-size: 0.8rem; border-radius: 5px; } .job-count { font-size: 0.7rem; color: #13a4d6; margin-top: 5px; font-weight: normal; } .tabs { display: flex; justify-content: center; margin-bottom: 20px; padding: 7px; width: fit-content; border-radius: 10px; background-color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-top:-30px !important; } .tab { padding: 10px 10px; font-size: 14px; text-align: center; border-radius: 10px; background-color: white; cursor: pointer; transition: all 0.3s ease; } .tab-name { padding: 10px 10px; font-size: 10px; color: #333; text-align: center; font-weight: 500; border-radius: 20px; background-color: white; cursor: pointer; transition: all 0.3s ease; } .tab:hover { background-color: #f0f8ff; } .tab.active { background-color: #13a4d6; color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .job-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding-inline: 20px; } .job-card { background-color: white !important; border: 1px solid #ddd !important; border-radius: 10px !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; padding: 20px !important; transition: transform 0.2s !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .job-title { font-size: 18px; font-weight: bold; color: #333; text-align: left;width:70%; } .company-logo { float: right; max-width: 50px; margin-left: auto;width:fit-content;position:absolute;right:10px; } .company-name { font-size: 12px; color: #555; text-align: left; } .job-details { font-size: 12px; color: #666; margin-block: 6px; text-align: left; } .job-details span { display: inline-block; margin-right: 10px; } .job-description { font-size: 12px; color: #777; margin-bottom: 8px; line-height: 1.5; text-align: left; } .job-actions { display: flex; gap:8px; } .btn { padding: 5px 10px; font-size: 12px; border: none; border-radius: 8px; cursor: pointer; } .apply-btn { background-color: #13a4d6 !important; color: white !important; font-size: 12px !important; padding: 5px 10px !important; } .save-btn { background-color: #f8f9fa !important; color: #13a4d6 !important; border: 1px solid #13a4d6 !important; font-size: 12px !important; padding: 5px 10px !important; } .job-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .swiper { width: 100%; padding: 20px 0; } .swiper-wrapper { display: flex; } .swiper-slide { display: flex; justify-content: center; } .company-name { font-size: 12px; color: #666; } .job-info { font-size: 14px; color: #777; margin: 5px 0; } .view-jobs-btn { display: inline-block; margin-top: 15px; padding: 10px 20px; font-size: 14px; color: white; background-color: #007bff; text-decoration: none; border-radius: 20px; transition: background-color 0.3s ease; } .view-jobs-btn:hover { background-color: #0056b3; } .view-more-btn { background-color: var(--primary-color); color: var(--white-text); border-radius: 8px; border-color: transparent; font-size: 12px; padding: 8px; margin-top: 4vh; } .recent, .freshers, .part-time, .internship { display: none; } .companies-section{ margin-top: 2vw; } .section-head{ display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 1.5vh; } .mini-header{ font-size: 24px; font-weight: bold; } .mini-paragraph{ font-size: 14px; font-weight: 300; text-align: center; } .company-profiles { width: 170px; height: 150px; background: #ffffff; border-radius: 12px; border: 1px solid #d9d9d9; padding: 12px 12px 20px 12px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; } .img-for-comp-profile { max-height: 40px; width: 60px; object-fit: contain; } .comp-name { font-size: 14px; margin: 0; } .tags { display: flex; gap: 0.5vw; margin-bottom: 8px; } .tags p { background: #f8f8f8; border-radius: 8px; font-size: 8px; padding: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .comp-opening-text { display: flex; align-items: center; font-size: 8px; gap: 4px; } .comp-btn { display: flex; justify-content: center; align-items: center; padding: 8px; gap: 10px; border-radius: 8px; border: 1px solid var(--white-text); background: #FFF; color: var(--primary-color); border-color: var(--primary-color); font-size: 12px; margin-top: 10px; width: 100px; } .comp-opening-text p { margin-left: 1vw; font-size: 10px; } .comp-pro-row { display: flex; flex-direction: row; gap: 12px; margin-top: 4vh; } .section-head{ margin-top: 0 !important; } .location-layout{ display: grid; grid-template-columns: repeat(4, 1fr); justify-content: space-between; } .c-2{ position: relative; display:grid; grid-template-rows: 0.5fr 1.5fr; gap: 2vh; height: fit-content; } .b-1 img{ width: 80px; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; } .b-1{ display: flex; flex-direction: row; align-items: center; background: #FFF; border-radius: 12px; height:95px; padding: 8px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); } .loco-data{ margin-left: 20px; display: flex; flex-direction: column; gap: 12px; } .loco-data div{ display: flex; flex-direction: row; align-items: center; justify-content: center; } .loco-opo{ margin-left: 12px; font-size: 12px; } .b-2 img{ height: 86px; width: 220px; border-radius: 12px; } .b-2{ display: flex; flex-direction: column; align-items: center; background: #FFF; border-radius: 12px; padding: 8px; height:170px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); } .loco-data-2{ margin-left: 0px; text-align: left; margin-top: 12px; } .b-3{ display: flex; flex-direction: column; align-items: center; background: #FFF; border-radius: 12px; padding: 8px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); } .b-3 img{ border-radius: 12px; height: 100px; width: 100%; margin-bottom: 8px; } .b-31{ display: flex; flex-direction: column; align-items: center; background: #FFF; border-radius: 12px; padding: 8px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); } .b-31 img{ border-radius: 12px; height: 203px; width: 100%; margin-bottom: 8px; } .c-3{ display: grid; gap: 8px; } .b-3 .loco-data{ text-align: left; } .c-4{ height: 100%; } .ad-promo-section{ margin-top: 40px !important; } .ad-banner { position: relative; height: 70px !important; overflow: hidden; margin: 20px auto;   } .ad-slides { position: relative; height: 100%; display: flex; transition: transform 1s ease-in-out; } .slide { min-width: 100%; height: 100%; background-size: contain; background-repeat:no-repeat;background-color:white;background-position: center; transition: opacity 1s ease-in-out; } .navigation-dots { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; } .navigation-dots .dot { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.7); border-radius: 50%; cursor: pointer; transition: background-color 0.3s ease; } .navigation-dots .dot.active { background-color: rgba(255, 255, 255, 1); } .card-body { flex: 1 1 auto; padding: 0rem 0rem !important; } footer { background-color: #fff; color: white; display: flex; justify-content: space-around; flex-wrap: wrap; } .footer-column { margin: 10px !important; } .footer-column h3 { font-size: 16px; margin-bottom: 20px; } .footer-column p, .footer-column a { font-size: 12px; color: #333; text-decoration: none; display: block; margin-top: 10px; } .social-icons { display: flex; gap: 15px; } .social-icons img { width: 15px; height: 15px; transition: transform 0.3s; margin-left:10px; } .social-icons img:hover { transform: scale(1.1); } h3{ color:#333; font-weight:600; } .footer-column a i { margin-right: 10px; color: #13a4d6; font-size:14px !important;} .last-footer { text-align: center; padding: 10px 0; color: #c1b3b3; font-size: 10px; margin: 0 auto; width: 100%; box-sizing: border-box; } .last-footer p { margin: 5px 0; line-height: 1.5; } .center-line-footer { height: 1px; background-color: rgb(231, 227, 227); width: 80%; margin: 10px 0 0 100px; } .center-line-below { height: 1px; background-color: rgb(204, 193, 193); width: 100%; } footer{ border-top: 1px solid #9d9d9d; } .job-box { padding: 6px; border-radius: 6px; font-size: 0.7rem; text-align: left; margin-bottom: 10px; border: 0.1px solid rgb(194, 191, 191); border-radius: 8px; border-style: solid; border-color: #a0a0a0; } .job-card { padding: 15px !important; text-align: center !important; background-color: #fff !important; border-radius: 8px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)!important; transition: transform 0.3s ease, box-shadow 0.3s ease !important; } .job-row { display: flex; flex-wrap: wrap; gap: 0px; } .job-row .col-4 { flex: 1 0 30%; } .left-right-container { display: flex; justify-content: center; } .left-container, .right-container { display:flex;flex-direction:column;align-items:center; } .btn-group { display: flex; justify-content: center; width: 300px; font-size: 14px; margin-left: 60px; border-radius: 7px; } .btn-group .btn { margin: 20px; background-color: #13a4d6; color: #fff; border-radius: 8px; font-size: 0.65rem; padding: 5px 10px; text-align: center; } .job-count { font-size: 0.7rem; color: #7e7e7e; margin-top: 5px; font-weight: normal; } .center-line { width: 0.1px; background-color: rgb(231, 227, 227); height: 90% !important; position: absolute; left: 50%; transform: translateX(-50%); } .bottom-half{ position: relative; display: flex; flex-direction: column; gap: 0px !important; } .container{ margin-top: 20px; } .jobs-section{ padding-inline: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .comp-pro-row{ padding-inline: 200px !important; } .location-section{ padding-inline: 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .it-non-it-section{ padding-inline: 60px; } .recruitment{ padding-inline: 50px; } .map-reels{ background: url("assets/cic-homepage/map-reels-cta/bg-image-mr.png"); } .companies-section { margin-top: 2vw; } .comp-pro-row { display: flex; gap: 12px; transition: transform 0.3s ease; width: fit-content; } .company-profiles { width: 170px; height: 180px; background: #ffffff; border-radius: 12px; border: 1px solid #d9d9d9; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; flex-shrink: 0; } .carousel-btn { position: absolute; top: 56%; background: #EEE; font-size: 24px; cursor: pointer; z-index: 10; padding: 8px; border-radius: 8px; border: transparent; } .left-btn { left: 10px; } .comp-view-all-btn{ display: flex; justify-content: center; align-items: center; color: var(--primary-color); font-size: 20px; } .carousel-wrapper { position: relative; width: 100%; overflow-x: scroll; display: flex; gap: 20px; padding: 10px; cursor: grab; scroll-snap-type: x mandatory; scroll-behavior: smooth; } .carousel-wrapper::-webkit-scrollbar { width: 8px; height:4px; } .carousel-wrapper::-webkit-scrollbar-thumb:hover { background: #555; } .carousel-wrapper.dragging { cursor: grabbing !important; user-select: none; } .section-head { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 1.5vh; } .mini-header { font-size: 24px; font-weight: bold; } .mini-paragraph { font-size: 14px; font-weight: 300; text-align: center; } .companies-section{ position: relative; } .background-images{ display: flex; position: absolute; z-index: -1000; width: 200px; top:-35px; } .background-companies-tiles{ width: 700px; } .btn-toggle { padding: 8px 5px; border: 1px solid #13a4d6; border-radius: 12px; cursor: pointer; font-size: 12px; transition: background-color 0.3s, color 0.3s; justify-content: space-between; margin: 5px; } .btn-toggle.active { background-color: #13a4d6; color: #fff; } .btn-toggle.inactive { background-color: transparent; color: #13a4d6; } .btn-toggle:hover { background-color: #13a4d6; color: #fff; } .job-box { padding: 6px;border-radius: 8px;font-size: 0.7rem;text-align: left; margin-bottom: 10px;border: 0.1px solid rgb(194, 191, 191);border-color: #a0a0a0;width: 120px; height: calc(33.33% - 10px);overflow: hidden;text-overflow: ellipsis;white-space: nowrap; } .job-container { display: grid; grid-template-columns: repeat(3, 100px); gap: 5px; justify-content: center; } .background-grids-img{ position: absolute; z-index: -999; margin-top: 550px; } .gridder{ height: 500px; } .search-bar-icon{ margin-left: 2vw; } .hero-section-mob{ display: none; } .placeholder { display: none;justify-content: center;align-items: center;position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: #13a4d6;color: white;font-size: 18px;font-weight: bold;text-align: center;z-index: 9999; } @media (max-width: 768px) { .b-1, .b-2, .b-3, .b-31, .c-3{ height: fit-content; } .b-2 img{ width: 100%; } body{ overflow-x: hidden; } .hero-section{ width: 100vw; } .hero-contents{ width: 100vw; } .search-box{ transform: scale(0.8); width: 100%; } .search-bar{ width: 100%; } .map-reels{ width: 100%; display: flex; justify-content: center; } .navigation-bar{ width: 100vw; } .carousel-wrapper{ margin-left: 0vw; width: 95%; } .company-profiles{ width: 160px; } .location-layout{ transform: scale(0.9); } .b-31 img{ height: 190px; width: 200px; } .ad{ width: 100vw; } .left-container, .right-container{ transform: scale(0.8); } .ad-promo-section{ margin-bottom: 0px; } .py-5{ padding: 0px; } .container{ padding: 0px; } footer{ margin: 0; display: flex; justify-content: center; padding: 10px; } .footer-column:nth-child(4){ width: fit-content; } .last-footer{ margin: 0; padding: 0; margin-top: 4vh; } .it-non-it-section{ display: none; } .gridder{ width: 768px; } .job-card{ display: flex !important; flex-direction: column !important; justify-content: space-between !important; width: 100% !important; padding-right: 12px !important; } .job-grid{ gap: 20px; grid-template-columns: repeat(2, 1fr); } .company-logo { float: right; max-width: 50px; margin-left: auto; } .footer-column { flex: 1; margin: 10px; } .footer-column a{ font-size:9.5px !important; } .footer-column h3 { font-size: 14px; margin-bottom: 15px; } .py-5 { padding-bottom: 1rem !important; } .footer-container { display: grid !important; margin-right:70px !important; gap: 20px; } } @media (min-width: 602px) and (max-width: 767px){ .b-1, .b-2, .b-3, .b-31, .c-3{ height: fit-content; } .b-2 img{ width: 100%; } body{ overflow-x: hidden; } .hero-section{ width: 100%; } .map-reels{ width: 100%; } .companies-section{ width: 100%; } .carousel-wrapper{ width: 100%; } .gridder{ width: 500px; } .location-layout{ font-size: 8px; } .login-btn, .register-btn{ font-size: 8px; } .nav-right{ display: flex; flex-direction: row; } .nav-p{ font-size: 8px; } .social-icons{ width: 10px; } .socials{ gap: 12px; } .social-icon{ margin-right: 4px; width: 10px; } .tabs{ transform: scale(0.75); } .tab{ width: 120px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .job-grid{ grid-template-columns: repeat(2, 1fr !important); gap: 12px !important; width: 500px !important; } .location-layout{ } .loco-data p{ font-size: 12px !important; } .nav-each-elements{ width: 50px !important; } .job-title{ font-size: 14px !important; } .company-name{ font-size: 12px !important; } .job-card{ display: flex !important; flex-direction: column !important; justify-content: space-between !important; } .carousel-wrapper{ } .company-logo { float: right; max-width: 50px; margin-left: auto; } } @media (min-width: 769px) and (max-width: 1000px){ .b-1, .b-2, .b-3, .b-31, .c-3{ height: fit-content; } .b-2 img{ width: 100%; } body{ overflow-x: hidden; } .hero-section{ width: 100vw; } .hero-contents{ width: 100vw; } .search-box{ width: 100%; } .search-bar{ width: 100%; } .map-reels{ width: 100%; display: flex; justify-content: center; } .navigation-bar{ width: 100vw; } .carousel-wrapper{ margin-left: 0vw; width: 95%; } .company-profiles{ width: 160px; } .location-layout{ } .b-31 img{ height: 190px; width: 200px; } .ad{ width: 90vw; } .left-container, .right-container{ transform: scale(1); } .ad-promo-section{ margin-bottom: 0px; } .py-5{ padding: 0px; } .container{ padding: 0px; } footer{ margin: 0; display: flex; justify-content: center; } .footer-column:nth-child(4){ width: fit-content; } .last-footer{ margin: 0; padding: 0; margin-top: 4vh; } .gridder{ width: 768px; } .job-card{ display: flex; flex-direction: column; justify-content: space-between !important; width: 100%; padding-right: 12px; } .job-grid{ gap: 20px; grid-template-columns: repeat(2, 1fr); } .background-images{ display: flex; position: absolute; z-index: -1000; width: 200px; top:-75px; } .col-4{ width: 100px; margin: 0; padding: 0; } .job-row{ margin: 0; padding: 0; gap: 0px; display: flex; flex-direction: row; width: 400px; } .button-container{ justify-content: center; align-items: center; display: flex; } .left-container, .right-container{ display: flex;justify-content: center;align-items: center;flex-direction: column; margin-inline: -5vw; } .card{  display: flex; justify-content: center; margin: 0; padding: 0; } .card-body{ padding: 0; margin: 0; } .it-non-it-section{ padding-inline: 60px; } .container{ display: flex; flex-direction:column !important;justify-content: center; align-items: center; margin: 0; padding: 0; } .left-right-container{ width: 100%; } .company-logo { float: right; max-width: 50px; margin-left: auto; } } @media (min-width: 1150px) and (max-width: 1640px){ .carousel-btn{ } .background-images{ display: flex;position: absolute;z-index: -1000;width: 200px;top:-75px; } .b-1, .b-2, .b-3, .b-31, .c-3{ height: fit-content; } .b-2 img{ width: 100%; } .ad-banner{ width:100vw; } .search-bar{ height: 50px; } .bottom-half{ } .col-4{ width: 100px; margin: 0; padding: 0; } .job-row{ margin: 0;padding: 0;gap: 0px;display: flex;flex-direction: row;width: 400px; } .button-container{ justify-content: center;align-items: center;display: flex; } .left-container, .right-container{ display: flex;justify-content: center;align-items: center;flex-direction: column;} .it-non-it-section{ display: flex; flex-direction: column; justify-content: center; align-items: center; }  .ad-promo-section{ } .right-btn{ margin-right: 8vw; } .company-logo { float: right; max-width: 50px; margin-left: auto; } .location-layout{ } } @media (min-width: 1641px) and (max-width: 2560px) { .carousel-btn { margin-top: 4vh; } .background-images { display: flex ; position: absolute; z-index: -1000; width: 800px !important; bottom: 10px !important; left: 65px; } .ad-banner { position: relative; height: 300px; overflow: hidden; margin: 40px auto;  } .b-1, .b-2, .b-3, .b-31, .c-3 { height: fit-content; } .search-bar { height: 50px; } .search-cta-btn { height: 90vh; } .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1900px !important; } .ad-promo-section { } .right-btn { margin-right: 0; } .job-card { text-align: center; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; width: 500px; } .companies-section { position: relative; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; flex-direction: column; align-items: center; width: 80%; } .companies-section img { max-width: 100%; height: auto; } .carousel-wrapper { position: relative; width: 70vw; overflow: hidden; display: flex; flex-direction:column; margin-left: 6vw; } .b-2 img{ width: 100%; } .job-card-itn { text-align: center; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; width: 1500px; height: fit-content; } .company-logo { float: right; max-width: 50px; margin-left: auto; } .job-box{ width:160px !important; } .tabs { display: flex; justify-content: center; margin-bottom: 20px; padding: 7px; width: fit-content; border-radius: 10px; background-color: white; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-top:-90px !important; } .c-1{ width: 350px; height: 200px; } .section-head{ margin-top:30px !important; } .row{ width:60vw !important; } .card{ width: 80vw; display: flex; justify-content: center; margin: 0; padding: 20px !important; } .job-row { display: flex; justify-content: center; gap: 35px; } .center-line{ left:47% !important; } } @media (max-width: 767px){ .placeholder{ display: flex; } .navigation-bar, .hero-section, .map-reels, .jobs-section, .companies-section, .location-section, .bottom-half{ display: none; } .company-logo { float: right; max-width: 50px; margin-left: auto; } } a{ text-decoration: none; } .no-bootstrap { all: unset; font-family: inherit; margin: 0; padding: 0; font-size: inherit; } *{ font-family: "Raleway"; } :root { --primary-color: #13a4d6; --white-text: #ffffff; --search-box-background: rgba(255, 255, 255, 0.30); --mini-map-background: #FBF9F6; } .navigation-bar{ position: fixed; z-index: 1000; width: 100%; } .top-navigation{ height: 30px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background-color: var(--primary-color); padding-inline: 2vw; border-radius: 0px 0px 0px 0px; } .socials{ margin-left: 2vw; display: flex; flex-direction: row; gap: 1vw; } .social-icon{ width: 12px; height: 12px; } .nav-contact{ display: flex; gap: 1vw; margin-right: 1vw; } .contacts{ position: relative; display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 1vw; } .nav-p{ font-size: 13px; color: var(--white-text); } .nav-left{ display: flex; margin-left: 1vw; } .nav-right{ margin-right: 1vw; } .main-navigation{height: 48px;display: flex;justify-content: space-between;align-items: center;border-bottom: 1.5px solid #EEF0F3;padding-inline: 2vw;background-color: var(--white-text); } .logo{ height: 24px; } .nav-elements{display: flex;flex-direction: row;margin-left: 2vw;gap: 2vw;font-size: 13px;justify-content: center;align-items: center; } .login-btn, .register-btn{padding: 8px;border-radius: 8px;border-color: transparent;} .login-btn{background-color: #f0f0f0;} .register-btn{ background-color: var(--primary-color); color: var(--white-text); } .btn-arrow{ margin-left: 1vw; } .logo-container{display: flex;align-items: center;justify-content: center;} #jobDetails{ display: flex;} .view-btn{ background-color: #13a4d6;color: white;} .navigation-bar-mobile{ display: none;} @media (min-width: 300px) and (max-width: 767px){ .navigation-bar-mobile{ display: flex; position: relative; } .navigation-bar{ display: none; } .navigation-bar-mobile{ position: relative; } .head-mob { display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;background-color: #fff;color: #000;position: fixed;z-index: 1000;width: 100vw; } .logo-mob img { max-height: 30px;} .toggle-button-mob { font-size: 30px;cursor: pointer; } .side-menu-mob { position: fixed;top: 0;left: -80%;width: 80%;height: 100%;background-color: #fff;transition: left 0.3s ease-in-out;padding-top: 60px;color: black;z-index: 100000; } .side-menu-mob ul { list-style: none;padding: 0;height: 80%; } .side-menu-mob ul li { padding: 20px;text-align: left;padding-inline: 40px; } .side-menu-mob ul li a { text-decoration: none;color: black;font-size: 18px;display: flex;padding-inline: 12px; } .sdi{ margin-right: 12px } .side-menu-mob.open { left: 0; } .reglog-ul{ border-top:none !important; } a{ text-decoration: none; color: inherit; } } a{ text-decoration: none; color: inherit; } p{ margin: 0 !important; } .nav-elements{ justify-content: center;align-items: center; } .nav-each-elements{ margin-bottom: 0; } .nav-p{ margin-bottom: 0; } .login-btn, .register-btn{ font-size: 13.33px; } a{ text-decoration: none !important;color: initial; } .b-1, .b-2, .b-3, .b-31, .c-3 { height: 100% !important; } .c-1{ display: flex;flex-direction: column;justify-content: space-between;gap: 8px; } .loco-data div{ display: flex;flex-direction: row;align-items: center;gap: 4px !important; } .location-layout{ gap: 12px; } @media(max-width:1000px){ .it-non-it-section{ display:none !important;} } .ad-banner{ height:300px !important; } .job-section,.companies-section,.location-section,.ad-promo-section{ margin-bottom:0px !important; }