:root {
    --headerHeight: 88px;
}

body {
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    margin: 0;
    padding-top: calc(var(--headerHeight));
}



* {
    box-sizing: border-box;
}

#header { background: #fff; padding: 18px 0; position: fixed; left: 0; right: 0; top: 0; z-index: 111; border-bottom: 1px solid #dde2e9;  }
.header-row { display: flex; align-items: center; }
#logo { width: 194px; position: relative; transition: all 250ms cubic-bezier(0,.34,.74,.99); }
#logo img { max-width:100%; height:auto; width:auto; }
#mainmenu { font-size:14px; margin-left: 30px; margin-right: 30px; font-weight: 500;}
#mainmenu ul { margin:0; padding:0; list-style:none; display: flex; flex-wrap: wrap; }
#mainmenu li { line-height:30px; }
#mainmenu > ul > li { margin:0 0 0 24px; text-transform:capitalize; }
#mainmenu li a { text-decoration: none; padding: 0; display: block; color: #0f1729cc; position: relative; transition: all 350ms ease-in-out; font-weight: 500;}
#mainmenu li a:after { content:''; position:absolute; width:0; height:2px; background: var(--primary); top:100%; left:0; right:0; margin:0 auto; }
#mainmenu li a:hover:after, #mainmenu li.active a:after { width:100%; }
#mainmenu li a:hover, #mainmenu li a.active {color: #287ef6;}
#mainmenu > ul > li.active a {color: #287ef6;}

#header .btn-section .button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fdad0d;
    gap: 8px;
    color: #040a25;
    border-radius: 10px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.42;
    padding: 12px;
    text-decoration: none;
    transition: all 350ms ease-in-out;

    &:hover {
        background-color: #fdad0de6;
    }

    svg {
        width: 16px;
        height: 16px;
    }
}

.wrap {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding-left: 30px;
    padding-right: 30px;
}

#footer {font-size:14px; color: #637288; }
.footer-row { display: flex; align-items: center; flex-wrap: wrap; font-size: 12px; }
.footer-row p {
    margin: 0;
    
}
.fmenu { margin:0  0 0 auto; padding:0; list-style:none; display: flex; flex-wrap: wrap; }
.fmenu li { margin-right:35px; }
.fmenu li:last-child { margin-right: 0; }
.fmenu li a { color: #637288; }
.fmenu li a:hover, .fmenu li.active a { text-decoration:none; color: var(--primary) ; }
.copyright { margin: 0; }
.footer-top ul {
    list-style: none;
    padding: 0;
    margin: 0;

    
}

#footer .form-info {
    p {
        margin-bottom: 12px;
    }
}

#footer {
    .catalog-section {
        ul {
            li {
                a {
                    display: flex;
                    align-items: center;
                    gap: 8px;

                    svg {
                        width: 16px;
                        height: 16px;
                    }
                }

                svg {
                        width: 16px;
                        height: 16px;
                    }
            }

            p {
                gap: 8px;
                display: flex;
                align-items: center;
            }
        }
        > a {
            max-width: 194px;
            width: 100%;
            display: block;
        }
        img {
            width: 100%;
            height: auto;
        }

        
    }
}

.footer-top ul li {
        margin-top: 8px;
        
    }

    .footer-top ul li:first-child {
            margin-top: 0;
        }

#footer li a {
    color: #637288;
    text-decoration: none;

    &:hover {
        color: #287ef6;
    }
}

#footer .cols.cols3 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-gap: 40px;

    h5 {
        /* font-size: 16px; */
        font-size: clamp(0.875rem, 0.8447rem + 0.1294vw, 1rem);
        margin-bottom: 16px;
        margin: 0;
        margin-bottom: 12px;
        color: #0f1729;
        font-weight: 600;
        line-height: 1.5;
    }
}

.footer-top {
    padding: 48px 0;
}

.footer-bottom {
    padding: 16px 0;
    border-top: 1px solid #dde2e9;
}

#footer form {
    label {
        display: none;
    }

    .form-block {
        display: flex;
        gap: 10px;

        .form-group {
            &:first-child {
                width: 70%;
            }

            &:last-child {
                width: 30%;
            }

            input {
                background-color: #fff;
                padding: 10px 12px;
                border: 1px solid #dedede;
                border-radius: 10px;
                width: 235px;
                color: #0f1729;
                cursor: text;
                font-size: 14px;
                font-weight: 400;
                line-height: 1.42;
                margin: 0;
            }

            button {
                padding: 8px 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #fdad0d;
                color: #0f1729;
                border: 1px solid #dedede;
                border-radius: 10px;
                cursor: pointer;
            }
        }
    }
}

.blog-title-section {
    padding: 64px 0;
    background-image: linear-gradient(to bottom right, hsl(0 0% 100%) 0%, hsl(0 0% 100% / 0.95) 50%, hsl(220 64% 14% / 0.05) 100%);


    .blog-section-row {
        max-width: 896px;
        width: 100%;
        margin: 0 auto;
        text-align: center;

        h1 {
            /* font-size: 48px; */
            font-size: clamp(1.75rem, 1.4466rem + 1.2945vw, 3rem);
            font-weight: 700;
            color: #0f1729;
        }

        p {
            color: #637288;
            line-height: 1.4;
            /* font-size: 20px; */
            font-size: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);

            a {
                color: #0d1c3b;
                text-decoration: underline;
                font-weight: 500;

                &:hover {
                    color: #0d1c3bcc;
                }
            }
        }
    }
}

.blog-listing-sections {
    padding: 64px 0;
    /* background-image: linear-gradient(to bottom right, hsl(0 0% 100%) 0%, hsl(0 0% 100% / 0.95) 50%, hsl(220 64% 14% / 0.05) 100%); */
    background-image: radial-gradient(
    1200px 600px at 10% -10%,
    hsl(215 92% 56% / 0.25),
    transparent
  ),
  radial-gradient(
    1200px 600px at 90% -10%,
    hsl(40 98% 52% / 0.2),
    transparent
  );
  background-attachment: fixed;


    .blog-listing-section-row {
        display: grid;
        grid-template-columns: 1fr 300px;
        grid-gap: 48px;

        .blog-listing {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
        /* align-items: start; */

            .blog-list {
                border-radius: 10px;
                overflow: hidden;
                border: 1px solid #dde2e9;
                background-color: #fff;

                .image-section {
                    transition: all 350ms ease-in-out;
                    
                    a {
                        aspect-ratio: 16/10;
                        display: block;

                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                            transition: all 350ms ease-in-out;
                        }

                        &:hover {
                            img {
                                transform: scale(1.02);
                            }
                        }
                    }
                }

                .blog-list-content {
                    padding: 24px;
                    background-color: #fff;

                    .date-section {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        margin-bottom: 12px;
                        color: #637288;
                        font-size: 14px;

                        svg {
                            width: 16px;
                            height: 16px;
                        }
                    }

                    h2 {
                        margin: 0;
                        margin-bottom: 12px;
                        a {
                            color: #0d1c3b;
                            /* font-size: 20px; */
                            font-size: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);
                            text-decoration: none;
                            line-height: 1.4;
                        }
                    }

                    p {
                        margin: 0;
                        margin-bottom: 16px;
                        color: #637288;
                    }

                    .blog-btn {
                        padding: 8px 12px;
                        border: 1px solid #dde2e9;
                        display: inline-flex;
                        align-items: center;
                        gap: 8px;
                        text-decoration: none;
                        border-radius: 10px;
                        font-weight: 500;
                        font-size: 14px;
                        line-height: 1.42;
                        color: #0f1729;
                        transition: all 350ms ease-in-out;

                        &:hover {
                            background-color: #287ef6;
                            color: #fff;
                        }

                        svg {
                            width: 16px;
                            height: 16px;
                        }
                    }
                }
            }

            .pagination {
                grid-column: 1 / -1;
                width: 100%;
                text-align: center;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 12px;

            .next, .prev {
                padding: 8px 12px;
                font-size: 16px;
                background-color: #80808063;
                border-radius: 10px;
                color: #0f1729;
                text-decoration: none;
                transition: all 350ms ease-in-out;

                &:hover {
                    background-color: #808080cc;
                }
            }

            .page-numbers{
                font-size: 14px;
                text-decoration: none;
                color: #0f1729;

                &.current, &:hover {
                    color: #3e63b8;
                }
            }
}
        }

        .blog-sidebar {
            .popular-topics {
                /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5); */
                border: 1px solid #dde2e9;
                background-color: #fff;
                border-radius: 10px;
                h3 {
                    margin: 0;
                    padding: 24px;
                }

                ul {
                    padding: 24px;
                    padding-top: 0;
                    list-style: none;
                    margin: 0;

                    li {
                        a {
                            text-decoration: none;
                            font-size: 14px;
                            line-height: 1.42;
                            padding: 8px 12px;
                            display: block;
                            color: #0f1729;
                            transition: all 350ms ease-in-out;
                            

                            &:hover {
                                background-color: #eceff480;
                                border-radius: 10px;
                            }
                        }
                    }
                }
            }

            .blog-cta {
                padding: 24px;
                text-align: center;
                margin-top: 32px;
                border: 1px solid #0d1c3b33;
                border-radius: 10px;
                background-image: linear-gradient(
                    to bottom right,
                    hsl(220 64% 14% / 0.05) 0%,
                    hsl(215 25% 94% / 0.05) 100%
                );

                h3 {
                    margin: 0;
                    margin-bottom: 12px;
                }

                p {
                    margin-bottom: 16px;
                }

                .cta-btn {
                    padding: 8px 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 10px;
                    font-weight: 500;
                    color: #fff;
                    font-size: 14px;
                    line-height: 1.42;
                    background-color: #0d1c3b;
                    transition: all 350ms ease-in-out;
                    text-decoration: none;

                    &:hover {
                        background-color: #0d1c3be6;
                    }
                }
            }

            .blog-subscribe {
                padding: 24px;
                text-align: left;
                margin-top: 32px;
                border: 1px solid #dde2e9;
                border-radius: 10px;
                background-color: #fff;

                h3 {
                    margin: 0;
                    margin-bottom: 12px;
                    font-weight: 600;
                }

                form {
                    label {
                        display: none;
                    }

                    .form-group {
                        input[type="email"], input[type="text"] {
                            background-color: #fff;
                            padding: 10px 12px;
                            border: 1px solid #dedede;
                            border-radius: 10px;
                            width: 225px;
                            color: #0f1729;
                            cursor: text;
                            font-size: 14px;
                            font-weight: 400;
                            line-height: 1.42;
                            margin: 0;
                        }

                        input[type="submit"] {
                            padding: 8px 16px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            border-radius: 10px;
                            font-weight: 500;
                            color: #fff;
                            font-size: 14px;
                            line-height: 1.42;
                            background-color: #0d1c3b;
                            transition: all 350ms ease-in-out;
                            text-decoration: none;
                            width: 100%;
                            margin-top: 12px;
                            cursor: pointer;

                            &:hover {
                                background-color: #0d1c3be6;
                            }
                        }
                    }
                }
            }


        }
    }

    
}

.cta-section {
    padding: 64px 0;
    background-image: linear-gradient(
  to right,
  hsl(220 64% 14%) 0%,
  hsl(210 40% 98%) 100%
);

    .cta-section-row {
        text-align: center;

        h2 {
            /* font-size: 36px; */
            font-size: clamp(1.375rem, 1.1626rem + 0.9061vw, 2.25rem);
            color: #f8fafc;
            font-weight: 700;
            margin: 0;
            margin-bottom: 24px;
        }

        p {
            max-width: 675px;
            width: 100%;
            margin: 0 auto 32px;
            /* font-size: 20px; */
            font-size: clamp(1rem, 0.9393rem + 0.2589vw, 1.25rem);
            color: #f8fafc;
         }

         .cta-section-btn {
            padding: 16px 32px;
            display: inline-flex;
            align-items: center;
            text-decoration: none;
            border-radius: 10px;
            font-weight: 500;
            font-size: 18px;
            line-height: 1.55;
            color: #0f1729;
            transition: all 350ms ease-in-out;
            background-color: #eceff4;
            border: 1px solid #dde2e9;

            &:hover {
                background-color: #eceff4cc;
            }
        }
    }

    

    

    
}

/* blog-detail page */

.blod-detail-section {
        background-image: radial-gradient(1200px 600px at 10% -10%, hsl(215 92% 56% / 0.25), transparent), radial-gradient(1200px 600px at 90% -10%, hsl(40 98% 52% / 0.2), transparent);
        background-attachment: fixed;
}

.blog-post{
  display:block;
  padding: 64px 0;
  max-width: 896px;
  margin: 0 auto;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#0f1729;
  text-decoration:none;
  font-weight:600;
  transition: all 350ms ease-in-out;
  padding: 8px 12px;
  border-radius: 10px;
}
.back-link:hover{background-color: #287ef6; color: #f8fafc; border-radius: 10px;}
.back-link .icon{display:inline-flex;width:18px;height:18px}
.back-link .icon svg{width:100%;height:100%}

/* Title */
.post-title{
  margin:16px 0 24px;
  /* font-size:clamp(28px, 5vw, 48px); */
  font-size: clamp(1.75rem, 1.4466rem + 1.2945vw, 3rem);
  line-height:1.2;
  color: #0f1729;
}

/* Meta */
.post-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px 18px;
  color:#637288;
  margin-bottom:24px;
}
.meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}
.meta-item .icon{width:18px;height:18px;display:inline-flex;color:#637288;}
.meta-item .icon svg{width:100%;height:100%}
.tags{display:flex;gap:8px;list-style:none;padding:0;margin:0}
.tags li{
  display:inline-block;
  padding:6px 10px;
  border:1px solid #dde2e9;
  border-radius:10px;
  background:#eceff4;
  color:#637288;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
}
/* .tags li a:hover{color:#0f172a;border-color:#0f172a} */


.post-body p{font-size: clamp(0.875rem, 0.8143rem + 0.2589vw, 1.125rem);color:#637288;}
.post-body p:first-child{margin-top:8px}
.post-figure{margin:18px 0 14px}
.post-figure img{
  width:100%;
  height:auto;
  display:block;
  border-radius:12px;
  /* border:1px solid #e2e8f0;
  box-shadow:0 8px 24px rgba(15,23,42,.08); */
}
.post-figure figcaption{
  color:#475569;
  font-size:12px;
  margin-top:8px;
}

/* CTA */
.cta{
  margin-top:48px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:32px;
  /* background:linear-gradient(180deg, rgba(2,132,199,0.05), rgba(2,132,199,0.03)); */
  /* box-shadow:0 8px 24px rgba(15,23,42,.08); */
  text-align: center;
  color: hsl(222 47% 11%);
  background-image: linear-gradient(to bottom right, hsl(220 64% 14% / 0.05) 0%, hsl(215 25% 94% / 0.05) 100%);
}
.cta h2{
  margin:0 0 8px;
  /* font-size:clamp(20px, 3.4vw, 24px); */
  font-size: clamp(1.125rem, 1.034rem + 0.3883vw, 1.5rem);
}
.cta p{margin:0 auto 24px;color:#475569;max-width: 672px; width: 100%;}
.cta .cta-section-btn{
  appearance:none;
  border:none;
  background-color: #0d1c3b;
  color: #f8fafc;
  font-weight:500;
  /* font-size:18px; */
  font-size: clamp(1rem, 0.9697rem + 0.1294vw, 1.125rem);
  padding:12px 18px;
  border-radius:10px;
  text-decoration: none;
  cursor:pointer;
  display: inline-block;
  transition: all 350ms ease-in-out;

  &:hover {
    background-color: #0d1c3be6;
  }
}

/* Utility */
img{max-width:100%;}

@media only screen and (max-width: 1200px) {
    .blog-listing-sections .blog-listing-section-row {
        grid-template-columns: 1fr 230px;
        grid-gap: 30px;
    }
            .blog-listing-sections .blog-listing-section-row .blog-listing {
                grid-gap: 30px;
            }
}

@media only screen and (min-width: 993px) {
	#mainmenu > ul { display: flex !important; }
}


@media only screen and (max-width: 992px) {
    #footer .cols.cols3 {
    grid-template-columns: 1fr 1fr;
    grid-gap: 30px;
}

.blog-listing-sections .blog-listing-section-row {
    grid-template-columns: 1fr;
}
#mainmenu {order: 3; margin-left: 20px; margin-right: 0;}
.btn-section {margin-left: auto;}
#mainmenu > ul { display:none; position:absolute; left:0; width:100%; top:100%;  z-index:5; background: #76b5fb;}
	#mainmenu ul li { float:none; margin:0; padding:0; border-bottom:solid 1px #dde2e9 }
	#mainmenu ul li a { padding: 8px 20px; display: block;  color: #fff;}
    #mainmenu ul li a:hover {
        background: #97bfee;
        color: #040a25
    }

     #mainmenu ul li.active a{
        color: #040a25;
     }
	#mainmenu ul li a:after { display:none; }
	
	/* Responsive Menu line icon*/
	#menu { display: flex; align-items: center; width: 42px; height: 30px; position: relative; margin: 0; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; }
	.menulines-button span { display: block; position: absolute; height: 5px; width: 100%; background: #0d1c3b; border-radius: 15px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; }
	.menulines-button span:nth-child(1) { top: 0px; }
	.menulines-button span:nth-child(2), .menulines-button span:nth-child(3) { top: 13px; }
	.menulines-button span:nth-child(4) { top: 26px; }
	.menulines-button.open span:nth-child(1) { top: 13px; width: 0%; left: 50%; }
	.menulines-button.open span:nth-child(2) { transform: rotate(45deg); }
	.menulines-button.open span:nth-child(3) { transform: rotate(-45deg); }
	.menulines-button.open span:nth-child(4) { top: 13px; width: 0%; left: 50%; }
}

@media only screen and (max-width: 767px) {
    #footer .cols.cols3 {
    grid-template-columns: 1fr;
    grid-gap: 20px;
}

       .blog-listing-sections .blog-listing-section-row .blog-listing {
             grid-template-columns: 1fr;
        }

        .tags {
            flex-wrap: wrap;
        }
}