/*=========================================
RESPONSIVE.CSS
PART 1
=========================================*/

/*==============================
Large Devices
==============================*/

@media (max-width:1200px){

.container{

max-width:1140px;

}

.hero h1{

font-size:58px;

}

.hero h2{

font-size:32px;

}

.section-title{

font-size:42px;

}

.hero-image img{

width:400px;

}

.circle-animation{

width:470px;

height:470px;

}

.about-image img{

max-width:400px;

}

}


/*==============================
Laptop
==============================*/

@media (max-width:992px){

.navbar{

padding:15px 0;

}

.navbar-collapse{

background:#111827;

padding:20px;

border-radius:15px;

margin-top:15px;

}

.navbar-nav{

text-align:center;

}

.navbar-nav .nav-link{

padding:12px 0;

}

.hire-btn{

display:block;

margin:20px auto 0;

width:220px;

text-align:center;

}

.hero{

padding-top:150px;

text-align:center;

}

.hero h1{

font-size:50px;

}

.hero h2{

font-size:30px;

}

.hero p{

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

}

.social-icons{

justify-content:center;

margin-bottom:50px;

}

.hero-image{

margin-top:60px;

}

.hero-image img{

width:350px;

}

.circle-animation{

width:420px;

height:420px;

}

.about{

text-align:center;

}

.about-image{

margin-bottom:50px;

}

.experience-box{

right:0;

left:50%;

transform:translateX(-50%);

}

.counter-box{

margin-bottom:25px;

}

.process-card{

margin-bottom:25px;

}

.service-card{

margin-bottom:25px;

}

.project-card{

margin-bottom:25px;

}

.contact-info{

margin-bottom:40px;

}

footer{

text-align:center;

}

.footer-social{

justify-content:center;

}

}

/*=========================================
RESPONSIVE.CSS
PART 2
=========================================*/


/*==============================
Tablet Devices
==============================*/

@media (max-width:768px){

section{

padding:70px 0;

}

.hero{

padding-top:130px;

padding-bottom:80px;

}

.hero h1{

font-size:42px;
line-height:1.3;

}

.hero h2{

font-size:26px;

}

.hero p{

font-size:16px;

}

.hero-buttons{

display:flex;
flex-direction:column;
align-items:center;
gap:15px;

}

.hero-buttons .btn{

width:240px;

}

.social-icons{

gap:15px;

}

.social-icons a{

width:45px;
height:45px;
font-size:18px;

}

.hero-image img{

width:300px;

}

.circle-animation{

width:340px;
height:340px;

}

.section-title{

font-size:34px;

}

.section-subtitle{

font-size:15px;

}

.about-image img{

width:100%;

}

.experience-box{

position:relative;
left:auto;
right:auto;
bottom:auto;
transform:none;
margin-top:25px;

}

.counter-box{

padding:25px;

}

.counter-box h2{

font-size:34px;

}

.service-card{

padding:30px 20px;

}

.service-icon{

width:70px;
height:70px;
font-size:28px;

}

.project-card{

margin-bottom:30px;

}

.project-content{

padding:20px;

}

.process-card{

padding:30px 20px;

}

.testimonial-card{

padding:30px 20px;

}

.contact-form{

padding:30px 20px;

}

.contact-info{

text-align:center;

}

.footer-links{

margin-top:30px;

text-align:center;

}

.newsletter{

padding:30px 20px;

}

}


/*==============================
Mobile Devices
==============================*/

@media (max-width:576px){

body{

font-size:15px;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:34px;

}

.hero h2{

font-size:22px;

}

.hero p{

font-size:15px;

}

#typing{

font-size:24px;

}

.typed-cursor{

font-size:24px;

}

.hero-image img{

width:240px;

}

.circle-animation{

width:280px;
height:280px;

}

.section-title{

font-size:28px;

}

.btn{

width:100%;
padding:14px 20px;

}

.counter-box h2{

font-size:30px;

}

.counter-box p{

font-size:15px;

}

.service-card{

padding:25px 18px;

}

.project-content h4{

font-size:20px;

}

.project-content p{

font-size:14px;

}

.contact-form{

padding:25px 18px;

}

.contact-form .form-control{

padding:14px;

font-size:15px;

}

.footer{

padding:50px 0 25px;

}

.scroll-top{

right:15px;
bottom:15px;

}

.whatsapp-btn{

right:15px;
bottom:80px;

}

}


/*==============================
Small Mobile
==============================*/

@media (max-width:400px){

.hero h1{

font-size:28px;

}

.hero h2{

font-size:20px;

}

.hero-image img{

width:200px;

}

.circle-animation{

width:230px;
height:230px;

}

.section-title{

font-size:24px;

}

.service-card{

padding:20px 15px;

}

.project-content{

padding:18px;

}

.contact-form{

padding:20px 15px;

}

.footer{

font-size:14px;

}

}


/*==============================
Landscape Mobile
==============================*/

@media (max-height:500px) and (orientation:landscape){

.hero{

padding-top:100px;
padding-bottom:50px;

}

.hero-image{

margin-top:30px;

}

.hero-image img{

width:220px;

}

}