.first-fold { opacity: 1; height: 100vh; display: flex; flex-direction: row; padding: 0; background-color: #F6FBFD; overflow-x: visible; }

.first-fold .logo-section { width: 30vw; height: 100%; display: flex; justify-content: center; align-items: flex-end; }
.first-fold .logo-section img { padding-bottom: 60px; width: 100px; }


.principles-section { height: 100%; width: 100%; overflow-x: visible; position: relative; border-left: 3px solid #BAD4E7; position: relative; }
.principles-section .inner { height: 100%; padding: 0; position: relative; overflow: visible; display: flex; flex-direction: column; justify-content: center; gap: 80px; padding-bottom: 77px; padding-right: 180px; padding-left: 40px; }
.principles-section .bg-img { position: absolute; top: 0; left: 0; height: 100%; }
/* .principles-section .bg-img-cnt .bg-img { width: 100%; height: 100%; object-fit: cover; } */
.principles-section .section-title { position: absolute; top:60px; right:80px; font-size: 32px; color: #4B5F61 }
.principles-section .center-wrapper { display: flex; align-items: center; justify-content: center; gap: 16px; }
.principles-section .center { height: 104px; overflow: hidden; }
.principles-section .center-2 { height: 104px; overflow: hidden; }
.principles-section .center-content { display: flex; flex-direction: column; align-items: center; overflow: hidden; }
.principles-section .center-content-2 { display: flex; flex-direction: column-reverse; align-items: center; }
.principles-section .center-content .unit { display: flex; gap: 12px; align-items: center; height: 104px; }
.principles-section .center-content h3 { width: 334px; color: #fff; font-size: 31px; font-weight: 500; line-height: 110%; margin: 0; } /*font-family: 'Fira Sans';*/

.principles-section .center-content-2 .unit { height: 100px; display: flex; align-items: center; justify-content: center; padding-top: 7px; }
.principles-section .center-content-2 .unit .big-num { color: #FFFFFF; opacity: 0.1; font-size: 80px; letter-spacing: -0.2rem; font-weight: 800; line-height: 100%; position: relative; top: 5px; font-family: 'Cousine', Arial, Helvetica, sans-serif; }
.principles-section .icon { width: 74px; height: 74px; }
.principles-section .icon img { width: 100%; height: 100%; }
.principles-section .rotate-box { overflow: hidden; width: 200px; height: 100%; position: absolute; left: 0; top: 0; }
.principles-section .rotate-box .circle { color: rgba(255,255,255,0.1) ; border: 2px solid #4B5F61; border-radius: 60%; width: 784px; height: 784px; position: absolute; top: 0; left: -640px; image-rendering: -webkit-optimize-contrast; box-sizing: border-box; padding: 0; margin: 0; }
.principles-section .rotate-box .division { width: 0; height: 784px; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; justify-content: flex-start;  }
.principles-section .rotate-box .division .num { color: #4B5F61; font-weight: 700; position: relative; top: -22px; }
.principles-section .rotate-box .division .dot { background-color: #4B5F61; width: 7px; height: 7px; border-radius: 6px; position: relative; top: -2px; }
.principles-section .rotate-box .division.active .num { color: #CFD7DE; transition: all 0.5s;}
.principles-section .rotate-box .division.active .dot { background-color: #CFD7DE; transition: all 0.5s; }


.principles-section .rotate-box-2 { overflow: hidden; height: 132px; width: 100%; position: relative; display: none; }
.principles-section .rotate-box-2 .circle { color: rgba(255,255,255,0.1) ; border: 2px solid #4B5F61; border-radius: 60%; width: 4089px; height: 4089px; position: absolute; top: 40px; left: calc(50% - 2044.5px); image-rendering: -webkit-optimize-contrast; box-sizing: border-box; padding: 0; margin: 0; }
.principles-section .rotate-box-2 .division { width: 0; height: 4089px; position: absolute; left: 50%; top: 0; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; justify-content: flex-start;  }
.principles-section .rotate-box-2 .division .num { color: #4B5F61; font-weight: 700; position: relative; top: -22px; }
.principles-section .rotate-box-2 .division .dot { background-color: #4B5F61; width: 7px; height: 7px; border-radius: 6px; position: relative; top: -22px; }
.principles-section .rotate-box-2 .division.active .num { color: #CFD7DE; transition: all 0.5s;}
.principles-section .rotate-box-2 .division.active .dot { background-color: #CFD7DE; transition: all 0.5s; }


.desc-sec { padding-top: 140px; padding-bottom: 140px; }
.desc-sec p { font-family: 'Parkinsans', Arial, Helvetica, sans-serif; font-size: 20px; font-weight: 500; color: #5B5B5B; max-width: 600px; text-align: center; }

.headin-para-sec { display: flex; flex-direction: column; padding-top: 0; margin-top: -40px; padding-left: calc( ( 100vw - 700px ) /2 ); padding-right: calc( ( 100vw - 700px ) /2 ); }
.headin-para-sec .row { border-bottom: 1px solid rgba(59,59,59,30%); }
.headin-para-sec .hea { display: flex; gap: 18px; }
.headin-para-sec h2 { font-size: 14px; font-weight: 500; color: #5B5B5B; }
.headin-para-sec p { font-size: 12px; max-width: 240px; font-weight: 400; color: #5B5B5B; }


.basic-desc-sec { min-height: unset !important; padding-top: 80px; padding-bottom: 80px; background-color: #FAFDFF; }
.basic-desc-sec .col { max-width: 530px; }
.basic-desc-sec .col p, .basic-desc-sec .col h2{ text-align: center; }

.counts-large-img { width: 360px !important; height: 500px !important; }
.counts-large-img img { width: 100%; height: 100%; object-fit: cover; }

/* section.vis-des-sup-sec { background-color: #ECECEC !important; } */
section.vis-des-sup-sec .img-col { flex-grow: 1; justify-content: center; align-items: center; }

.vis-des-sup-sec h1, .vis-des-sup-sec p { color: #838383 !important; width: 400px; }
.vis-des-sup-sec .gallery { background-color: inherit; }
.vis-des-sup-sec .gallery-wrapper { background-color: inherit; border: 1px !important; }

.vis-des-sec-2 { align-items: flex-start !important; padding-top: 80px; padding-bottom: 80px; background-color: #3B424A;  }
.vis-des-sec-2 .text-cnt{ width: 100%;; }
/* .vis-des-sec-2 .gallery-wrapper-cnt { border: 1px solid #7ea8a5 !important; border-radius: 8 !important; } */
.vis-des-sec-2 .gallery-wrapper { border-color: rgba(0,0,0,0) !important; width: 100% !important; max-width: unset !important; margin: -20px; }
.vis-des-sec-2 .gallery-wrapper .gallery{ background-color: rgba(0,0,0,0); max-width: unset !important; width: 120% !important; }
.vis-des-sec-2 h2 { color: #ededed !important; }
.vis-des-sec-2 p, .vis-des-sec-2 a, 
.vis-des-sec-2 h3, .vis-des-sec-2 h4,
.vis-des-sec-2 h5, .vis-des-sec-2 h6,
.vis-des-sec-2 i { color: #dfdfdf; }

.front-end-sec-1 { background-color: #efefef !important; padding-top: 80px; padding-bottom: 80px; }
.front-end-sec-1 .gallery-wrapper { width: unset; }
.front-end-sec-1 .gallery-wrapper .gallery { width: unset; max-width: unset; }
.front-end-sec-1 .gallery-wrapper .gallery .gallery-item { width: unset; max-width: unset; height: 300px; }
.front-end-sec-1 .row .col p { max-width: 500px; }
.front-end-sec-1 .row .col h2 { max-width: 500px; }
.front-end-sec-1 .gallery { background-color: unset; }


.video-gallery-2 .gallery-wrapper { width: unset !important; max-width: unset !important; background-color: unset !important; border: unset !important; }
.video-gallery-2 .gallery { width: unset; max-width: unset; background-color: unset; border: unset; }
.video-gallery-2 .gallery-item { width: unset; max-width: unset; height: 130px !important; }


section.tech-stack-sec { background-color: #F8F8F8; gap: 80px; padding-top: 80px; padding-bottom: 80px; }
.tech-stack-sec .col { max-width: 600px; }
.tech-stack-sec p { max-width: 700px; }
.tech-stack-sec .quote{ font-size: 24px; background-color: #e3e3e3; padding: 10px; }
.tech-stack-sec .quote-author{ margin-top: -10px; margin-left: 180px; width: fit-content; }
.tech-stack-sec ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; flex-wrap: wrap; }
.tech-stack-sec li { padding: 20px; height: 100px; display: flex; align-items: center; justify-content: center; border: 1px solid #EDEDED; border-radius: 8px; font-size: 16px; font-weight: 500; background-color: #FFFFFF; }


section.leadership-sec h2 { font-size: 24px; font-weight: 500; color: #838383 !important; align-self: flex-start; }
.leadership-sec .col { max-width: 480px; }

nav { border-bottom: 0px solid #EAECF0; background-color: rgba(100%,100%,100%,0); }
nav .logo { opacity: 0; }
nav .logo a span{ color: #313131; }
nav a { color: #fdfefe; } /*fdfefe*/
nav.scrolled { border-bottom: 1px solid #EAECF0;  }
nav .burger span { background: #fff; }
nav.scrolled .burger span { background: #313131; }

@media (max-width:1024px) {
    .first-fold .logo-section { width: 40vw; }
    .principles-section .inner { padding-bottom: 0; padding-right: 0; }
    .row { flex-wrap: wrap; }
}

@media (max-width: 800px) {

    .headin-para-sec { padding-left: 20px;  padding-right: 20px; }
    .front-end-sec-1 .gallery-wrapper .gallery .gallery-item { height: 250px; }
}

@media (max-width:660px) {
    .first-fold { flex-direction: column-reverse; }
    .first-fold .logo-section { height: 30vh; justify-content: flex-start; width: 100%; padding-left: 40px; }
    .principles-section { border-left: 0; border-bottom: 3px solid #BAD4E7; }
    .principles-section .center-wrapper { justify-content: flex-end; }
    .principles-section .center-content h3 { width: 280px; }

    .front-end-sec-1 .gallery-wrapper .gallery .gallery-item { height: 200px; }
}

@media (max-width:500px) {

    .principles-section .center-wrapper { justify-content: center; }
    .principles-section .center { height: 60px; }
    .principles-section .center-content .unit { height: 60px; }
    .principles-section .center-content .icon { width: 40px; }
    .principles-section .center-content-2 .unit { padding-top: 0px; }
    .principles-section .center-content h3 { font-size: 20px; width: 140px; }
    .principles-section .center-content-2 .unit .big-num { font-size: 48px; }

    .desc-sec { padding-top: 80px; padding-bottom: 80px; }
    .desc-sec p { text-align: left; }

    .headin-para-sec { margin-top: 0; padding-left: 20px; padding-right: 20px; }
    .headin-para-sec .hea { width: 100%; gap: 12px; }
    .headin-para-sec h2 { font-size: 18px; margin-bottom: 0; line-height: 100%; }
    .headin-para-sec span { font-size: 18px; line-height: 100%; opacity: 0.7; }
    .headin-para-sec p { font-size: 13px; line-height: 160%; }


    .vis-des-sup-sec { flex-direction: column-reverse; align-items: flex-start; }
    .vis-des-sup-sec h1, .vis-des-sup-sec p { width: unset; }
    .counts-large-img { width: 250px !important; height: 360px !important; }

    .vis-des-sec-2 .gallery-wrapper { width: 100vw !important; overflow-x: scroll !important; }
    .vis-des-sec-2 .gallery-wrapper .gallery { width: max-content !important; }

    .tech-stack-sec .quote-author { margin-left: 20px; opacity: 0.5; }

    .front-end-sec-1 #larger-vew { display: none; }
    .front-end-sec-1 .gallery-wrapper .gallery .gallery-item { height: 160px !important; width: 250px !important; }

    .front-end-sec-1 .gallery-wrapper { width: 100vw !important; overflow-x: scroll !important; }
    .front-end-sec-1 .gallery-wrapper .gallery { max-width: unset !important; width: max-content !important; }

    .front-end-sec-1 .row { gap: 0px; }

    section.tech-stack-sec { gap: 20px; }

}