body,html{overflow-x:hidden}*,:after,:before{box-sizing:"border-box";margin:0;padding:0}a{text-decoration:none;color:var(--blue);&:hover{text-decoration:underline}}:root{--base-400:#555;--base-800:#000;--yellow:#ffda4b;--yellow-100:#fffbe6;--yellow-400:#ffda4b;--yellow-800:#8b6f00;--blue:#0a61ae;--blue-100:#e2f8ff;--blue-400:#61dafb;--blue-800:#0a61ae;--base:#555;--base-100:#f1f1f1;--base-800:#333;--gray:#333;--gray2:grey;--blue:#6c9bcf;--white:#fff;--Teal:#9bebeb;--electric:#c7e0fa;--gray3:#d3d3d3;--black:#000}h1{font-size:20px;color:var(--white);line-height:1;margin-bottom:10px;small{display:block;font-weight:100;font-size:25px}@media (max-width:1024px){font-size:48px}}.social-links a{width:15px;height:0}.hero-blue h1{font-size:25px}.call-to-action a,p{font-size:17px}p{font-weight:400}p,span{color:var(--white)}body{font-family:Inter,sans-serif;font-optical-sizing:auto;font-style:normal;font-size:20px}header{padding-top:10px;padding-bottom:10px;display:flex;max-width:1440px;margin:auto;font-size:17px;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.1);.logo-holder{display:flex;padding:10px;align-items:center;font-weight:600;color:var(--base-800);.logo{display:flex;align-items:center;justify-content:center;font-size:32px;background-color:var(--gray);color:var(--base-100);height:45px;width:45px;margin-right:20px;margin-left:20px;border-radius:50%}.logo-text{flex:1 1;text-decoration:none}.logo img{max-width:100px;max-height:100%;border-radius:50%}}nav{display:flex;align-items:center;ul{display:flex;list-style-type:none;gap:15px;border-radius:20px;transition:all .3s ease-in-out;font-size:17px;margin-right:20px;li{display:inline-block;a{display:inline-block;padding:10px 20px;color:var(--base);border-radius:10px;&:hover{background:var(--gray2);color:#fff;text-decoration:none}}}}.mobile-toggle{display:none;color:var(--gray2);padding:10px;cursor:pointer;@media (max-width:768px){display:inline-block;position:absolute;top:20px;left:20px}}}@media (max-width:1024px){flex-direction:column;align-items:center}@media (max-width:768px){flex-direction:column;align-items:center;nav{margin-top:10px;width:100%;ul{display:none;flex-direction:column;text-align:center;width:90%;align-items:center;background-color:var(--base-100);border-radius:30px;padding:5px;margin:0 auto;border:1px solid rgba(0,0,0,.1);transition:opacity .3s ease-in-out,transform .3s ease-in-out;a{width:100px;padding:10px}&.active{display:flex;animation:slideDown .3s ease-in-out}&.closing{animation:slideUp .3s ease-in-out}}}}}section{max-width:1440px;gap:30px;margin:30px auto;@media (max-width:1440px){padding-left:30px;padding-right:30px}}.toggle{transition:all .3s ease;&:hover{text-decoration:none;background-color:var(--gray2);color:var(--white)}}.button{display:inline-block;padding:10px 30px;background-color:var(--base-800);color:var(--white);border-radius:10px;transition:all .3s ease;white-space:nowrap;&:hover{text-decoration:none;background-color:var(--black);color:var(--base-400)}&.white{background-color:var(--white);color:var(--base-800);&:hover{background-color:var(--black);color:var(--white)}}&.black{background-color:var(--gray2);color:var(--white);&:hover{background-color:var(--black);color:var(--white)}}}.hero{margin-top:-5px;@media (max-width:1024px){flex-direction:column;margin-left:-20px;margin-right:-20px}display:flex;.hero-blue{flex:1 1;background-color:var(--gray);border-radius:30px;padding:30px;display:flex;flex-direction:column;justify-content:center;span{@media (max-width:768px){display:none}}.call-to-action{margin-top:20px;a{margin-right:10px;margin-bottom:10px}}.social-links{a{&:hover{text-decoration:none}}}.social-links img{width:40px;height:40px;object-fit:cover;padding:7px}}.hero-yellow{flex:1 1;background-color:var(--gray3);border-radius:20px;padding:0 30px;display:flex;justify-content:center;align-items:flex-end;img{margin-top:-40px;max-width:450px;margin-bottom:-1;margin-right:-100x;border-radius:35px;height:300px;width:300px}}}.logos{background-color:var(--base-100);border-radius:50px;padding:30px 0;margin:10px;@media (max-width:1440px){border-radius:50px}.marquee{width:100vw;max-width:100%;height:90px;overflow:hidden;position:relative;border-radius:20px;.track{position:absolute;white-space:nowrap;will-change:transform;animation:marquee 40s linear infinite;display:flex;gap:10px;align-items:center}img{width:85px;height:90px}}}@media (max-width:768px){.marquee{height:120px}}@keyframes marquee{0%{transform:translateX(0)}to{transform:translateX(-50%)}}h2{font-size:39px;line-height:1;margin-bottom:10px;text-align:center;color:var(--gray2);padding:30px;small{display:block;font-weight:100;font-size:.5em;color:var(--gray2)}@media (max-width:1024){font-size:48px}}h3{font-size:20px;font-weight:600;line-height:1;margin-bottom:20px}.skills{margin:-15px;.holder-blue{background-color:var(--gray);border-radius:30px;color:#fff;padding:30px;display:flex;@media(max-width:1024px){flex-direction:column}.left-column{flex:1 1;font-size:15px;h3{font-size:20px}ul{display:flex;flex-wrap:wrap;list-style-type:none;gap:10px;margin-right:100px;margin-bottom:20px;li{display:inline-block;background-color:var(--gray2);padding:10px 20px;border-radius:15px;margin-bottom:10px}}}.right-column{flex:1 1;p{margin-bottom:20px;font-size:16px}}}}.work-experience{.jobs{display:flex;gap:30px;@media (max-width:1024px){flex-direction:column}article{background-color:var(--gray2);padding:30px;border-radius:30px;flex:1 1;h3{margin-top:20px;margin-bottom:10px;font-size:18px}div,h3{color:var(--white)}div{font-weight:600;margin-bottom:5px}p{margin-bottom:10px;font-size:15px}figure{width:100%;padding-top:56.25%;overflow:hidden;position:relative;border-radius:15px;img{top:0;height:100%;object-fit:cover;transition:all 3s ease}figcaption,img{position:absolute;left:0}figcaption{bottom:0;right:0;background-color:rgba(0,0,0,.1);color:var(--base-100);text-align:center;padding:10px;opacity:0;visibility:hidden;transition:all .3s ease}&:hover{figcaption{opacity:1;visibility:visible}img{transform:scale(1.2)}}}}}}.bento{.bento-grid{display:grid;grid-gap:30px;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(4,1fr);height:960px;@media(max-width:1024){grid-template-rows:repeat(8,1fr)}@media(max-width:768px){display:flex;flex-direction:column;margin-left:-20px;margin-right:-20px;gap:30px;height:auto}.bento-item{padding:30px;background-color:var(--base-100);border-radius:15px;position:relative;overflow:hidden;img{position:absolute;top:0;left:0;height:100%;object-fit:cover;transition:all 3s ease}&:hover{img{transform:scale(1.2)}}@media(max-width:768px){height:240px}&:first-child{grid-column:span 2;grid-row:span 2;@media(max-width:1024){grid-column:span 2;grid-row:span 2}}&:nth-child(2){grid-column:span 2;grid-row:span 1;@media(max-width:1024){grid-column:span 3;grid-row:span 2}}&:nth-child(3){@media(max-width:1024){grid-column:span 3;grid-row:span 2}}&:nth-child(3),&:nth-child(4){grid-column:span 1;grid-row:span 1}&:nth-child(4){@media(max-width:1024){grid-column:span 2;grid-row:span 4}}&:nth-child(5){grid-column:span 2;grid-row:span 1;@media(max-width:1024){grid-column:span 3;grid-row:span 4}}&:nth-child(6){grid-column:span 5;grid-row:span 3;@media(max-width:1024){grid-column:span 3;grid-row:span 2}}}}}.chatbot{.chatbot-blue{background-color:var(--gray);border-radius:30px;padding:30px;gap:30px;margin:-20px;display:flex;font-size:17px;@media (max-width:1024px){flex-direction:column;color:#fff}p{margin-bottom:30px}.chat-info{flex:3 1;padding-right:30px;color:#fff;p{font-size:15px}}.chat-box{margin:0 -20px -20px;flex:4 1;background:#fff;border-radius:20px;padding:30px 0 30px 30px;display:flex;flex-direction:column;color:#000;@media (max-width:600px){padding-left:15px;padding-bottom:15px;padding-right:15px;padding-top:15px}.scroll-area{max-height:300px;height:300px;overflow-y:scroll;padding-right:0!important;margin-right:0;box-sizing:border-box;scrollbar-gutter:stable both-edges;ul{display:flex;flex-direction:column;justify-content:flex-end;gap:15px;padding-right:10px;li{display:flex;align-items:center;gap:15px;font-size:13px;@media (max-width:600px){font-size:12px}&:nth-child(odd){justify-content:flex-start;flex-direction:row;div{background:#d3d3d3;color:#222;border-radius:18px 18px 18px 6px;padding:10px 13px;max-width:80%;margin-left:-9px;justify-content:left;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.03)}}&:nth-child(2n){text-align:right;justify-content:flex-end;flex-direction:row-reverse;div{background:#484848;color:#fff;border-radius:18px 18px 6px 18px;padding:10px 16px;max-width:80%;justify-content:left;text-align:left;width:90px;margin-right:-9px;font-size:13px;box-shadow:0 1px 2px rgba(0,0,0,.03)}span{background-color:var(--black)}}span{background-color:var(--gray2);width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;@media(max-width:768px){width:32px;height:32px}}div{flex:1 1}}}}.chat-message{display:flex;margin-top:15px;gap:15px;font-size:15px;input{border-radius:20px;flex:1 1;padding:10px;border:1px solid transparent;background-color:var(--base-100);font-size:12px;&:hover{background-color:#fff}&:focus,&:hover{outline:none;border:1px solid var(--base-100)}&:focus{background-color:#f0f0f0}@media (max-width:600px){padding-left:10px;padding-bottom:10px;padding-right:10px;padding-top:10px}}button{border:none;cursor:pointer;font-size:15px;background-color:var(--gray2);color:var(--white);padding:10px 20px;border-radius:20px;font-size:13px;@media (max-width:600px){padding-left:5px;padding-bottom:5px;padding-right:5px;padding-top:5px}}}}}}.chatbot .scroll-area ul li .message{display:inline-block;width:auto!important;max-width:80%;min-width:40px;white-space:pre-line;word-break:break-word}.chatbot .scroll-area::-webkit-scrollbar{width:8px;background:transparent;right:0}.chatbot .scroll-area::-webkit-scrollbar-thumb{background:#b0b0b0;border-radius:6px}.chatbot .scroll-area::-webkit-scrollbar-track{background:transparent}.chatbot .scroll-area{scrollbar-width:thin;scrollbar-color:#b0b0b0 transparent}.scroll-area::-webkit-scrollbar{width:8px}.scroll-area::-webkit-scrollbar-track{background:var(--base-100)}.scroll-area::-webkit-scrollbar-thumb{background-color:var(--gray2);border-radius:10px;border:2px solid var(--base-100)}.scroll-area{scrollbar-width:thin;scrollbar-color:var(--gray2) var(--base-100)}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}::-webkit-scrollbar{width:8px;height:8px;background-color:transparent}::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:4px}::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.5)}