/*
Theme Name: GRSM
Theme URI: https://www.linkedin.com/company/tod-technologies-ind
Author: ToD Technologies
Author URI: https://www.todtechnologies.in
Description: A custom WordPress theme for GRSM.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grsm
Tags: custom, responsive
*/

/* Reset */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --primary-color: #004AAD;
  --secondary-color: #FFCF00;
  --third-color: #FF5500;
  --white-color: #fff;
  --black-color: #000;
  --white: var(--white-color);

  --font-family: "Montserrat", sans-serif;
  --font-size-p1: 16px; 
  --font-size-p2: 18px;   
  --font-size-p3: 20px;
  --base-lh: 24px;

  /* Headings fonts */
    
  --h1-font-size: 60px;
  --h1-line-height: 70px;
  --h2-font-size: 40px;
  --h2-line-height: 50px;
  --h3-font-size: 28px;
  --h3-line-height: 38px;
  --h4-font-size: 24px;
  --h4-line-height: 34px;
  --h5-font-size: 22px;
  --h5-line-height: 32px;
  --h6-font-size: 20px;
  --h6-line-height: 28px;

  --font-weight-semibold: 500;
}

body{
    font-family: var(--font-family);
    font-size: var(--font-size-p1);
    line-height: var(--base-lh);
    color: var(--black-color);
    background-color: var(--white-color);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
h1, .h1{
    font-size: var(--h1-font-size);
    line-height: var(--h1-line-height);
    font-weight: var(--font-weight-semibold);
}
h2, .h2{
    font-size: var(--h2-font-size);
    line-height: var(--h2-line-height);
}
h3, .h3{
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
}
h4, .h4, .h4-sb{
    font-size: var(--h4-font-size);
    line-height: var(--h4-line-height);
}
h5, .h5{
    font-size: var(--h5-font-size);
    line-height: var(--h5-line-height);
}
h6, .h6{
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
}
.heading-container{position: relative;}
.section-heading{
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  margin-bottom: 16px;
  font-weight: 600;
}
.section-sub-heading{font-weight: 500; color: var(--primary-color); text-transform: uppercase; font-size: var(--h6-font-size); line-height: var(--h6-line-height);}
.btn-primary, .btn-light, .theme-btn, .btn-dark, .btn{
  border: none;
  border-radius: 6px;
  padding: 13px 20px;
}
.btn-warning{background-color: var(--secondary-color); }
.btn-primary{
  background-color: var(--primary-color);
  color: var(--white);
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.main-content ul{
  list-style: disc;
  padding-left: 20px;
}
button {
  border: none;
  background-color: transparent;
  padding: 0;
}
input:focus { outline: none; }
.main-nav{width: 100%;}
.main-nav #primary-menu{flex: 1; gap: 18px; justify-content: center;}
#primary-menu li {line-height: 50px; position: relative;}
#primary-menu .menu-item:after {
    content: '';
    width: 0;
    height: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #F8AE3E;
    transition: width 0.3s ease;
}
#primary-menu .current_page_item:after,
#primary-menu .menu-item:hover:after {
    width: 100%;
}
#primary-menu li a{color: #262626; text-decoration: none; margin:0 10px; font-weight: 500;}
.main-nav .btn-primary {
    background-color: var(--secondary-color);
    color: #000;
}
.nav-prev:after, .nav-next:after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--black-color);
    border-bottom: 2px solid var(--black-color);
    transform: rotate(-45deg);
    margin: 0;
    position: absolute;
    right: 12px;
    top: 42%;
}
.nav-prev:after, .nav-next:after {
    border-bottom: 2px solid var(--black-color);
    transform: translate(-50%, -50%) rotate(-45deg);
    left: 50%;
    top: 50%;
}
button.nav-next, button.nav-prev { position: relative; width: 45px; height: 45px; border-radius: 10px; background-color: #F8AE3E;}
button.nav-prev:after { transform: translate(-50%, -50%) rotate(135deg); right: auto; left: 50%; top: 50%; }
.nav-prev:disabled, .nav-next:disabled { background-color: var(--white-color); }
/*
*   Flex grid system  
*/
.flex-grid-4, .flex-grid-3, .flex-grid-2 { display: flex; flex-wrap: wrap; gap: 20px; }
.flex-grid-4 .flex-col { flex: 1 1 calc(25% - 20px); }
.flex-grid-4.gap-0 .flex-col { flex: 1 1 25%; }
.flex-grid-4 .flex-col, .flex-grid-3 .flex-col, .flex-grid-2 .flex-col{ padding: 20px; box-sizing: border-box; }
.flex-grid-3 .flex-col { flex: 1 1 calc(33.333% - 20px); }
.flex-grid-3.gap-0 .flex-col { flex: 1 1 33.333%; }
.flex-grid-2 .flex-col { flex: 1 1 calc(50% - 20px); }

.section-padding { padding: 50px 0; }
.swiper-outer-wrapper .swiper-pagination-bullet{width: 20px; height: 20px;}
.swiper-outer-wrapper .swiper-pagination-bullet-active { border: 4px solid var(--secondary-color); background-color: #fff;  }

footer{background-color: #0F172A;}
footer .footer-widgets .footer-title{text-transform: uppercase; color: var(--white-color);}
footer li a, footer a, footer p{color: #D1D5DC;}
footer ul.menu li{margin-bottom: 10px;}
footer ul.menu li a{text-decoration: none;}
.site-info :is(p, ul) { margin-bottom: 0; }
footer .footer-saperator{ border: 1px solid #FFFFFF1F; opacity: 1;}
.contacts-info .head{font-size: 16px; font-weight: 500}
.contacts-info p{font-size: 14px; line-height: 20px; font-weight: 500}
.breadcrumb li a, .breadcrumb li.active {
    color: #626262;
    text-decoration: none;
    font-size: 14px;
}
.testimonial-section{background-image: url('./assets/images/testimonial-bg.webp');}
.connect-section{background-image: url('./assets/images/cta-bg.webp');}
.copywrite p, .copywrite a{font-size: 14px;}
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-8px);
    }

    50% {
        transform: translateY(0);
    }

    70% {
        transform: translateY(-4px);
    }
}
@media (max-width: 1199px) {
  .section-padding { padding: 40px 0; }
}

@media (max-width: 991px) {
    .section-padding { padding: 30px 0; }
    .flex-grid-3 .flex-col, .flex-grid-4 .flex-col, .flex-grid-2 .flex-col { flex: 1 1 calc(50% - 20px); }
}
@media(max-width: 768px){
    .flex-grid-2 .flex-col{
        flex: 1 1 100%;
    }
}
@media (max-width: 576px) {
  .flex-grid-3 .flex-col, .flex-grid-4 .flex-col {
    flex: 1 1 100%;
  }
}
@media(max-width: 991px){
    header form{margin-bottom: 20px;}
    header #pkgHeaderSearch{margin-left: 0;}
    h1, .h1{
        font-size: calc(var(--h1-font-size) - 20px);
        line-height: calc(var(--h1-line-height) - 20px);
    }
    h2, .h2, .section-heading{
        font-size: calc(var(--h2-font-size) - 10px);
        line-height: calc(var(--h2-line-height) - 10px);
    }
}

@media (max-width: 767px) {
    header .custom-logo{width:110px;}
    h1, .h1{
        font-size: calc(var(--h1-font-size) - 30px);
        line-height: calc(var(--h1-line-height) - 30px);
    }
    h2, .h2{
        font-size: calc(var(--h2-font-size) - 15px);
        line-height: calc(var(--h2-line-height) - 15px);
    }
    h3, .h3{
        font-size: calc(var(--h3-font-size) - 10px);
        line-height: calc(var(--h3-line-height) - 10px);
    }
    .search-bar .contact-search-form-box input { font-size: 22px; }
    .section-heading{font-size: var(--h4-font-size); line-height: var(--h4-line-height); }
    h1 br, h2 br, h3 br, h4 br, p br{display: none;} 
}