/* typography.css */

body {
     font-family: "Gilroy";
}

a {
     text-decoration: none;
}

/* Hero Section Heading */

h1 {
     color: #000;
     font-size: 2.75rem;
     font-weight: bold;
}

/* Headings - h2 */

h2 {
     color: #000;
     font-size: 2.25rem;
     font-weight: bold;
}

h3 {
     color: #000;
     font-weight: bold;
}

h2 span {
     -webkit-text-stroke: 2px #2376bc;
     color: transparent;
}

.heading h2 {
     padding: 15px 0 20px 0;
}

/* Header style in inner pages */

.nav-bg .nav-text .header-theme h1 {
     -webkit-text-stroke: 2px #2376bc;
     color: transparent;
     font-size: 7rem;
     font-weight: bold;
     text-transform: uppercase;
}

/* Sub-header design in inner pages */

.who-titles {
     padding-top: 40px;
     display: inline-flex;
     align-items: center;
     gap: 10px;
}

.who-titles h3 {
     color: #000;
     font-size: 1.375rem;
     font-style: italic;
     font-weight: bold;
}

.who-titles .line {
     width: 75px;
     height: 3px;
     background: #2376bc;
}

/* Paragraph tag in all pages */

p {
     font-size: 1rem;
     color: #000;
}

/* Button style one */

.theme-btn {
     position: relative;
     display: inline-block;
     overflow: hidden;
     text-decoration: none;
     color: white;
     padding: 14px 17px;
     margin-right: 70px;
     width: 216px;
     height: 58px;
     text-align: center;
     z-index: 1;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
     transition: all 500ms ease;
     border: none;
     border-radius: 8px;
     background: linear-gradient(90deg, #56ccf2 0%, #2f80ed 100%);
     font-size: 1rem;
     font-weight: 600;
}

.theme-btn:hover {
     color: #000;
}

.theme-btn::before {
     position: absolute;
     content: "";
     width: 100%;
     height: 100%;
     left: 0px;
     top: 0px;
     right: 0px;
     z-index: -1;
     clip-path: polygon(0% 103%, 400% 0, 100% 100%, 0% 100%, 0 0);
     transition: all 500ms ease;
}

.theme-btn:before {
     background: linear-gradient(90deg, #cbf796 0%, #1affba 100%);
}

.theme-btn::after {
     content: "";
     position: absolute;
     z-index: -1;
     inset: 0;
     -webkit-transform: scaleY(0);
     transform: scaleY(0);
     -webkit-transform-origin: 50% 100%;
     transform-origin: 50% 100%;
     -webkit-transition-property: transform;
     transition-property: transform;
     -webkit-transition-duration: 0.5s;
     transition-duration: 0.5s;
     -webkit-transition-timing-function: ease-out;
     transition-timing-function: ease-out;
}

.theme-btn:hover::after {
     -webkit-transform: scaleY(1);
     transform: scaleY(1);
     -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
     transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.theme-btn.style-one:after {
     background: linear-gradient(90deg, #cbf796 0%, #1affba 100%);
}

.theme-btn:hover::after {
     opacity: 1;
}

/* Portfolio button style */

.portfolio-btn a {
     text-decoration: none;
     color: #000;
     display: inline-block;
     font-size: 1rem;
     font-weight: bold;
}

.portfolio-btn a:before,
.portfolio-btn a:after {
     content: '';
     position: absolute;
     width: 5px;
     border-radius: 50%;
     background: #2376BC;
     top: 21px;
     transition: height 0.3s 0.3s ease, border-radius 0.3s 0.3s ease, top 0.3s 0.3s ease, width 0.3s ease;
}

.portfolio-btn a:before {
     height: 5px;
     left: 0;
}

.portfolio-btn a:after {
     height: 0;
     right: 0;
}

.portfolio-btn a:hover:before,
.portfolio-btn a:hover:after {
     top: 10%;
     width: 55%;
     height: 80%;
     z-index: -1;
     border-radius: 5px;
     transition: height 0.3s ease, border-radius 0.3s ease, top 0.3s ease, width 0.3s 0.3s ease;
}

.portfolio-btn a {
     z-index: 1;
     display: inline-block;
     padding: 10px 20px;
     position: relative;
     transition: all 0.3s ease;
}

.portfolio-btn a:hover {
     transition: all 0.3s 0.3s ease;
     text-decoration: none;
     color: white;
}