/* ==========================================================
   CodeCradle Solutions
   Global Responsive System
========================================================== */


/* ===============================
   LARGE DESKTOP
================================ */


@media(max-width:1200px){


.container{

    width:92%;

}



.hero h1{

    font-size:52px;

}



.section-title h2{

    font-size:38px;

}


}




/* ===============================
   TABLET
================================ */


@media(max-width:992px){


.section{

    padding:80px 0;

}



.hero-grid{

    gap:40px;

}



.cards{

    grid-template-columns:

    repeat(2,1fr);

}



.trust-grid{

    grid-template-columns:

    repeat(2,1fr);

}



.process-grid{

    grid-template-columns:

    repeat(3,1fr);

}



.tech-grid{

    grid-template-columns:

    repeat(3,1fr);

}


}




/* ===============================
   MOBILE
================================ */


@media(max-width:768px){



.section-title h2{

    font-size:32px;

}



.hero{

    padding:90px 0;

}



.hero h1{

    font-size:36px;

}



.hero-buttons{

    flex-direction:column;

}



.hero-buttons .btn{

    width:100%;

}



.cards{

    grid-template-columns:1fr;

}



.trust-grid{

    grid-template-columns:1fr;

}



.process-grid{

    grid-template-columns:

    repeat(2,1fr);

}



.tech-grid{

    grid-template-columns:

    repeat(2,1fr);

}


/* ===============================
   MOBILE NAVBAR
================================ */

.navbar .container{

    min-height:68px;

}

.navbar .logo{

    flex-shrink:0;

}

.navbar .logo img{

    width:68px !important;

    height:68px !important;

    object-fit:contain;

}


}




/* ===============================
   SMALL MOBILE
================================ */


@media(max-width:480px){



.container{

    width:94%;

}



.hero h1{

    font-size:30px;

}



.section-title h2{

    font-size:28px;

}



.process-grid{

    grid-template-columns:1fr;

}



.tech-grid{

    grid-template-columns:1fr;

}


/* ===============================
   SMALL MOBILE NAVBAR
================================ */

.navbar{

    padding:8px 0;

}

.navbar .container{

    min-height:76px;

}

.navbar .logo img{

    width:88px !important;

    height:88px !important;

    object-fit:contain;

}

.menu-toggle{

    width:42px;

    height:42px;

    font-size:20px;

}


}




/* ===============================
   EXTRA SMALL PHONES
================================ */


@media(max-width:360px){

    .navbar .container{

        min-height:68px;

    }

    .navbar .logo img{

        width:72px !important;

        height:72px !important;

    }

    .menu-toggle{

        width:40px;

        height:40px;

        font-size:20px;

    }

}