@import"https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";:root{--Soft-orange: hsl(35, 77%, 62%);--Soft-red: hsl(5, 85%, 63%);--Off-white: hsl(36, 100%, 99%);--Grayish-blue: hsl(233, 8%, 79%);--Dark-grayish-blue: hsl(236, 13%, 42%);--Very-dark-blue: hsl(240, 100%, 5%)}*{margin:0;padding:0;background-color:var(--Off-white);font-family:Poppins,serif;font-size:15px}h1,h2,h3,h4,p{background-color:transparent;color:#fff}.app{width:1130px;margin:auto}@media (max-width: 700px){.app{width:500px}}@media (max-width: 375px){.app{width:345px}}nav{background-color:transparent;height:100px;width:1096px;margin:50px 10px 20px;display:flex;justify-content:space-between;align-items:center}nav .logo{width:80px;height:40px}nav .menu{width:30px;height:20px;display:none;cursor:pointer}nav .menu.hidden{display:none}nav ul{width:400px;display:flex;justify-content:space-between}nav ul li{list-style:none;color:var(--Dark-grayish-blue);transition:color .3s ease-in-out}nav ul li:hover{color:var(--Soft-red)}nav .dark-screen{position:fixed;top:0;left:0;width:300vw;height:100%;background-color:#00000080;z-index:10;display:none;animation:opacity .5s ease-in-out}nav .dark-screen .toggle-menu{position:fixed;top:0;right:0;width:100px;height:100%;background-color:#fff;box-shadow:-2px 0 10px #0000001a;display:flex;flex-direction:column;align-items:center;padding:20px;display:none;animation:slide .3s}nav .dark-screen .toggle-menu .close-icon{align-self:flex-end;width:25px;height:25px;cursor:pointer;display:none}nav .dark-screen .toggle-menu ul{margin-top:50px;width:100%;text-align:left}nav .dark-screen .toggle-menu ul li{margin:15px 0;color:#000;cursor:pointer;transition:color .3s ease-in-out}nav .dark-screen .toggle-menu ul li:active{color:var(--Soft-red)}@media (max-width: 700px){nav{width:500px}nav ul{display:none}nav .menu{display:block}nav .toggle-menu ul{display:block}nav .dark-screen,nav .toggle-menu,nav .close-icon{display:block}nav .dark-screen .toggle-menu,nav .toggle-menu .toggle-menu,nav .close-icon .toggle-menu{display:block}nav .dark-screen .toggle-menu .close-icon,nav .toggle-menu .toggle-menu .close-icon,nav .close-icon .toggle-menu .close-icon{display:block}}@keyframes slide{0%{transform:translate(1000px)}to{transform:translate(0)}}@keyframes opacity{0%{opacity:0}to{opacity:1}}@media (max-width: 375px){nav{width:340px;margin:0}}.main{padding:0 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.main p{color:var(--Dark-grayish-blue)}.main .item{max-width:350px;background-color:transparent;box-sizing:border-box}.main .item-5,.main .item-6,.main .item-7{display:flex;padding:30px 0}.main .item-5 img,.main .item-6 img,.main .item-7 img{width:100px;height:120px;margin-right:20px}.main .item-5 div,.main .item-6 div,.main .item-7 div{background-color:transparent}.main .item-5 div h1,.main .item-6 div h1,.main .item-7 div h1{color:var(--Soft-red);font-size:35px;font-weight:600;margin-top:-10px}.main .item-5 div h4,.main .item-6 div h4,.main .item-7 div h4{color:var(--Very-dark-blue);margin-bottom:8px;transition:color .3s ease-in-out}.main .item-5 div h4:hover,.main .item-6 div h4:hover,.main .item-7 div h4:hover{color:var(--Soft-red)}.main .item-1{grid-column:span 2}.main .item-1 img{width:204%;height:100%}.main .item-2{background-color:transparent;grid-column:1;grid-row:2;padding:10px 0}.main .item-2 h1{color:var(--Very-dark-blue);font-size:58px;line-height:54px}.main .item-3{padding:10px 0;grid-column:2;grid-row:2}.main .item-3 button{outline:none;border:none;padding:10px 30px;margin-top:30px;text-transform:uppercase;font-weight:600;color:var(--Very-dark-blue);letter-spacing:2px;background-color:var(--Soft-red);transition:.3s ease-in-out}.main .item-3 button:hover{background-color:var(--Very-dark-blue);color:#fff}.main .item-4{padding:20px;background-color:var(--Very-dark-blue);grid-row:span 2}.main .item-4 h1{font-size:40px;margin:10px 0 20px;color:var(--Soft-orange)}.main .item-4 hr{outline:none;height:1px;border:none;margin:25px 0;background-color:var(--Grayish-blue)}.main .item-4 h3{font-size:20px;margin-bottom:5px}.main .item-4 p{color:var(--Grayish-blue)}@media (max-width: 700px){.main{width:500px;margin:auto;grid-template-columns:1fr}.main .item-5,.main .item-6,.main .item-7{padding:10px 0}.main .item{min-width:500px;grid-column:span 1;grid-row:span 1}.main .item-1{grid-column:span 1}.main .item-1 img{width:100%}}@media (max-width: 375px){.main{width:345px;margin:auto;padding:0;grid-template-columns:1fr}.main .item{min-width:90%;grid-column:span 1;grid-row:span 1;margin:5px}.main .item-1 img{width:100%;height:auto}.main .item-2{margin:0 10px}.main .item-2 h1{font-size:40px;line-height:40px;padding:0}.main .item-3{margin:0 10px;padding:0}.main .item-4 h1{font-size:28px;margin:5px 0 15px}.item-4 h3{font-size:18px}}